norma-library/docs/index.md

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

## Passos Básicos

### 1. Instalando o pacote em seu projeto

Para instalar o pacote Norma em seu projeto execute o comando em seu terminal:

### `npm install norma-library`

## Components disponível e como usa-lo

### Button

`import { Button } from "norma-library`;

`<Button label="Clique-me" onClick={handleButtonClick} />`;

#### Props

O componente `Button` aceita as seguintes propriedades:

- `label` (string, obrigatório): O texto exibido no botão.
- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
- `color` (string): A cor do botão (inherit, primary, secondary, success, error, info, warning).
- `size` (string): O tamanho do botão (small, medium, large).
- `variant` (string): A variante do botão (text, outlined, contained).
- `style` (React.CSSProperties): Estilos CSS adicionais.
- `children` (ReactNode): Conteúdo adicional a ser exibido dentro do botão.
- `onClick` (função): Uma função de callback para ser executada quando o botão for clicado.

### Card

`import { Card } from "norma-library`;

`<Card title="Titulo do cartão" />conteúdo do card</card>`;

#### Props

O componente `Card` aceita as seguintes propriedades:

- `title` (string, opcional): O título exibido no cabeçalho do card, se fornecido.
- `children` (ReactNode, obrigatório): O conteúdo do card, que pode incluir qualquer componente ou conteúdo.

### Modal

`import { Modal} from "norma-library`;

`<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" onConfirm={handleConfirm}
title="Titulo do modal">conteúdo do modal</modal>`;

#### Props

O componente `Modal` aceita as seguintes propriedades:

- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
- `children` (React.ReactElement | React.ReactElement[]): Elementos filhos do modal.
- `open` (boolean): Indica se o modal está aberto.
- `onClose` (função): Função de callback chamada quando o modal é fechado.
- `className` (string): Classe CSS adicional para estilização.
- `title` (string): Título do modal.
- `full` (boolean): Indica se o modal deve ocupar toda a largura.
- `onConfirm` (função): Função de callback chamada quando o botão "Confirmar" é clicado.

### TextField

`import { TextField } from "norma-library`;

`<TextField id="outlined-basic" label="Outlined" variant="outlined" />`;

#### Props

O componente `TextField` aceita as seguintes propriedades:

- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
- `variant` (string): A variante do campo (standard, outlined, filled).
- `value` (TextFieldValue): O valor do campo de entrada.
- `onChange` (função): Função de callback chamada quando o valor do campo muda.
- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
- `required` (boolean): Indica se o campo de entrada é obrigatório.
- `hasError` (boolean): Indica se o campo de entrada possui erro.
- E outras propriedades relacionadas a estilos, tamanho, id, etc.

### CheckBox

`import { CheckBox } from "norma-library`;

`<CheckBox id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;

#### Props

O componente `CheckBox` aceita as seguintes propriedades:

- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
- `checked ` (boolean): Indica se a caixa de seleção está marcada.
- `onChange` (função): Função de callback chamada quando o valor do campo muda.
- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
- `color ` (string): A cor da caixa de seleção (primary, secondary, error, info, success, warning, default).
- `size ` (string): O tamanho da caixa de seleção (small, medium).
- `value` (TextFieldValue): O valor do campo de entrada.
- E outras propriedades relacionadas a estilos, required, id, etc.

### ProgressBar

`import { ProgressBar } from "norma-library`;

`<ProgressBar id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;

#### Props

O componente `ProgressBar` aceita as seguintes propriedades:

- `sx` (SxProps<Theme>): Propriedade de estilo do Material-UI para estilizar o componente.
- `usage` (number): O valor de uso para calcular a porcentagem da barra de progresso.
- `value` (number): O valor da barra de progresso.
- `total` (number): O valor total usado para calcular a porcentagem.
- `label` (string): Texto do rótulo exibido acima da barra de progresso.
- `colorCustom` (string): Cor personalizada para a barra de progresso.
- `variant` ('determinate' | 'indeterminate' | 'buffer' | 'query'): O estilo da barra de progresso.
- `color` (string): Cor da barra de progresso (primary, secondary, error, info, success, warning, inherit).