217 lines
5.3 KiB
Markdown
217 lines
5.3 KiB
Markdown
# PlatformSistemas
|
|
|
|
<!-- Test for auto-sync -->
|
|
Sistema de gestão integrada desenvolvido em React + TypeScript + Vite.
|
|
|
|
## 🚀 Repositório
|
|
|
|
- **Remote**: https://git.itguys.com.br/itguys_dev/Workspace
|
|
- **Branch**: `frontend_React`
|
|
|
|
## 📋 Índice
|
|
|
|
- [Início Rápido](#início-rápido)
|
|
- [Scripts Disponíveis](#scripts-disponíveis)
|
|
- [Git Auto-Sync](#git-auto-sync)
|
|
- [Estrutura do Projeto](#estrutura-do-projeto)
|
|
- [Tecnologias](#tecnologias)
|
|
- [Desenvolvimento](#desenvolvimento)
|
|
|
|
## 🎯 Início Rápido
|
|
|
|
### Pré-requisitos
|
|
|
|
- Node.js (v18 ou superior)
|
|
- npm ou yarn
|
|
- Git
|
|
|
|
### Instalação
|
|
|
|
```bash
|
|
# Clone o repositório
|
|
git clone https://git.itguys.com.br/itguys_dev/Workspace.git
|
|
cd PlatformSistemas
|
|
|
|
# Instale as dependências
|
|
npm install
|
|
|
|
# Configure as variáveis de ambiente
|
|
cp .env.example .env
|
|
# Edite o arquivo .env com suas configurações
|
|
|
|
# Inicie o servidor de desenvolvimento
|
|
npm run dev
|
|
```
|
|
|
|
## 📜 Scripts Disponíveis
|
|
|
|
```bash
|
|
# Desenvolvimento
|
|
npm run dev # Inicia o servidor de desenvolvimento
|
|
|
|
# Build
|
|
npm run build # Gera build de produção
|
|
npm run preview # Preview do build de produção
|
|
|
|
# Qualidade de Código
|
|
npm run lint # Executa ESLint
|
|
|
|
# Git Auto-Sync
|
|
npm run git:sync # Inicia monitoramento Git com build automático
|
|
npm run git:sync:nobuild # Inicia monitoramento Git sem build automático
|
|
```
|
|
|
|
## 🔄 Git Auto-Sync
|
|
|
|
O **Git Auto-Sync** é um sistema de automação que monitora alterações no projeto e realiza commits/push automáticos.
|
|
|
|
### Como Usar
|
|
|
|
```bash
|
|
# Com build automático (recomendado para produção)
|
|
npm run git:sync
|
|
|
|
# Sem build automático (mais rápido para desenvolvimento)
|
|
npm run git:sync:nobuild
|
|
```
|
|
|
|
### Características
|
|
|
|
- ✅ Monitoramento em tempo real de alterações
|
|
- ✅ Debounce de 10 segundos (agrupa alterações)
|
|
- ✅ Build automático antes de cada commit
|
|
- ✅ Filtragem inteligente de arquivos
|
|
- ✅ Mensagens de commit descritivas
|
|
|
|
### Documentação Completa
|
|
|
|
Para mais detalhes, consulte [GIT-AUTO-SYNC.md](./GIT-AUTO-SYNC.md)
|
|
|
|
## 📁 Estrutura do Projeto
|
|
|
|
```
|
|
PlatformSistemas/
|
|
├── src/
|
|
│ ├── components/ # Componentes reutilizáveis
|
|
│ │ ├── access/ # Componentes de acesso
|
|
│ │ ├── admin/ # Componentes administrativos
|
|
│ │ ├── layout/ # Componentes de layout
|
|
│ │ └── ui/ # Componentes de UI
|
|
│ ├── features/ # Features do sistema
|
|
│ │ ├── fleet-v2/ # Gestão de frota
|
|
│ │ └── ...
|
|
│ ├── services/ # Serviços e APIs
|
|
│ ├── hooks/ # Custom hooks
|
|
│ ├── utils/ # Utilitários
|
|
│ └── index.css # Estilos globais
|
|
├── public/ # Arquivos públicos
|
|
├── docs/ # Documentação
|
|
├── .env # Variáveis de ambiente
|
|
├── git-auto-sync.ps1 # Script de automação Git
|
|
└── package.json # Dependências e scripts
|
|
```
|
|
|
|
## 🛠️ Tecnologias
|
|
|
|
### Core
|
|
- **React 19** - Biblioteca UI
|
|
- **TypeScript** - Superset JavaScript
|
|
- **Vite** - Build tool e dev server
|
|
|
|
### UI/UX
|
|
- **TailwindCSS** - Framework CSS
|
|
- **Radix UI** - Componentes acessíveis
|
|
- **Framer Motion** - Animações
|
|
- **Lucide React** - Ícones
|
|
|
|
### Estado e Formulários
|
|
- **Zustand** - Gerenciamento de estado
|
|
- **React Hook Form** - Formulários
|
|
- **Zod** - Validação de schemas
|
|
|
|
### Roteamento e Requisições
|
|
- **React Router DOM** - Roteamento
|
|
- **Axios** - Cliente HTTP
|
|
|
|
### Gráficos
|
|
- **Recharts** - Biblioteca de gráficos
|
|
|
|
## 💻 Desenvolvimento
|
|
|
|
### Variáveis de Ambiente
|
|
|
|
Copie `.env.example` para `.env` e configure:
|
|
|
|
```env
|
|
VITE_API_URL=https://dev.workspace.itguys.com.br/api
|
|
VITE_APP_NAME=PlatformSistemas
|
|
```
|
|
|
|
### Padrões de Código
|
|
|
|
- **Componentes**: Use componentes funcionais com hooks
|
|
- **Tipagem**: Sempre utilize TypeScript
|
|
- **Estilos**: Prefira TailwindCSS
|
|
- **Estado**: Use Zustand para estado global
|
|
- **Formulários**: Use React Hook Form + Zod
|
|
|
|
### ESLint
|
|
|
|
O projeto usa ESLint para garantir qualidade de código:
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
### Estrutura de Componentes
|
|
|
|
```tsx
|
|
// Exemplo de componente
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface MyComponentProps {
|
|
title: string
|
|
onAction?: () => void
|
|
}
|
|
|
|
export function MyComponent({ title, onAction }: MyComponentProps) {
|
|
const [state, setState] = useState(false)
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<h2 className="text-xl font-bold">{title}</h2>
|
|
<Button onClick={onAction}>Ação</Button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## 🔐 Segurança
|
|
|
|
- Nunca commite arquivos `.env` (já está no `.gitignore`)
|
|
- Use variáveis de ambiente para dados sensíveis
|
|
- Mantenha dependências atualizadas
|
|
|
|
## 📝 Documentação Adicional
|
|
|
|
- [Git Auto-Sync](./GIT-AUTO-SYNC.md) - Documentação completa do sistema de automação
|
|
- [API Report](./RELATORIO_API.md) - Relatório de APIs utilizadas
|
|
|
|
## 🤝 Contribuindo
|
|
|
|
1. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`)
|
|
2. Faça commit das suas alterações (`git commit -m 'Adiciona MinhaFeature'`)
|
|
3. Push para a branch (`git push origin feature/MinhaFeature`)
|
|
4. Abra um Pull Request
|
|
|
|
Ou simplesmente use o **Git Auto-Sync** para automação completa! 🚀
|
|
|
|
## 📄 Licença
|
|
|
|
Este projeto é propriedade da ITGuys.
|
|
|
|
---
|
|
|
|
**Desenvolvido com ❤️ pela equipe ITGuys**
|