@sbkbs/ui

Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.

Conteúdo

• Tema: variáveis CSS (Material Design 3) light/dark + Guia de marca SBK (cores e tipografia Jakarta) em theme/theme.css + ThemeProvider React.
• Componentes: Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer.
• Paletas de botão: escolha a cor do botão primary via prop palette ou data-button-palette no pai (verde-vibrante, grafite-azulado, etc.).

Uso em outro projeto

1. Instalar no monorepo

No package.json do app (ex.: frontend), adicione:

"dependencies": {
  "@sbkbs/ui": "^1.0.2"
}

Rode npm install na raiz do monorepo.

2. Tema (variáveis CSS)

Os componentes usam variáveis CSS (--md-surface, --primary-color, etc.). O consumidor pode:

• Usar o tema da lib: import '@sbkbs/ui/theme.css'; no entry (ex.: main.tsx), ou
• Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem theme.css próprio).

3. ThemeProvider (opcional)

Para light/dark com toggle e persistência em localStorage:

import { ThemeProvider } from '@sbkbs/ui';

root.render(
  <ThemeProvider defaultTheme="light">
    <App />
  </ThemeProvider>
);

4. Componentes

import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';

<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
<Card variant="elevated" padding="lg" hoverable>...</Card>
<Input label="E-mail" size="md" />
<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
<Title size="2xl" weight="bold">Título</Title>
<Subtitle size="md" muted>Subtítulo</Subtitle>
<Paragraph size="md">Texto.</Paragraph>

<Header
  logoSrc="/logo.png"
  logoDarkSrc="/logo-dark.png"
  title="OFÍCIO.IA"
  subtitle="Subtítulo"
  onLogoClick={() => navigate('/home')}
  rightContent={<>
    <LanguageSelector />
    <ThemeToggle />
    <UserMenu />
  </>}
/>
<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />

Guia de marca (tema)

Cores disponíveis como variáveis CSS: --brand-verde-vibrante, --brand-grafite-azulado, --brand-verde-profundo, --brand-azul-acinzentado, --brand-cinza-medio, --brand-cinza-escuro, --brand-off-white, e paleta "O Criador" (--brand-azul-intenso, --brand-verde-lima, etc.). Tipografia: --font-primary / --font-heading = Plus Jakarta Sans (Google Fonts).

Paletas de botão (prop palette ou data-button-palette no pai): verde-vibrante | verde-profundo | grafite-azulado | azul-acinzentado | cinza-medio | cinza-escuro | off-white.

Compartilhar com outro projeto

• Mesmo monorepo: adicione o app em workspaces e use "@sbkbs/ui": "*" nas dependências; depois npm install na raiz.
• Outro repositório: use dependência por Git ("@sbkbs/ui": "git+https://...") ou publique em um registry npm e instale com npm install @sbkbs/ui.

Guia completo: docs/COMPARTILHAR_LIB_UI.md.

Desenvolvimento

• Build: npm run build dentro de ui.
• Watch: npm run dev dentro de ui.
• Playground: npm run playground
• Storybook: npm run storybook
• Testes: npm run test

Estrutura

ui/
  src/
    index.ts
    theme/
      theme.css
      ThemeProvider.tsx
    components/
      Button/
      Card/
      Input/
      Modal/
      Title/
      Subtitle/
      Paragraph/
      Header/
      Footer/
  dist/