Padrões do projeto

Estrutura geral

1. /src
   1. /assets
   2. /components
   3. /contexts
   4. /globals
   5. /guards
   6. /hooks
   7. /pages
   8. /services
   9. /shared
   10. /types
   11. /utils
2. .env (.env, .env.production, .env.test)

1 - /src: Pasta contendo todos os arquivos de desenvolvimento.
1.1 - /assets: Todos os arquivos estáticos (imagens, fontes, etc).
1.2 - /components: Todos os componentes do projeto.
1.3 - /contexts: Contextos do projeto, utilizando Context API do React.
1.4 - /globals: Arquivos e componentes utilizados em todo o projeto.
1.5 - /guards: Componentes de Guard, utilizados para proteger acesso de algumas rotas com permissões (Logado, Admin, Empresa, Common).
1.6 - /hooks: Hooks customizados.
1.7 - /pages: Todas as páginas do projeto.
1.8 - /services: Arquivos contendo funções utilizadas para integração com o servidor.
1.9 - /shared: Arquivos com funções compartilhadas em várias partes do projeto.
1.10 - /types: Arquivos com tipos necessários em componentes e páginas.
1.11 - /utils: Arquivos com funções úteis e compartilhadas.

2 - Arquivos .env: Para manter informações constantes (links de API, Bucket do S3, etc) em um local fácil e seguro, utilizamos arquivos ".env".

• .env.production: Informações utilizadas apenas em modo de produção

• .env.test: Informações utilizadas apenas em modo de testes.

Dica

Caso queira utilizar o servidor de testes para testar o painel, descomente a seguinte linha: VITE_API_URL='https://api-desconfieja.com.br:9773'
e comente a linha com mesmo nome que aponta para o servidor local: VITE_API_URL='https://localhost:8443'

Para a criação de páginas e componentes

• nome (Pasta com o nome do componente ou página)
  • index.tsx (Arquivo com todo código TypeScript e lógica)
  • styles.ts (Arquivo com todo código de estilização, feito com Styled-Components)

Importante

Cada página fica dentro de uma pasta com o nome de sua categoria (A página de listagem de depósitos vai dentro de "deposits", por exemplo).

Nomenclatura de páginas e componentes

Os nomes de componentes e páginas sempre iniciam com letra maiúscula:

  function Componente() { ... }

Estrutura do componente

Ao criar um componente ou página, é recomendado manter a seguinte ordem:

  function Componente() {
    // Hooks
    const hook = useHook();

    // Estados
    const [estado, setEstado] = useState();
    const [estado2, setEstado2] = useState();

    // Variáveis
    const variavel = 3;

    // Funções
    function submit() { ... }

    function handleChange() { ... }

    // Effects
    useEffect(() => { ... }, []);

    // Render
    return (
      <Container>
        { ... }
      </Container>
    )
  }