ReactCreate.io Design System

Biblioteca React + TypeScript do ReactCreate.io. Publicada no npm com bundle JavaScript ofuscado. Inclui componentes tipados, suporte a temas dark/light, Storybook para documentação visual e um playground Vite para demo integrada.

Para uso com classes CSS puras (sem React), consulte PAINEL_DESIGN_SYSTEM_GUIDE.md.

Instalação (projeto consumidor)

npm install @reactcreate.io/design-system

Peer dependencies necessárias:

npm install react react-dom

Desenvolvimento (este repositório)

npm install
npm run build        # build + obfuscação do bundle publicado
npm run build:lib    # build sem obfuscação (debug)

Quick start

import '@reactcreate.io/design-system/styles';
import { ThemeProvider, Button, Card, Input, InputGroup } from '@reactcreate.io/design-system';

export default function App() {
  return (
    <ThemeProvider>
      <Card>
        <InputGroup label="Nome">
          <Input placeholder="Digite seu nome" />
        </InputGroup>
        <Button variant="primary">Salvar</Button>
      </Card>
    </ThemeProvider>
  );
}

Scripts

| Comando | Descrição | |---------|-----------| | npm run build | Compila e ofusca dist/index.js para publicação | | npm run build:lib | Compila sem obfuscação (desenvolvimento) | | npm run dev:playground | Sobe o playground em http://localhost:5173 | | npm run storybook | Sobe o Storybook em http://localhost:6006 | | npm run build-storybook | Gera site estático de docs em storybook-static/ |

Temas

O tema padrão é dark. Use ThemeProvider na raiz da aplicação:

<ThemeProvider defaultTheme="dark">
  {children}
</ThemeProvider>

Alternar tema programaticamente:

const { theme, setTheme, toggleTheme } = useTheme();

A preferência é persistida em localStorage com a chave reactcreate-theme.

Componentes

Button

| Prop | Tipo | Padrão | |------|------|--------| | variant | 'primary' \| 'outline' \| 'modern-save' \| 'danger' \| 'text-danger' \| 'icon' | 'primary' |

<Button variant="primary">Salvar</Button>
<Button variant="outline">Cancelar</Button>
<Button variant="modern-save">Salvar (Gradiente)</Button>
<Button variant="icon">🔍</Button>

Badge

| Prop | Tipo | Padrão | |------|------|--------| | variant | 'success' \| 'error' \| 'warning' \| 'info' \| 'muted' | 'muted' |

Input

• InputGroup — wrapper com label e error opcionais
• Input — campo de texto
• Select — dropdown
• Textarea — área de texto

Card

Container com estilo .card. Aceita className e props nativas de div.

Table

Composição declarativa:

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell as="th">Coluna</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Valor</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Modal

| Prop | Tipo | Padrão | |------|------|--------| | open | boolean | — | | onClose | () => void | — | | closeOnOverlayClick | boolean | true | | closeOnEscape | boolean | true |

Subcomponentes: ModalHeader, ModalBody, ModalFooter. Renderiza via portal em document.body.

Layout

• AppLayout — flex container principal
• Sidebar — barra lateral
• MainContent — área central
• PageHeader — cabeçalho de página

Tokens CSS

Variáveis disponíveis globalmente:

| Token | Uso | |-------|-----| | --primary | Cor primária (turquesa) | | --primary-hover | Hover da primária | | --bg-darker | Background da página | | --bg-dark | Background de cards/sidebar | | --text-main | Texto principal | | --text-muted | Texto secundário | | --success | Verde de sucesso | | --error | Vermelho de erro | | --accent | Amarelo/dourado de destaque |

.meu-componente {
  background: var(--bg-dark);
  color: var(--text-main);
  border: 1px solid var(--primary);
}

Consumir em outro projeto

Instale via npm e importe diretamente — sem alias no Vite:

import '@reactcreate.io/design-system/styles';
import { ThemeProvider, Button } from '@reactcreate.io/design-system';

Desenvolvimento local (monorepo / link)

Para testar alterações locais antes de publicar:

# na pasta React-DS
npm run build:lib
npm link

# no projeto consumidor
npm link @reactcreate.io/design-system

Ou via alias no Vite apontando para o source:

// vite.config.ts
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@reactcreate.io/design-system': resolve(__dirname, '../React-DS/src/index.ts'),
    },
  },
});

Publicar no npm

O pacote publicado contém apenas dist/ (JavaScript ofuscado + tipos .d.ts) e o CSS. O código-fonte TypeScript não é incluído no tarball.

Primeiro publish (bootstrap)

Antes de configurar o CI, publique manualmente uma vez para criar o pacote no registry:

npm login
npm run build          # build + javascript-obfuscator
npm publish --access public

Antes do primeiro publish, crie a organização @reactcreate.io no npm (ou ajuste o name em package.json para um escopo que você controle).

Trusted Publisher (GitHub Actions)

Releases publicados no GitHub disparam o workflow .github/workflows/publish.yml, que publica no npm via OIDC (sem NPM_TOKEN).

Configuração no npm (após o primeiro publish manual):

1. Abra https://www.npmjs.com/package/@reactcreate.io/design-system/access
2. Seção Trusted publishing → GitHub Actions
3. Preencha:

| Campo | Valor | |-------|-------| | Organization/User | reactcreate-io | | Repository | react-DS | | Workflow filename | publish.yml | | Environment | (vazio) |

4. Salve

Fazer um release

1. Crie e envie a tag semver: git tag v0.2.0 && git push origin v0.2.0
2. No GitHub: Releases → Publish release na tag
3. O workflow sincroniza a versão da tag e publica no npm

A versão publicada vem da tag (v0.2.0 → 0.2.0); não é necessário bump manual em package.json.

Nota: a obfuscação protege a implementação JS, mas os tipos TypeScript (.d.ts) permanecem legíveis para autocomplete nos projetos consumidores.

Estrutura do repositório

src/
├── components/     # Componentes React
├── models/         # Tipos TypeScript
├── theme/          # ThemeProvider + useTheme
├── styles/         # painel-design-system.css
└── index.ts        # Exports públicos
stories/            # Stories do Storybook
playground/         # App demo Vite

Storybook

Documentação visual interativa com stories para cada componente:

• Foundation/Introduction — visão geral e paleta
• Foundation/Theme — toggle dark/light
• Components/* — Button, Badge, Card, Input, Table, Modal, Layout

Playground

Demo integrada estilo dashboard com sidebar, tabela de usuários, formulário e modal. Execute com npm run dev:playground.