Squad Front

Appearance

Guia de Desenvolvimento: Padrões de UI e Design System ​

A consistência visual é vital em um ecossistema médico. Um botão de "Emergência" deve ser idêntico em todas as aplicações, independentemente do desenvolvedor ou do time responsável.

1. Design System Centralizado (shared/ui) ​

Todos os componentes visuais puros devem residir em packages/shared/ui. Eles devem ser agnósticos a negócio (não conhecem o Redux ou regras médicas).

  • Princípio: Componentes atômicos (Botão, Input, Modal, Tipografia).
  • Estilização: Utilizamos CSS-in-JS ou módulos CSS (conforme padrão do projeto), garantindo que o tema seja injetável.

2. Componentes de Domínio (domains/[domain]/ui) ​

Estes são componentes "inteligentes" que conhecem o contexto clínico. Eles compõem elementos do shared/ui com lógica de negócio.

  • Exemplo: O componente PrescriptionForm vive no domínio de medical-record. Ele usa Input e Button do shared/ui, mas sabe como validar um CID e salvar na API.

3. Padrão de Composição: "Fragments" ​

Para evitar componentes gigantes, dividimos a UI em "Fragmentos":

  • ui/components: Peças pequenas e reutilizáveis dentro do domínio.
  • ui/fragments: Organismos maiores (ex: Sidebar de histórico, Player de vídeo).
  • ui/Page.tsx: O layout final que orquestra os fragmentos.

4. Tratamento de Estados de Carregamento (Loading) ​

Nunca deixe o usuário com uma tela em branco ou congelada.

  • Skeletons: Utilize esqueletos de carregamento para layouts que demoram a baixar dados da API.
  • Spinners: Reservados para ações rápidas (clique em botão).
  • Empty States: Sempre informe quando uma lista estiver vazia (ex: "Nenhum paciente agendado para hoje").
tsx
// Exemplo de Composição Inteligente
const MedicalRecordPage = () => {
  const { data, loading } = useMedicalRecord();

  if (loading) return <RecordSkeleton />;
  if (!data) return <EmptyState message="Prontuário não localizado" />;

  return (
    <Container>
      <PatientHeader data={data.patient} />
      <RecordTimeline history={data.history} />
    </Container>
  );
};

Checklist de UI ​

  • [ ] Meu componente é agnóstico a negócio se estiver em shared/ui?
  • [ ] O componente trata estados de erro e loading de forma elegante?
  • [ ] Utilizei os tokens de design (cores, espaçamentos) do sistema?
  • [ ] O componente é acessível (ARIA tags, contraste)?