Índice

• Introdução
• Instalação
• Uso
• Componentes
  • Header
  • Button
  • Card
  • Input
  • Footer
  • Logo
  • Loader
• Contribuição
• Licença

Introdução

Esta biblioteca oferece uma coleção de componentes React prontos para uso, focados em reaproveitamento de código e usabilidade. Esta documentação aborda como utilizar cada componente, bem como sugestões de uso.

Instalação

Para instalar a biblioteca, execute:

npm install petro-ui-lib

Uso

Após a instalação, você pode importar e utilizar os componentes da seguinte forma:

import { Header, Button } from "petro-ui-lab";

const App = () => (
  <div>
    <Header logoVariant="white">Bem-vindo!</Header>
    <Button color="primary">Clique aqui</Button>
  </div>
);

6. Componentes

### Header

O componente `Header` é usado para renderizar o cabeçalho da aplicação com um logotipo e conteúdo adicional. Ele suporta diferentes variantes de cores para o logotipo.

#### Propriedades

- `children`: O conteúdo a ser exibido dentro do cabeçalho.
- `logoVariant`: Define a variante de cor do logotipo. Opções: `'white'`, `'black'`, `'color'`.

#### Exemplo de Uso

```jsx
<Header logoVariant="white">Meu Site</Header>
```

Button

O componente Button é utilizado para renderizar botões interativos na aplicação. Ele suporta diferentes variantes de cores, estados de carregamento e pode ser desabilitado. O botão é altamente customizável, permitindo o uso em várias situações, como ações primárias, secundárias ou de alerta.

Propriedades

• children: O conteúdo a ser exibido dentro do botão, geralmente um texto ou ícone.
• color: Define a cor do botão. Opções: 'primary', 'secondary', 'danger'.
• disabled: Um booleano que desabilita o botão, tornando-o não interativo. O botão desabilitado também recebe um estilo visual específico.
• loading: Um booleano que, quando verdadeiro, exibe um indicador de carregamento (Loader) dentro do botão, ocultando o conteúdo original.
• full: Um booleano que, quando verdadeiro, faz o botão ocupar toda a largura do seu contêiner.
• onClick: Uma função callback a ser chamada quando o botão é clicado.

Exemplo de Uso

<Button color="primary" onClick={() => alert("Clicado!")}>
  Clique Aqui
</Button>

Observação

Ao passar a propriedade loading, o botão exibirá o indicador de carregamento e desabilitará temporariamente outras interações até que o carregamento seja concluído.

Card

O componente Card é um contêiner flexível que pode ser usado para agrupar conteúdo de forma visualmente destacada. Ele permite customizar suas dimensões e a cor de fundo, tornando-o adequado para uma variedade de layouts e conteúdos.

Propriedades

• width:
  • Tipo: string
  • Descrição: Define a largura do card. Pode ser especificada em qualquer unidade CSS válida, como px, em, %, etc.
  • Padrão: 'max-content'.
• height:
  • Tipo: string
  • Descrição: Define a altura do card. Pode ser especificada em qualquer unidade CSS válida.
  • Padrão: 'max-content'.
• bgColor:
  • Tipo: string
  • Descrição: Define a cor de fundo do card. Pode ser qualquer valor de cor válido no CSS (ex: nome de cor, código HEX, rgb, etc.).
  • Padrão: 'inherit'.
• children:
  • Tipo: node
  • Descrição: Conteúdo a ser exibido dentro do card, como textos, imagens, ou outros componentes React.

Exemplo de Uso

<Card width="300px" height="200px" bgColor="#f4f4f4">
  <h3>Título do Card</h3>
  <p>Este é o conteúdo do card.</p>
</Card>

Input

O componente Input é um campo de entrada de dados personalizável que pode ser usado para capturar diferentes tipos de informações do usuário. Ele suporta rótulos (labels), placeholders, e pode exibir mensagens de erro para validação.

Propriedades

• label:
  • Tipo: string
  • Descrição: O rótulo que será exibido acima do campo de entrada. Se não for fornecido, o campo de entrada será renderizado sem rótulo.
  • Padrão: 'max-content'.
• type:
  • Tipo: string
  • Descrição: Define o tipo do campo de entrada, como text, password, email, etc. Este valor é passado diretamente para o atributo type do elemento <input>.
  • Obrigatório.
• placeholder:
  • Tipo: string
  • Descrição: Texto exibido dentro do campo de entrada quando ele está vazio, forecendo uma dica do que o usuário deve digitar.
  • Padrão: text.
• error:
  • Tipo: String
  • Descrição: Mensagem de erro a ser exibia abaixo do campo de mentrada, geralmente sada para validação de formulário. Quando presente, o campo de entrada recebe um estilo diferenciado para indicar o erro.
  • Opcional;.

Exemplo de Uso

<Input type="password" placeholder="Digite sua senha" />

Footer

O componente Footer é um rodapé flexível que pode ser usado para encerrar seções ou páginas da aplicação. Ele permite a inclusão de qualquer conteúdo adicional por meio da propriedade children.

Propriedades

• children:
  • Tipo: node
  • Descrição: Conteúdo a ser exibido dentro do rodapé, como textos, links, ícones, ou outros componentes React.
  • Opcional.

Exemplo de Uso

<Footer> 2016 - Todos os direitos reservados</Footer>

Logo

O componente Logo é utilizado para exibir o logotipo da aplicação em diferentes variações de cor e orientação. Ele suporta três variantes de cor (black, white, color) e pode ser exibido tanto na orientação horizontal quanto vertical.

Propriedades

• variant:
  • Tipo: oneOf(['black', 'white', 'color'])
  • Descrição: Define a cor do logotipo. As opções disponíveis são:
    • 'black': Logotipo preto.
    • 'white': Logotipo branco.
    • 'color': Logotipo em cores.
  • Obrigatório.
• orientation:
  • Tipo: oneOf(['horizontal', 'vertical'])
  • Descrição: Define a orientação do logotipo.
    • 'horizontal': Logotipo na orientação horizontal.
    • 'vertical': Logotipo na orientação vertical.
  • Padrão: 'horizontal'.

Exemplo de Uso

<Logo variant="color" orientation="horizontal" />

Loader

O componente Loader é um indicador de carregamento visual, utilizado para informar ao usuário que uma operação está em andamento. Ele exibe um ícone animado, girando continuamente, simbolizando um estado de espera ou processamento.

Exemplo de Uso

<Loader />