triad-ui

v1.0.0

Published

a month ago

Design system Triad: tema MUI, ThemeProvider e componentes reutilizáveis

0High
0Medium
0Low

@triad/ui

Design system Triad: tema MUI (dark/light), ThemeProvider e componentes reutilizáveis para manter o mesmo visual em vários projetos.

Instalação

No seu projeto (Next.js, Vite, etc.):

npm install @triad/ui

Peer dependencies (instale no seu app se ainda não tiver):

react, react-dom
@mui/material, @mui/icons-material, @mui/x-date-pickers
@emotion/react, @emotion/styled
date-fns
lucide-react

Uso

1. Envolver a aplicação com o tema

import { ThemeRegistry } from "@triad/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        <ThemeRegistry>{children}</ThemeRegistry>
      </body>
    </html>
  );
}

2. Usar cores e hooks

import { useThemeColors, useThemeMode } from "@triad/ui";

function MeuComponente() {
  const colors = useThemeColors();
  const { mode, toggleTheme, setPrimaryColor } = useThemeMode();

  return (
    <Box sx={{ backgroundColor: colors.background.paper, border: `1px solid ${colors.border}` }}>
      ...
    </Box>
  );
}

3. Componentes exportados

| Componente | Descrição | |------------|-----------| | ThemeRegistry | Provider completo (tema MUI + modo dark/light + cor primária) | | ThemeProvider, useThemeMode, useThemeColors | Controle de tema e cores | | ConfirmModal | Modal de confirmação (variantes: danger, warning, info, success) | | CustomSwitch | Switch customizado com label opcional | | SectionTitle | Título de seção com ícone | | SdrDatePicker, SdrDateTimePicker | DatePicker/DateTimePicker pt-BR com calendário alinhado | | StandardCard, StandardCardSkeleton | Card padrão e skeleton (variantes: produto, funil, cadencia, tarefa) | | CardMenuPopover | Popover de menu para cards (ações e switch) | | createStatusChip, createCountChip | Helpers para chips do StandardCard |

4. Tema e cores (avançado)

import {
  createAppTheme,
  getThemeColors,
  DEFAULT_PRIMARY_COLOR,
  darkColors,
  lightColors,
} from "@triad/ui";

Publicando o pacote

Para usar em outros repositórios:

Pacote local (desenvolvimento): no outro projeto, no package.json:
```
"@triad/ui": "file:../caminho/para/SDR/packages/triad-ui"
```
Depois: npm install e npm run build dentro de packages/triad-ui.
npm (público ou privado):
- Em packages/triad-ui: npm run build
- Ajuste o name para um escopo que você tenha (ex: @seu-usuario/ui)
- npm publish --access public (ou sem --access se for pacote privado pago)
GitHub Packages / registro privado: configure .npmrc e faça npm publish no diretório do pacote.

Desenvolvimento

Dentro de packages/triad-ui:

npm install
npm run build

O build gera dist/ com ESM, CJS e tipos TypeScript.

Testar localmente a partir do SDR

No package.json do projeto SDR (raiz), você pode adicionar:

"dependencies": {
  "@triad/ui": "file:./packages/triad-ui"
}

Depois: npm install na raiz e importar de @triad/ui onde quiser. Assim você valida o pacote antes de publicar.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme