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

yarn add @paggue/react-native-jarvis

Components

Button

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

Uso

import React from 'react';
import { Button } from '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

import React from 'react';
import { View, Text } from 'react-native';
import { Tabs } from '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

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { Modal } from '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

import React, { useState } from 'react';
import { View } from 'react-native';
import { Input } from '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. |

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

import React, { useState } from 'react';
import { View } from 'react-native';
import { RadioGroup } from '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

import React, { useState } from 'react';
import { View } from 'react-native';
import { Select } from '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

import React from 'react';
import { View, Text } from 'react-native';
import { Grid } from '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:

import React from 'react';
import { ToastProvider } from '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:

import { useToast, Button } from '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:

import React from 'react';
import { ThemeProvider } from '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:

import { useTheme } from 'react-native-jarvis';

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

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:

import React from 'react';
import { ThemeProvider } from 'react-native-jarvis';
import App from './App';

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

export default Root;

2. Importe o hook useTransitionStatus em seu componente:

import { useTransitionStatus } from 'react-native-jarvis';

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

  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:

import { formatNumber } from '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).

import { centsToBRL } from '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.

import { formatCurrency } from '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).

import { generateHash } from '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.

import { darkenColor } from '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.

import { lightenColor } from '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.

import { sleep } from 'react-native-jarvis';

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

delay();

License

MIT