Aurora ✨
A aurora boreal é um fenômeno luminoso que se desenvolve na termosfera (ou ionosfera), uma das camadas superiores da atmosfera do planeta Terra, que se estende de uma altura mínima de 60 km a partir da superfície até 1000 km. Essa camada está situada entre a exosfera e a mesosfera.
O Projeto Aurora é uma abordagem estruturada e abrangente para o Design System dos projetos Consumidor Positivo e Acordo Certo, criado com o objetivo de padronizar e otimizar a experiência do usuário em ambas as plataformas. Este sistema de design consiste em uma biblioteca de componentes reutilizáveis, diretrizes de estilo, padrões de interação e documentação detalhada para garantir consistência e eficiência no desenvolvimento e design de interfaces.
Cada componente visual é publicado em dois formatos: React, para as aplicações (área logada, formulários com estado), e Astro, para as páginas públicas estáticas, que assim não carregam React. Os dois usam a mesma marcação e o mesmo CSS. Veja Dois formatos: React e Astro.
Tech Stack • Sites • React e Astro • Desenvolvimento
Tech Stack
Reactjs ( JS lib )
Astro ( versão estática dos componentes )Typescript ( Types )
Vitejs ( Tooling )
Sass ( CSS )
Storybook ( UI dos componentes React; os Astro têm um playground próprio )
Sites
Consumidor Positivo
Acordo Certo
Instalação e Uso
Instalação Básica
npm install @consumidor-positivo/aurora
Dois formatos: React e Astro
O caminho do import decide qual versão você usa.
React, import nomeado do pacote:
import { Button, Text } from '@consumidor-positivo/aurora'
<Button type="primary">Simular agora</Button>
Astro, import default pelo caminho completo do arquivo, com a extensão .astro:
---
import '@consumidor-positivo/aurora/global.css'
import Button from '@consumidor-positivo/aurora/astro/Button/index.astro'
import Text from '@consumidor-positivo/aurora/astro/Text/index.astro'
---
<Button type="primary">Simular agora</Button>
A versão Astro renderiza em build time, sem ilha e sem React no bundle, e tem as mesmas props visuais da React. Como o Astro não tem prop de função, os callbacks viram atributos e eventos: data-au-modal-toggle e data-au-drawer-toggle abrem Modal e Drawer, e os componentes emitem eventos au:* (au:tabchange, au:modalopen...). Uma página feita só com componentes Astro importa o reset uma vez, pelo global.css.
Todo componente visual tem as duas versões. Ficam só em React os utilitários (Transition, IsMobile, misc/*). A referência completa está em docs/astro.md e na página "Componentes Astro" do Storybook.
Desenvolvimento
npm install
npm run prebuild # gera tokens e ícones (obrigatório antes de rodar qualquer coisa)
npm run storybook # componentes React, porta 6006
npm run playground:astro # componentes Astro, porta 4321
npm run check:astro # type check dos .astro
Playground Astro
O Storybook não renderiza .astro. Para ver os componentes Astro no navegador, o repo tem um playground em playground/: um site Astro mínimo, com uma página por componente, que renderiza os arquivos de lib/ direto.
npm run playground:astro # http://localhost:4321
npm run playground:astro:build # build estático das mesmas páginas
O menu lateral lista as páginas e, na página aberta, os exemplos dela. O botão "Mobile" mostra a mesma página num frame de 375px, para ver o comportamento mobile (drawer, select em tela cheia, calendário) sem redimensionar a janela.
Para adicionar um exemplo, crie um arquivo em playground/src/pages/components/, importe o componente por @components/<Nome>/index.astro e envolva cada caso em Example. A página nova entra no menu sozinha. O CI faz o build do playground, então cada exemplo também é um teste de compilação.
Testes
Este projeto usa Vitest para testes unitários e @testing-library/react para testes de componentes React.
execute os testes com:
npm test
Para rodar no modo watch:
npm run test:watch