@alishenriques/design-system

Biblioteca de componentes React isolada, usada no portfólio, no futuro site de vendas de serviços autônomos e reaproveitável em outros projetos. Publicada no npm público.

Arquitetura completa e convenções: docs/ai no repositório principal. Mudanças grandes vão por PR detalhada e só entram na main com aprovação do Alisson.

Uso

yarn add @alishenriques/design-system

import { Button } from "@alishenriques/design-system";
import "@alishenriques/design-system/styles.css";

Requer react e react-dom 19 como peer dependencies.

Desenvolvimento

yarn install
yarn dev          # build em watch

yarn lint · yarn typecheck · yarn test · yarn build

Componentes

• Avatar — foto circular que expande em overlay (zoom, blur no fundo, fecha no ×/Escape/clique fora)
• Button (primary, ghost)
• CommandPalette — busca/atalhos em overlay (⌘K)
• Eyebrow — rótulo pequeno em maiúsculas
• LoadingButton — botão com estado de carregamento embutido (isLoading, loadingText)
• Panel — superfície elevada com borda, com fundo em grade de pontos opcional
• PipelineBadges — chips estilo pipeline de CI
• Quote — citação em destaque estilo terminal (#/marcador customizável, cursor piscando opcional, float para puxar para a lateral)
• ShowcaseCard — card de mídia quadrado emoldurado como janela de navegador (pontinhos, barra de endereço); título/tags sempre visíveis sobre a imagem, descrição e rodapé (link livre) escondidos e revelados no hover/foco (sempre abertos em telas sem hover)
• SidePanel — painel lateral deslizante estilo GitKraken (open/onClose controlados, fecha no ×/Escape/clique fora)
• StatGrid — grade de estatísticas
• TagList — lista de tags
• TerminalPrompt — linha de prompt de terminal com cursor piscando
• Timeline — grafo vertical estilo GitKraken (nós empilhados e clicáveis, ligados por linhas coloridas em rotação automática); cada linha lê como um commit — nome, depois tipo e uma descrição curta opcionais na mesma linha que quebra; um item pode vir em destaque (featured: nó e textos maiores, borda mais grossa) e com uma linha de ícones (badges, ex.: tecnologias)

Estilos via CSS Modules e tokens --ds-* (src/tokens.css). Cores de destaque: --ds-color-accent (lime, o principal) e --ds-color-secondary (azul, para momentos fora do fluxo principal), cada uma com sua variante -soft para fundos.

Convenção: quando um componente entra aqui

Qualquer componente reaproveitável em mais de um contexto — não amarrado a uma marca, texto ou dado específico de um produto — nasce aqui, não direto no app consumidor: props dinâmicas (nunca texto/comportamento fixo), componente desacoplado (sem depender de dado externo específico de um app) e sempre com testes unitários. alis-portfolio só importa e consome; ele não duplica esses componentes localmente. Exemplo: LoadingButton e Avatar nasceram de necessidades do portfólio, mas como nada neles é específico do portfólio (o texto de carregamento e o rótulo do botão de fechar são props), vivem aqui. Já Logo (a marca do Alisson) e LoadingOverlay (que usa esse Logo internamente) ficam no alis-portfolio, por serem específicos daquele produto.