📦 Component Library - VS Code Extension (v1.2.0)

Uma extensão completa para VS Code com snippets de componentes UI pré-moldados para desenvolvimento rápido com HTML/CSS/JavaScript + PHP/Laravel Blade. Inclui gerador de Scaffold CRUD avançado com FormRequests e Policies, módulo de Auth & Permissions, e snippets de comportamentos JavaScript.

✨ Funcionalidades

• 97 Snippets organizados por linguagem (HTML, CSS, JS, PHP, Blade)
• Gerador de Scaffold Laravel 10 - CRUD completo com FormRequests (Store/Update), Policy e middleware admin
• Módulo Auth & Permissions - Setup completo de autenticação com um comando
• Documentação Interativa com Webview de 7 abas (incluindo Segurança e JavaScript)
• Blueprints/Diagramas ASCII para visualizar a composição de páginas
• Placeholders Inteligentes para navegação rápida (Tab/Shift+Tab)
• Prefixo unificado cl- para fácil memorização
• Boas Práticas documentadas para Scaffold, Segurança e JavaScript

🆕 Novidades v1.2.0

🔐 Módulo Auth & Permissions (Ctrl+Shift+A)

• Migration para adicionar coluna is_admin na tabela users
• Middleware AdminOnly para proteger rotas administrativas
• Views de Login e Register com @error e old()
• 4 novos snippets Blade para auth: cl-auth-admin, cl-auth-user, cl-auth-guest, cl-auth-can

🏗️ Scaffold Avançado

• FormRequests separados: Store[Name]Request e Update[Name]Request com regras inteligentes
• Policy gerada automaticamente com métodos view, create, update, delete, restore, forceDelete
• Opção de middleware admin no Scaffold via documentação interativa
• Tipo email adicionado com validação unique automática
• Regras de validação inteligentes por tipo de campo

🎭 JavaScript Behaviors (6 novos snippets)

• cl-js-confirm-delete - Confirmação antes de excluir
• cl-js-alert-close - Auto-fechar alertas
• cl-js-toggle-password - Mostrar/ocultar senha
• cl-js-image-preview - Preview de imagem antes do upload
• cl-js-char-counter - Contador de caracteres
• cl-js-toast - Notificação toast

📚 Documentação Expandida

• Aba Segurança com guia completo de proteção Laravel
• Aba JavaScript com todos os novos snippets documentados
• Seções de Boas Práticas em cada aba

⚡ Comandos

⚡ Gerador de Scaffold Laravel 10

O que é gerado?

Com um único comando, gere um CRUD completo com:

• Controller - Resource Controller com métodos index, create, store, show, edit, update, destroy
• Model - Com $fillable, $casts e scopeSearch
• Migration - Com Schema::create e colunas baseadas nos campos
• StoreRequest - FormRequest com regras de validação para criação
• UpdateRequest - FormRequest com regras de validação para atualização
• Policy - Com métodos view, create, update, delete, restore, forceDelete
• Views - 4 páginas Blade usando os componentes da biblioteca:
  • index.blade.php - Listagem com tabela, busca e paginação
  • create.blade.php - Formulário de criação com @error e old()
  • edit.blade.php - Formulário de edição com @error e old()
  • show.blade.php - Visualização detalhada
• Route - Route::resource injetado automaticamente em routes/web.php

Como usar o Scaffold

Método 1 - Via Comando (Ctrl+Shift+G):

1. Abra um projeto Laravel no VS Code
2. Pressione Ctrl+Shift+G (ou Cmd+Shift+G no Mac)
3. Digite o nome da classe (ex: Produto)
4. Digite os campos (ex: nome:string, preco:decimal, descricao:text, email:email, ativo:boolean)
5. Os arquivos serão gerados automaticamente

Método 2 - Via Documentação:

1. Abra a documentação (Ctrl+Shift+D)
2. Vá para a aba "Scaffold"
3. Preencha o formulário interativo (incluindo opção de middleware admin)
4. Clique em "Gerar CRUD Completo"

Tipos de Campos Suportados

Exemplo de Uso

# Comando via Command Palette
Component Library: Generate Scaffold

# Input 1 - Nome da Classe:
Produto

# Input 2 - Campos:
nome:string, preco:decimal, descricao:text, email_contato:email, estoque:integer, ativo:boolean

Arquivos gerados:

app/Http/Controllers/ProdutoController.php
app/Http/Requests/StoreProdutoRequest.php
app/Http/Requests/UpdateProdutoRequest.php
app/Models/Produto.php
app/Policies/ProdutoPolicy.php
database/migrations/2026_03_16_..._create_produtos_table.php
resources/views/produtos/index.blade.php
resources/views/produtos/create.blade.php
resources/views/produtos/edit.blade.php
resources/views/produtos/show.blade.php
routes/web.php (rota adicionada)

🔐 Auth & Permissions

O que é gerado?

Com Ctrl+Shift+A, configure autenticação completa:

• Migration - Adiciona coluna is_admin à tabela users
• Middleware AdminOnly - Protege rotas de administração
• View Login - Formulário de login com validação e @error
• View Register - Formulário de registro com validação e @error

Snippets de Auth (Blade)

📁 Estrutura da Extensão

vscode_component_library_extension/
├── package.json                    # Manifesto da extensão (v1.2.0)
├── extension.js                    # Lógica dos comandos (Docs + Scaffold + Auth)
├── snippets/
│   ├── html.code-snippets          # Navbar, Card, Table, Modal, Buttons, Search, Selects
│   ├── css.code-snippets           # Snippets CSS (principal)
│   ├── css-variables.code-snippets # Variáveis :root, cores, tamanhos
│   ├── css-utilities.code-snippets # Classes utilitárias gerais
│   ├── css-flexbox.code-snippets   # Utilitários Flexbox
│   ├── css-grid.code-snippets      # Sistema de Grid
│   ├── css-spacing.code-snippets   # Margens e paddings
│   ├── css-buttons.code-snippets   # Estilos de botões
│   ├── css-forms.code-snippets     # Estilos de formulários, inputs, selects
│   ├── javascript.code-snippets    # Modal, Tabs, Sortable Table
│   ├── javascript-behaviors.code-snippets # 🆕 Confirm Delete, Toast, Toggle Password...
│   ├── php.code-snippets           # Controller, Model, Migration
│   └── blade.code-snippets         # Layout, CRUD views, Scaffold + Auth snippets
├── templates/
│   ├── scaffold/                   # 🆕 Templates do Scaffold (reorganizados)
│   │   ├── controller.template.js  # Controller com Store/Update FormRequests
│   │   ├── model.template.js       # Model com $fillable e $casts
│   │   ├── migration.template.js   # Migration com colunas
│   │   ├── request.template.js     # 🆕 Store + Update FormRequests
│   │   ├── policy.template.js      # 🆕 Policy com autorização
│   │   ├── view-index.template.js  # View de listagem
│   │   ├── view-create.template.js # View de criação
│   │   ├── view-edit.template.js   # View de edição
│   │   └── view-show.template.js   # View de visualização
│   └── auth/                       # 🆕 Templates de Auth
│       ├── migration-add-admin.template.js
│       ├── middleware-admin.template.js
│       ├── view-login.template.js
│       └── view-register.template.js
├── docs/
│   ├── index.html                  # Documentação interativa (7 abas)
│   └── best-practices.md           # Guia de boas práticas
├── examples/
│   ├── listagem-crud.md            # Diagrama de página de listagem
│   ├── cadastro-formulario.md      # Diagrama de página de formulário
│   └── dashboard.md                # Diagrama de dashboard
└── README.md                       # Este arquivo

🚀 Instalação

Pré-requisitos

• Node.js (v16+)
• VS Code (v1.74+)
• vsce - VS Code Extension Manager

Passo 1: Instalar o vsce

npm install -g @vscode/vsce

Passo 2: Empacotar a Extensão

cd /home/ubuntu/vscode_component_library_extension

# Criar o arquivo .vsix
vsce package

# Isso gerará: component-library-snippets-1.2.0.vsix

Passo 3: Instalar no VS Code

Método 1 - Via linha de comando:

code --install-extension component-library-snippets-1.2.0.vsix

Método 2 - Via interface do VS Code:

1. Abra o VS Code
2. Pressione Ctrl+Shift+X (Extensions)
3. Clique nos ... (três pontos) no canto superior direito
4. Selecione "Install from VSIX..."
5. Escolha o arquivo component-library-snippets-1.2.0.vsix
6. Reinicie o VS Code

📖 Como Usar

Usando os Snippets

1. Abra um arquivo com a linguagem desejada (.html, .css, .js, .php, .blade.php)
2. Digite cl- e aguarde o IntelliSense aparecer
3. Selecione o snippet desejado
4. Use Tab para navegar entre os placeholders
5. Preencha os valores e finalize com Escape

Abrindo a Documentação

1. Pressione Ctrl+Shift+P (Command Palette)
2. Digite "Component Library: Open Documentation"
3. Pressione Enter
4. A documentação abrirá ao lado do editor

Atalho: Ctrl+Shift+D (ou Cmd+Shift+D no Mac)

🎨 Lista de Snippets

HTML (cl-*)

CSS (cl-css-*)

Arquivo: css-variables.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-root | Variáveis CSS completas (:root) | | cl-css-colors-palette | Paleta de cores customizada | | cl-css-sizes | Variáveis de tamanhos e breakpoints |

Arquivo: css-utilities.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-colors | Cores de fundo, texto, tipografia | | cl-css-display | Display, visibilidade, posição | | cl-css-borders | Bordas, radius, sombras |

Arquivo: css-flexbox.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-flexbox | Utilitários de Flexbox | | cl-css-flex-container | Container flexbox customizável | | cl-css-flex-center | Layout centralizado com flexbox |

Arquivo: css-grid.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-grid | Sistema de grid 12 colunas | | cl-css-grid-template | Grid template responsivo com CSS Grid | | cl-css-grid-areas | Layout com CSS Grid Areas nomeadas |

Arquivo: css-spacing.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-spacing | Utilitários de margin/padding |

Arquivo: css-buttons.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-buttons | Estilos base de botões | | cl-css-buttons-variants | Variantes adicionais e grupos |

Arquivo: css-forms.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-css-forms | Estilos base de formulários | | cl-css-selects | Estilos para select/dropdown | | cl-css-searchbar | Estilos para barra de pesquisa | | cl-css-checkbox-radio | Estilos para checkbox e radio |

JavaScript (cl-js-*)

Arquivo: javascript.code-snippets | Prefixo | Descrição | |---------|-----------| | cl-js-modal | Script de toggle de modal | | cl-js-tabs | Script de navegação de abas | | cl-js-sortable-table | Script de ordenação de tabela | | cl-js-alert | Script de fechar alertas | | cl-js-form-validation | Validação de formulários | | cl-js-dropdown | Menu dropdown |

Arquivo: javascript-behaviors.code-snippets 🆕 | Prefixo | Descrição | |---------|-----------| | cl-js-confirm-delete | Confirmação antes de excluir registro | | cl-js-alert-close | Auto-fechar alertas com timer | | cl-js-toggle-password | Mostrar/ocultar campo de senha | | cl-js-image-preview | Preview de imagem antes do upload | | cl-js-char-counter | Contador de caracteres em textarea | | cl-js-toast | Notificação toast temporária |

PHP (cl-*)

Blade (cl-blade-*)

🔒 Guia de Segurança

Boas Práticas Laravel

• Sempre use FormRequests para validação (gerados automaticamente pelo Scaffold)
• Use Policies para autorização (geradas automaticamente pelo Scaffold)
• Proteja rotas admin com middleware AdminOnly
• Use @csrf em todos os formulários (já incluído nos snippets)
• Use @method('PUT/DELETE') para métodos HTTP corretos
• Valide todos os inputs - nunca confie em dados do usuário
• Use old() para preservar dados em caso de erro de validação

🏗️ Fluxo de Trabalho Recomendado

Criar uma página de listagem CRUD:

1. Scaffold: Pressione Ctrl+Shift+G e gere o CRUD completo
2. Auth: Pressione Ctrl+Shift+A para configurar autenticação
3. Customize: Use os snippets para adicionar comportamentos JavaScript
4. Proteja: Use os snippets de auth para controle de acesso nas views

Fluxo Manual:

1. Controller: cl-controller-index ou cl-controller-crud
2. View Index: cl-blade-index
3. View Create: cl-blade-create
4. View Edit: cl-blade-edit
5. JavaScript: cl-js-confirm-delete, cl-js-toast, etc.
6. Auth: cl-auth-admin, cl-auth-can, etc.

🔧 Desenvolvimento

Executar em modo de desenvolvimento:

cd /home/ubuntu/vscode_component_library_extension

# Abrir no VS Code
code .

# Pressione F5 para iniciar a depuração
# Uma nova janela do VS Code abrirá com a extensão carregada

Atualizar a versão:

1. Edite package.json e altere a versão
2. Execute vsce package novamente
3. Reinstale o novo .vsix

📝 Personalização

Adicionar novos snippets:

1. Abra o arquivo .code-snippets correspondente em snippets/
2. Adicione um novo objeto seguindo o padrão:

{
  "Nome do Snippet": {
    "prefix": "cl-meu-snippet",
    "body": [
      "<div>",
      "\t${1:placeholder}",
      "</div>"
    ],
    "description": "Descrição do snippet"
  }
}

Placeholders:

• ${1:texto} - Placeholder com texto padrão
• ${1|op1,op2,op3|} - Placeholder com opções (dropdown)
• $0 - Posição final do cursor
• \t - Tabulação
• \n - Nova linha

🤝 Contribuindo

1. Fork o repositório
2. Crie uma branch: git checkout -b feature/meu-snippet
3. Faça suas alterações
4. Commit: git commit -m 'Adiciona novo snippet'
5. Push: git push origin feature/meu-snippet
6. Abra um Pull Request

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🙏 Agradecimentos

• Inspirado nas melhores práticas de Laravel e Bootstrap
• Ícones por Unicode Emoji

Dica: Use Ctrl+Space dentro de um arquivo para forçar o IntelliSense a aparecer e mostrar todos os snippets disponíveis começando com cl-.