# Django Cazenga UI
Biblioteca moderna de componentes UI para Django usando Tailwind CSS v4 e Alpine.js, inspirada no shadcn/ui.
## 🚀 Quick Start
### 1. Instalação
```bash
pip install django-cazenga-ui
```
### 2. Auto-configuração (Recomendado)
```bash
cazenga-setup --auto-configure
```
### 3. Inicialização Interativa
```bash
python manage.py cazenga init --with-tailwind
```
**⚠️ IMPORTANTE**: O comando irá parar e pedir para você adicionar `'theme'` ao `INSTALLED_APPS` manualmente. Após adicionar, digite `1` para continuar.
### 4. Configuração Manual (Alternativa)
Se preferir configurar manualmente antes:
```python
# settings.py
INSTALLED_APPS += [
'tailwind',
'cazenga_ui',
'django_browser_reload',
'mathfilters',
# 'theme', # ← Será adicionado durante 'cazenga init'
]
MIDDLEWARE += [
'django_browser_reload.middleware.BrowserReloadMiddleware',
]
TAILWIND_APP_NAME = 'theme'
NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd" # Windows
# NPM_BIN_PATH = "/usr/local/bin/npm" # macOS/Linux
```
### 5. Diagnóstico e Ajuda
```bash
cazenga-setup # Status e orientações
python manage.py cazenga status # Verificar configuração
```
## 📋 Fluxo Completo de Instalação
### Cenário A: Projeto Novo (Recomendado)
```bash
# 1. Instalar
pip install django-cazenga-ui
# 2. Auto-configurar dependências
cazenga-setup --auto-configure
# ✅ Configura automaticamente settings.py e urls.py
# 3. Inicializar (Processo Interativo)
python manage.py cazenga init --with-tailwind --theme default
# ⏸️ COMANDO IRÁ PARAR e mostrar:
# "📋 Você precisa adicionar a app 'theme' ao INSTALLED_APPS"
#
# 4. Adicionar 'theme' ao settings.py:
# INSTALLED_APPS += ['theme']
#
# 5. Digitar '1' para continuar
# ✅ Comando finaliza automaticamente
# 6. Executar projeto
python manage.py runserver
```
### Cenário B: Configuração Manual
```bash
# 1. Instalar
pip install django-cazenga-ui
# 2. Configurar settings.py manualmente (ver Quick Start)
# 3. Inicializar (mesmo processo interativo)
python manage.py cazenga init --with-tailwind
# 4. Quando parar, adicionar 'theme' ao INSTALLED_APPS
# 5. Digitar '1' para continuar
```
### Cenário C: Diagnóstico de Problemas
```bash
# Se receber "Unknown command: 'cazenga'"
cazenga-setup
# ✅ Mostra status e orientações detalhadas
# Seguir as orientações e depois:
python manage.py cazenga init --with-tailwind
```
## ⚠️ Troubleshooting
### "Unknown command: 'cazenga'"
- **Causa**: `cazenga_ui` não está no `INSTALLED_APPS`
- **Solução**: Adicionar `'cazenga_ui'` ao `INSTALLED_APPS` no settings.py
### "Unknown command: 'tailwind'"
- **Causa**: `tailwind` não está no `INSTALLED_APPS`
- **Solução**: Adicionar `'tailwind'` ao `INSTALLED_APPS` no settings.py
### "TAILWIND_APP_NAME isn't set"
- **Causa**: Configuração incompleta
- **Solução**: Adicionar `TAILWIND_APP_NAME = 'theme'` ao settings.py
## 🎯 Arquitetura
```
projeto/
├── settings.py
│ ├── INSTALLED_APPS = ['tailwind', 'cazenga_ui', 'theme', ...]
│ └── TAILWIND_APP_NAME = 'theme'
├── cazenga_ui/ # ← Biblioteca (pip install)
└── theme/ # ← App Django local (django-tailwind)
├── static_src/ # ← Arquivos fonte CSS
├── static/ # ← CSS compilado
└── templates/ # ← Templates base
```
- **cazenga_ui** = biblioteca com comandos e funcionalidades
- **theme** = app Django local com templates e assets estáticos
---
## 📦 Características
- **53 componentes** prontos para uso
- **6 temas de cores** (azul, laranja, verde, roxo, vermelho, amarelo)
- **333 ícones SVG** do Radix Icons
- **5 arquivos JavaScript** (incluindo sistema SPA completo)
- **Integração opcional** com django-tailwind
- **Comandos CLI** poderosos para gestão de componentes
## 📋 Pré-requisitos
- **Python 3.8+**
- **Django 3.2+**
- **Node.js 16+** (requerido para `--with-tailwind`)
- **npm** (incluído com Node.js)
### Instalação do Node.js
**Windows:**
```bash
# Baixe de: https://nodejs.org
# Ou use chocolatey:
choco install nodejs
```
**macOS:**
```bash
# Usando Homebrew:
brew install node
```
**Linux (Ubuntu/Debian):**
```bash
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```
### Configuração do NPM (Windows)
Se encontrar problemas com npm no Windows, adicione ao `settings.py`:
```python
NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"
```
## 🚀 Instalação
```bash
# Instalação (inclui dependências Tailwind)
pip install django-cazenga-ui
# Nota: também funciona com [tailwind] por compatibilidade
pip install django-cazenga-ui[tailwind]
```
## ⚙️ Configuração
### 1. Adicione ao INSTALLED_APPS
```python
# settings.py
INSTALLED_APPS = [
# ... outras apps
'cazenga_ui',
'tailwind', # se usando django-tailwind
'theme', # se usando django-tailwind
]
```
### 2. Inicialize o projeto
```bash
# Inicialização básica
python manage.py cazenga init
# Com django-tailwind (recomendado)
python manage.py cazenga init --with-tailwind
# Com tema específico
python manage.py cazenga init --theme roxo --with-tailwind
```
### 3. Compile os estilos
```bash
# Se usando django-tailwind
python manage.py tailwind build
# Para desenvolvimento
python manage.py tailwind start
```
## 🎨 Temas Disponíveis
A biblioteca oferece 6 temas de cores pré-configurados:
- **azul** - Tema clássico em tons de azul
- **laranja** - Tema energético em tons de laranja
- **verde** - Tema natural em tons de verde
- **roxo** - Tema moderno em tons de roxo
- **vermelho** - Tema vibrante em tons de vermelho
- **amarelo** - Tema alegre em tons de amarelo
### Alternar Tema
```bash
# Listar temas disponíveis
python manage.py cazenga themes
# Alterar tema atual
python manage.py cazenga switch-theme verde
```
## 📂 Estrutura de Componentes
Os componentes estão organizados em duas pastas principais:
### UI Components (`components/ui/`)
Contém a maioria dos componentes de interface:
- **Básicos**: button, card, badge, avatar
- **Formulários**: input, textarea, checkbox, select, form
- **Navegação**: sidebar, tabs, breadcrumb, pagination
- **Feedback**: alert, progress, skeleton, spinner
- **Overlays**: dialog, modal, drawer, popover, tooltip
- **Interativos**: accordion, carousel, dropdown, toggle
- **Dados**: table, chart, calendar
- **Utilitários**: separator, aspect-ratio, scroll-area
### Layout Components (`components/layout/`)
Contém estruturas de layout de página:
- **layout** - Estruturas de página completas
## 🔧 Comandos CLI
### Comando Principal: `cazenga`
```bash
# Inicializar projeto
python manage.py cazenga init
python manage.py cazenga init --with-tailwind
python manage.py cazenga init --theme roxo
# Gerenciar temas
python manage.py cazenga themes
python manage.py cazenga switch-theme verde
# Verificar status
python manage.py cazenga status
```
### Comando de Componentes: `ui`
```bash
# Listar componentes
python manage.py ui list
python manage.py ui list --category form
python manage.py ui list --folder ui
# Informações de componente
python manage.py ui info button
# Adicionar componentes
python manage.py ui add button
python manage.py ui add form --with-dependencies
# Gerenciar ícones
python manage.py ui icons --install
python manage.py ui icons --count
```
## 💡 Uso Básico
### 1. Adicionar Componentes
```bash
# Instalar um botão
python manage.py ui add button
# Instalar formulário com dependências
python manage.py ui add form --with-dependencies
```
### 2. Usar nos Templates
```html
<!-- Template base -->
{% extends "base.html" %}
{% load icon_tags %}
{% block content %}
<!-- Botão -->
{% include "components/ui/button.html" %}
<!-- Card -->
{% include "components/ui/card.html" %}
<!-- Layout completo -->
{% include "components/layout/layout.html" %}
{% endblock %}
```
### 3. Ícones
```html
{% load icon_tags %}
<!-- Ícone básico -->
{% icon "check" %}
<!-- Com classes CSS -->
{% icon "check" class="w-4 h-4 text-green-500" %}
<!-- Com atributos -->
{% icon "star" class="w-6 h-6" title="Favorito" %}
```
## 🎯 Componentes por Categoria
### Básicos (4 componentes)
- **button** [9 variações] - Botão interativo
- **card** [3 variações] - Container de conteúdo
- **badge** [5 variações] - Rótulos de status
- **avatar** [4 variações] - Imagens de perfil
### Formulários (8 componentes)
- **input** [7 variações] - Campos de texto
- **textarea** [4 variações] - Texto multilinha
- **checkbox** [4 variações] - Seleção múltipla
- **radio-group** [3 variações] - Seleção exclusiva
- **select** [6 variações] - Lista suspensa 🔧
- **switch** [3 variações] - Alternador on/off
- **form** [3 variações] - Container de formulário
- **label** [2 variações] - Rótulos de campos
### Navegação (6 componentes)
- **sidebar** [5 variações] - Painel lateral 🔧
- **tabs** [4 variações] - Navegação em abas 🔧
- **breadcrumb** [3 variações] - Trilha de navegação
- **pagination** [4 variações] - Navegação de páginas
- **navigation-menu** [5 variações] - Menu principal 🔧
- **menubar** [4 variações] - Barra de menu 🔧
### Feedback (5 componentes)
- **alert** [5 variações] - Mensagens de alerta
- **progress** [4 variações] - Indicador de progresso
- **skeleton** [5 variações] - Placeholder animado
- **spinner** [6 variações] - Indicador de carregamento
- **sonner** [8 variações] - Sistema de notificações 🔧
### Overlays (7 componentes)
- **dialog** [5 variações] - Janela modal 🔧
- **alert-dialog** [3 variações] - Dialog de confirmação 🔧
- **drawer** [3 variações] - Painel deslizante 🔧
- **modal** [5 variações] - Modal simples 🔧
- **sheet** [4 variações] - Painel inferior/lateral 🔧
- **popover** [5 variações] - Popup contextual 🔧
- **tooltip** [4 variações] - Dica ao passar mouse 🔧
### Interativos (10 componentes)
- **accordion** [4 variações] - Lista expansível 🔧
- **carousel** [3 variações] - Slider de imagens 🔧
- **collapsible** [3 variações] - Seção recolhível 🔧
- **command** [5 variações] - Paleta de comandos 🔧
- **context-menu** [3 variações] - Menu contextual 🔧
- **dropdown** [5 variações] - Menu suspenso 🔧
- **dropdown-menu** [4 variações] - Menu avançado 🔧
- **hover-card** [4 variações] - Card ao passar mouse 🔧
- **toggle** [4 variações] - Botão de alternância 🔧
- **toggle-group** [3 variações] - Grupo de toggles 🔧
### Dados (3 componentes)
- **table** [5 variações] - Tabela de dados 🔧
- **chart** [4 variações] - Gráficos e visualizações 🔧
- **calendar** [5 variações] - Seletor de data 🔧
### Layout (1 componente)
- **layout** [4 variações] - Estruturas de página
### Utilitários (5 componentes)
- **separator** [2 variações] - Linha divisória
- **aspect-ratio** [3 variações] - Container com proporção
- **scroll-area** [6 variações] - Área com scroll 🔧
- **resizable** [5 variações] - Painéis redimensionáveis 🔧
- **icon** [1 variação] - Sistema de ícones SVG
### Especializados (4 componentes)
- **input-otp** [7 variações] - Input para códigos OTP 🔧
- **slider** [6 variações] - Controle deslizante 🔧
- **text-editor** [6 variações] - Editor de texto rico 🔧
- **content-manager** [4 variações] - Sistema de CMS 🔧
🔧 = Requer JavaScript (Alpine.js)
## 🗂️ Arquivos JavaScript Incluídos
- **spa.js** - Sistema SPA completo (385 linhas)
- **spa-intelligent.js** - SPA com funcionalidades avançadas
- **spa-simple.js** - SPA básico e leve
- **spa-debug.js** - SPA com debug habilitado
- **sidebar-highlight.js** - Destaque automático de links do sidebar
## 📋 Status do Projeto
```bash
# Verificar configuração atual
python manage.py cazenga status
```
## 🤝 Filosofia
Django Cazenga UI **não é uma biblioteca tradicional**. Em vez de importar componentes como "caixa preta", ela **copia o código-fonte diretamente** para seu projeto, dando **controle total** sobre cada linha de código.
### Vantagens:
- ✅ **Controle total** sobre o código
- ✅ **Fácil personalização** de estilos e comportamento
- ✅ **Sem dependências ocultas** em runtime
- ✅ **Código transparente** e modificável
- ✅ **Aprendizado** através do código gerado
## 📚 Exemplos de Uso
### Template Base Completo
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Django Cazenga UI{% endblock %}</title>
{% load tailwind_tags %}
{% tailwind_css %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% load icon_tags %}
</head>
<body class="bg-background text-foreground">
<div id="app">
{% block content %}{% endblock %}
</div>
</body>
</html>
```
### Página com Componentes
```html
{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-6">
<!-- Card com conteúdo -->
<div class="card max-w-md mx-auto">
<div class="card-header">
<h2 class="card-title">Bem-vindo</h2>
<p class="card-description">Sistema Django Cazenga UI</p>
</div>
<div class="card-content">
<!-- Formulário -->
{% include "components/ui/form.html" %}
</div>
<div class="card-footer">
<!-- Botões -->
{% include "components/ui/button.html" %}
</div>
</div>
<!-- Alertas -->
{% include "components/ui/alert.html" %}
<!-- Ícones -->
<div class="flex gap-4 mt-6">
{% icon "check" class="w-6 h-6 text-green-500" %}
{% icon "star" class="w-6 h-6 text-yellow-500" %}
{% icon "heart" class="w-6 h-6 text-red-500" %}
</div>
</div>
{% endblock %}
```
## 🔄 Atualizações
Para manter a biblioteca atualizada:
```bash
pip install --upgrade django-cazenga-ui
```
## 📖 Documentação Adicional
- [Guia de Contribuição](CONTRIBUTING.md)
- [Changelog](CHANGELOG.md)
- [Testes](tests/)
## 📄 Licença
MIT License - veja [LICENSE](LICENSE) para detalhes.
---
**Django Cazenga UI** - Desenvolvimento rápido, controle total. 🚀
Raw data
{
"_id": null,
"home_page": null,
"name": "django-cazenga-ui",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "django, tailwind, ui, components, alpine, shadcn",
"author": null,
"author_email": "Comunidade Cazenga <contato@cazenga.com>",
"download_url": "https://files.pythonhosted.org/packages/4b/2b/9708170eefc7488129ba8095dc0139b4c304b5d327da30440e31fad97d67/django_cazenga_ui-0.1.6.tar.gz",
"platform": null,
"description": "# Django Cazenga UI\r\n\r\nBiblioteca moderna de componentes UI para Django usando Tailwind CSS v4 e Alpine.js, inspirada no shadcn/ui.\r\n\r\n## \ud83d\ude80 Quick Start\r\n\r\n### 1. Instala\u00e7\u00e3o\r\n```bash\r\npip install django-cazenga-ui\r\n```\r\n\r\n### 2. Auto-configura\u00e7\u00e3o (Recomendado)\r\n```bash\r\ncazenga-setup --auto-configure\r\n```\r\n\r\n### 3. Inicializa\u00e7\u00e3o Interativa\r\n```bash\r\npython manage.py cazenga init --with-tailwind\r\n```\r\n**\u26a0\ufe0f IMPORTANTE**: O comando ir\u00e1 parar e pedir para voc\u00ea adicionar `'theme'` ao `INSTALLED_APPS` manualmente. Ap\u00f3s adicionar, digite `1` para continuar.\r\n\r\n### 4. Configura\u00e7\u00e3o Manual (Alternativa)\r\nSe preferir configurar manualmente antes:\r\n\r\n```python\r\n# settings.py\r\nINSTALLED_APPS += [\r\n 'tailwind',\r\n 'cazenga_ui',\r\n 'django_browser_reload',\r\n 'mathfilters',\r\n # 'theme', # \u2190 Ser\u00e1 adicionado durante 'cazenga init'\r\n]\r\n\r\nMIDDLEWARE += [\r\n 'django_browser_reload.middleware.BrowserReloadMiddleware',\r\n]\r\n\r\nTAILWIND_APP_NAME = 'theme'\r\nNPM_BIN_PATH = r\"C:\\Program Files\\nodejs\\npm.cmd\" # Windows\r\n# NPM_BIN_PATH = \"/usr/local/bin/npm\" # macOS/Linux\r\n```\r\n\r\n### 5. Diagn\u00f3stico e Ajuda\r\n```bash\r\ncazenga-setup # Status e orienta\u00e7\u00f5es\r\npython manage.py cazenga status # Verificar configura\u00e7\u00e3o\r\n```\r\n\r\n## \ud83d\udccb Fluxo Completo de Instala\u00e7\u00e3o\r\n\r\n### Cen\u00e1rio A: Projeto Novo (Recomendado)\r\n```bash\r\n# 1. Instalar\r\npip install django-cazenga-ui\r\n\r\n# 2. Auto-configurar depend\u00eancias\r\ncazenga-setup --auto-configure\r\n# \u2705 Configura automaticamente settings.py e urls.py\r\n\r\n# 3. Inicializar (Processo Interativo)\r\npython manage.py cazenga init --with-tailwind --theme default\r\n# \u23f8\ufe0f COMANDO IR\u00c1 PARAR e mostrar:\r\n# \"\ud83d\udccb Voc\u00ea precisa adicionar a app 'theme' ao INSTALLED_APPS\"\r\n# \r\n# 4. Adicionar 'theme' ao settings.py:\r\n# INSTALLED_APPS += ['theme']\r\n# \r\n# 5. Digitar '1' para continuar\r\n# \u2705 Comando finaliza automaticamente\r\n\r\n# 6. Executar projeto\r\npython manage.py runserver\r\n```\r\n\r\n### Cen\u00e1rio B: Configura\u00e7\u00e3o Manual\r\n```bash\r\n# 1. Instalar\r\npip install django-cazenga-ui\r\n\r\n# 2. Configurar settings.py manualmente (ver Quick Start)\r\n\r\n# 3. Inicializar (mesmo processo interativo)\r\npython manage.py cazenga init --with-tailwind\r\n\r\n# 4. Quando parar, adicionar 'theme' ao INSTALLED_APPS\r\n# 5. Digitar '1' para continuar\r\n```\r\n\r\n### Cen\u00e1rio C: Diagn\u00f3stico de Problemas\r\n```bash\r\n# Se receber \"Unknown command: 'cazenga'\"\r\ncazenga-setup\r\n# \u2705 Mostra status e orienta\u00e7\u00f5es detalhadas\r\n\r\n# Seguir as orienta\u00e7\u00f5es e depois:\r\npython manage.py cazenga init --with-tailwind\r\n```\r\n\r\n## \u26a0\ufe0f Troubleshooting\r\n\r\n### \"Unknown command: 'cazenga'\"\r\n- **Causa**: `cazenga_ui` n\u00e3o est\u00e1 no `INSTALLED_APPS`\r\n- **Solu\u00e7\u00e3o**: Adicionar `'cazenga_ui'` ao `INSTALLED_APPS` no settings.py\r\n\r\n### \"Unknown command: 'tailwind'\" \r\n- **Causa**: `tailwind` n\u00e3o est\u00e1 no `INSTALLED_APPS`\r\n- **Solu\u00e7\u00e3o**: Adicionar `'tailwind'` ao `INSTALLED_APPS` no settings.py\r\n\r\n### \"TAILWIND_APP_NAME isn't set\"\r\n- **Causa**: Configura\u00e7\u00e3o incompleta\r\n- **Solu\u00e7\u00e3o**: Adicionar `TAILWIND_APP_NAME = 'theme'` ao settings.py\r\n\r\n## \ud83c\udfaf Arquitetura\r\n\r\n```\r\nprojeto/\r\n\u251c\u2500\u2500 settings.py\r\n\u2502 \u251c\u2500\u2500 INSTALLED_APPS = ['tailwind', 'cazenga_ui', 'theme', ...]\r\n\u2502 \u2514\u2500\u2500 TAILWIND_APP_NAME = 'theme'\r\n\u251c\u2500\u2500 cazenga_ui/ # \u2190 Biblioteca (pip install)\r\n\u2514\u2500\u2500 theme/ # \u2190 App Django local (django-tailwind)\r\n \u251c\u2500\u2500 static_src/ # \u2190 Arquivos fonte CSS\r\n \u251c\u2500\u2500 static/ # \u2190 CSS compilado\r\n \u2514\u2500\u2500 templates/ # \u2190 Templates base\r\n```\r\n\r\n- **cazenga_ui** = biblioteca com comandos e funcionalidades\r\n- **theme** = app Django local com templates e assets est\u00e1ticos\r\n\r\n---\r\n\r\n## \ud83d\udce6 Caracter\u00edsticas\r\n\r\n- **53 componentes** prontos para uso\r\n- **6 temas de cores** (azul, laranja, verde, roxo, vermelho, amarelo)\r\n- **333 \u00edcones SVG** do Radix Icons\r\n- **5 arquivos JavaScript** (incluindo sistema SPA completo)\r\n- **Integra\u00e7\u00e3o opcional** com django-tailwind\r\n- **Comandos CLI** poderosos para gest\u00e3o de componentes\r\n\r\n## \ud83d\udccb Pr\u00e9-requisitos\r\n\r\n- **Python 3.8+**\r\n- **Django 3.2+**\r\n- **Node.js 16+** (requerido para `--with-tailwind`)\r\n- **npm** (inclu\u00eddo com Node.js)\r\n\r\n### Instala\u00e7\u00e3o do Node.js\r\n\r\n**Windows:**\r\n```bash\r\n# Baixe de: https://nodejs.org\r\n# Ou use chocolatey:\r\nchoco install nodejs\r\n```\r\n\r\n**macOS:**\r\n```bash\r\n# Usando Homebrew:\r\nbrew install node\r\n```\r\n\r\n**Linux (Ubuntu/Debian):**\r\n```bash\r\ncurl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -\r\nsudo apt-get install -y nodejs\r\n```\r\n\r\n### Configura\u00e7\u00e3o do NPM (Windows)\r\n\r\nSe encontrar problemas com npm no Windows, adicione ao `settings.py`:\r\n```python\r\nNPM_BIN_PATH = r\"C:\\Program Files\\nodejs\\npm.cmd\"\r\n```\r\n\r\n## \ud83d\ude80 Instala\u00e7\u00e3o\r\n\r\n```bash\r\n# Instala\u00e7\u00e3o (inclui depend\u00eancias Tailwind)\r\npip install django-cazenga-ui\r\n\r\n# Nota: tamb\u00e9m funciona com [tailwind] por compatibilidade\r\npip install django-cazenga-ui[tailwind]\r\n```\r\n\r\n## \u2699\ufe0f Configura\u00e7\u00e3o\r\n\r\n### 1. Adicione ao INSTALLED_APPS\r\n\r\n```python\r\n# settings.py\r\nINSTALLED_APPS = [\r\n # ... outras apps\r\n 'cazenga_ui',\r\n 'tailwind', # se usando django-tailwind\r\n 'theme', # se usando django-tailwind\r\n]\r\n```\r\n\r\n### 2. Inicialize o projeto\r\n\r\n```bash\r\n# Inicializa\u00e7\u00e3o b\u00e1sica\r\npython manage.py cazenga init\r\n\r\n# Com django-tailwind (recomendado)\r\npython manage.py cazenga init --with-tailwind\r\n\r\n# Com tema espec\u00edfico\r\npython manage.py cazenga init --theme roxo --with-tailwind\r\n```\r\n\r\n### 3. Compile os estilos\r\n\r\n```bash\r\n# Se usando django-tailwind\r\npython manage.py tailwind build\r\n\r\n# Para desenvolvimento\r\npython manage.py tailwind start\r\n```\r\n\r\n## \ud83c\udfa8 Temas Dispon\u00edveis\r\n\r\nA biblioteca oferece 6 temas de cores pr\u00e9-configurados:\r\n\r\n- **azul** - Tema cl\u00e1ssico em tons de azul\r\n- **laranja** - Tema energ\u00e9tico em tons de laranja \r\n- **verde** - Tema natural em tons de verde\r\n- **roxo** - Tema moderno em tons de roxo\r\n- **vermelho** - Tema vibrante em tons de vermelho\r\n- **amarelo** - Tema alegre em tons de amarelo\r\n\r\n### Alternar Tema\r\n\r\n```bash\r\n# Listar temas dispon\u00edveis\r\npython manage.py cazenga themes\r\n\r\n# Alterar tema atual\r\npython manage.py cazenga switch-theme verde\r\n```\r\n\r\n## \ud83d\udcc2 Estrutura de Componentes\r\n\r\nOs componentes est\u00e3o organizados em duas pastas principais:\r\n\r\n### UI Components (`components/ui/`)\r\nCont\u00e9m a maioria dos componentes de interface:\r\n- **B\u00e1sicos**: button, card, badge, avatar\r\n- **Formul\u00e1rios**: input, textarea, checkbox, select, form\r\n- **Navega\u00e7\u00e3o**: sidebar, tabs, breadcrumb, pagination\r\n- **Feedback**: alert, progress, skeleton, spinner\r\n- **Overlays**: dialog, modal, drawer, popover, tooltip\r\n- **Interativos**: accordion, carousel, dropdown, toggle\r\n- **Dados**: table, chart, calendar\r\n- **Utilit\u00e1rios**: separator, aspect-ratio, scroll-area\r\n\r\n### Layout Components (`components/layout/`)\r\nCont\u00e9m estruturas de layout de p\u00e1gina:\r\n- **layout** - Estruturas de p\u00e1gina completas\r\n\r\n## \ud83d\udd27 Comandos CLI\r\n\r\n### Comando Principal: `cazenga`\r\n\r\n```bash\r\n# Inicializar projeto\r\npython manage.py cazenga init\r\npython manage.py cazenga init --with-tailwind\r\npython manage.py cazenga init --theme roxo\r\n\r\n# Gerenciar temas\r\npython manage.py cazenga themes\r\npython manage.py cazenga switch-theme verde\r\n\r\n# Verificar status\r\npython manage.py cazenga status\r\n```\r\n\r\n### Comando de Componentes: `ui`\r\n\r\n```bash\r\n# Listar componentes\r\npython manage.py ui list\r\npython manage.py ui list --category form\r\npython manage.py ui list --folder ui\r\n\r\n# Informa\u00e7\u00f5es de componente\r\npython manage.py ui info button\r\n\r\n# Adicionar componentes\r\npython manage.py ui add button\r\npython manage.py ui add form --with-dependencies\r\n\r\n# Gerenciar \u00edcones\r\npython manage.py ui icons --install\r\npython manage.py ui icons --count\r\n```\r\n\r\n## \ud83d\udca1 Uso B\u00e1sico\r\n\r\n### 1. Adicionar Componentes\r\n\r\n```bash\r\n# Instalar um bot\u00e3o\r\npython manage.py ui add button\r\n\r\n# Instalar formul\u00e1rio com depend\u00eancias\r\npython manage.py ui add form --with-dependencies\r\n```\r\n\r\n### 2. Usar nos Templates\r\n\r\n```html\r\n<!-- Template base -->\r\n{% extends \"base.html\" %}\r\n{% load icon_tags %}\r\n\r\n{% block content %}\r\n <!-- Bot\u00e3o -->\r\n {% include \"components/ui/button.html\" %}\r\n \r\n <!-- Card -->\r\n {% include \"components/ui/card.html\" %}\r\n \r\n <!-- Layout completo -->\r\n {% include \"components/layout/layout.html\" %}\r\n{% endblock %}\r\n```\r\n\r\n### 3. \u00cdcones\r\n\r\n```html\r\n{% load icon_tags %}\r\n\r\n<!-- \u00cdcone b\u00e1sico -->\r\n{% icon \"check\" %}\r\n\r\n<!-- Com classes CSS -->\r\n{% icon \"check\" class=\"w-4 h-4 text-green-500\" %}\r\n\r\n<!-- Com atributos -->\r\n{% icon \"star\" class=\"w-6 h-6\" title=\"Favorito\" %}\r\n```\r\n\r\n## \ud83c\udfaf Componentes por Categoria\r\n\r\n### B\u00e1sicos (4 componentes)\r\n- **button** [9 varia\u00e7\u00f5es] - Bot\u00e3o interativo\r\n- **card** [3 varia\u00e7\u00f5es] - Container de conte\u00fado \r\n- **badge** [5 varia\u00e7\u00f5es] - R\u00f3tulos de status\r\n- **avatar** [4 varia\u00e7\u00f5es] - Imagens de perfil\r\n\r\n### Formul\u00e1rios (8 componentes)\r\n- **input** [7 varia\u00e7\u00f5es] - Campos de texto\r\n- **textarea** [4 varia\u00e7\u00f5es] - Texto multilinha\r\n- **checkbox** [4 varia\u00e7\u00f5es] - Sele\u00e7\u00e3o m\u00faltipla\r\n- **radio-group** [3 varia\u00e7\u00f5es] - Sele\u00e7\u00e3o exclusiva\r\n- **select** [6 varia\u00e7\u00f5es] - Lista suspensa \ud83d\udd27\r\n- **switch** [3 varia\u00e7\u00f5es] - Alternador on/off\r\n- **form** [3 varia\u00e7\u00f5es] - Container de formul\u00e1rio\r\n- **label** [2 varia\u00e7\u00f5es] - R\u00f3tulos de campos\r\n\r\n### Navega\u00e7\u00e3o (6 componentes)\r\n- **sidebar** [5 varia\u00e7\u00f5es] - Painel lateral \ud83d\udd27\r\n- **tabs** [4 varia\u00e7\u00f5es] - Navega\u00e7\u00e3o em abas \ud83d\udd27\r\n- **breadcrumb** [3 varia\u00e7\u00f5es] - Trilha de navega\u00e7\u00e3o\r\n- **pagination** [4 varia\u00e7\u00f5es] - Navega\u00e7\u00e3o de p\u00e1ginas\r\n- **navigation-menu** [5 varia\u00e7\u00f5es] - Menu principal \ud83d\udd27\r\n- **menubar** [4 varia\u00e7\u00f5es] - Barra de menu \ud83d\udd27\r\n\r\n### Feedback (5 componentes)\r\n- **alert** [5 varia\u00e7\u00f5es] - Mensagens de alerta\r\n- **progress** [4 varia\u00e7\u00f5es] - Indicador de progresso\r\n- **skeleton** [5 varia\u00e7\u00f5es] - Placeholder animado\r\n- **spinner** [6 varia\u00e7\u00f5es] - Indicador de carregamento\r\n- **sonner** [8 varia\u00e7\u00f5es] - Sistema de notifica\u00e7\u00f5es \ud83d\udd27\r\n\r\n### Overlays (7 componentes)\r\n- **dialog** [5 varia\u00e7\u00f5es] - Janela modal \ud83d\udd27\r\n- **alert-dialog** [3 varia\u00e7\u00f5es] - Dialog de confirma\u00e7\u00e3o \ud83d\udd27\r\n- **drawer** [3 varia\u00e7\u00f5es] - Painel deslizante \ud83d\udd27\r\n- **modal** [5 varia\u00e7\u00f5es] - Modal simples \ud83d\udd27\r\n- **sheet** [4 varia\u00e7\u00f5es] - Painel inferior/lateral \ud83d\udd27\r\n- **popover** [5 varia\u00e7\u00f5es] - Popup contextual \ud83d\udd27\r\n- **tooltip** [4 varia\u00e7\u00f5es] - Dica ao passar mouse \ud83d\udd27\r\n\r\n### Interativos (10 componentes)\r\n- **accordion** [4 varia\u00e7\u00f5es] - Lista expans\u00edvel \ud83d\udd27\r\n- **carousel** [3 varia\u00e7\u00f5es] - Slider de imagens \ud83d\udd27\r\n- **collapsible** [3 varia\u00e7\u00f5es] - Se\u00e7\u00e3o recolh\u00edvel \ud83d\udd27\r\n- **command** [5 varia\u00e7\u00f5es] - Paleta de comandos \ud83d\udd27\r\n- **context-menu** [3 varia\u00e7\u00f5es] - Menu contextual \ud83d\udd27\r\n- **dropdown** [5 varia\u00e7\u00f5es] - Menu suspenso \ud83d\udd27\r\n- **dropdown-menu** [4 varia\u00e7\u00f5es] - Menu avan\u00e7ado \ud83d\udd27\r\n- **hover-card** [4 varia\u00e7\u00f5es] - Card ao passar mouse \ud83d\udd27\r\n- **toggle** [4 varia\u00e7\u00f5es] - Bot\u00e3o de altern\u00e2ncia \ud83d\udd27\r\n- **toggle-group** [3 varia\u00e7\u00f5es] - Grupo de toggles \ud83d\udd27\r\n\r\n### Dados (3 componentes)\r\n- **table** [5 varia\u00e7\u00f5es] - Tabela de dados \ud83d\udd27\r\n- **chart** [4 varia\u00e7\u00f5es] - Gr\u00e1ficos e visualiza\u00e7\u00f5es \ud83d\udd27\r\n- **calendar** [5 varia\u00e7\u00f5es] - Seletor de data \ud83d\udd27\r\n\r\n### Layout (1 componente)\r\n- **layout** [4 varia\u00e7\u00f5es] - Estruturas de p\u00e1gina\r\n\r\n### Utilit\u00e1rios (5 componentes)\r\n- **separator** [2 varia\u00e7\u00f5es] - Linha divis\u00f3ria\r\n- **aspect-ratio** [3 varia\u00e7\u00f5es] - Container com propor\u00e7\u00e3o\r\n- **scroll-area** [6 varia\u00e7\u00f5es] - \u00c1rea com scroll \ud83d\udd27\r\n- **resizable** [5 varia\u00e7\u00f5es] - Pain\u00e9is redimension\u00e1veis \ud83d\udd27\r\n- **icon** [1 varia\u00e7\u00e3o] - Sistema de \u00edcones SVG\r\n\r\n### Especializados (4 componentes)\r\n- **input-otp** [7 varia\u00e7\u00f5es] - Input para c\u00f3digos OTP \ud83d\udd27\r\n- **slider** [6 varia\u00e7\u00f5es] - Controle deslizante \ud83d\udd27\r\n- **text-editor** [6 varia\u00e7\u00f5es] - Editor de texto rico \ud83d\udd27\r\n- **content-manager** [4 varia\u00e7\u00f5es] - Sistema de CMS \ud83d\udd27\r\n\r\n\ud83d\udd27 = Requer JavaScript (Alpine.js)\r\n\r\n## \ud83d\uddc2\ufe0f Arquivos JavaScript Inclu\u00eddos\r\n\r\n- **spa.js** - Sistema SPA completo (385 linhas)\r\n- **spa-intelligent.js** - SPA com funcionalidades avan\u00e7adas\r\n- **spa-simple.js** - SPA b\u00e1sico e leve\r\n- **spa-debug.js** - SPA com debug habilitado\r\n- **sidebar-highlight.js** - Destaque autom\u00e1tico de links do sidebar\r\n\r\n## \ud83d\udccb Status do Projeto\r\n\r\n```bash\r\n# Verificar configura\u00e7\u00e3o atual\r\npython manage.py cazenga status\r\n```\r\n\r\n## \ud83e\udd1d Filosofia\r\n\r\nDjango Cazenga UI **n\u00e3o \u00e9 uma biblioteca tradicional**. Em vez de importar componentes como \"caixa preta\", ela **copia o c\u00f3digo-fonte diretamente** para seu projeto, dando **controle total** sobre cada linha de c\u00f3digo.\r\n\r\n### Vantagens:\r\n- \u2705 **Controle total** sobre o c\u00f3digo\r\n- \u2705 **F\u00e1cil personaliza\u00e7\u00e3o** de estilos e comportamento\r\n- \u2705 **Sem depend\u00eancias ocultas** em runtime\r\n- \u2705 **C\u00f3digo transparente** e modific\u00e1vel\r\n- \u2705 **Aprendizado** atrav\u00e9s do c\u00f3digo gerado\r\n\r\n## \ud83d\udcda Exemplos de Uso\r\n\r\n### Template Base Completo\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>{% block title %}Django Cazenga UI{% endblock %}</title>\r\n \r\n {% load tailwind_tags %}\r\n {% tailwind_css %}\r\n \r\n <script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\r\n {% load icon_tags %}\r\n</head>\r\n<body class=\"bg-background text-foreground\">\r\n <div id=\"app\">\r\n {% block content %}{% endblock %}\r\n </div>\r\n</body>\r\n</html>\r\n```\r\n\r\n### P\u00e1gina com Componentes\r\n\r\n```html\r\n{% extends \"base.html\" %}\r\n\r\n{% block content %}\r\n<div class=\"container mx-auto p-6\">\r\n <!-- Card com conte\u00fado -->\r\n <div class=\"card max-w-md mx-auto\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\">Bem-vindo</h2>\r\n <p class=\"card-description\">Sistema Django Cazenga UI</p>\r\n </div>\r\n <div class=\"card-content\">\r\n <!-- Formul\u00e1rio -->\r\n {% include \"components/ui/form.html\" %}\r\n </div>\r\n <div class=\"card-footer\">\r\n <!-- Bot\u00f5es -->\r\n {% include \"components/ui/button.html\" %}\r\n </div>\r\n </div>\r\n \r\n <!-- Alertas -->\r\n {% include \"components/ui/alert.html\" %}\r\n \r\n <!-- \u00cdcones -->\r\n <div class=\"flex gap-4 mt-6\">\r\n {% icon \"check\" class=\"w-6 h-6 text-green-500\" %}\r\n {% icon \"star\" class=\"w-6 h-6 text-yellow-500\" %}\r\n {% icon \"heart\" class=\"w-6 h-6 text-red-500\" %}\r\n </div>\r\n</div>\r\n{% endblock %}\r\n```\r\n\r\n## \ud83d\udd04 Atualiza\u00e7\u00f5es\r\n\r\nPara manter a biblioteca atualizada:\r\n\r\n```bash\r\npip install --upgrade django-cazenga-ui\r\n```\r\n\r\n## \ud83d\udcd6 Documenta\u00e7\u00e3o Adicional\r\n\r\n- [Guia de Contribui\u00e7\u00e3o](CONTRIBUTING.md)\r\n- [Changelog](CHANGELOG.md)\r\n- [Testes](tests/)\r\n\r\n## \ud83d\udcc4 Licen\u00e7a\r\n\r\nMIT License - veja [LICENSE](LICENSE) para detalhes.\r\n\r\n---\r\n\r\n**Django Cazenga UI** - Desenvolvimento r\u00e1pido, controle total. \ud83d\ude80\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Biblioteca moderna de componentes UI para Django usando Tailwind CSS v4 e Alpine.js",
"version": "0.1.6",
"project_urls": {
"Changelog": "https://github.com/cazenga/django-cazenga-ui/blob/main/CHANGELOG.md",
"Documentation": "https://django-cazenga-ui.readthedocs.io",
"Homepage": "https://github.com/cazenga/django-cazenga-ui",
"Issues": "https://github.com/cazenga/django-cazenga-ui/issues",
"Repository": "https://github.com/cazenga/django-cazenga-ui"
},
"split_keywords": [
"django",
" tailwind",
" ui",
" components",
" alpine",
" shadcn"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "ad99121614dc4edba76260b490b46994955287598755f341cf619f344dc1298c",
"md5": "b2bf68005f751c299d98a3d88bcc90d5",
"sha256": "f6c7315c1b220d07ff66b5d46e0e6f46598df175a33e356a59b8bc09390cb7f8"
},
"downloads": -1,
"filename": "django_cazenga_ui-0.1.6-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b2bf68005f751c299d98a3d88bcc90d5",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 403702,
"upload_time": "2025-07-09T01:40:16",
"upload_time_iso_8601": "2025-07-09T01:40:16.513268Z",
"url": "https://files.pythonhosted.org/packages/ad/99/121614dc4edba76260b490b46994955287598755f341cf619f344dc1298c/django_cazenga_ui-0.1.6-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "4b2b9708170eefc7488129ba8095dc0139b4c304b5d327da30440e31fad97d67",
"md5": "213774f897fb8d3365ce9f8a0e4aace4",
"sha256": "1edd8d4955bb34d7eaaf7d17c94d1fbc30cff23ca31bbce4caa3ddff2cc5e7d0"
},
"downloads": -1,
"filename": "django_cazenga_ui-0.1.6.tar.gz",
"has_sig": false,
"md5_digest": "213774f897fb8d3365ce9f8a0e4aace4",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 239309,
"upload_time": "2025-07-09T01:40:18",
"upload_time_iso_8601": "2025-07-09T01:40:18.792387Z",
"url": "https://files.pythonhosted.org/packages/4b/2b/9708170eefc7488129ba8095dc0139b4c304b5d327da30440e31fad97d67/django_cazenga_ui-0.1.6.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-09 01:40:18",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "cazenga",
"github_project": "django-cazenga-ui",
"github_not_found": true,
"lcname": "django-cazenga-ui"
}
JSON
