@cnc-ti/layout-basic

Biblioteca de componentes React da CNC. Reúne o cabeçalho, a navegação e os controles de formulário compartilhados pelos sistemas internos — GEV, RENAR, GDS, Gestão de Câmaras, Gestão de Demandas, OráculoS e afins — para que todos tenham a mesma identidade visual sem reimplementar a mesma tela em cada projeto.

Construída sobre Radix UI e Tailwind CSS, com classes prefixadas por cnc- para não colidir com os estilos da aplicação que a consome.

Instalação

npm install @cnc-ti/layout-basic

Uso

Importe o CSS uma vez, no ponto de entrada da aplicação:

import "@cnc-ti/layout-basic/styles";

E use os componentes:

import { HeaderContainer, HeaderNotifications, Button } from "@cnc-ti/layout-basic";

export function Layout() {
  return (
    <HeaderContainer
      logo="/images/logo.svg"
      notifications={<HeaderNotifications email={usuario.email} sistema="gev" baseUrl={API_NOTIFICACOES} />}
    >
      <Button>Entrar</Button>
    </HeaderContainer>
  );
}

O que vem na caixa

• Layout — HeaderContainer, AplicationsHeader, Sidebar, AppsMenu, HeaderNotifications
• Formulários — Input, Select, Combobox, Checkbox, Switch, Filter
• Exibição — Card, CardList, Badge, Tabs, Collapsible
• Sobreposição — Modal, Dialog, Popover, DropdownMenu, Command

A referência completa de props fica nos tipos do próprio pacote e no Storybook interno.

Requisitos

• React >= 18
• react-hook-form >= 7 — peer opcional, necessária para o Filter
• Font Awesome carregado na aplicação — usado pelos ícones do AppsMenu

Licença

MIT