ספריית רכיבי UI Hamble Hub

1) מטרות ועקרונות

למה: להאיץ את העברת התכונות, לספק UX עקבי, ולפשט את התמיכה.

• סמנטיקה וניטרליות. הרכיב פותר את בעיית ה-UI מבלי לתפור את ההיגיון העסקי.
• A11y-by-default. תפקידים, טבעות מיקוד, תכונות אריה וניגודיות נתפרים לרכיבים.
• i18n-ראשון. אורכי שורה, פורמטים מספריים, 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. כפתור, אייקון, טיפוגרפיה, קישור, תג, מחלק, אווטאר.
2. PasswordInput, Numbers Put, Select, Combobox, Leckbox, Checkbox, Radio, Switch, Textarea, FileUpload.
3. ניווט: AppBar, Tabs, Breadcrumbs, Pagination, Dareer/Sidebar, Stepper.
4. אזהרה, שגיאה פנימית, ערכת כלים, טוסט, סנקבאר, מודל, פופובר, שלד, קידמה, דוט.
5. נתונים ושולחנות: טבלה, רשימת נתונים, קלף, אקורדיון, טאג, מדינה.

• GameTile (כרטיס משחק)
• תג
• Jackpoticker
• תג Lor (שולחן/מופע חי)
• מסנני (ספק/ז 'אנר/הגבלה)
• כרטיס כרזה/
• תג התקדמות/
• לוח מנהיגות
• WalletCard/GoodWidget
• כרטיס
• טופס ההפקדה/צורת ההקלטה
• תג KYCtatustage/KYCChecklist
• כרזה/בקרת
• התאמת שער/שעון עצר/התראה חלופית
• מצב פתיחה/כרזה

4) עמוד רכיב: תוכן נדרש

מטרה ומתי להשתמש/לא להשתמש.
קומפוזיציה וגרסאות. ממדים, מדינות, שינויים.
API. אביזרים, אירועים, חריצים, מצבים מבוקרים/לא מבוקרים.
A11y. תפקידים, מיקוד, קשרי אריה, אזורים חיים.
i18n. אורכים, פורמטים, חתימות מקומיות.
מיקרוקופיה. טקסטים מומלצים (CTA, רמזים, טעויות).
דוגמאות קוד. מקרים טיפוסיים, מקרי קצה (טעויות, טעינה, ריק).
בדיקות. matrix/unit/interaction/A11y חזותי.
דוגמאות אנטי. שגיאות שימוש תכופות.

5) מרכיבי מפתח: מפרט מהיר

5. כפתור 1

• מצבים: נורמלי, מרחף, מרוכז-נראה, פעיל, טעינה, מנוטרל
• A11y: נראה מרוכז, ”אריה עסוקה” עבור ”טעינה”, ”אריה לחוץ” עבור toggle
• מיקרוקופיה: פעולה + אובייקט (שמור שינויים, וידוא)
• אנטי-דוגמא: ”בסדר”

5. 2 קלט/שדה

מרכיבים: תווית, שדה, מסייע, שגיאה, קידומת/סיומת

A11y: "אריה-לא תקפה", "אריה-מתארת", "aria-matardby", brought "עבור/&fost

תבנית שגיאה: מה לא נכון + איך לתקן (”הזן את המספר בפורמט + 380”..)

חריצים: ”prefix” (סמל), ”suffix” (כפתור ”הצג סיסמה”)

5. 3 בחר/Combobox

מאפיינים: חיפוש רשימה, מקלדת, וירטואליזציה רשימה ארוכה

A11y: ”תפקיד =” combobox ”,” אריה מורחבת ”,” aria-activedescendant &pos

תוצאות ריקות: "שום דבר לא נמצא. שנה את הבקשה"

5. 4 מודלים/מגירה

כללים: מיקוד מלכודת, ESC/חפיפה קרוב, מיקוד חזרה לאתחול

שימוש: אישורי תשלום, חוקי החזרה, מדרגות KYC

5. 5 טוסט/סנאקבר

זמן: 2-4 אס, אין חסימת זרימה

אזורים חיים: 'אריה-לחיות = "מנומס" "להצלחה", "אסרטיבי" "לטעויות

דוגמאות: "התשלום התקבל. האיזון עודכן" ‏

5. 6 מצב

תבנית: הקשר + ערך + CTA + CTA משני

דוגמה: "משחקים נבחרים יופיעו כאן כאשר תוסיף את הראשון. הוסף למועדפים

6) רכיבי iGaming: פרטים ו ־ API

6. 1 GameTile

מטרה: כרטיס משחק בלובי/קטלוג.
קומפוזיציה: כיסוי, ספק, תגיות (New/Hot/Gackpot/Live), RTP (סיטונאי), פעולה מהירה.

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

מדינות: ריחוף (התחלה מהירה), שלד, לא זמין (אזור/זמן).
A11y: אלט-טקסט, התחלת מקלדת, 'אריה-תווית = "Roulette Lightning" ".

6. 2 מסנני

מטרה: מסנני לובי (ז 'אנר, ספק, גבולות, תנודתיות).
מאפיינים: שמורים מראש, איפוס מסננים, תוצאה נגדית.
מיקרוקופיה: ”מסננים”, ”מסננים מחדש”, ”נמצאו: 128”.

6. 3 כרזה/כרטיס

אפשרויות: ברוכים הבאים, טעינה מחדש, כסף, חינם, טורניר.
שדות: כותרת, תנאים, תקופת תוקף, CTA (”בונוס הפעלה”).
A11y: אזכורים לתנאים ניתנים לקריאה, 'aria-tharby' פירוט של תנאים.
אנטי-דפוס: הסתר אילוצי מפתח.

6. 4 Jackpoticker

מטרה: זכייה אוטומטית בכל קופה.
מקור נתונים, תקופת עדכון, תבנית מטבע.
A11y: "תפקיד =" סטטוס ", אל תפרו את יכולת הקריאה של קורא המסך.

6. לוח 5

הרכב: שולחן מיקום, נקודות, פרסים, טיימר, מיקום עצמי.
תכונה: התאמה/וירטואליזציה, תיקון השורה שלך.
A11y: ”הכוונת”, עמודות קריאות, ניווט חץ.

6. 6 WalletCard/GoodWidget

שדות: איזון, קרנות חסומות, יתרת בונוס, מטבע.
פעולות: ”למעלה”, ”תצוגה”, ”היסטוריה”.
אבטחה: כמות הסוואה/הצגה, מסווה באזורים משותפים.

6. 7 כרטיס

שדות: לוגו ספקי, גבולות, עמלות, זמן הגעה משוער, זמינות אזורית.
מדינות: לא זמינות (אזור/מעמד), בתהליך, מגבילות את האזהרה.

מיקרוקופיה: "1. עמלה של 5% נמנעת על ידי הספק, ”תשלום - עד 15 דקות”

6. 8 טופס הפקדה/טופס רישום

תבניות: אימות פנים, הגבלת כמות, חוק אותה שיטה מעלה.
A11y: הכרזת טעויות (”אסרטיביות”), הפיכת המוקד לטעות הראשונה.
שדות שירות: ”מקור כספים”, ”מטרה”, אם נדרש AML.

6. 9 תג KYCSTATUSTAGE/KYCChecklist

”אף אחד הבסיסיים מורחב נדחה”.
טקסטים: ”זה ייקח ~ 2 דקות”, ”תמונה ללא בוהק, פינות וטקסט גלויים לעין”.
CTA: "לקבל אימת", משני: "למה זה חשוב? ».

6. 10 בקרת /כרזה

מטרה: מגבלות של הפקדות/תעריפים/זמן, הפסקות, הדרה עצמית.
А11у/Tone: נייטרלי, ללא לחץ, עם התייחסות לעזרה.

7) דפוסי פריסה (מתכונים)

רישום/ACC: Stepper + Form + InlejEvery + PageAll + Exportuast.
Card + LoyCound + LoughToast + LoughToast.
Bar + Filters + GameGrid (GameTile) + Pagination + GameState.
Google Leaderboard + Detection Progress + Banner.
אחראי: Banner + Control + FAQ-Link.

8) נגישות (A11y)

מיקוד גלוי תמיד (כולל נושא אפל).
ניווט מקלדת בכל האלמנטים האינטראקטיביים.
'Aria-live = "מנומס/אסרטיבי" "עבור טוסט/סטטוס.
הניגודים לא נמוכים מ-WCAG 2. 1 אלכוהוליסטים אנונימיים.
הטקסט באייקונים אינו נושא המשמעות היחיד.
מצבי 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) ביצועים ואיכות

רשימת וירטואליזציה (משחקים, שולחנות).
טעינה עצלה של איורים, שחבור קוד על ידי דפים.
תקציב חבילת UI, אין תלות כבדה.
שלד לתפיסת מהירות, ספינים - מינימלי.
בדיקות: יחידה, תמונות חזותיות, אינטראקציה, A11y, E2E לזרימה קריטית.

11) ורסינינג ומשחרר

SemVer: תיקון - באגים; מינורי - לא הרסני; רס "ן עם נדודים.
הערות שחרור: אסימונים/API/התנהגות, לפני/אחרי צילומי מסך.
סימוני מזח, מודי קוד וכללי לינטר.
Storybook/Playground: דוגמאות חיות, לוח נגישות, RTL toggle.

12) תורם

RFC על רכיב חדש: professions _ professions = = ההחלטה שנבחרה = = A11y i18n = API = = סיכונים.
רשימת בדיקות יחסי ציבור: רציפים, סיפורים, מבחנים, תמונות ויזואליות, ניגודים, i18n, כהה/RTL.
הגדרה של נעשה: רכיב + תיעוד + בדיקות + דוגמאות תבנית.

13) סט MVP ומפת דרכים

• כפתור, קלט, בחר, צ 'ק-בוקס, רדיו, החלפה, מודל, טוסט, טוסט, קידמה, שלד, קלף, מדינה, טבליות, פגינציה, פירורי לחם, שולחן, Game Tile, Filters, Banner, WalletCard, כרטיס , הפקדה, תג KYCSTATUSGE.

Diamond Leaderboard, JackpotTicker, JackProgress, Control, DiseStates, Darebar/Sidebar, MothelPicker, Combobox, FileUpload.

14) דוגמאות מיקרוקופיה (הכנסותיה מוגמרות)

CTA: ”שמור שינויים”, ”קבל אימת”, ”הוסף שיטת תשלום”.

שגיאות: "תבנית תאריך לא תקפה. השתמש ב DD. "הקובץ גדול מדי (מקסימום 10 מ "מ)"

הצלחה: "התשלום התקבל. איזון מעודכן. בוצע מסמכים מאומתים"

ריקה אומר: "על ידי "שארי" שום דבר לא נמצא. לאפס את המסננים או לזקק את השאילתה"

15) אנטי דפוסים

לוגיקה עסקית בתוך רכיבי UI (שובר שימוש יתר).
מיקוד בלתי נראה או תלות במשמעות רק על צבע.
מחרוזות מוטמעות בקוד רכיב (ללא i18n).
הפרת הסמנטיקה (כפתור על ”div”, רשימות ללא ”ul/ol/li”).
וריאציות ללא כללים ברורים (כפל 'LockName BuildBig2').

16) רשימות בדיקה

• תכלית, וריאנטים, API מתוארים.

[ ] A11y: תפקיד, מיקוד, תכונות אריה, ניגוד.

[ ] i18n: כל השורות ניתנות, שפות ארוכות ו-RTL נבדקות.

סיפור/דמו: נורמלי, הורדה, שגיאה, בלנק.

[ ] בדיקות: יחידה + ויזואלית + אינטראקציה + A11y.

[ ] אין היגיון עסקי, רק התנהגות כפולה.

[ ] קיימת מזימה של רכיבים וסדר מיקוד.

[ ] מוגדרים טקסטים של מיקרוקופיה וטעייה/הצלחה.

[ ] מדדי מפתח נמדדו (המרת צעדים, שיעור שגיאות, זמן להשלמה).

17) שלד מסמך לרכיב (תבנית)

שם ומטרה

מתי להשתמש/לא להשתמש

אפשרויות ומצבים

API (אביזרים, אירועים, חריצים)

נגישות (תפקיד, מקלדת, אריה, ניגוד)

i18n (מפתחות, פורמטים, אורכים, RTL)

מיקרוקופיה (דוגמאות)

דוגמאות קוד (טיפוסי וקצה)

מטריצת ניסוי

דוגמאות נוגדות

סך הכל

Gamble Hub UI הוא לא רק סט של בלוקים, אלא גם דיסציפלינה: אסימונים * רכיבים. בעקבות מדריך זה, צוותים מעבירים תכונות מהר יותר, משתמשים מקבלים ממשק צפוי וזול, אם יש צורך, אני יאסוף את העמודים הראשונים של הרציף על ידי MVP-set עם דוגמאות ומפתחות i18n.