Portalweb

O código-fonte deste software é confidencial e não será fornecido. É estritamente proibido realizar engenharia reversa, descompilar ou desmontar o software. É proibido copiar, redistribuir ou sublicenciar este software sem autorização por escrito. A violação destes termos poderá resultar em responsabilização civil e criminal.

Project Structure

src/ ├── app/ # Diretório de app do Next.js 13+ (roteamento) ├── components/ # Componentes React │ ├── ui/ # Componentes de UI reutilizáveis │ ├── layout/ # Componentes de layout │ └── features/ # Componentes específicos de funcionalidades ├── hooks/ # Hooks personalizados do React │ ├── useNavigation.ts # Hook para abstrair navegação da aplicação │ └── ... # Outros hooks personalizados ├── utils/ # Funções utilitárias ├── types/ # Tipos e interfaces TypeScript ├── styles/ # Estilos globais e configuração de tema ├── lib/ # Configurações de bibliotecas de terceiros ├── constants/ # Constantes da aplicação └── public/ # Arquivos estáticos

Directory Details

/src/app

Contém a estrutura de diretório app do Next.js 13+

Responsável pelo roteamento e componentes de página

Inclui layout.tsx para layouts compartilhados

Inclui page.tsx para a página inicial

/src/components

• ui/: Componentes de UI reutilizáveis (ex: Botão, Input, Card)
• layout/: Componentes de layout (ex: Cabeçalho, Rodapé, Barra Lateral)
• features/: Componentes específicos de funcionalidades, que podem não ser reutilizáveis

/src/hooks

• Hooks personalizados do React para lógica compartilhada
• Exemplo: useTheme para gerenciamento de tema
• useNavigation: Abstrai a lógica de navegação comum, fornecendo métodos como:
  • goToHome(): Navega para a página inicial
  • goToLogin(): Navega para a página de login
  • goToOrdersFind(): Navega para a busca de pedidos
  • goToOrderDetail(id): Navega para o detalhe de um pedido
  • goBack(): Volta para a página anterior
  • navigateTo(url): Navega para uma URL específica

/src/utils

-Funções utilitárias para operações comuns -Exemplo: format.ts para formatação de datas e moedas

/src/types

• Interfaces e tipos TypeScript

• Tipos comuns usados em toda a aplicação

/src/constants

• Constantes globais da aplicação
• Rotas, breakpoints e outros valores estáticos

/src/styles

• Estilos globais e configuração de tema

• Configuração do Tailwind CSS (se estiver sendo utilizado)

/src/lib

• Configurações de bibliotecas de terceiros

• Clientes de API e outras integrações externas

/public

Arquivos estáticos (imagens, fontes, etc.)

Favicon e outros arquivos públicos

Componentes

Mantenha os componentes pequenos e com uma única responsabilidade

Use TypeScript para segurança de tipos

Siga o padrão de design atômico quando apropriado

Defina corretamente os tipos de props e valores padrão

Hooks

Crie hooks personalizados para lógica reutilizável

Mantenha os hooks focados em uma funcionalidade específica

Tipifique corretamente os parâmetros e retornos com TypeScript

Styling

Use Tailwind CSS para estilização

Siga uma convenção de nomes consistente

Mantenha os estilos modulares e reutilizáveis

TypeScript

Utilize uma configuração estrita de TypeScript

Defina interfaces apropriadas para todos os componentes e funções

Use inferência de tipos sempre que possível

Code Organization

Mantenha arquivos relacionados próximos uns dos outros

Use arquivos index.ts para importações mais limpas

Siga o princípio do menor privilégio

Getting Started

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Build for production:

npm run build

Development Guidelines

1. Criação de Componentes

Crie os componentes no diretório apropriado

Use TypeScript para segurança de tipos

Adicione documentação apropriada

2. Gerenciamento de Estado

Use hooks do React para estado local

Considere contextos para estado global

Mantenha o estado o mais próximo possível de onde é usado

3. Estilização

Use classes do Tailwind CSS

Mantenha os estilos consistentes entre os componentes

Use variáveis CSS para valores de tema