गैंबल हब यूआई घटक लाइब्रेरी

1) लक्ष्य और सिद्धांत

क्यों: स्पीड अप फीचर डिलीवरी, सुसंगत यूएक्स प्रदान करें, और समर्थन को सरल करें।

• शब्दार्थ और तटस्थता। घटक व्यवसाय तर्क में सिलाई के बिना यूआई समस्या को हल करता है।
• A11y-by-default। भूमिकाएं, फ़ोकस रिंग्स, आरिया विशेषताएं और कंट्रास्ट घटकों में सिल दिए जाते हैं।
• i18n-पहला। लाइन लंबाई, संख्यात्मक प्रारूप, आरटीएल - बॉक्स से बाहर ध्यान में रखें।
• Temization। टोकन के माध्यम से हल्के/अंधेरे विषयों और ब्रांडेड लहजे।
• स्केलेबिलिटी। वर्दी एपीआई, मामूली रिलीज की स्थिरता, प्रमुख के तहत पलायन।

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. Формы: इनपुट, पासवर्ड इनपुट, नंबरइनपुट, सेलेक्ट, कॉम्बोबॉक्स, डेटपिकर, चेकबॉक्स, रेडियो, स्विच, स्लाइडर, टेक्सटारिया, फाइलअपलोड।

3. नेविगेशन: AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper।

4. : अलर्ट, इनलाइनएरर, टूलटिप, टोस्ट, स्नैकबार, मोडल, पॉपओवर, कंकाल, प्रगति, डॉट।

5. डेटा और टेबल: तालिका, डेटालिस्ट, कार्ड, समझौते, टैग, स्टेट।

• गेमटाइल (गेम कार्ड)
• ProviderBadge
• जैकपोटटिकर
• LiveBadge (लाइव टेबल/शो)
• लॉबीफ़िल्टर (प्रदाता/शैली/सीमा)
• BonusBanner/BonusCard
• मिशन प्रगति/उपलब्धि बैज
• प्रतियोगिता लीडरबोर्ड
• वॉलेटकार्ड/ Widget
• कार्ड
• डिपॉजिटफॉर्म/ Form
• KYCStatusBadge/KYCchecklist
• गेमिंगबैनर/ कंट्रोल
• AgeGate/SurtiTimer/RischAlert
• SystemState/मेंटेनेंसबैनर

4) घटक पृष्ठ: आवश्यक सामग्री

उद्देश्य और कब उपयोग करना है/नहीं करना है।

रचना और प्रकार। आयाम, राज्य, संशोधक।

एपीआई। प्रॉप्स, इवेंट, स्लॉट, नियंत्रित/अनियंत्रित मोड।

A11y। भूमिकाएँ, ध्यान, आरिया कनेक्शन, जीवित क्षेत्र।

i18n। लंबाई, प्रारूप, स्थानीयकरण योग्य हस्ताक्षर।

माइक्रोकॉपी। अनुशंसित ग्रंथ (CTA, संकेत, त्रुटियाँ)।

कोड उदाहरण। विशिष्ट मामले, किनारे के मामले (त्रुटियां, लोडिंग, खाली)।

परीक्षण। दृश्य matrix/unit/interaction/A11y।

विरोधी उदाहरण। बार-बार उपयोग की त्रुटियां।

5) प्रमुख घटक: त्वरित चश्मा

5. 1 बटन

वेरिएंट: 'प्राथमिक माध्यमिक भूत विनाशकारी' आयाम: 'sm md' lg '

राज्य: सामान्य, होवर, फोकस-दृश्यमान, सक्रिय, लोडिंग, अक्षम

A11y: दृश्यमान फोकस-रिंग, 'लोडिंग' के लिए 'आरिया-व्यस्त', टॉगल के लिए 'आरिया-प्रेस'

माइक्रोकॉपी: क्रिया + वस्तु (परिवर्तन सहेजें, सत्यापित करें)

विरोधी उदाहरण: "ठीक है"

5. 2 इनपुट/फील्ड

सामग्री: लेबल, क्षेत्र, सहायक, त्रुटि, उपसर्ग/प्रत्यय

A11y: 'आरिया-अमान्य', 'आरिया-वर्णनात्मक', связка 'फॉर/आईडी'

त्रुटि पैटर्न: क्या गलत है + कैसे ठीक करें ("प्रारूप में संख्या दर्ज करें + 380"..)

स्लॉट: 'उपसर्ग' (आइकन), 'प्रत्यय' (बटन "पासवर्ड दिखाएँ")

5. 3 चुनें/कॉम्बोबॉक्स

सुविधाएँ: सूची खोज, कुंजीपट, लंबी सूची वर्चुअलाइजेशन

A11y: 'भूमिका = "कॉम्बोबॉक्स"', 'आरिया-विस्तारित', 'आरिया-सक्रिय'

खाली परिणाम: "कुछ भी नहीं मिला। निवेदन बदलें"

5. 4 मोडल/दराज

नियम: ट्रैप फोकस, ईएससी/ओवरले क्लोज, सर्जक पर वापसी फोकस

उपयोग: भुगतान की पुष्टि, रिबेट नियम, केवाईसी कदम

5. 5 टोस्ट/स्नैकबार

समय: 2-4 एस, कोई प्रवाह अवरुद्ध नहीं

लाइव क्षेत्र: सफलता के लिए 'आरिया-लाइव = "विनम्र", गलतियों के लिए' "मुखर" "

उदाहरण: "भुगतान स्वीकार किया। संतुलन अद्यतन किया गया है"

5. 6 State

साँचा: संदर्भ + मान + CTA + द्वितीयक CTA

उदाहरण: "चयनित खेल यहाँ दिखाई देंगे जब आप पहला जोड़ेंगे। [पसंदीदा में जोड़ें]"

6) आईगेमिंग घटक: विशेष और एपीआई

6. 1 गेमटाइल

उद्देश्य: लॉबी/कैटलॉग में गेम कार्ड।

रचना: कवर, प्रदाता, टैग (न्यू/हॉट/जैकपॉट/लाइव), आरटीपी (थोक), त्वरित कार्रवाई।

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

राज्य: होवर (तेज शुरुआत), कंकाल, अनुपलब्ध (क्षेत्र/समय)।

A11y: ऑल-टेक्स्ट, कीबोर्ड स्टार्ट, 'आरिया-लेबल = "प्ले लाइटनिंग रूले"।

6. 2 लॉबीफ़िल्टर

उद्देश्य: लॉबी फिल्टर (शैली, प्रदाता, सीमा, अस्थिरता)।

सुविधाएँ: सहेजे गए प्रीसेट, फिल्टर रीसेटिंग, परिणाम काउंटर।

माइक्रोकॉपी: "फिल्टर", "रीसेट फिल्टर", "पाया: 128"।

6. 3 बोनसबैनर/बोनसकार्ड

विकल्प: स्वागत, पुनः लोड, कैशबैक, फ्रीस्पिन, टूर्नामेंट।

फ़ील्ड: हेडर, शर्तें, वैधता अवधि, सीटीए ("सक्रिय बोनस")।

A11y: शर्तों के संदर्भ पढ़ ने योग्य हैं, 'आरिया-वर्णन' → शर्तों का विवरण।

एंटी-पैटर्न: कुंजी बाधाओं को छुपाएँ.

6. 4 जैकपोटटिकर

उद्देश्य: ऑटो-रिफ्रेश जैकपॉट रनिंग राशि।

एपीआई: डेटा स्रोत, अद्यतन अवधि, मुद्रा प्रारूप।

A11y: 'भूमिका = "स्थिति", स्क्रीन रीडर की पढ़ाई का उल्लंघन न करें।

6. 5 लोकसभा लीडरबोर्ड

रचना: स्थिति तालिका, अंक, पुरस्कार, टाइमर, अपनी स्थिति।

फीचर: पृष्ठभूमि/वर्चुअलाइजेशन, अपनी लाइन को ठीक करना।

A11y: 'th '/' स्कोप', पढ़ ने योग्य स्तंभ, तीर नेविगेशन।

6. 6 वॉलेटकार्ड/लिविजेट

क्षेत्र: शेष, अवरुद्ध धन, बोनस शेष, मुद्रा।

क्रियाएं: "टॉप अप", "डिस्प्ले", "इतिहास"।

सुरक्षा: सामान्य क्षेत्रों में मास्किंग, छुपाएं/दिखाएँ।

6. 7 कार्ड

क्षेत्र: प्रदाता लोगो, सीमा, कमीशन, ईटीए, क्षेत्रीय उपलब्धता।

राज्य: उपलब्ध नहीं (क्षेत्र/स्थिति), प्रक्रिया में, चेतावनी को सीमित कर

माइक्रोकॉपी: "1। 5% कमीशन प्रदाता द्वारा रोक दिया जाता है," "भुगतान - 15 मिनट तक।"

6. 8 डिपॉजिटफॉर्म/ Form

पैटर्न: इनलाइन सत्यापन, राशि सीमा, समान-विधि नियम संकेत देता है।

A11y: त्रुटियों की घोषणा ('मुखर'), पहली त्रुटि पर ध्यान केंद्रित करना।

सेवा क्षेत्र: "धन का स्रोत", "उद्देश्य", यदि एएमएल की आवश्यकता है।

6. 9 KYCStatusBadge/KYCchecklist

राज्य: 'कोई भी | बुनियादी | विस्तारित | अस्वीकार नहीं किया | लंबित'।

ग्रंथ: "इसमें ~ 2 मिनट लगेंगे", "चकाचौंध के बिना फोटो, कोने और पाठ दिखाई देते हैं।"

CTA: "सत्यापित हो जाओ", माध्यमिक: "यह महत्वपूर्ण क्यों है? ».

6. 10 कंट्रोल/ Gaming Banner

उद्देश्य: जमा/दरों/समय, ब्रेक, स्व-बहिष्करण की सीमा।

А11у/Tone: मदद के संदर्भ में तटस्थ, कोई दबाव नहीं।

7) लेआउट पैटर्न (व्यंजनों)

पंजीकरण/एसीसी: स्टेपर + फॉर्म + इनलाइन एरर्स + पेजएलर्ट + सक्सेसटोस्ट।

: कार्ड + इनपुट + संकेत + पुष्टिकरण Modal + Toast।

: SearchBar + LobbyFilters + GameGrid ( GameTile) + Pagination + State।

Турнир: BonuseLederboard + Mission Prography + BonusBanner।

जिम्मेदार: InterGamesMangBanner + Control + FAQ-link।

8) पहुँच (A11y)

दृश्यमान फोकस हमेशा (एक अंधेरे विषय सहित)।

सभी इंटरैक्टिव तत्वों के माध्यम से कुंजीपट नेविगेशन।

टोस्ट/स्टेटस के लिए 'एरिया-लाइव = "विनम्र/मुखर"।

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) प्रदर्शन और गुणवत्ता

वर्चुअलाइजेशन (गेम, टेबल) की सूची दें।

चित्र का आलसी लोडिंग, पृष्ठों द्वारा कोड-splicing।

बंडल आकार: यूआई पैकेज बजट, कोई भारी निर्भरता नहीं।

गति धारणा के लिए कंकाल, स्पिनर - न्यूनतम।

परीक्षण: इकाई, दृश्य स्नैपशॉट, बातचीत, , महत्वपूर्ण प्रवाह के लिए।

11) वर्शनिंग और रिलीज़

SemVer: पैच - बग्स; मामूली - गैर-विनाशकारी; प्रमुख - प्रवास के साथ।

रिलीज नोट्स: टोकन/एपीआई/व्यवहार, स्क्रीनशॉट से पहले/बाद में।

मूल्यह्रास: डॉक मार्किंग, कोड मॉड्स और लिंटर नियम।

स्टोरीबुक/प्लेग्राउंड: लाइव उदाहरण, एक्सेसिबिलिटी पैनल, RTL टॉगल।

12) योगदान करना

एक नए घटक पर RFC: एक समस्या विकल्प - चुना हुआ निर्णय i18n API जोखिम।

पीआर चेकलिस्ट: डॉक, कहानियां, परीक्षण, दृश्य स्नैपशॉट, विरोधाभास, i18n, डार्क/आरटीएल।

डोन की परिभाषा: घटक + प्रलेखन + परीक्षण + पैटर्न उदाहरण।

13) एमवीपी सेट और रोड मैप

• बटन, इनपुट, इनपुट, सेलेक्ट, चेकबॉक्स, रेडियो, स्विच, मोडल, टोस्ट, टूलटिप, प्रगति, कंकाल, कार्ड, State, टैब, पैगिनेशन, ब्रेडक्रंब, टेबल, गेमटाइल, लॉबबिल्टर, बोनस वॉलेटकार्ड, कार्ड, डिपॉजिटफॉर्म, KYCStatusBadge।

: क्रिसमस लीडरबोर्ड, जैकपोटटिकर, मिशनप्रोग्रेस, Control, SyStates, Drawer/Sidebar, DatePicker, Combobox, File Upload।

14) माइक्रोकॉपी उदाहरण (समाप्त आवेषण)

CTA: "परिवर्तन सहेजें", "सत्यापित करें", "भुगतान विधि जोड़ें।"

त्रुटि: "अवैध तिथि प्रारूप। डीडी का उपयोग करें। MM। YYYY। ", "फ़ाइल बहुत बड़ी है (अधिकतम 10 MB)"

सफलता: "भुगतान स्वीकार किया। संतुलन अद्यतन। ", हो गया! दस्तावेज़ सत्यापित"

रिक्त स्थिति: "{query}" से कुछ भी नहीं मिला. फ़िल्टर रीसेट करें या क्वेरी को परिष्कृत करें"

15) एंटी-पैटर्न

UI घटकों के भीतर व्यावसायिक तर्क (अति उपयोग को तोड़ ता है)।

केवल रंग पर अर्थ का अदृश्य फोकस या निर्भरता।

घटक कोड में एम्बेडेड स्ट्रिंग्स (i18n के बिना)।

शब्दार्थ का उल्लंघन ('div' पर बटन, 'ul/ol/li' के बिना सूची)।

स्पष्ट नियमों के बिना वेरिएंट (गुणा 'Button BlueBig2')।

16) चेकलिस्ट

• उद्देश्य, वेरिएंट, एपीआई का वर्णन किया गया है।
• : भूमिका, फोकस, आरिया विशेषताएं, विपरीत।
• i18n: सभी लाइनों का प्रतिपादन किया जाता है, लंबी भाषाओं और आरटीएल की जाँच की जाती है।
• कहानी/डेमो: सामान्य, डाउनलोड, त्रुटि, खाली।
• टेस्ट: यूनिट + विज़ुअल + इंटरैक्शन + A11y।
• कोई व्यावसायिक तर्क नहीं, केवल UI/व्यवहार।

• घटकों की एक योजना और एक फोकस क्रम है।
• माइक्रोकॉपी और त्रुटि/सफलता ग्रंथों को परिभाषित किया गया है।
• कुंजी मैट्रिक्स मापा गया (चरण रूपांतरण, त्रुटि दर, समय-से-पूर्ण)।

17) घटक के लिए दस्तावेज़ कंकाल (टेम्पलेट)

नाम और उद्देश्य

कब उपयोग करना है/नहीं करना है

विकल्प और राज्य

एपीआई (प्रॉप्स, इवेंट्स, स्लॉट्स)

पहुँच (भूमिका, कुंजीपट, आरिया, कंट्रास्ट)

i18n (कुंजी, प्रारूप, लंबाई, RTL)

माइक्रोकोपी (उदाहरण)

कोड नमूने (विशिष्ट और किनारे)

परीक्षण मैट्रिक्स

विरोधी उदाहरण

कुल

गैंबल हब यूआई केवल ब्लॉकों का एक सेट नहीं है, बल्कि एक अनुशासन है: टोकन → घटक → पैटर्न → प्रलेखन → मेट्रिक्स। इस गाइड के बाद, टीमें तेजी से सुविधाएं प्रदान करती हैं, उपयोगकर्ताओं को एक पूर्वानुमानित और किफायती इंटरफ़ेस मिलता है, और दृश्य ऋण के बिना उत्पाद यदि आवश्यक हो, तो मैं एमवीपी-सेट द्वारा डॉक के पहले पृष्ठों को उदाहरणों और i18n कुंजियों के साथ एकत्र करूंगा।