Refatoracao geral: limpeza de logs, correcoes de fim de linha, animacoes framer-motion e automacao de deploy no package.json
This commit is contained in:
@@ -1,275 +1,275 @@
|
||||
# 🚀 Setup - Ferramenta de Design do Databook
|
||||
|
||||
## ⚙️ Configuração Inicial
|
||||
|
||||
### Passo 1: Executar a Migration SQL
|
||||
|
||||
A ferramenta requer uma nova tabela no banco de dados. Execute o script SQL fornecido:
|
||||
|
||||
**Arquivo:** `supabase/migrations/006_design_templates.sql`
|
||||
|
||||
#### Opção A: Via Supabase Dashboard
|
||||
|
||||
1. Acesse seu projeto no [Supabase](https://supabase.com)
|
||||
2. Vá para **SQL Editor**
|
||||
3. Clique em **New Query**
|
||||
4. Copie e cole o conteúdo de `supabase/migrations/006_design_templates.sql`
|
||||
5. Clique em **Run** (ou Ctrl+Enter)
|
||||
|
||||
#### Opção B: Via CLI do Supabase
|
||||
|
||||
```bash
|
||||
supabase db push
|
||||
```
|
||||
|
||||
### Passo 2: Verificar a Instalação
|
||||
|
||||
Após executar a migration, verifique se as tabelas foram criadas:
|
||||
|
||||
```sql
|
||||
-- Verificar tabelas
|
||||
SELECT table_name
|
||||
FROM information_schema.tables
|
||||
WHERE table_schema = 'public'
|
||||
AND table_name IN ('design_templates', 'databook_design_aplicacoes');
|
||||
|
||||
-- Verificar templates padrão
|
||||
SELECT nome, tipo, ativo
|
||||
FROM design_templates
|
||||
ORDER BY criado_em DESC;
|
||||
```
|
||||
|
||||
### Passo 3: Acessar a Ferramenta
|
||||
|
||||
1. Inicie o servidor de desenvolvimento:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. Acesse a aplicação em `http://localhost:5173`
|
||||
|
||||
3. Clique em **"Design"** no menu lateral
|
||||
|
||||
4. Você verá a lista de templates padrão
|
||||
|
||||
## 📋 Estrutura de Arquivos Criados
|
||||
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ └── DesignDatabook.tsx # Página principal da ferramenta
|
||||
│
|
||||
├── components/
|
||||
│ └── design/
|
||||
│ ├── TemplateEditor.tsx # Editor de configurações
|
||||
│ └── TemplatePreview.tsx # Preview visual
|
||||
│
|
||||
└── App.tsx # Rota adicionada
|
||||
|
||||
supabase/
|
||||
└── migrations/
|
||||
└── 006_design_templates.sql # Migration do banco de dados
|
||||
```
|
||||
|
||||
## 🎯 Primeiros Passos
|
||||
|
||||
### 1. Explorar Templates Padrão
|
||||
|
||||
1. Acesse a página de Design
|
||||
2. Veja os 8 templates padrão inclusos
|
||||
3. Clique em **"Preview"** para visualizar cada um
|
||||
|
||||
### 2. Criar um Novo Template
|
||||
|
||||
1. Clique em **"Novo Template"**
|
||||
2. Preencha:
|
||||
- **Nome:** Ex: "Capa Azul Escuro"
|
||||
- **Descrição:** Ex: "Template de capa com cores azuis"
|
||||
- **Tipo:** Selecione "Capa Frontal"
|
||||
3. Configure as cores e textos
|
||||
4. Clique em **"Criar"**
|
||||
|
||||
### 3. Editar um Template
|
||||
|
||||
1. Clique em **"Editar"** em um template
|
||||
2. Modifique as configurações
|
||||
3. Clique em **"Atualizar"**
|
||||
|
||||
### 4. Visualizar Preview
|
||||
|
||||
1. Clique em **"Preview"** em um template
|
||||
2. Uma modal mostrará como ficará o template
|
||||
3. Clique em **"Fechar"** para sair
|
||||
|
||||
## 🔧 Troubleshooting
|
||||
|
||||
### Erro: "Tabela não encontrada"
|
||||
|
||||
**Solução:** Execute a migration SQL novamente:
|
||||
```bash
|
||||
supabase db push
|
||||
```
|
||||
|
||||
### Erro: "Permissão negada"
|
||||
|
||||
**Solução:** Verifique se o RLS está desabilitado:
|
||||
```sql
|
||||
ALTER TABLE design_templates DISABLE ROW LEVEL SECURITY;
|
||||
ALTER TABLE databook_design_aplicacoes DISABLE ROW LEVEL SECURITY;
|
||||
```
|
||||
|
||||
### Templates não aparecem
|
||||
|
||||
**Solução:** Verifique se os templates padrão foram inseridos:
|
||||
```sql
|
||||
SELECT COUNT(*) FROM design_templates;
|
||||
```
|
||||
|
||||
Se retornar 0, execute novamente a parte de INSERT da migration.
|
||||
|
||||
### Preview não carrega
|
||||
|
||||
**Solução:** Limpe o cache do navegador (Ctrl+Shift+Delete) e recarregue a página.
|
||||
|
||||
## 📊 Dados de Exemplo
|
||||
|
||||
### Template de Capa
|
||||
|
||||
```json
|
||||
{
|
||||
"nome": "Capa Padrão",
|
||||
"descricao": "Template padrão para capa frontal",
|
||||
"tipo": "capa",
|
||||
"config": {
|
||||
"corPrimaria": "#1a365d",
|
||||
"corSecundaria": "#2b6cb0",
|
||||
"titulo": "BUZIOS 7 PRODUCTION SYSTEM DEVELOPMENT",
|
||||
"subtitulo": "AR HEAD FABRICATION LONG",
|
||||
"cliente": "SAIPEM",
|
||||
"numeroDocumento": "DB-B97-01_S1_VENDOR_DATABOOK",
|
||||
"contrato": "OC 1472739",
|
||||
"fornecedor": "ENGEMETAL"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Template de Divisora
|
||||
|
||||
```json
|
||||
{
|
||||
"nome": "Divisora Minimalista",
|
||||
"descricao": "Template minimalista para divisoras",
|
||||
"tipo": "divisora",
|
||||
"config": {
|
||||
"estilo": "minimalista",
|
||||
"corPrimaria": "#1a365d",
|
||||
"corSecundaria": "#2b6cb0",
|
||||
"bilingue": true,
|
||||
"icone": "📑"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🔄 Fluxo de Uso Completo
|
||||
|
||||
```
|
||||
1. Acessar Design
|
||||
↓
|
||||
2. Visualizar templates padrão
|
||||
↓
|
||||
3. Criar novo template (opcional)
|
||||
↓
|
||||
4. Editar template conforme necessário
|
||||
↓
|
||||
5. Visualizar preview
|
||||
↓
|
||||
6. Aplicar a um databook (próxima fase)
|
||||
↓
|
||||
7. Gerar PDF com design aplicado (próxima fase)
|
||||
```
|
||||
|
||||
## 📱 Responsividade
|
||||
|
||||
A ferramenta é responsiva e funciona em:
|
||||
- ✅ Desktop (1920x1080+)
|
||||
- ✅ Tablet (768x1024)
|
||||
- ✅ Mobile (320x568)
|
||||
|
||||
## 🎨 Personalização
|
||||
|
||||
### Adicionar Novo Tipo de Template
|
||||
|
||||
1. Edite `src/pages/DesignDatabook.tsx`
|
||||
2. Adicione o novo tipo ao enum
|
||||
3. Crie o editor em `TemplateEditor.tsx`
|
||||
4. Crie o preview em `TemplatePreview.tsx`
|
||||
5. Atualize a migration SQL
|
||||
|
||||
### Modificar Cores Padrão
|
||||
|
||||
Edite `supabase/migrations/006_design_templates.sql` na seção de INSERT.
|
||||
|
||||
### Adicionar Novos Campos
|
||||
|
||||
1. Atualize o `config` JSONB na migration
|
||||
2. Adicione o campo no editor
|
||||
3. Adicione o campo no preview
|
||||
|
||||
## 🚀 Deploy em Produção
|
||||
|
||||
### Antes de fazer deploy:
|
||||
|
||||
1. ✅ Testar todos os templates
|
||||
2. ✅ Verificar preview em diferentes navegadores
|
||||
3. ✅ Testar criação/edição/deleção
|
||||
4. ✅ Verificar performance
|
||||
5. ✅ Revisar segurança (RLS)
|
||||
|
||||
### Passos para deploy:
|
||||
|
||||
```bash
|
||||
# 1. Build da aplicação
|
||||
npm run build
|
||||
|
||||
# 2. Push das migrations
|
||||
supabase db push
|
||||
|
||||
# 3. Deploy
|
||||
# (Conforme seu provedor: Vercel, Netlify, etc)
|
||||
```
|
||||
|
||||
## 📚 Documentação Adicional
|
||||
|
||||
- [Ferramenta de Design - Documentação Completa](FERRAMENTA_DESIGN_DATABOOK.md)
|
||||
- [Arquitetura Técnica](docs/ARQUITETURA_TECNICA.md)
|
||||
- [Manual do Usuário](docs/MANUAL_USUARIO.md)
|
||||
|
||||
## ✅ Checklist de Setup
|
||||
|
||||
- [ ] Migration SQL executada
|
||||
- [ ] Tabelas criadas com sucesso
|
||||
- [ ] Templates padrão inseridos
|
||||
- [ ] Página de Design acessível
|
||||
- [ ] Menu Sidebar atualizado
|
||||
- [ ] Preview funcionando
|
||||
- [ ] CRUD completo testado
|
||||
- [ ] Filtros funcionando
|
||||
- [ ] Responsividade verificada
|
||||
- [ ] Pronto para produção
|
||||
|
||||
## 🎉 Conclusão
|
||||
|
||||
A ferramenta de Design do Databook está pronta para uso!
|
||||
|
||||
Você agora pode:
|
||||
- ✅ Criar templates visuais personalizados
|
||||
- ✅ Gerenciar múltiplos estilos
|
||||
- ✅ Visualizar previews em tempo real
|
||||
- ✅ Aplicar designs a databooks
|
||||
- ✅ Manter consistência visual
|
||||
|
||||
---
|
||||
|
||||
**Data:** Novembro 2024
|
||||
**Versão:** 1.0.0
|
||||
**Status:** ✅ Pronto para Uso
|
||||
# 🚀 Setup - Ferramenta de Design do Databook
|
||||
|
||||
## ⚙️ Configuração Inicial
|
||||
|
||||
### Passo 1: Executar a Migration SQL
|
||||
|
||||
A ferramenta requer uma nova tabela no banco de dados. Execute o script SQL fornecido:
|
||||
|
||||
**Arquivo:** `supabase/migrations/006_design_templates.sql`
|
||||
|
||||
#### Opção A: Via Supabase Dashboard
|
||||
|
||||
1. Acesse seu projeto no [Supabase](https://supabase.com)
|
||||
2. Vá para **SQL Editor**
|
||||
3. Clique em **New Query**
|
||||
4. Copie e cole o conteúdo de `supabase/migrations/006_design_templates.sql`
|
||||
5. Clique em **Run** (ou Ctrl+Enter)
|
||||
|
||||
#### Opção B: Via CLI do Supabase
|
||||
|
||||
```bash
|
||||
supabase db push
|
||||
```
|
||||
|
||||
### Passo 2: Verificar a Instalação
|
||||
|
||||
Após executar a migration, verifique se as tabelas foram criadas:
|
||||
|
||||
```sql
|
||||
-- Verificar tabelas
|
||||
SELECT table_name
|
||||
FROM information_schema.tables
|
||||
WHERE table_schema = 'public'
|
||||
AND table_name IN ('design_templates', 'databook_design_aplicacoes');
|
||||
|
||||
-- Verificar templates padrão
|
||||
SELECT nome, tipo, ativo
|
||||
FROM design_templates
|
||||
ORDER BY criado_em DESC;
|
||||
```
|
||||
|
||||
### Passo 3: Acessar a Ferramenta
|
||||
|
||||
1. Inicie o servidor de desenvolvimento:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. Acesse a aplicação em `http://localhost:5173`
|
||||
|
||||
3. Clique em **"Design"** no menu lateral
|
||||
|
||||
4. Você verá a lista de templates padrão
|
||||
|
||||
## 📋 Estrutura de Arquivos Criados
|
||||
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ └── DesignDatabook.tsx # Página principal da ferramenta
|
||||
│
|
||||
├── components/
|
||||
│ └── design/
|
||||
│ ├── TemplateEditor.tsx # Editor de configurações
|
||||
│ └── TemplatePreview.tsx # Preview visual
|
||||
│
|
||||
└── App.tsx # Rota adicionada
|
||||
|
||||
supabase/
|
||||
└── migrations/
|
||||
└── 006_design_templates.sql # Migration do banco de dados
|
||||
```
|
||||
|
||||
## 🎯 Primeiros Passos
|
||||
|
||||
### 1. Explorar Templates Padrão
|
||||
|
||||
1. Acesse a página de Design
|
||||
2. Veja os 8 templates padrão inclusos
|
||||
3. Clique em **"Preview"** para visualizar cada um
|
||||
|
||||
### 2. Criar um Novo Template
|
||||
|
||||
1. Clique em **"Novo Template"**
|
||||
2. Preencha:
|
||||
- **Nome:** Ex: "Capa Azul Escuro"
|
||||
- **Descrição:** Ex: "Template de capa com cores azuis"
|
||||
- **Tipo:** Selecione "Capa Frontal"
|
||||
3. Configure as cores e textos
|
||||
4. Clique em **"Criar"**
|
||||
|
||||
### 3. Editar um Template
|
||||
|
||||
1. Clique em **"Editar"** em um template
|
||||
2. Modifique as configurações
|
||||
3. Clique em **"Atualizar"**
|
||||
|
||||
### 4. Visualizar Preview
|
||||
|
||||
1. Clique em **"Preview"** em um template
|
||||
2. Uma modal mostrará como ficará o template
|
||||
3. Clique em **"Fechar"** para sair
|
||||
|
||||
## 🔧 Troubleshooting
|
||||
|
||||
### Erro: "Tabela não encontrada"
|
||||
|
||||
**Solução:** Execute a migration SQL novamente:
|
||||
```bash
|
||||
supabase db push
|
||||
```
|
||||
|
||||
### Erro: "Permissão negada"
|
||||
|
||||
**Solução:** Verifique se o RLS está desabilitado:
|
||||
```sql
|
||||
ALTER TABLE design_templates DISABLE ROW LEVEL SECURITY;
|
||||
ALTER TABLE databook_design_aplicacoes DISABLE ROW LEVEL SECURITY;
|
||||
```
|
||||
|
||||
### Templates não aparecem
|
||||
|
||||
**Solução:** Verifique se os templates padrão foram inseridos:
|
||||
```sql
|
||||
SELECT COUNT(*) FROM design_templates;
|
||||
```
|
||||
|
||||
Se retornar 0, execute novamente a parte de INSERT da migration.
|
||||
|
||||
### Preview não carrega
|
||||
|
||||
**Solução:** Limpe o cache do navegador (Ctrl+Shift+Delete) e recarregue a página.
|
||||
|
||||
## 📊 Dados de Exemplo
|
||||
|
||||
### Template de Capa
|
||||
|
||||
```json
|
||||
{
|
||||
"nome": "Capa Padrão",
|
||||
"descricao": "Template padrão para capa frontal",
|
||||
"tipo": "capa",
|
||||
"config": {
|
||||
"corPrimaria": "#1a365d",
|
||||
"corSecundaria": "#2b6cb0",
|
||||
"titulo": "BUZIOS 7 PRODUCTION SYSTEM DEVELOPMENT",
|
||||
"subtitulo": "AR HEAD FABRICATION LONG",
|
||||
"cliente": "SAIPEM",
|
||||
"numeroDocumento": "DB-B97-01_S1_VENDOR_DATABOOK",
|
||||
"contrato": "OC 1472739",
|
||||
"fornecedor": "ENGEMETAL"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Template de Divisora
|
||||
|
||||
```json
|
||||
{
|
||||
"nome": "Divisora Minimalista",
|
||||
"descricao": "Template minimalista para divisoras",
|
||||
"tipo": "divisora",
|
||||
"config": {
|
||||
"estilo": "minimalista",
|
||||
"corPrimaria": "#1a365d",
|
||||
"corSecundaria": "#2b6cb0",
|
||||
"bilingue": true,
|
||||
"icone": "📑"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🔄 Fluxo de Uso Completo
|
||||
|
||||
```
|
||||
1. Acessar Design
|
||||
↓
|
||||
2. Visualizar templates padrão
|
||||
↓
|
||||
3. Criar novo template (opcional)
|
||||
↓
|
||||
4. Editar template conforme necessário
|
||||
↓
|
||||
5. Visualizar preview
|
||||
↓
|
||||
6. Aplicar a um databook (próxima fase)
|
||||
↓
|
||||
7. Gerar PDF com design aplicado (próxima fase)
|
||||
```
|
||||
|
||||
## 📱 Responsividade
|
||||
|
||||
A ferramenta é responsiva e funciona em:
|
||||
- ✅ Desktop (1920x1080+)
|
||||
- ✅ Tablet (768x1024)
|
||||
- ✅ Mobile (320x568)
|
||||
|
||||
## 🎨 Personalização
|
||||
|
||||
### Adicionar Novo Tipo de Template
|
||||
|
||||
1. Edite `src/pages/DesignDatabook.tsx`
|
||||
2. Adicione o novo tipo ao enum
|
||||
3. Crie o editor em `TemplateEditor.tsx`
|
||||
4. Crie o preview em `TemplatePreview.tsx`
|
||||
5. Atualize a migration SQL
|
||||
|
||||
### Modificar Cores Padrão
|
||||
|
||||
Edite `supabase/migrations/006_design_templates.sql` na seção de INSERT.
|
||||
|
||||
### Adicionar Novos Campos
|
||||
|
||||
1. Atualize o `config` JSONB na migration
|
||||
2. Adicione o campo no editor
|
||||
3. Adicione o campo no preview
|
||||
|
||||
## 🚀 Deploy em Produção
|
||||
|
||||
### Antes de fazer deploy:
|
||||
|
||||
1. ✅ Testar todos os templates
|
||||
2. ✅ Verificar preview em diferentes navegadores
|
||||
3. ✅ Testar criação/edição/deleção
|
||||
4. ✅ Verificar performance
|
||||
5. ✅ Revisar segurança (RLS)
|
||||
|
||||
### Passos para deploy:
|
||||
|
||||
```bash
|
||||
# 1. Build da aplicação
|
||||
npm run build
|
||||
|
||||
# 2. Push das migrations
|
||||
supabase db push
|
||||
|
||||
# 3. Deploy
|
||||
# (Conforme seu provedor: Vercel, Netlify, etc)
|
||||
```
|
||||
|
||||
## 📚 Documentação Adicional
|
||||
|
||||
- [Ferramenta de Design - Documentação Completa](FERRAMENTA_DESIGN_DATABOOK.md)
|
||||
- [Arquitetura Técnica](docs/ARQUITETURA_TECNICA.md)
|
||||
- [Manual do Usuário](docs/MANUAL_USUARIO.md)
|
||||
|
||||
## ✅ Checklist de Setup
|
||||
|
||||
- [ ] Migration SQL executada
|
||||
- [ ] Tabelas criadas com sucesso
|
||||
- [ ] Templates padrão inseridos
|
||||
- [ ] Página de Design acessível
|
||||
- [ ] Menu Sidebar atualizado
|
||||
- [ ] Preview funcionando
|
||||
- [ ] CRUD completo testado
|
||||
- [ ] Filtros funcionando
|
||||
- [ ] Responsividade verificada
|
||||
- [ ] Pronto para produção
|
||||
|
||||
## 🎉 Conclusão
|
||||
|
||||
A ferramenta de Design do Databook está pronta para uso!
|
||||
|
||||
Você agora pode:
|
||||
- ✅ Criar templates visuais personalizados
|
||||
- ✅ Gerenciar múltiplos estilos
|
||||
- ✅ Visualizar previews em tempo real
|
||||
- ✅ Aplicar designs a databooks
|
||||
- ✅ Manter consistência visual
|
||||
|
||||
---
|
||||
|
||||
**Data:** Novembro 2024
|
||||
**Versão:** 1.0.0
|
||||
**Status:** ✅ Pronto para Uso
|
||||
|
||||
Reference in New Issue
Block a user