@umodeapporg/ui

A biblioteca de componentes e o design system da uMode: os componentes React, os tokens de tema (claro/escuro), o preset Tailwind, o movimento e os helpers que dão a cara do uMode Dashboard a qualquer aplicação.

• Pacote: @umodeapporg/ui no npm (registry público, sem token)
• Repositório: UmodeApp/umode-ui

npm install @umodeapporg/ui

O que vem dentro

| Área | Conteúdo | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | components/Form | ControlledButton, ControlledInput, ControlledSelect, ControlledDialog, ControlledDrawer, ControlledTabs, ControlledImage, RichTextEditor... | | components/UI | DataTable, NoDataFound, OutlinedChip, ControlledTooltip, ControlledMenu/Popover, MaterialSymbol, Toast, ImageAnnotator, CustomChart... | | components/Search | UnifiedSearchBar e a arquitetura de filtros (FiltersPanel) | | components/Navigation | PageTitle (breadcrumb automático via porta), ControlledBreadcrumb, ErrorPage | | Design system | @umodeapporg/ui/tailwind-preset, @umodeapporg/ui/theme.css (tokens dos dois temas), @umodeapporg/ui/base.css (camada base completa), @umodeapporg/ui/styles.css | | Infra de UI | hooks puros (useResolvedTheme, useBreakpoint, useNotification...), helpers puros (formatNumber, capitalize, generateUUID...), presets de motion, locales pt/en (@umodeapporg/ui/locales) |

Import raso para as primitivas comuns (import { ControlledButton } from '@umodeapporg/ui') ou profundo para qualquer módulo (@umodeapporg/ui/components/UI/DataTable).

Começando

O guia completo para montar um app novo com a identidade uMode (preset, base.css, fontes, boot de tema sem flash, i18n, portas) é o .claude/APP-INTEGRATION.md. O mínimo:

// tailwind.config.js
import preset from '@umodeapporg/ui/tailwind-preset';
export default {
  presets: [preset],
  content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@umodeapporg/ui/dist/**/*.js'],
};

// entry
import '@umodeapporg/ui/styles.css';
import './index.css'; // @import '@umodeapporg/ui/base.css';

As regras

Este repositório é dirigido por documentação de regras (usada por pessoas e por agentes):

| Doc | Responde | | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | | CLAUDE.md | O índice e as regras críticas | | .claude/VISUAL-IDENTITY.md | O que faz algo parecer uMode: marca, claro/escuro, contraste, coordenação, ciclos de vida | | .claude/APP-INTEGRATION.md | App novo do zero, passo a passo | | .claude/COMPONENTS.md | O catálogo: qual peça para qual trabalho | | .claude/THEMING.md / MOTION.md / I18N.md | Tokens, movimento e i18n em profundidade | | .claude/NEW-COMPONENT.md | Como nasce um componente | | .claude/RELEASE.md | Releases automáticos |

Desenvolvimento e release

npm ci
npm run dev          # playground (claro/escuro) em localhost
npm run lint && npm run audit:theme && npm run build

Merge na main é o release: o semantic-release lê os Conventional Commits, calcula a versão (fix/perf/refactor patch, feat minor, feat! major), publica no npm, cria a tag e o changelog. PRs entram por squash com título conventional. Para testar uma PR num app antes do merge, a label canary publica 0.0.0-canary.<sha>.

Licença

Código-fonte visível e pacote publicamente instalável; todos os direitos reservados à uMode (UNLICENSED). Uso fora de produtos uMode não é licenciado.