Biblioteca de componentes Gamble Hub UI

1) Objetivos e princípios

Porquê: acelerar o fornecimento de fichas, fornecer UX consistente e simplificar o suporte.

• Semântica e neutralidade. O componente resolve a tarefa UI sem a lógica do negócio.
• A11y-by-default. Papéis, anéis de foco, ária-atributos e contraste - inseridos em componentes.
• i18n-first. Comprimentos de linha, formatos numéricos, SE levarmos em conta a partir de uma caixa.
• Temização. Tópicos claro/escuro e sotaques de marca através de tokens.
• Escalabilidade. API unificada, estabilidade de lançamentos menores, migração para major.

2) Fundações: design-tokens (fundação)

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

Regras: Tocas semânticas (por exemplo, 'cor. accent. sucess ') são usados por componentes; painel - interior.

3) Categorias de componentes

1. Базовые (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.
2. Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.
3. Navegação: AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.
4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. Dados e tabelas: Tabela, DataList, Cartão, Concordion, Tag, EmptyState.

• GameTile (cartão de jogo)
• ProviderBadge
• JackpotTicker
• LiveBadge (mesa ao vivo/show)
• LobbyFilters (provedor/gênero/limite)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Página do componente: conteúdo obrigatório

Destino e quando usar/não usar.
Composição e opções. Dimensões, estados, modificadores.
API. Props, eventos, slots, regimes controlados/descontrolados.
A11y. Papéis, truques, comunicações arias, regiões de laicidade.
i18n. Comprimentos, formatos, assinaturas localizadas.
Microcopy. Texto recomendado (CTA, dicas, erros).
Exemplos de código. Mala típica, edge-mala (erros, download, vazio).
Testes. Matriz visual/unit/interaction/A11y.
Anti-exemplos. Erros frequentes de uso.

5) Componentes-chave: especificações rápidas

5. 1 Button

Opções: 'primary | segundary | ghost | destrutiva' Dimensões: 'sm | md | lg'

Estados: normal, hover, focus-visível, ativo, loading, disabled

A11y: focus-ring visível, 'aria-busy' em 'loading', 'aria-pressed' para toggle

Microopy: ação + objeto («Salvar alterações», «Passar a verificação»)

Anti-exemplo, «OK»

5. 2 Input / Field

Composição: label, field, helper, erro, prefix/sufix

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

Pattern erros: o que não é + como corrigir («Digite um número no formato + 380»...)

Slots: 'prefix' (ícone), 'sufix' (botão 'mostrar senha')

5. 3 Select / Combobox

Características: busca por lista, teclado, virtualização de listas longas

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

Resultados em branco: "Nada encontrado. Altere a solicitação

5. 4 Modal / Drawer

Regras: trap focus, encerramento por ESC/overlay, retorno do foco ao iniciador

Uso: confirmação de pagamentos, regras de bónus, etapas KYC

5. 5 Toast / Snackbar

Tempo: 2-4 s, sem bloqueio de fluxo

Regiões Live: 'aria-live =' polite 'para sucesso,' assertive 'para erros

Exemplos: "Pagamento aceito. Balanço atualizado"

5. 6 EmptyState

Modelo: contexto + valor + CTA + CTA secundário

Exemplo: "Os jogos preferidos aparecerão quando você adicionar o primeiro. [Adicionar aos favoritos]"

6) Componentes iGaming: especificidades e API

6. 1 GameTile

Atribuição: cartão de jogo do lobby/catálogo.
Composição: capa, provedor, marcas (New/Hot/Jackpot/Live), RTP (opz) Acção rápida.

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

Estados: hover (início rápido), skeleton, não disponível (região/hora).
A11y: Texto alt, início de teclado, 'aria-label =' Jogar a Rolette Lightning '.

6. 2 LobbyFilters

Destino: filtros de lobby (gênero, provedor, limites, volatilidade).
Fichas: preenchimentos salvos, filtrar filtros, contagem de resultados.
Microcopy: «Filtros», «Reativar filtros», «Encontrado: 128».

6. 3 BonusBanner / BonusCard

Opções de boas-vindas, reload, cachê, frisas, torneio.
Campos: cabeçalho, termos, prazo de validade, CTA («Ativar bónus»).
A11y: links de condições são legíveis, 'aria-describedy' → detalhes de condições.
Anti-pattern, esconder as limitações essenciais.

6. 4 JackpotTicker

Destino: Quantia de jackpot corrida com atualização automática.
API: origem de dados, período de atualização, formato de moeda.
A11y: 'role =' status ', sem perturbar a leitura da tela.

6. 5 TournamentLeaderboard

Composição: tabela de posições, pontos, prémios, temporizador, posição própria.
Fichi: paginação/virtualização, fixação de sua linha.
A11y: 'th '/' scope', colunas legíveis, navegação por seta.

6. 6 WalletCard / BalanceWidget

Campos: saldo, fundos bloqueados, saldo de bónus, moeda.
Ações: «Reabastecer», «Tirar», «História».
Segurança: ocultar/mostrar valor, camuflagem em áreas comuns.

6. 7 PaymentMethodCard

Campos: logotipo do provedor, limites, comissões, ETA, disponibilidade regional.
Estados: não disponível (região/status), em processamento, aviso de limite.
Microcopy: «Comissão de 1,5% retida pelo provedor», «Pagamento de até 15 minutos».

6. 8 DepositForm / WithdrawalForm

Pattern: inline-validação, limites de soma, same-method rule dicas.
A11y: declaração de erro ('assertive'), tradução do foco para o primeiro erro.
Campos de serviço: Origem de fundos, Destino, se necessário AML.

6. 9 KYCStatusBadge / KYCChecklist

Estados: 'none | basic | tended | rejected | pending'.
Os textos são: «Vai demorar uns 2 minutos», «Fotos sem blitzes, ângulos e texto visíveis».
CTA: "Fazer a verificação", secundário: "Por que é que isso é importante? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Destino: limites de depósito/taxa/hora, interrupções, auto-exclusão.
A11u/Tom: neutro, sem pressão, referindo-se à referência.

7) Pattern de layout (Recipes)

Registro/CUS: Stepper + Forma + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Jogo responsável: ResponsibleGamingBanner + LimitsControl + FAQ-link.

8) Accessibility (A11y)

Foco visível sempre (incluindo um tema escuro).
Navegar por teclado em todos os elementos interativos.
'ária-live =' polite/assertive 'para brindes/estatais.
Os contrastes não são inferiores ao WCAG 2. 1 AA.
O texto dos ícones não é o único portador de sentido.
Modo de se verificar em 320 px e leitura em voz alta.

9) Localização e formatos

Todas as linhas personalizadas são através de chaves 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

Formatação de datas/moedas - utilitários, não linhas.
O tom em línguas é tone-map (neutro/suporte/oficial).

10) Performance e qualidade

Virtualizar listas (jogos, tabelas).
Carregamento preguiçoso de ilustrações, código em páginas.
Tamanho do bandle: orçamento para pacote UI, sem dependências pesadas.
Skeleton para a percepção de velocidade, spinners é mínimo.
Testes: unit, snapshots visuais, interação, A11y, E2E para flow crítico.

11) Versionização e lançamentos

SemVer: patch - bags; menor - não destrutivos; Major - com as migrações.
Release Note: tokens/API/comportamento, capturas de tela antes/depois.
Depositações: marcações na doca, código de moda e regras linter.
Storybook/Playground: Exemplos vivos, painel de acessibilidade, SE toggle.

12) Continuting (contribuição)

RFC para novo componente: problema → opções → solução selecionada → A11y → i18n → API → riscos.
Folha de cheque PR: doca, estoris, testes, visiveis, contrastes, i18n, dark/RENAULT.
Definition of Done: componente + documentação + testes + exemplos de pattern.

13) MVP kit e mapa de trânsito

• 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) Exemplos de microcopy (colagens prontas)

CTA: «Salvar alterações», «Ser verificado», «Adicionar forma de pagamento».

Erros: "Formato de data inválido. Use DD. MM. GGG. ", "Arquivo é muito grande (máximo de 10 MB)"

Êxito: "Pagamento aceito. O balanço foi atualizado. «, «Pronto! Documentos verificados"

Nenhum estado vazio foi encontrado. Reinstale os filtros ou especifique a solicitação

15) Anti-pattern

Lógica de negócios dentro de componentes UI (quebra a utilizabilidade).
Foco invisível ou dependência de significado apenas da cor.
Linhas costuradas no código de componentes (sem i18n).
Violação de semântica (botão em 'dave', listas sem 'ul/ol/li').
Opções sem regras claras (reprodução 'ButtonPrimaryBlueBig2').

16) Folhas de cheque

• Atribuição descrita, opções, API.
• A11y: papel, foco, ária-atributos, contraste.
• i18n: Todas as linhas foram concluídas, verificadas as línguas longas e a ATÉ.
• Estoriz/demo: normal, download, erros, vazio.
• Testes: unit + visual + interação + A11y.
• Sem lógica empresarial, apenas UI/comportamento.

• Há um padrão de componentes e ordem de foco.
• Estão definidos os microopy e os textos de erro/sucesso.
• As métricas-chave (conversão de passo, erro rate, time-to-complete) estão medidas.

17) Esqueleto de documento para componente (modelo)

Nome e destino

Quando usar/não usar

Opções e estados

API (propas, eventos, slots)

Acessibilidade (papel, teclado, ária, contraste)

i18n (chaves, formatos, comprimento)

Microcopy (exemplos)

Exemplos de código (típicos e edge)

Matriz de teste

Anti-exemplos

Resultado

Gamble Hub UI não é apenas um conjunto de blocos, mas sim uma disciplina, como os tokens, componentes pattern documentação métricas. Seguindo este guide, os comandos entregam os fichas mais rapidamente, os usuários recebem uma interface previsível e acessível e o produto é escalado sem dever visual. Se necessário, colecione as primeiras páginas da doca no conjunto MVP com exemplos e chaves i18n.