neoris/AvanzaCast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AvanzaCast/docs/SISTEMA_DISENO_UNIFICADO.md

8.5 KiB
Raw Blame History

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

{
  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

{
  xs: '540px',
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

Shadows (Techwind Style)

{
  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

{
  '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

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

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

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

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

// En cualquier módulo (landing-page, broadcast-studio, admin-panel)
import { Button, Card, Input, Badge } from '@avanzacast/shared-components'

2. Usar Colores del Sistema

// 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

// 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

// 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

// 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

  • Crear tailwind.config.shared.js con configuración Techwind
  • Actualizar tailwind.config.cjs en landing-page
  • Actualizar tailwind.config.cjs en broadcast-studio
  • Actualizar tailwind.config.cjs en admin-panel
  • Crear componentes UI compartidos (Button, Card, Input, Badge)
  • Exportar componentes en @avanzacast/shared-components
  • 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

Última actualización: 3 de noviembre de 2025
Versión: 1.0.0
Autor: GitHub Copilot