Bibliothèque de composants Gamble Hub UI

1) Objectifs et principes

Pourquoi : accélérer la livraison des fiches, fournir un UX cohérent et simplifier le support.

• La sémantique et la neutralité. Le composant résout la tâche UI sans supprimer la logique d'entreprise.
• A11y-by-default. Les rôles, les anneaux de focus, les attributs aria et le contraste sont regroupés en composants.
• i18n-first. Longueurs de lignes, formats numériques, RTL - nous tenons compte de la boîte.
• Temisation. Thèmes clairs/sombres et accents de marque à travers les tokens.
• Évolutivité. API unique, stabilité des versions mineures, migration en major.

2) Bases : jetons de conception (fondation)

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 }
}

Règles : jetons sémantiques (par exemple, 'color. accent. success ') sont utilisés par les composants ; la palette est interne.

3) Catégories de composants

1. Базовые (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.
2. Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.
3. Navigation : AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.
4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. Données et tableaux : Table, DataList, Card, Accord, Tag, EmptyState.

• GameTile (carte de jeu)
• ProviderBadge
• JackpotTicker
• LiveBadge (table en direct/spectacle)
• LobbyFilters (fournisseur/genre/limite)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Page du composant : contenu obligatoire

Destination et quand utiliser/ne pas utiliser.
Composition et options. Dimensions, états, modificateurs.
API. Props, événements, slots, modes contrôlés/non contrôlés.
A11y. Rôles, focus, aria-connexions, vie-régions.
i18n. Longueurs, formats, signatures localisables.
Microcopy. Textes recommandés (CTA, conseils, erreurs).
Exemples de code. Cas types, cas edge (erreurs, téléchargement, vide).
Des tests. Matrice visuelle/unitaire/interaction/A11y.
Anti-exemples. Erreurs fréquentes d'utilisation.

5) Composants clés : Spécifications rapides

5. 1 Button

Options : 'primary | secondaire | ghost | destructive' Dimensions : 'sm | md | lg'

États : normal, hover, focus-visible, active, loading, disabled

A11y : visible focus-ring, 'aria-busy' à 'loading', 'aria-pressed' pour toggle

Microcopy : action + objet (Enregistrer les modifications, Passer la vérification)

Anti-exemple : « OK »

5. 2 Input / Field

Composition : label, champ, helper, error, prefix/suffix

A11y: `aria-invalid`, `aria-describedby`, связка `for/id`

Modèle d'erreur : ce qui ne va pas + comment corriger (« Entrez le numéro au format + 380 »...)

Slots : 'prefix' (icône), 'suffix' (bouton « afficher le mot de passe »)

5. 3 Select / Combobox

Caractéristiques : recherche par liste, clavier, virtualisation des listes longues

A11y: `role="combobox"`, `aria-expanded`, `aria-activedescendant`

Résultats vides : "Rien trouvé. Modifiez la requête

5. 4 Modal / Drawer

Règles : trap focus, fermeture par ESC/overlay, retour de focus à l'initiateur

Utilisation : Confirmations de paiement, règles de bonus, étapes KYC

5. 5 Toast / Snackbar

Temps : 2-4 s, pas de blocage du flux

Live regions : 'aria-live = « polite » pour les succès,' assertive 'pour les erreurs

Exemples : "Paiement accepté. Le solde a été mis à jour"

5. 6 EmptyState

Modèle : contexte + valeur + CTA + CTA secondaire

Exemple : "Les jeux favoris apparaîtront ici lorsque vous ajouterez le premier. [Ajouter aux favoris"

6) Composants iGaming : Spécificité et API

6. 1 GameTile

But : carte de jeu dans le hall/catalogue.
Composition : couverture, fournisseur, marques (New/Hot/Jackpot/Live), RTP (Opz.) , des actions rapides.

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

États : hover (démarrage rapide), skeleton, non disponible (région/heure).
A11y : alt-texte, début de clavier, 'aria-label = « Jouer à Lightning Roulette ».

6. 2 LobbyFilters

But : filtres de lobby (genre, fournisseur, limites, volatilité).
Fiches : préréglages enregistrés, réinitialisation des filtres, compteur de résultats.
Microcopy : « Filtres », « Réinitialiser les filtres », « Trouvé : 128 ».

6. 3 BonusBanner / BonusCard

Options : accueil, reload, cashback, frispins, tournoi.
Champs : titre, conditions, date d'expiration, CTA (« Activer le bonus »).
A11y : les références aux conditions sont lisibles, 'aria-describedby' → les détails des conditions.
Anti-modèle : masquer les contraintes clés.

6. 4 JackpotTicker

But : Montant courant du jackpot avec mise à jour automatique.
API : source de données, période de mise à jour, format de devise.
A11y : 'role =' status ', ne pas perturber la lisibilité du lecteur d'écran.

6. 5 TournamentLeaderboard

Composition : tableau des positions, points, prix, minuterie, position propre.
Fichi : pagination/virtualisation, ancrage de sa ligne.
A11y : 'th '/' scope', colonnes lisibles, navigation par les flèches.

6. 6 WalletCard / BalanceWidget

Champs : solde, fonds bloqués, solde bonus, monnaie.
Actions : « Compléter », « Sortir », « Histoire ».
Sécurité : masquer/afficher le montant, masquer dans les zones communes.

6. 7 PaymentMethodCard

Champs : logo du fournisseur, limites, commissions, ETA, disponibilité régionale.
États : indisponible (région/statut), en cours de traitement, avertissement des limites.
Microcopy : « La commission est détenue à 1,5 % par le fournisseur », « Paiement - jusqu'à 15 minutes ».

6. 8 DepositForm / WithdrawalForm

Patterns : inline-validation, limites de somme, rule-method d'indices.
A11y : déclaration d'erreur ('assertive'), traduction du focus à la première erreur.
Champs de service : « Source de fonds », « Destination » si AML est nécessaire.

6. 9 KYCStatusBadge / KYCChecklist

États : 'none | basic | extended | rejected | pending'.
Textes : « Cela prendra ~ 2 minutes », « Photo sans éblouissement, les angles et le texte sont visibles ».
CTA : "Passer la vérification", secondaire : "Pourquoi est-ce important ? ».

6. 10 LimitsControl / ResponsibleGamingBanner

But : limites de dépôt/taux/temps, pauses, auto-exclusion.
A11u/Ton : neutre, sans pression, avec référence au certificat.

7) Modèles de schéma (Recipes)

Inscription/CUS : Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Jeu responsable : ResponsibleGamingBanner + LimitesControl + FAQ-link.

8) Accessibility (A11y)

Le focus visible est toujours (y compris dans un thème sombre).
Naviguez avec votre clavier sur tous les éléments interactifs.
'aria-live = 'polite/assertive'pour les toasts/statuts.
Les contrastes ne sont pas inférieurs à WCAG 2. 1 AA.
Le texte en icônes n'est pas le seul porteur de sens.
Modes RTL, test de 320 px et lisibilité à haute voix.

9) Localisation et formats

Toutes les chaînes personnalisées sont via i18n-clés.

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

Formatage des dates/monnaies - utilitaires, pas de lignes.
Ton en langues - via tone-map (neutre/support/officiel).

10) Performance et qualité

Virtualisation des listes (jeux, tables).
Chargement paresseux des illustrations, clivage code par page.
Taille de la bande : budget pour le paquet UI, pas de dépendances lourdes.
Skeleton pour la perception de la vitesse, spinners - minimum.
Tests : unit, snapshots visuels, interaction, A11y, E2E pour flow critique.

11) Versioning et releases

BouVer : patch - bugs ; mineur - non destructif ; major - avec les migrations.
Release Notes : Tokens/API/comportement, captures d'écran avant/après.
Deprecations : marques dans le quai, codes-modes et règles de linter.
Storybook/Playground : exemples en direct, panneau accessibilité, RTL toggle.

12) Contribution (contribution)

RFC pour un nouveau composant : problème → options → la solution choisie → A11y → i18n → API → les risques.
chèque PR : doca, storis, tests, snapshots visuels, contrastes, i18n, dark/RTL.
Définition de Done : composant + documentation + tests + exemples de patterns.

13) Recrutement MVP et feuille de route

• Button, Input, Select, Checkbox, Radio, Switch, Modal, Toast, Tooltip, Progress, Skeleton, Card, EmptyState, Tabs, Pagination, Breadcrumbs, Table, GameTile, LobbyFilters, BonusBanner, WalletCard, PaymentMethodCard, DepositForm, KYCStatusBadge.

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

14) Exemples de microcopy (inserts prêts à l'emploi)

CTA : "Garder les changements", "Passer la vérification", "Ajouter le moyen du paiement".

Erreurs : "Format de date incorrect. Utilisez le DD. MM. GGG. ", "Le fichier est trop grand (10 Mo maximum)"

Succès : "Paiement accepté. Le solde a été mis à jour. «, « Prêt ! Les documents ont été vérifiés"

États vides : "Par "{query}" n'a rien trouvé. Réinitialiser les filtres ou affiner la requête"

15) Anti-modèles

Logique d'entreprise au sein des composants UI (brise la surutilisation).
Mise au point invisible ou dépendance du sens uniquement à la couleur.
Chaînes cousues dans le code des composants (sans i18n).
Violation de la sémantique (bouton sur « bou », listes sans 'ul/ol/li').
Variantes sans règles claires (reproduction 'ButtonPrimaryBlueBig2').

16) Chèques-feuilles

• L'objet, les options, l'API sont décrits.
• A11y : rôle, focus, attributs aria, contraste.
• i18n : toutes les lignes sont sorties, les langues longues vérifiées et RTL.
• Storis/démo : normal, téléchargement, erreurs, vide.
• Tests : unit + visuel + interaction + A11y.
• Il n'y a pas de logique d'entreprise, seulement UI/comportement.

• Il y a un schéma de composants et un ordre de mise au point.
• Microcopy et textes d'erreurs/succès identifiés.
• Métriques clés mesurées (conversion d'étape, taux d'erreur, temps-à-complet).

17) Squelette de document pour le composant (modèle)

Titre et destination

Quand utiliser/ne pas utiliser

Options et états

API (props, événements, slots)

Accessibilité (rôle, clavier, aria, contraste)

i18n (clés, formats, longueurs, RTL)

Microcopy (exemples)

Exemples de code (type et edge)

Matrice de test

Anti-exemples

Résultat

Gamble Hub UI n'est pas seulement un ensemble de blocs, mais une discipline : jetons → composants → modèles → documentation → métriques. En suivant cette hyde, les équipes livrent les fiches plus rapidement, les utilisateurs obtiennent une interface prévisible et accessible, et le produit s'adapte sans devoir visuel. Si nécessaire, je rassemblerai les premières pages du quai selon un ensemble MVP avec des exemples et des clés i18n.