Lucas UI Core

Design-system React components usados pelas aplicações Cinnecta. Inclui Header, Sidebar e o MainTemplate completo, além de utilidades como o BrainMenu.Compatível com React 19+.

Instalação

pnpm add lucas-ui-core
# ou
npm install lucas-ui-core

As peer-dependencies exigem react e react-dom ≥ 19.

Uso rápido

import {
  MainTemplate,
  Header,
  Sidebar,
  SidebarProvider,
} from 'lucas-ui-core';

export default function App() {
  return (
    <SidebarProvider>
      <MainTemplate
        titleHeader="Dashboard"
        iconHeader={<img src="/logo.svg" height={24} />}
        routes={[
          { path: '/home', label: 'Home', Icon: <HomeIcon /> },
          { path: '/reports', label: 'Reports', Icon: <BarChartIcon /> },
        ]}
      >
        {/* conteúdo da página aqui */}
      </MainTemplate>
    </SidebarProvider>
  );
}

Componentes exportados

| Componente / Hook | Descrição breve | | ---------------------- | ------------------------------------------------- | | MainTemplate | Estrutura principal com Header + Sidebar + page | | Header | Cabeçalho com título, ícone, tabs e ações extras | | Sidebar | Navegação lateral com modo colapsado | | SidebarProvider | Contexto global para controlar a Sidebar | | BrainMenu | Botão flutuante de ações rápidas |

Tipos exportados

MenuItem   // usado pelo BrainMenu
TabsType   // modelo de abas para Header

Documentação completa

Acesse a documentação interativa em: https://<seu-domínio-amplify>

Lá você encontra exemplos de código, estilos e tokens.

Desenvolvimento local (monorepo)

pnpm install
pnpm dev            # roda storybook / vite conforme cada package

Build da lib:

pnpm --filter lucas-ui-core build

© 2025 Cinnecta. Released under the MIT License.