@2gofintech/auth v1.0.36

2GO Base Auth

Este pacote contém os componentes base de autenticação e layout do 2GO Bank.

Pré-requisitos

Estado Global:

• Utilize redux toolkit para gerenciar o estado global da aplicação

Teste de Componentes:

• Implemente testes de unidade e integração utilizando Jest e React Testing Library
• gere uma página stats no projeto com a mostra de toda a cobertura de teste

Performance:

• Divida o código com React.lazy e React Suspense para carregar módulos sob demanda, melhorando o tempo de carregamento inicial.
• Exiba validações em tempo real no formulário com mensagens claras.

Responsividade:

• Use Tailwind para criar layouts fluídos, adaptando-se a diferentes dispositivos
• fique perfeitamente utilizável em dispositivos mobile

Acessibilidade (a11y):

• Utilize o shadcn/ui para componentes que já seguem padrões de acessibilidade (como menus e modais).
• Use atributos ARIA e garanta navegação por teclado.

Cores predominantes:

• Preto: #000000
• Amarelo: #EFB207
• Branco: #FFFFFF

Rotas:

• utilizar o react route para criar automaticamente as rotas de todas as páginas
• deixar o sistema adequado para publicação no netlify
• criar robots.txt permitindo que todos os mecanismos de busca encontrem o site da melhor maneira possível
• criar sitemap.xml para que os mecanismos de busca indexem as paginas
• manter robots.txt atualizado
• manter sitemap.xml atualizado

Design:

• Utilizar style guides de acordo com: https://m3.material.io/get-started
• make the design cleaner by adjusting the colors and visual hierarchy
• Header sempre preto com fontes em amarelo
• Logotipo sempre no lado esquerdo do header (https://2gobank.com.br/wp-content/uploads/2023/05/logo-2go-bank.png)
• Footer sempre preto com fontes em amarelo

Números:

• Utilizar numeros no padrão brasileiro
• Utilizar 6 casas decimais quando for cripto
• Utilizar 2 casas decimais quando for moeda corrente

Instalação

npm install @2go/base-auth
# ou
yarn add @2go/base-auth

Configuração

1. Crie um arquivo .env na raiz do seu projeto com as seguintes variáveis:

VITE_AUTH_API_URL=https://api.2gopag.com/access/auth
VITE_API_BASE_URL=https://api.2gopag.com
VITE_ENVIRONMENT=production
VITE_LOGO_URL=https://2gobank.com.br/wp-content/uploads/2023/05/logo-2go-bank.png

2. Instale as dependências necessárias:

npm install @reduxjs/toolkit react-redux react-router-dom @tanstack/react-query crypto-js tailwindcss

3. Configure o Tailwind CSS no seu projeto:

npx tailwindcss init

4. Atualize seu arquivo tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@2go/base-auth/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Uso

1. Importe e configure o Provider no seu arquivo principal (ex: App.tsx):

import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '@2go/base-auth';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        {/* Seu conteúdo aqui */}
      </BrowserRouter>
    </Provider>
  );
}

2. Importe e use os componentes:

import { 
  Login, 
  Header, 
  Footer,
  ProtectedRoute 
} from '@2go/base-auth';

// Exemplo de uso em rotas
function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route 
        path="/dashboard" 
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        } 
      />
    </Routes>
  );
}

3. Para utilizar o serviço de API:

import { apiService } from '@2go/base-auth';

// Exemplo de uso
const fetchUserData = async () => {
  try {
    const userData = await apiService.user.getProfile();
    console.log(userData);
  } catch (error) {
    console.error('Erro ao buscar dados do usuário:', error);
  }
};

Estilização

O pacote utiliza Tailwind CSS para estilização. Certifique-se de que seu projeto está configurado corretamente com o Tailwind CSS e que os estilos estão sendo processados corretamente.

Temas

As cores principais do tema são:

• Preto: #000000
• Amarelo: #EFB207
• Branco: #FFFFFF

Desenvolvimento

Para contribuir com o desenvolvimento:

1. Clone o repositório
2. Instale as dependências: npm install
3. Execute o ambiente de desenvolvimento: npm run dev

Licença

Este projeto é privado e proprietário do 2GO Bank.