🚀 O que é?

O Albertool Frontend é uma extensão para VSCode que cria toda a estrutura de componentes reutilizáveis do zero — sem instalar dependências, sem configuração manual.

Um clique e sua estrutura está pronta para usar.

✨ O que ele gera?

Albertool Frontend/
├── interfaces/
│   ├── interfaceComp.ts       → Interfaces de todos os componentes
│   └── interfaceUser.ts       → Interfaces de usuário (login, cadastro, etc)
├── utils/
│   └── utils.ts               → Funções de formatação e validação
├── docs/
│   └── README.md              → Documentação de uso
└── components/
    ├── buttons/               → BotaoReu
    ├── inputs/                → InputReu
    ├── cards/                 → CardReu
    ├── modals/                → ModalReu
    ├── images/                → ImagemReu
    ├── lists/                 → ListaReu
    ├── texts/                 → TextoReu
    ├── headers/               → HeaderReu
    ├── badges/                → BadgeReu
    ├── dropdowns/             → DropdownReu
    ├── avatars/               → AvatarReu
    ├── dividers/              → DividerReu
    ├── toasts/                → ToastReu
    └── loadings/              → LoadingReu

🧩 Componentes disponíveis

⚙️ Utils inclusos

Formatação

Validação

Outros

📖 Como usar

1. Instale a extensão

Busque por Albertool Frontend na marketplace do VSCode.

2. Abra uma pasta no VSCode

A extensão precisa de uma workspace aberta para gerar os arquivos.

3. Execute o comando

Abra a paleta de comandos:

Ctrl + Shift + P  (Windows/Linux)
Cmd + Shift + P   (Mac)

Digite:

Albertool: Criar Estrutura Frontend

4. Escolha a plataforma

Selecione React Native ou React Web.

5. Use os componentes

A pasta Albertool Frontend será criada na raiz do projeto. Arraste para dentro do seu projeto e importe:

// React Native
import BotaoReu from './Albertool Frontend/components/buttons/botaoReu'

// React Web
import BotaoReu from './Albertool Frontend/components/buttons/botaoReu'

💡 Exemplo de uso

import BotaoReu from './Albertool Frontend/components/buttons/botaoReu'
import InputReu from './Albertool Frontend/components/inputs/inputReu'

export default function TelaLogin() {
    return (
        <>
            <InputReu
                tamanho={14}
                borda={1}
                corBorda="#ccc"
                obrigatorio="Campo obrigatório"
            />
            <BotaoReu
                texto="Entrar"
                cor="#007AFF"
                tamanho={14}
                borda={8}
                onConfirmar={() => console.log('Login!')}
            />
        </>
    )
}

📌 Observações

• Nenhuma dependência é instalada automaticamente
• Todos os componentes aceitam a prop style para customizações
• Totalmente compatível com TypeScript
• O utils do React Web usa localStorage — o do React Native usa AsyncStorage

🗺️ Roadmap

• [x] React Native — componentes base
• [x] React Web — componentes base
• [x] Interfaces TypeScript
• [x] Utils de formatação e validação
• [ ] Albertool Backend — estrutura de backend pronto para deploy no Railway/Render
• [ ] Tema dark/light nos componentes
• [ ] Mais variantes de componentes

👨‍💻 Autor

Feito com ❤️ por Alberto