npm package: @paggue/react-native-jarvis
Description: component lib
Author: Micael Mágno
Latest version: 0.0.8

# react-native-jarvis

React Native Jarvis é uma biblioteca de componentes e utilitários para o desenvolvimento de aplicativos móveis. O grande diferencial desta biblioteca é sua independência de qualquer outra biblioteca externa, oferecendo uma solução completa diretamente no React Native.


## Installation

```sh
yarn add @paggue/react-native-jarvis
```

## Components

### Button
O componente Button é usado para criar botões interativos em aplicativos React Native.

#### Uso
```jsx
import React from 'react';
import { Button } from '@paggue/react-native-jarvis';

const MyComponent = () => {
  return (
    <Button onPress={() => console.log('Botão pressionado')}>
      Pressione-me
    </Button>
  );
};
```

### Props

| Propriedade      | Tipo        | Descrição                                      |
|------------------|-------------|------------------------------------------------|
| color            | string      | Cor de fundo do botão (opcional)               |
| textStyle        | TextStyle   | Estilo do texto do botão (opcional)            |
| containerStyle   | ViewStyle   | Estilo do contêiner do botão (opcional)        |
| disabled         | boolean     | Define se o botão está desabilitado (opcional) |



### Tabs
Um componente de abas que permite ao usuário alternar entre diferentes conteúdos.

### Uso

```jsx
import React from 'react';
import { View, Text } from 'react-native';
import { Tabs } from '@paggue/react-native-jarvis';

const App = () => {
  const tabs = [
    { label: 'Tab 1', content: <Text>Conteúdo da Tab 1</Text> },
    { label: 'Tab 2', content: <Text>Conteúdo da Tab 2</Text> },
    { label: 'Tab 3', content: <Text>Conteúdo da Tab 3</Text> },
  ];

  return (
    <View>
      <Tabs tabs={tabs} />
    </View>
  );
};

export default App;
```

#### Props

| Propriedade | Tipo              | Descrição                                                |
|-------------|-------------------|----------------------------------------------------------|
| tabs        | Array de objetos  | Uma matriz de objetos que contém rótulos e conteúdos.   |

#### Tab
Um objeto que representa uma aba.

| Propriedade | Tipo        | Descrição                               |
|-------------|-------------|-----------------------------------------|
| label       | string      | O rótulo da aba                          |
| content     | JSX.Element | O conteúdo da aba                        |


### Modal
O componente Modal é utilizado para exibir conteúdo em uma janela modal sobreposta ao restante da interface do usuário. Ele oferece a opção de ser fechado através de um botão "Fechar".

#### Uso
```jsx
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { Modal } from '@paggue/react-native-jarvis';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Abrir Modal" onPress={() => setModalVisible(true)} />
      <Modal
        isVisible={modalVisible}
        onClose={() => setModalVisible(false)}
        closable={true}
      >
        <Text>Conteúdo do Modal</Text>
      </Modal>
    </View>
  );
};

export default App;
```
#### Props

| Propriedade | Tipo            | Descrição                                                                             |
|-------------|-----------------|---------------------------------------------------------------------------------------|
| isVisible   | Boolean         | Controla a visibilidade do modal                                                      |
| onClose     | Função/Callback | Função de callback chamada quando o modal é fechado.                                  |
| closable    | Boolean         | Determina se o modal pode ser fechado através de um botão "Fechar". O padrão é false  |


### Input
O componente Input é utilizado para capturar dados de entrada do usuário, como texto, números, etc. Ele oferece suporte para vários recursos, incluindo a capacidade de exibir uma label, uma mensagem de ajuda e uma mensagem de erro.

#### Uso
```jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { Input } from '@paggue/react-native-jarvis';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Input
        label="Nome"
        placeholder="Digite seu nome"
        value={value}
        onChangeText={(text) => setValue(text)}
      />
    </View>
  );
};

export default App;
```

#### Props

| Propriedade    | Tipo                   | Descrição                                                                                           |
|----------------|------------------------|-----------------------------------------------------------------------------------------------------|
| label          | string                 | Define o rótulo do input                                                                            |
| placeholder    | string                 | Define o texto de espaço reservado (placeholder) do input                                           |
| helperText     | string                 | Define um texto de ajuda para o input                                                               |
| error          | string                 | Define um texto de erro para o input                                                                |
| size           | 'sm' , 'md' ou 'lg'    | Define o tamanho do input. Pode ser 'sm' (pequeno), 'md' (médio) ou 'lg' (grande). O padrão é 'md'. |
| readOnly       | boolean                | Determina se o input é somente leitura. O padrão é false.                                           |
| textStyle      | TextStyle              | Estilos adicionais para o texto do input.                                                           |
| containerStyle | ViewStyle              | Estilos adicionais para o contêiner do input.                                                       |
| currency       | boolean                | Determina se o input deve formatar o valor como moeda. O padrão é false.                            |
| value          | string                 | Valor atual do input                                                                                |
| onChangeText   | (text: string) => void | Função de retorno de chamada chamada quando o texto do input é alterado.                            |


### Componente MaskedInput

O componente `MaskedInput` é um campo de entrada que aplica uma máscara ao texto inserido, ideal para entradas como números de telefone, CPF, CNPJ, entre outros. Ele também suporta a exibição de rótulos, mensagens de ajuda e erros.

##### Propriedades

| Nome           | Tipo                   | Descrição                                                                                                         |
|----------------|------------------------|-------------------------------------------------------------------------------------------------------------------|
| mask           | Mask                   | A máscara a ser aplicada ao texto.                                                                                |
| label          | string                 | Rótulo do campo de entrada.                                                                                       |
| placeholder    | string                 | Texto a ser exibido quando o campo estiver vazio.                                                                 |
| helperText     | string                 | Texto de ajuda exibido abaixo do campo.                                                                           |
| error          | string                 | Mensagem de erro exibida se houver um erro.                                                                       |
| size           | 'sm' \| 'md' \| 'lg'   | Tamanho do campo. Por padrão é 'md'.                                                                              |
| readOnly       | boolean                | Indica se o campo é somente leitura.                                                                              |
| textStyle      | TextStyle              | Estilos adicionais para o texto do campo.                                                                         |
| containerStyle | ViewStyle              | Estilos adicionais para o contêiner do campo.                                                                     |
| startSlot      | React.ReactNode        | Componente a ser renderizado antes do campo de entrada.                                                           |
| endSlot        | React.ReactNode        | Componente a ser renderizado após o campo de entrada.                                                             |
| onChangeText   | (text: string) => void | Função chamada quando o texto no campo é alterado.                                                                |
| style          | ViewStyle              | Estilos adicionais para o campo de entrada.                                                                       |

## Exemplo de Uso

```tsx
import React from 'react';
import { MaskedInput, Masks } from '@paggue/react-native-jarvis';

const MyComponent = () => {
  const handleTextChange = (text: string) => {
    console.log('Texto sem máscara:', text);
  };

  return (
    <MaskedInput
      mask={Masks.BRL_PHONE}
      label="Telefone (com máscara)"
      placeholder="Digite seu telefone"
      helperText="Digite seu telefone com DDD"
      error=""
      size="md"
      onChangeText={handleTextChange}
    />
  );
};

export default MyComponent;
```

### RadioGroup
O componente RadioGroup permite que o usuário selecione uma opção entre várias. Ele exibe uma lista de opções de rádio e permite que o usuário selecione uma delas.

#### Uso
```jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { RadioGroup } from '@paggue/react-native-jarvis';

const App = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const options = [
    { label: 'Opção 1', value: 'option1' },
    { label: 'Opção 2', value: 'option2' },
    { label: 'Opção 3', value: 'option3' },
  ];

  const handleSelect = (value) => {
    setSelectedOption(value);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RadioGroup
        label="Selecione uma opção"
        options={options}
        onSelect={handleSelect}
        selectedValue={selectedOption}
      />
    </View>
  );
};

export default App;
```

#### Props

| Propriedade    | Tipo                                              | Descrição                                                                                                                                                                          |
|----------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| label          | string                                            | Define o rótulo do grupo de rádio.                                                                                                                                                 |
| options        | RadioOption[] ({label: 'string', value: 'value'}) | Requerido. Uma matriz de objetos representando as opções de rádio. Cada objeto deve ter uma propriedade label para o texto da opção e uma propriedade value para o valor da opção. |
| onSelect       | (value: string) => void)                          | Requerido. Função de retorno de chamada chamada quando uma opção é selecionada. Recebe o valor da opção selecionada como argumento.                                                |
| textStyle      | TextStyle                                         | Opcional. Estilos adicionais para o texto das opções.                                                                                                                              |
| containerStyle | ViewStyle                                         | Opcional. Estilos adicionais para o contêiner do grupo de rádio.                                                                                                                   |
| helperText     | string                                            | Opcional. Define um texto de ajuda para o grupo de rádio.                                                                                                                          |
| error          | string                                            | Opcional. Define um texto de erro para o grupo de rádio.                                                                                                                           |

### Select
O componente Select permite ao usuário selecionar uma opção de uma lista de itens.

#### Uso
```jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { Select } from '@paggue/react-native-jarvis';

const options = [
  { label: 'Opção 1', value: 'opcao1' },
  { label: 'Opção 2', value: 'opcao2' },
  { label: 'Opção 3', value: 'opcao3' },
];

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <View>
      <Select
        label="Selecione uma opção"
        placeholder="Selecione..."
        options={options}
        onSelect={handleSelect}
      />
    </View>
  );
};

export default MyComponent;
```

#### Props

| Propriedade    | Tipo                     | Descrição                                         |
|----------------|--------------------------|---------------------------------------------------|
| label          | string                   | Texto exibido como rótulo do campo                |
| placeholder    | string                   | Texto exibido quando nenhum item é selecionado    |
| helperText     | string                   | Texto de auxílio exibido abaixo do campo          |
| error          | string                   | Mensagem de erro exibida abaixo do campo          |
| size           | 'sm','md' ou 'lg'        | Tamanho do componente (pequeno, médio ou grande)  |
| readOnly       | boolean                  | Define se o campo é somente leitura               |
| options        | Option[]                 | Lista de opções para selecionar                   |
| onSelect       | (option: Option) => void | Função chamada quando uma opção é selecionada     |
| textStyle      | TextStyle                | Estilos adicionais para o texto do componente     |
| containerStyle | ViewStyle                | Estilos adicionais para o contêiner do componente |

#### Option Props
| Propriedade | Tipo                     | Descrição       |
|-------------|--------------------------|-----------------|
| label       | string                   | Texto da opção  |
| value       | string                   | Valor da opção  |


### Grid
O componente Grid é usado para exibir itens em uma grade flexível, permitindo o controle da direção da grade e do espaçamento entre os itens.

#### Uso
```jsx
import React from 'react';
import { View, Text } from 'react-native';
import { Grid } from '@paggue/react-native-jarvis';

const MyComponent = () => {
  return (
    <Grid spacing={10} direction="row" style={styles.grid}>
      <View style={styles.item}><Text>Item 1</Text></View>
      <View style={styles.item}><Text>Item 2</Text></View>
      <View style={styles.item}><Text>Item 3</Text></View>
      <View style={styles.item}><Text>Item 4</Text></View>
      <View style={styles.item}><Text>Item 5</Text></View>
    </Grid>
  );
};

const styles = {
  grid: {
    backgroundColor: '#eee',
  },
  item: {
    width: 100,
    height: 100,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
};

export default MyComponent;
```

#### Props

| Propriedade | Tipo                 | Descrição                                       |
|-------------|----------------------|-------------------------------------------------|
| spacing     | number               | Espaçamento entre os itens na grade (padrão: 0) |
| direction   | 'row' ou 'column'    | Direção da grade (padrão: 'row')                |


# Hook useToast

O hook `useToast` permite exibir mensagens de notificação (toast) em sua aplicação.

## Uso

1. Envolver o componente raiz de sua aplicação com o ToastProvider:
```jsx
import React from 'react';
import { ToastProvider } from '@paggue/react-native-jarvis';
import App from './App';

const Root = () => {
  return (
    <ToastProvider>
      <App />
    </ToastProvider>
  );
};

export default Root;
```
O ToastProvider garante que o contexto do useToast esteja disponível para todos os componentes descendentes. Isso permite que você chame showToast de qualquer lugar da sua aplicação.

2. Importe o hook `useToast` em seu componente:

```jsx
import { useToast, Button } from '@paggue/react-native-jarvis';

const MyComponent = () => {
  const { showToast } = useToast();

  const handleClick = () => {
    showToast('success', 'Sucesso', 'Operação realizada com sucesso!');
  };

  return (
    <Button onClick={handleClick}>Mostrar Toast</Button>
  );
};
```

# Hook useTheme

O hook `useTheme` permite acessar o tema da aplicação e a função `updateTheme` para atualizar o tema.

## Uso

1. Envolver o componente raiz de sua aplicação com o ThemeProvider:
```jsx
import React from 'react';
import { ThemeProvider } from '@paggue/react-native-jarvis';
import App from './App';

const Root = () => {
  return (
    <ThemeProvider customTheme={{ primary: '#00FF00' }}>
      <App />
    </ThemeProvider>
  );
};

export default Root;

```

2. Importe o hook `useTheme` em seu componente:

```jsx
import { useTheme } from '@paggue/react-native-jarvis';
```

3. Use o hook dentro de um componente funcional para acessar o objeto theme:

```jsx
const MyComponent = () => {
  const { theme } = useTheme();

  return (
    <Text style={{ color: theme.text }}>Texto com cor do tema</Text>
  );
};

```

# Hook useTransitionStatus

O hook `useTransitionStatus` permite acessar o componente `transitionStatus`.

## Uso

1. Envolver o componente raiz de sua aplicação com o TransitionProvider:
```jsx
import React from 'react';
import { ThemeProvider } from '@paggue/react-native-jarvis';
import App from './App';

const Root = () => {
  return (
    <TransitionProvider>
      <App />
    </TransitionProvider>
  );
};

export default Root;
```

2. Importe o hook `useTransitionStatus` em seu componente:

```jsx
import { useTransitionStatus } from '@paggue/react-native-jarvis';
```

3. Use o transitionStatus com open ou close da seguinte maneira:

```jsx
  transitionStatus.open({
    title: 'erro na compra',
    message: 'erro teste',
    type: 'error',
    confirmText: 'fechar',
                      })
```

#### Props

| Propriedade    | Tipo                           | Descrição                                                 |
|----------------|--------------------------------|-----------------------------------------------------------|
| title          | string                         | O título da modal                                         |
| message        | string                         | O texto de mensagem logo abaixo do ícon                   |
| type           | 'success','loading' ou 'error' | Tipo de modal que será exibido                            |
| onConfirm      | function                       | A função de confirmação ao clicar no botao de confirmação |
| iconTransition | elemento jsx                   | Tamanho do componente (pequeno, médio ou grande)          |
| onClose        | function                       | A função de confirmação ao clicar no botao de confirmação |



# Funções de Utilidade

Este módulo contém diversas funções de utilidade para manipulação de números, formatação de moeda, geração de hashes, e manipulação de cores.

## formatNumber

Esta função formata um número com a quantidade de casas decimais desejada e pode substituir o ponto decimal por uma vírgula. Aceita os seguintes parâmetros:

- `amount`: O número a ser formatado.
- `scale`: O número de casas decimais desejadas (padrão é 2).
- `radix`: O caractere a ser utilizado como separador decimal (padrão é `,`).
- `mapToRadix`: O caractere a ser utilizado como separador de milhares (padrão é `.`).

Exemplo de uso:

```javascript
import { formatNumber } from '@paggue/react-native-jarvis';

const formattedNumber = formatNumber(1234.5678, 2, ',', '.');
console.log(formattedNumber); // Saída: '1.234,57'
```

## centsToBRL
Esta função converte um valor em centavos para o formato de moeda brasileira. Aceita os seguintes parâmetros:

- number: O valor em centavos a ser convertido (padrão é 0).
- abs: Um valor booleano indicando se o número deve ser tratado como absoluto (padrão é false).

```jsx
import { centsToBRL } from '@paggue/react-native-jarvis';

const formattedCurrency = centsToBRL(123456, true);
console.log(formattedCurrency); // Saída: 'R$ 1.234,56'
```

## formatCurrency
Esta função formata um valor em centavos para o formato de moeda, dividindo por 100. Aceita os seguintes parâmetros:

- cents: O valor em centavos a ser formatado.

```jsx
import { formatCurrency } from '@paggue/react-native-jarvis';

const formattedCurrency = formatCurrency(123456);
console.log(formattedCurrency); // Saída: '1234.56'
```

## generateHash

Esta função gera um hash aleatório com o comprimento especificado. Aceita os seguintes parâmetros:

- length: O comprimento do hash gerado.
- prefix: O prefixo a ser adicionado ao hash (padrão é vazio).
- suffix: O sufixo a ser adicionado ao hash (padrão é vazio).

```jsx
import { generateHash } from '@paggue/react-native-jarvis';

const hash = generateHash(8, 'prefix-', '-suffix');
console.log(hash); // Saída: 'prefix-4A2g8h7R-suffix'
```

## darkenColor

Esta função escurece uma cor em hexadecimal pelo percentual especificado. Aceita os seguintes parâmetros:

- hex: A cor em hexadecimal a ser escurecida.
- percent: O percentual de escurecimento.

```jsx
import { darkenColor } from '@paggue/react-native-jarvis';

const darkenedColor = darkenColor('#FF0000', 20);
console.log(darkenedColor); // Saída: '#990000'
```

## lightenColor

Esta função clareia uma cor em hexadecimal pelo percentual especificado. Aceita os seguintes parâmetros:

- hex: A cor em hexadecimal a ser clareada.
- percent: O percentual de clareamento.

```jsx
import { lightenColor } from '@paggue/react-native-jarvis';

const lightenedColor = lightenColor('#0000FF', 20);
console.log(lightenedColor); // Saída: '#3333FF'
```

## sleep

Esta função pausa a execução por um determinado número de milissegundos. Aceita os seguintes parâmetros:

- ms: O número de milissegundos a aguardar.

```jsx
import { sleep } from '@paggue/react-native-jarvis';

async function delay() {
  console.log('Início');
  await sleep(2000);
  console.log('Após 2 segundos');
}

delay();
```

## License

MIT

---