286 lines
6.8 KiB
Markdown
286 lines
6.8 KiB
Markdown
# 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:**
|
|
```tsx
|
|
<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:**
|
|
```tsx
|
|
<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:**
|
|
```tsx
|
|
<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:**
|
|
```tsx
|
|
<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:**
|
|
```tsx
|
|
<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** ✅
|
|
|