366 lines
8.5 KiB
Markdown
366 lines
8.5 KiB
Markdown
# Sistema de Diseño Unificado - AvanzaCast
|
|
|
|
## 📋 Resumen
|
|
|
|
Se ha implementado un **sistema de diseño unificado** basado en el template **Techwind** para toda la aplicación AvanzaCast, asegurando consistencia visual entre:
|
|
- Landing Page
|
|
- Broadcast Studio
|
|
- Admin Panel
|
|
|
|
---
|
|
|
|
## 🎨 Configuración Tailwind Compartida
|
|
|
|
### Archivo: `tailwind.config.shared.js`
|
|
|
|
#### **Colores Principales**
|
|
```javascript
|
|
{
|
|
primary: {
|
|
// Indigo - Color principal de AvanzaCast
|
|
500: '#8b5cf6',
|
|
600: '#7c3aed', // Principal
|
|
700: '#6d28d9',
|
|
},
|
|
secondary: {
|
|
// Blue - Color secundario
|
|
500: '#3b82f6',
|
|
600: '#2563eb', // Principal
|
|
700: '#1d4ed8',
|
|
},
|
|
dark: '#3c4858',
|
|
black: '#161c2d',
|
|
'dark-footer': '#192132',
|
|
}
|
|
```
|
|
|
|
#### **Tipografía**
|
|
- **Font Family**: Nunito (Google Fonts)
|
|
- **Weights**: 300, 400, 500, 600, 700
|
|
- Fuentes alternativas: Alex Brush (cursiva), EB Garamond (serif)
|
|
|
|
#### **Breakpoints**
|
|
```javascript
|
|
{
|
|
xs: '540px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
}
|
|
```
|
|
|
|
#### **Shadows (Techwind Style)**
|
|
```javascript
|
|
{
|
|
sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
|
|
DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
|
|
md: '0 5px 13px rgb(60 72 88 / 0.20)',
|
|
lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
|
|
xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)',
|
|
'2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)',
|
|
}
|
|
```
|
|
|
|
#### **Animaciones**
|
|
```javascript
|
|
{
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'float-delayed': 'float 6s ease-in-out infinite 3s',
|
|
'fadeInUp': 'fadeInUp 0.6s ease-out',
|
|
'marquee': 'marquee 30s linear infinite',
|
|
'spin-slow': 'spin 10s linear infinite',
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🧩 Componentes UI Compartidos
|
|
|
|
Todos disponibles en `@avanzacast/shared-components`
|
|
|
|
### 1. **Button Component**
|
|
|
|
```tsx
|
|
import { Button } from '@avanzacast/shared-components'
|
|
|
|
// Variantes
|
|
<Button variant="primary">Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
<Button variant="danger">Danger</Button>
|
|
|
|
// Tamaños
|
|
<Button size="sm">Small</Button>
|
|
<Button size="md">Medium</Button>
|
|
<Button size="lg">Large</Button>
|
|
|
|
// Loading state
|
|
<Button isLoading>Processing...</Button>
|
|
```
|
|
|
|
**Props:**
|
|
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
|
|
- `size`: 'sm' | 'md' | 'lg'
|
|
- `isLoading`: boolean
|
|
- Todos los props nativos de `<button>`
|
|
|
|
**Estilos aplicados:**
|
|
- Indigo 600/700 para primary
|
|
- Border radius: `rounded-md`
|
|
- Transition: `duration-500`
|
|
- Disabled state con opacity 60%
|
|
|
|
---
|
|
|
|
### 2. **Card Component**
|
|
|
|
```tsx
|
|
import { Card, CardHeader, CardBody } from '@avanzacast/shared-components'
|
|
|
|
// Variantes
|
|
<Card variant="default">
|
|
<CardHeader>Card Title</CardHeader>
|
|
<CardBody>Card content</CardBody>
|
|
</Card>
|
|
|
|
<Card variant="hover">Hover effect card</Card>
|
|
<Card variant="gradient">Gradient card</Card>
|
|
```
|
|
|
|
**Props:**
|
|
- `variant`: 'default' | 'hover' | 'gradient'
|
|
|
|
**Estilos aplicados:**
|
|
- Rounded: `rounded-xl`
|
|
- Padding: `p-6`
|
|
- Shadow: Techwind shadow system
|
|
- Dark mode support
|
|
|
|
---
|
|
|
|
### 3. **Input & Textarea Components**
|
|
|
|
```tsx
|
|
import { Input, Textarea } from '@avanzacast/shared-components'
|
|
|
|
// Con label y error
|
|
<Input
|
|
label="Email"
|
|
placeholder="tu@email.com"
|
|
error="Email requerido"
|
|
/>
|
|
|
|
// Con helper text
|
|
<Input
|
|
label="Username"
|
|
helperText="Min 3 caracteres"
|
|
/>
|
|
|
|
// Textarea
|
|
<Textarea
|
|
label="Descripción"
|
|
rows={4}
|
|
placeholder="Escribe aquí..."
|
|
/>
|
|
```
|
|
|
|
**Props:**
|
|
- `label`: string
|
|
- `error`: string (muestra mensaje de error en rojo)
|
|
- `helperText`: string (texto de ayuda en gris)
|
|
- Todos los props nativos de `<input>` / `<textarea>`
|
|
|
|
**Estilos aplicados:**
|
|
- Focus ring: indigo-500
|
|
- Error state: red-500
|
|
- Dark mode support
|
|
- Smooth transitions
|
|
|
|
---
|
|
|
|
### 4. **Badge Component**
|
|
|
|
```tsx
|
|
import { Badge } from '@avanzacast/shared-components'
|
|
|
|
// Variantes
|
|
<Badge variant="primary">Primary</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="danger">Danger</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
|
|
// Tamaños
|
|
<Badge size="sm">Small</Badge>
|
|
<Badge size="md">Medium</Badge>
|
|
<Badge size="lg">Large</Badge>
|
|
```
|
|
|
|
**Props:**
|
|
- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
|
|
- `size`: 'sm' | 'md' | 'lg'
|
|
|
|
**Estilos aplicados:**
|
|
- Background: color/10 opacity
|
|
- Rounded: `rounded-md`
|
|
- Dark mode: color/20 opacity
|
|
|
|
---
|
|
|
|
## 📁 Estructura de Archivos Actualizada
|
|
|
|
```
|
|
AvanzaCast/
|
|
├── tailwind.config.shared.js ✅ Nueva - Config compartida
|
|
├── packages/
|
|
│ ├── landing-page/
|
|
│ │ ├── tailwind.config.cjs ✅ Actualizado
|
|
│ │ └── src/
|
|
│ │ └── index.css ✅ Actualizado (Nunito font)
|
|
│ ├── broadcast-studio/
|
|
│ │ └── tailwind.config.cjs ✅ Actualizado
|
|
│ ├── admin-panel/
|
|
│ │ └── tailwind.config.cjs ✅ Actualizado
|
|
│ └── shared-components/
|
|
│ └── src/
|
|
│ ├── Button.tsx ✅ Nuevo
|
|
│ ├── Card.tsx ✅ Nuevo
|
|
│ ├── Input.tsx ✅ Nuevo
|
|
│ ├── Badge.tsx ✅ Nuevo
|
|
│ └── index.ts ✅ Actualizado
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Guía de Uso para Desarrolladores
|
|
|
|
### **1. Importar Componentes Compartidos**
|
|
|
|
```tsx
|
|
// En cualquier módulo (landing-page, broadcast-studio, admin-panel)
|
|
import { Button, Card, Input, Badge } from '@avanzacast/shared-components'
|
|
```
|
|
|
|
### **2. Usar Colores del Sistema**
|
|
|
|
```tsx
|
|
// Usar clases de Tailwind con colores compartidos
|
|
<div className="bg-indigo-600 text-white">
|
|
<h1 className="text-2xl font-semibold">Título</h1>
|
|
</div>
|
|
|
|
// Gradientes
|
|
<div className="bg-gradient-to-t from-indigo-600 to-indigo-500">
|
|
Gradiente
|
|
</div>
|
|
```
|
|
|
|
### **3. Aplicar Sombras Techwind**
|
|
|
|
```tsx
|
|
// Sombras consistentes en toda la app
|
|
<div className="shadow">Default shadow</div>
|
|
<div className="shadow-md">Medium shadow</div>
|
|
<div className="shadow-lg">Large shadow</div>
|
|
<div className="dark:shadow-gray-800">Dark mode shadow</div>
|
|
```
|
|
|
|
### **4. Usar Animaciones**
|
|
|
|
```tsx
|
|
// Animaciones predefinidas
|
|
<div className="animate-float">Floating element</div>
|
|
<div className="animate-fadeInUp">Fade in animation</div>
|
|
<div className="animate-marquee">Marquee scroll</div>
|
|
```
|
|
|
|
### **5. Dark Mode Support**
|
|
|
|
```tsx
|
|
// Todos los componentes soportan dark mode automáticamente
|
|
<Card>
|
|
{/* Se adapta a dark mode automáticamente */}
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
Texto que cambia en dark mode
|
|
</p>
|
|
</Card>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Paleta de Colores Completa
|
|
|
|
### **Primarios**
|
|
- **Indigo**: `indigo-50` a `indigo-900` (Principal de AvanzaCast)
|
|
- **Blue**: `blue-50` a `blue-900` (Secundario)
|
|
|
|
### **Semánticos**
|
|
- **Success**: `green-500`, `green-600`
|
|
- **Danger**: `red-500`, `red-600`
|
|
- **Warning**: `orange-500`, `orange-600`
|
|
- **Info**: `blue-500`, `blue-600`
|
|
|
|
### **Neutrales**
|
|
- **Gray**: `gray-50` a `gray-900`
|
|
- **Dark**: `#3c4858`
|
|
- **Black**: `#161c2d`
|
|
|
|
---
|
|
|
|
## ✅ Checklist de Implementación
|
|
|
|
- [x] Crear `tailwind.config.shared.js` con configuración Techwind
|
|
- [x] Actualizar `tailwind.config.cjs` en landing-page
|
|
- [x] Actualizar `tailwind.config.cjs` en broadcast-studio
|
|
- [x] Actualizar `tailwind.config.cjs` en admin-panel
|
|
- [x] Crear componentes UI compartidos (Button, Card, Input, Badge)
|
|
- [x] Exportar componentes en `@avanzacast/shared-components`
|
|
- [x] Aplicar fuente Nunito en landing-page
|
|
- [ ] Migrar componentes existentes a usar nuevos componentes compartidos
|
|
- [ ] Verificar consistencia visual en las 3 apps
|
|
- [ ] Documentar patrones de diseño adicionales
|
|
|
|
---
|
|
|
|
## 📝 Próximos Pasos
|
|
|
|
1. **Migrar componentes existentes**
|
|
- Reemplazar botones custom por `<Button>` compartido
|
|
- Reemplazar cards custom por `<Card>` compartido
|
|
- Reemplazar inputs custom por `<Input>` compartido
|
|
|
|
2. **Crear componentes adicionales**
|
|
- Modal/Dialog
|
|
- Dropdown/Select
|
|
- Tabs
|
|
- Alert/Toast
|
|
- Avatar
|
|
- Tooltip
|
|
|
|
3. **Optimizar rendimiento**
|
|
- Lazy load de componentes pesados
|
|
- Code splitting por ruta
|
|
- Optimización de imágenes
|
|
|
|
4. **Testing**
|
|
- Unit tests para componentes compartidos
|
|
- Visual regression testing
|
|
- Accessibility testing (A11y)
|
|
|
|
---
|
|
|
|
## 🔗 Referencias
|
|
|
|
- **Techwind Template**: Fuente de inspiración para el diseño
|
|
- **Tailwind CSS**: https://tailwindcss.com/docs
|
|
- **Nunito Font**: https://fonts.google.com/specimen/Nunito
|
|
|
|
---
|
|
|
|
**Última actualización**: 3 de noviembre de 2025
|
|
**Versión**: 1.0.0
|
|
**Autor**: GitHub Copilot
|