CNM Design System

O CNM Design System é a biblioteca de componentes e documentação de estilos visuais do Chaves na Mão.

Este projeto fornece um conjunto de componentes reutilizáveis, tokens de estilização e diretrizes para garantir a consistência da marca e acelerar o desenvolvimento em todas as aplicações do Chaves na Mão.

Funcionalidades

• React & TypeScript: Componentes modernos e com tipagem segura, construídos com React 18+.
• Desenvolvido com Vite: Desenvolvimento rápido e builds otimizados.
• SCSS & Variáveis CSS: Design tokens expostos como CSS Custom Properties.
• Tree-shakeable: Importe apenas os componentes que você precisa.
• Documentação com Storybook: Documentação interativa em dev.chavesnamao.com.br/ds.

Instalação

# npm
npm install @chavesnamao2022/design-system

# yarn
yarn add @chavesnamao2022/design-system

# pnpm
pnpm add @chavesnamao2022/design-system

Como Usar

1. Importe os Estilos

No ponto de entrada da sua aplicação (ex: layout.tsx, _app.tsx, main.tsx):

// CSS Global (reset + tokens)
import "@chavesnamao2022/design-system/style.css";

2. Use os Componentes

import {
  // Typography
  H1, H2, H3, H4, Body1, Body2, P, Label, Typography,
  
  // Atoms
  Button, Input, Select, Icon, Avatar, Link, LogoCNM, Skeleton,
  
  // Molecules
  Accordion, Breadcrumb, Pagination, Tabs, Toast, Tooltips,
} from '@chavesnamao2022/design-system';

function MeuComponente() {
  return (
    <div>
      <H1>Título Principal</H1>
      <P>Parágrafo de texto usando Body1.</P>
      
      <H2 variant="text-body-lg-bold">Subtítulo com variant customizado</H2>
      <Body2>Texto secundário menor.</Body2>
      
      <Button onClick={() => alert('Clicou!')}>
        Clique aqui
      </Button>
      
      <Input placeholder="Digite algo..." />
    </div>
  );
}
  return (
    <div>
      <Typography variant="text-title-lg">
        Bem-vindo ao Design System
      </Typography>
      <Icon name="meu-icone" />
    </div>
  );
}

3. Typography com Variants

O sistema de tipografia suporta variants para customização:

import { H1, H2, Typography } from '@chavesnamao2022/design-system';

// Uso básico (variants padrão por tag)
<H1>Título</H1>                      // text-display
<H2>Subtítulo</H2>                   // text-title-lg

// Com variant customizado
<H2 variant="text-body-lg-bold">Subtítulo menor</H2>

// Usando Typography diretamente
<Typography as="span" variant="text-caption-semibold">
  Legenda
</Typography>

Variants disponíveis:

• text-display - Títulos principais
• text-title-lg, text-title-md, text-title-sm - Subtítulos
• text-body-lg-*, text-body-md-*, text-body-sm-* - Corpo (medium, semibold, bold)
• text-caption-* - Legendas (medium, semibold, bold)
• text-numeric-* - Números (xl, lg, md, sm)

4. Usando Tokens CSS

.meu-componente {
  color: var(--color-txt-primary);
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-9);
  padding: var(--spacing-4);
  font-size: var(--font-size-md);
}

Componentes Disponíveis

Atoms

| Componente | Descrição | |------------|-----------| | Typography, H1-H4, Body1, Body2, P, Label | Sistema de tipografia | | Button | Botão com loading state | | Input | Campo de entrada com máscara | | Select | Dropdown com seleção única/múltipla | | Icon | Ícones do sistema | | Avatar | Avatar de usuário | | Link | Link estilizado | | LogoCNM | Logo Chaves na Mão | | Skeleton | Placeholder de carregamento |

Molecules

| Componente | Descrição | |------------|-----------| | Accordion | Seção expansível | | Breadcrumb | Navegação em migalhas | | Pagination | Paginação | | Tabs | Abas de navegação | | Toast | Notificações | | Tooltips | Dicas de interface |

Desenvolvimento Local

# Clone o repositório
git clone <url-do-repositorio>

# Instale as dependências
yarn install

# Execute o Storybook
yarn storybook

# Build da biblioteca
yarn build

Scripts

• yarn storybook - Inicia o Storybook em dev
• yarn build - Compila o pacote para produção
• yarn build-storybook - Build do Storybook estático
• yarn publish - Build e publica no NPM