164 lines
4.5 KiB
Markdown
164 lines
4.5 KiB
Markdown
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:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Run the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Build for production:
|
|
```bash
|
|
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
|