AvanzaCast/docs/VRISTO_UI_COMPONENTS.md

Componentes UI Adaptados de Vristo - Studio Panel

Fecha: 2025-11-10

Se han implementado componentes UI profesionales adaptados de Vristo React para el studio-panel, siguiendo el diseño de Figma y la estructura visual mostrada en las imágenes de contexto.

---

📦 Componentes Implementados

1. Modal (Modal.tsx)

Modal reutilizable con Headless UI y Tailwind CSS.

Características:

• ✅ Backdrop blur
• ✅ Animaciones de entrada/salida
• ✅ Tamaños configurables (sm, md, lg, xl, full)
• ✅ Header, body y footer personalizables
• ✅ Botón de cerrar opcional
• ✅ Diseño oscuro consistente

Uso:

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Nueva Escena"
  size="md"
  footer={<ModalFooter />}
>
  {/* Contenido */}
</Modal>

---

2. VerticalTabs (VerticalTabs.tsx)

Tabs verticales para el panel derecho del studio.

Características:

• ✅ Layout vertical con sidebar
• ✅ Iconos personalizables
• ✅ Estados activo/inactivo/disabled
• ✅ Animaciones suaves
• ✅ Border lateral en tab activo (azul)
• ✅ Scroll automático en contenido

Uso:

<VerticalTabs
  tabs={[
    {
      id: 'logo',
      label: 'Logo',
      icon: <PhotoIcon />,
      content: <LogoSettings />
    }
  ]}
/>

---

3. DropdownMenu (DropdownMenu.tsx)

Menú desplegable contextual con Headless UI.

Características:

• ✅ Posicionamiento configurable (4 opciones)
• ✅ Items con iconos
• ✅ Dividers entre secciones
• ✅ Items deshabilitados
• ✅ Items de peligro (rojo)
• ✅ Hover states suaves

Uso:

<DropdownMenu
  button={<EllipsisVerticalIcon />}
  items={[
    { label: 'Editar', onClick: handleEdit },
    { divider: true },
    { label: 'Eliminar', onClick: handleDelete, danger: true }
  ]}
  placement="bottom-end"
/>

---

4. Toggle (Toggle.tsx)

Switch toggle con Headless UI.

Características:

• ✅ Tres tamaños (sm, md, lg)
• ✅ Label y descripción opcionales
• ✅ Estados disabled
• ✅ Focus ring accesible
• ✅ Animaciones smooth

Uso:

<Toggle
  enabled={isEnabled}
  onChange={setIsEnabled}
  label="Mostrar logo"
  description="Activa o desactiva el logo"
  size="md"
/>

---

5. Select (Select.tsx)

Select dropdown personalizado.

Características:

• ✅ Opciones con iconos
• ✅ Placeholder configurable
• ✅ Estados error
• ✅ Label opcional
• ✅ Check mark en opción seleccionada
• ✅ Hover y focus states

Uso:

<Select
  value={position}
  onChange={setPosition}
  options={positionOptions}
  label="Posición del logo"
  placeholder="Seleccionar..."
/>

---

🎨 Paneles Implementados

StudioLeftPanel (panels/StudioLeftPanel.tsx)

Panel izquierdo con escenas (según Figma).

Características:

• ✅ Lista de escenas con thumbnails
• ✅ Header con estado BETA
• ✅ Botón expandir/colapsar
• ✅ Dropdown menu por escena
• ✅ Modal para nueva escena
• ✅ Hover states en cards
• ✅ Dividers entre escenas

---

StudioRightPanel (panels/StudioRightPanel.tsx)

Panel derecho con herramientas (según Figma).

Características:

• ✅ Tabs verticales con iconos
• ✅ 9 secciones configurables:
  • Comentarios
  • Logo (con Toggle y Select)
  • Superposición
  • Código QR
  • Clips de video
  • Fondo
  • Sonidos
  • Música de fondo
  • Notas
• ✅ Configuraciones por sección
• ✅ Estados interactivos

---

🎯 App.tsx Actualizado

Layout completo del studio implementado:

┌─────────────────────────────────────────────────┐
│              HEADER (Brand, Live, Record)       │
├───────┬─────────────────────────────┬──────────┤
│       │                             │          │
│ LEFT  │      MAIN STUDIO AREA       │  RIGHT   │
│ PANEL │   (Video + Controls Bar)    │  PANEL   │
│       │                             │          │
│Escenas│       720p Preview          │Tabs Vert.│
│       │                             │          │
└───────┴─────────────────────────────┴──────────┘

Áreas:

1. Header - Branding, estado EN VIVO, botón Grabar
2. Left Panel - Gestión de escenas (280px)
3. Main Area - Preview de video + barra de controles
4. Right Panel - Herramientas en tabs verticales

---

🎨 Paleta de Colores Aplicada

Fondos

• Principal: bg-[#1f1f1f]
• Secundario: bg-[#1a1a1a]
• Oscuro: bg-[#0f0f0f]
• Superficies: bg-white/[0.02] a bg-white/[0.06]

Bordes

• Sutiles: border-white/10
• Hover: border-white/20
• Activos: border-white/30

Textos

• Primario: text-white
• Secundario: text-white/80
• Terciario: text-white/60
• Muted: text-white/40

Acentos

• Blue: bg-blue-600 / text-blue-400
• Red: bg-red-600 / text-red-400
• Purple: bg-purple-500/20 (BETA badge)

---

🚀 Ventajas de los Componentes

1. Totalmente Tipados - TypeScript strict mode
2. Accesibles - Focus states, ARIA labels, keyboard navigation
3. Responsive - Diseño adaptable
4. Animaciones Suaves - Transiciones de 150-300ms
5. Dark Mode Native - Diseñados para tema oscuro
6. Consistencia Visual - Sigue design tokens de broadcast-panel
7. Reutilizables - Props configurables y flexibles

---

📋 Validaciones

✅ TypeCheck: OK (sin errores) ✅ Lint: OK (sin warnings) ✅ Build: Compatible con Vite ✅ Consistencia: Alineado con broadcast-panel

---

📚 Dependencias Usadas

• @headlessui/react - Componentes accesibles sin estilos
• @heroicons/react - Iconos consistentes
• tailwindcss - Estilos utilitarios

---

🔄 Próximos Pasos Recomendados

1. ✅ Integrar con estado global (Redux/Zustand)
2. ✅ Conectar con backend para guardar configuraciones
3. ✅ Añadir drag & drop para escenas
4. ✅ Implementar preview en tiempo real
5. ✅ Añadir más opciones de personalización
6. ✅ Tests unitarios para componentes

---

📝 Archivos Creados/Modificados

Nuevos Componentes UI:

• src/components/ui/Modal.tsx
• src/components/ui/VerticalTabs.tsx
• src/components/ui/DropdownMenu.tsx
• src/components/ui/Toggle.tsx
• src/components/ui/Select.tsx

Paneles:

• src/components/panels/StudioLeftPanel.tsx
• src/components/panels/StudioRightPanel.tsx

Actualizados:

• src/components/ui/index.ts - Exports actualizados
• src/App.tsx - Layout completo del studio
• docs/TAILWIND_STYLES_GUIDE.md - Guía de estilos

---

Implementación completada y validada ✅