Umbrella - Components - Design System

Usando no Projeto React

Instalar

# Umbrella - Components (Design System)

Biblioteca de componentes React reutilizáveis para o design system do projeto Umbrella.

## Instalação

npm:
```bash
npm install @granto-umbrella/umbrella-components

yarn:

yarn add @granto-umbrella/umbrella-components

Uso básico

Importe o componente desejado e use-o no seu app React:

import { Button } from '@granto-umbrella/umbrella-components';

function App() {
  return (
    <div>
      <Button variant="primary">Clique Aqui</Button>
    </div>
  );
}

export default App;

Componentes incluídos

Este pacote contém (exemplos principais):

• Button — botão reutilizável com variantes e estados.
• (Adicione aqui outros componentes do pacote quando houver: Input, Modal, Card, etc.)

Button — API principal

Props mais comuns:

• children: ReactNode — conteúdo do botão.
• variant: "primary" | "secondary" | "tertiary" — variação visual.
• size: "sm" | "md" | "lg" — tamanho do botão.
• disabled: boolean — desabilita interações.
• onClick: (event) => void — callback de clique.
• className: string — classes adicionais.

Exemplos:

<Button variant="primary" size="md" onClick={() => console.log('clicado')}>
  Salvar
</Button>

<Button variant="secondary" disabled>
  Cancelar
</Button>

Acessibilidade

• Componentes seguem práticas básicas de acessibilidade (atributos ARIA quando aplicável, foco visível, suporte a teclado).
• Sempre verifique pontos específicos de acessibilidade ao utilizar componentes em fluxos críticos (formularios, modais, etc.).

Estilos e theming

• Os componentes são estilizados com CSS-in-JS / CSS modular (dependendo da implementação).
• Para customizar cores/temas, prefira expor variáveis de tema ou wrappers globais (ThemeProvider). Verifique a implementação do projeto para detalhes sobre o provider e tokens disponíveis.

Desenvolvimento

Comandos úteis (execute na raiz do pacote ou monorepo conforme estrutura do projeto):

Instalar dependências:

pnpm install
# ou npm install

Executar storybook (documentação interativa):

pnpm storybook
# ou npm run storybook

Rodar testes:

pnpm test
# ou npm test

Build do pacote:

pnpm build
# ou npm run build

Lint:

pnpm lint
# ou npm run lint

Publicar (ajuste conforme pipeline do projeto):

pnpm publish
# ou npm publish

Contribuição

• Abra issues para bugs ou melhorias.
• Envie PRs seguindo o padrão de commits do repositório.
• Inclua testes e atualize a documentação/stories para novos componentes ou alterações de API.

Boas práticas

• Prefira componentes compostos e props controladas quando precisar de maior flexibilidade.
• Mantenha a consistência visual usando as variantes e tokens do design system.
• Documente novos componentes com stories e exemplos de uso.

Licença

Especifique a licença do projeto (por exemplo MIT) no package.json e no arquivo LICENSE.

Contato / suporte: descreva o canal do time (Slack, e-mail ou GitHub) para dúvidas e manutenção.

# Uso no Projeto React

## Importar o Componente

```js
import { Button } from '@granto-umbrella/umbrella-components';

function App() {
  return (
    <div>
      <Button variant="primary">Clique Aqui</Button>
    </div>
  );
}

export default App;