Βιβλιοθήκη συστατικών στοιχείων Gamble Hub UI

1) Στόχοι και αρχές

Γιατί: Επιτάχυνση της παράδοσης χαρακτηριστικών, παροχή συνεπούς UX και απλούστευση της υποστήριξης.

• Σημασιολογία και ουδετερότητα. Η συνιστώσα λύνει το πρόβλημα του UI χωρίς ράψιμο στην επιχειρηματική λογική.
• . Οι ρόλοι, οι δακτύλιοι εστίασης, τα χαρακτηριστικά της άριας και η αντίθεση είναι ραμμένα στα συστατικά.
• i18n-πρώτα. Μήκη γραμμής, αριθμητικές μορφές, 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 }
}

Κανόνες: σημασιολογικές μάρκες (π.χ. "color. προφορά. η επιτυχία ") χρησιμοποιούνται από τα κατασκευαστικά στοιχεία· παλέτα - εσωτερική.

3) Κατηγορίες συστατικών στοιχείων

1. (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.
2. : Είσοδος, PasswordInput, NumberInput, Select, Combobox, DedyPicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.
3. Πλοήγηση: AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.
4. : Alert, Inline Error, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatesDot.
5. Δεδομένα και πίνακες: Πίνακας, DataList, κάρτα, ακορντεόν, ετικέτα, ReadyState.

• GameTile (κάρτα παιχνιδιού)
• Σήμα παρόχου
• JackpotTicker
• Look Badge (ζωντανό τραπέζι/εμφάνιση)
• Φίλτρα λόμπι (πάροχος/είδος/όριο)
• BonusBanner/Κάρτα BonusCard
• Πρόοδος/Επιτεύγματα Σήμα
• Leaderboard
• WalletCard/RegionWidget
• Μεθοδική κάρτα CharacterMethodc
• DepositForm/Έντυπο
• KYCstatusBadge/KYCChecklist
• ΚουδούνιGameBanner/SevelopControl
• ΩωκεάνιαTimer/RiskAlert
• SystemStatus/Reference Banner

4) Συστατικό: Απαιτούμενο περιεχόμενο

Σκοπός και χρόνος χρήσης/μη χρήσης.
Σύνθεση και παραλλαγές. Διαστάσεις, καταστάσεις, τροποποιητές.
API. Στηρίγματα, συμβάντα, χρονοθυρίδες, ελεγχόμενοι/ανεξέλεγκτοι τρόποι λειτουργίας.
. Ρόλοι, εστίαση, συνδέσεις άρια, ζωντανές περιοχές.
i18n. Μήκη, μορφότυποι, τοπικές υπογραφές.
Μικροεπισκόπηση. Συνιστώμενα κείμενα (CTA, υποδείξεις, σφάλματα).
Παραδείγματα κωδικών. Τυπικές περιπτώσεις, ακμές (σφάλματα, φόρτωση, κενές).
Δοκιμές. Οπτική matrix/unit/interaction/A11y.
Αντι-παραδείγματα. Συχνά σφάλματα χρήσης.

5) Βασικά στοιχεία: Ταχείες προδιαγραφές

5. 1 κουμπί

Παραλλαγές: 'πρωτογενής, δευτεροβάθμια

Καταστάσεις: κανονική, αιώρηση, εστίαση ορατή, ενεργή, φόρτωση, αναπηρία

: ορατό δαχτυλίδι εστίασης, 'aria-busy' για 'loading', 'aria-pressed' για εναλλαγή

Μικροεπισκόπηση: δράση + αντικείμενο (Αποθήκευση αλλαγών, επαλήθευση)

Αντι-παράδειγμα: «OK»

5. 2 Είσοδος/πεδίο

Συστατικά: ετικέτα, πεδίο, βοηθός, σφάλμα, πρόθεμα/επίθημα

: 'aria-avalid', 'aria-description', 'for/i '

Σχέδιο σφάλματος: τι είναι λάθος + πώς να διορθώσετε («Εισάγετε τον αριθμό στη μορφή + 380»..)

Υποδοχές: 'πρόθεμα' (εικονίδιο), 'επίθημα' (κουμπί 'show password')

5. Επιλογή/Combobox

Χαρακτηριστικά: αναζήτηση λίστας, πληκτρολόγιο, εικονοποίηση μακράς λίστας

: 'role = «combobox»', 'aria-expanded', 'aria-activedescendant'

Κενά αποτελέσματα: "Τίποτα δεν βρέθηκε. Τροποποίηση της αίτησης"

5. 4 Τρόπος/συρτάρι

Κανόνες: εστίαση της παγίδας, κλείσιμο της ESC/επικάλυψη, εστίαση της επιστροφής στην πρωτοβουλία

Χρήση: Επιβεβαιώσεις πληρωμών, κανόνες έκπτωσης, στάδια KYC

5. 5 Τοστ/Snackbar

Χρόνος: 2-4 s, χωρίς εμπλοκή ροής

Ζωντανές περιοχές: 'aria-live = «ευγενικό»' για επιτυχία, '«δυναμικό»' για λάθη

Παραδείγματα: "Αποδεκτή πληρωμή. Το υπόλοιπο επικαιροποιήθηκε"

5. 6 Αναγνωριστικό κράτος

Υπόδειγμα: πλαίσιο + τιμή + CTA + δευτερογενής CTA

Παράδειγμα: "Επιλεγμένα παιχνίδια θα εμφανιστούν εδώ όταν προσθέσετε το πρώτο. [Προσθήκη στα Αγαπημένα]"

6) Στοιχεία iGaming: ιδιαιτερότητες και API

6. 1 GameTile

Σκοπός: Κάρτα παιχνιδιού στο λόμπι/κατάλογο.
Σύνθεση: κάλυψη, πάροχος, ετικέτες (New/Hot/Jackpot/Live), RTP (χονδρική), γρήγορη δράση.

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

Κράτη: αιώρηση (ταχεία εκκίνηση), σκελετός, μη διαθέσιμος (περιοχή/ώρα).
: alt-text, πληκτρολόγιο start, 'aria-label = «Play Lightning Roulette»'.

6. 2 Φίλτρα λόμπι

Σκοπός: φίλτρα λόμπι (είδος, πάροχος, όρια, μεταβλητότητα).
Χαρακτηριστικά: αποθηκευμένες προεπιλογές, φίλτρα επαναρύθμισης, μετρητής αποτελεσμάτων.
Μικροεπισκόπηση: «Φίλτρα», «Φίλτρα επαναφοράς», «Βρέθηκε: 128».

6. 3 BonusBanner/Κάρτα BonusCard

Επιλογές: καλωσόρισμα, επαναφόρτωση, cashback, freespins, τουρνουά.
Πεδία: επικεφαλίδα, όροι, περίοδος ισχύος, CTA («Πριμοδότηση ενεργοποίησης»).
: οι αναφορές στις συνθήκες είναι ευανάγνωστες, λεπτομέρειες των συνθηκών.
Αντι-μοτίβο: Απόκρυψη βασικών περιορισμών.

6. 4 JackpotTicker

Σκοπός: Αυτόματη ανανέωση της ποσότητας του τζάκποτ.
API: πηγή δεδομένων, περίοδος επικαιροποίησης, μορφότυπος νομίσματος.
: 'role = «status»', μην παραβιάζετε την αναγνωσιμότητα του αναγνώστη οθόνης.

6. Πίνακας 5

Σύνθεση: πίνακας θέσης, σημεία, βραβεία, χρονοδιακόπτης, ίδια θέση.
Χαρακτηριστικό: σελιδοποίηση/εικονοποίηση, καθορισμός της γραμμής σας.
: 'th '/' scope', ευανάγνωστες στήλες, πλοήγηση βέλους.

6. 6 WalletCard/RegionWidget

Πεδία: ισοζύγιο, δεσμευμένα κεφάλαια, ισοζύγιο πριμοδότησης, νόμισμα.
Δράσεις: «Top up», «Display», «History».
Ασφάλεια: απόκρυψη/εμφάνιση ποσού, απόκρυψη σε κοινούς χώρους.

6. 7 ChampionMethodCard

Πεδία: λογότυπος, όρια, προμήθειες, ΠΩΑ, διαθεσιμότητα σε περιφερειακό επίπεδο.
Κράτη: δεν είναι διαθέσιμα (περιφέρεια/καθεστώς), εν εξελίξει, περιορίζουν την προειδοποίηση.

Μικροσκοπία: "1. Το 5% της προμήθειας παρακρατείται από τον πάροχο", "Πληρωμή - έως 15 λεπτά"

6. 8 DepositForm/Έντυπο

Πρότυπα: εσωτερική επικύρωση, όρια ποσότητας, κανόνας της ίδιας μεθόδου.
: δηλώνοντας σφάλματα («δυναμικά»), στρέφοντας την προσοχή στο πρώτο σφάλμα.
Πεδία υπηρεσιών: «Πηγή κεφαλαίων», «Σκοπός», εφόσον απαιτείται ΚΕΠΠΑ.

6. 9 KYCStatusBadge/KYCChecklist

Δηλώνει: "κανένας βασικός" δεν επεκτάθηκε, απορρίφθηκε και εκκρεμεί ".
Κείμενα: «Θα πάρει ~ 2 λεπτά», «Φωτογραφία χωρίς λάμψη, γωνίες και κείμενο είναι ορατά».
CTA: "Ελέγξτε", δευτερεύουσα: "Γιατί είναι αυτό σημαντικό ».

6. 10 AppleControl/ConditionGamingBanner

Σκοπός: όρια καταθέσεων/επιτοκίων/χρόνου, διαλείμματα, αυτοαποκλεισμός.
: ουδέτερη, χωρίς πίεση, σε σχέση με τη βοήθεια.

7) Πρότυπα διάταξης (Συνταγές)

Εγγραφή/ACC: Stepper + Form + Inline Error + Pue Alert + SuccessToast.
: ChampionMethodCard + StatusToast.
: SearchBar + LobbyFilters + GameGrid ( GameTile) + Pagination + RegionState.
: Leaderboard + Progress + BonusBanner.
Υπεύθυνος: ReviewGameBanner + SevelopControl + 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, χωρίς μεγάλες εξαρτήσεις.
Σκελετός για αντίληψη ταχύτητας, spinners - ελάχιστο.
Δοκιμές: μονάδα, οπτικά στιγμιότυπα, αλληλεπίδραση, A11y, E2E για κρίσιμη ροή.

11) Εκδόσεις και απελευθερώσεις

SemVer: έμπλαστρο - σφάλματα. ελάσσονα - μη καταστρεπτικά· μείζων - με τις μεταναστεύσεις.
Σημειώσεις απελευθέρωσης: μάρκες/API/συμπεριφορά, πριν/μετά τα στιγμιότυπα οθόνης.
Αποπροσανατολισμοί: Σημάνσεις αποβάθρας, κωδικοί mods και κανόνες χιτωνίου.
Storybook/Playground: ζωντανά παραδείγματα, πάνελ προσβασιμότητας, RTL εναλλαγή.

12) Συνεισφορά

RFC για μια νέα συνιστώσα: ένα πρόβλημα επιλογές την επιλεγείσα απόφαση i18n API κινδύνους.
Λίστα ελέγχου δημοσίων σχέσεων: αποβάθρες, ιστορίες, δοκιμές, οπτικά στιγμιότυπα, αντιθέσεις, i18n, σκοτεινό/RTL.
Ορισμός του αποτελέσματος: κατασκευαστικό στοιχείο + τεκμηρίωση + δοκιμές + παραδείγματα προτύπων.

13) Σύνολο MVP και χάρτης πορείας

• Κουμπί, είσοδος, επιλογή, κιβώτιο ελέγχου, ραδιόφωνο, διακόπτης, τρόπος, τοστ, εργαλειοθήκη, πρόοδος, σκελετός, κάρτα, λόμπι, ταμπλέτες, σελιδοδείκτες, ψίχουλα, τραπέζι, GameTile, LobbyFilters, BonusBanner, WallBanner EtCard, ChampionMethodCard, DepositForm, KYCStatusBadge.

: Leaderboard, JackpotTicker, Progress, SevelopControl, SystemStatus, Duty Picker, Combobox, FileUpload.

14) Παραδείγματα μικροεπισκόπησης (τελικά ένθετα)

CTA: «Αποθήκευση αλλαγών», «Επαλήθευση», «Προσθήκη μεθόδου πληρωμής».

Σφάλματα: "Μη έγκυρη μορφή ημερομηνίας. Χρήση DD. MM. YYYY "., "Το αρχείο είναι πολύ μεγάλο (μέγιστο 10 MB)"

Επιτυχία: "Η πληρωμή έγινε δεκτή. Ισοζύγιο επικαιροποιημένο. "Έγινε! Επαληθευμένα έγγραφα"

Κενό δηλώνει: "By "{query}" τίποτα δεν βρέθηκε. Επαναφορά των φίλτρων ή τελειοποίηση της ερώτησης"

15) Αντι-μοτίβα

Επιχειρηματική λογική εντός των συνιστωσών του ΚΠΕ (σπάει την υπερβολική χρήση).
Αόρατη εστίαση ή εξάρτηση του νοήματος μόνο στο χρώμα.
Συμβολοσειρές ενσωματωμένες στον κωδικό κατασκευαστικού στοιχείου (χωρίς i18n).
Παραβίαση σημασιολογίας (κουμπί στο 'div', λίστες χωρίς 'ul/ol/li').
Παραλλαγές χωρίς σαφείς κανόνες (πολλαπλασιασμός ' Blue Big2').

16) Κατάλογοι ελέγχου

• Σκοπός, παραλλαγές, API περιγράφονται.
• A11y: ρόλος, εστίαση, χαρακτηριστικά της άρια, αντίθεση.
• i18n: όλες οι γραμμές αποδίδονται, ελέγχονται οι μακριές γλώσσες και το RTL.
• Story/Demo: Normal, Download, Error, Blank.
• Δοκιμές: μονάδα + οπτική + αλληλεπίδραση + A11y.
• Καμία επιχειρηματική λογική, μόνο UI/συμπεριφορά.

• Υπάρχει ένα σύστημα συστατικών στοιχείων και μια σειρά εστίασης.
• Ορίζονται κείμενα μικροεπισκόπησης και σφάλματος/επιτυχίας.
• Μετρημένες βασικές μετρήσεις (μετατροπή σταδίου, ρυθμός σφάλματος, χρόνος ολοκλήρωσης).

17) Σκελετός εγγράφου για τη συνιστώσα (υπόδειγμα)

Όνομα και σκοπός

Πότε να χρησιμοποιήσετε/να μην χρησιμοποιήσετε

Επιλογές και κράτη

API (στηρίγματα, εκδηλώσεις, χρονοθυρίδες)

Προσβασιμότητα (ρόλος, πληκτρολόγιο, άρια, αντίθεση)

i18n (πλήκτρα, μορφότυποι, μήκη, RTL)

Μικροεπισκόπηση (παραδείγματα)

Κωδικός δείγματα (τυπικό και άκρο)

Πίνακας δοκιμής

Αντι-παραδείγματα

Σύνολο

Το Gamble Hub UI δεν είναι απλά ένα σύνολο μπλοκ, αλλά μια πειθαρχία: μάρκες → συστατικά → μοτίβα → τεκμηρίωση → μετρήσεις. Ακολουθώντας αυτόν τον οδηγό, οι ομάδες παρέχουν τα χαρακτηριστικά γρηγορότερα, οι χρήστες αποκτούν μια προβλέψιμη και προσιτή διεπαφή, και οι κλίμακες προϊόντων χωρίς οπτικό χρέος. Αν χρειαστεί, θα συλλέγω τις πρώτες σελίδες της δεξαμενής με MVP-set με παραδείγματα και i18n πλήκτρα.