npm package: @granto-umbrella/umbrella-components
Description: Umbrella Components for React
Latest version: 3.0.77

# Umbrella - Components - Design System

# Usando no Projeto React

## Instalar

````js
# 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:

```bash
yarn add @granto-umbrella/umbrella-components
```

## Uso básico

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

```js
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:

```jsx
<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:

```bash
pnpm install
# ou npm install
```

Executar storybook (documentação interativa):

```bash
pnpm storybook
# ou npm run storybook
```

Rodar testes:

```bash
pnpm test
# ou npm test
```

Build do pacote:

```bash
pnpm build
# ou npm run build
```

Lint:

```bash
pnpm lint
# ou npm run lint
```

Publicar (ajuste conforme pipeline do projeto):

```bash
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;
````