From 657565046b6be41623512e889d3f6ccfc8e665b5 Mon Sep 17 00:00:00 2001 From: Cesar Mendivil Date: Tue, 11 Nov 2025 10:47:34 -0700 Subject: [PATCH] feat: implement Studio Panel layout and components with Tailwind CSS --- docs/REMOVED_Hero.md | 21 + docs/TAILWIND_STYLES_GUIDE.md | 162 + docs/VRISTO_UI_COMPONENTS.md | 285 + docs/design-tokens.md | 158 + docs/figma-extracted-tokens.md | 59 + docs/figma-import-report.md | 22 + docs/screenshot_streamyard.png | Bin 0 -> 149290 bytes docs/text40.png | Bin 95547 -> 79046 bytes package-lock.json | 5141 +++++++++++-- packages/landing-page/index.html | 16 +- packages/landing-page/package-lock.json | 6449 ----------------- packages/landing-page/package.json | 8 +- packages/landing-page/postcss.config.cjs | 4 +- .../landing-page/src/components/BackToTop.tsx | 32 +- .../src/components/ModernSaasFooter.tsx | 51 +- .../src/components/StreamingFeatures.tsx | 5 +- packages/landing-page/src/index.css | 201 +- .../src/styles/techwind-animations.css | 77 +- packages/landing-page/tailwind.config.cjs | 3 +- packages/landing-page/vite.config.ts | 15 +- packages/studio-panel/.dockerignore | 19 - packages/studio-panel/.env.local | 4 - packages/studio-panel/.eslintrc.cjs | 0 packages/studio-panel/DOCKER.md | 145 - packages/studio-panel/Dockerfile | 31 - packages/studio-panel/README.md | 14 + .../studio-panel/docs/BROADCAST_STUDIO_UI.md | 234 - .../studio-panel/docs/INTEGRATION_EXAMPLE.tsx | 36 - packages/studio-panel/index.html | 11 +- packages/studio-panel/package.json | 63 +- packages/studio-panel/postcss.config.cjs | 3 +- .../public/assets/Requiner-6RRLM.woff | Bin 17000 -> 0 bytes .../assets/images/app/logo_avanzacast.svg | 1641 ----- .../figma-assets/button-add-scene-icon.svg | 9 - .../public/figma-assets/button-help-icon.svg | 9 - .../public/figma-assets/icon-banners.svg | 9 - .../public/figma-assets/icon-clips.svg | 9 - .../public/figma-assets/icon-comentarios.svg | 9 - .../public/figma-assets/icon-escenas.svg | 3 - .../public/figma-assets/icon-estilo.svg | 9 - .../public/figma-assets/icon-fondo.svg | 9 - .../public/figma-assets/icon-logo.svg | 9 - .../public/figma-assets/icon-musica.svg | 9 - .../public/figma-assets/icon-notas.svg | 9 - .../public/figma-assets/icon-personas.svg | 9 - .../public/figma-assets/icon-qr.svg | 9 - .../public/figma-assets/icon-sonidos.svg | 9 - .../figma-assets/icon-superposicion.svg | 9 - .../public/figma-assets/logo-avanzacast.svg | 9 - .../public/figma-assets/screenshot-design.png | Bin 15314 -> 0 bytes packages/studio-panel/server-package.json | 16 - packages/studio-panel/server.js | 105 - packages/studio-panel/src/App.tsx | 12 +- .../studio-panel/src/components/Avatar.tsx | 38 + .../src/components/BottomControls.tsx | 16 + .../studio-panel/src/components/Button.tsx | 20 + .../studio-panel/src/components/ChatPanel.tsx | 64 + .../src/components/ControlBar.tsx | 14 + .../studio-panel/src/components/Header.tsx | 23 + .../src/components/LivekitConnector.tsx | 109 + .../src/components/LowerThird.tsx | 19 + .../src/components/MediaAssetCard.tsx | 17 + .../src/components/ParticipantCard.tsx | 17 + .../src/components/ParticipantsList.tsx | 30 + .../src/components/RightTools.tsx | 24 + .../studio-panel/src/components/Roster.tsx | 31 + .../src/components/SceneThumbnail.tsx | 14 + .../studio-panel/src/components/Sidebar.tsx | 17 + .../src/components/StudioLayout.tsx | 42 + .../src/components/ThemeToggle.tsx | 35 + .../src/components/ToggleButton.tsx | 10 + .../src/components/ToolbarFloating.tsx | 13 + .../studio-panel/src/components/VideoGrid.tsx | 16 + .../studio-panel/src/components/VideoTile.tsx | 151 + .../components/__tests__/ChatPanel.test.tsx | 16 + .../src/components/__tests__/Roster.test.tsx | 9 + .../src/components/figma/FigmaHeader.tsx | 0 .../src/components/figma/MediaGrid.tsx | 35 - .../src/components/figma/PersonCard.tsx | 0 .../src/components/header/Brand.tsx | 0 .../src/components/header/LiveBadge.tsx | 0 .../src/components/header/RecordButton.tsx | 0 .../src/components/icons/IconCamera.tsx | 11 + .../src/components/icons/IconCameraOn.tsx | 11 + .../src/components/icons/IconMic.tsx | 12 + .../src/components/icons/IconMicOff.tsx | 11 + .../components/ui/AddDestinationDialog.tsx | 0 .../src/components/ui/AddDestinationMenu.tsx | 0 .../studio-panel/src/components/ui/Button.tsx | 27 - .../src/components/ui/ConfirmDialog.tsx | 0 .../studio-panel/src/components/ui/Dialog.tsx | 0 .../studio-panel/src/components/ui/Header.tsx | 67 - .../src/components/ui/IconButton.tsx | 18 - .../src/components/ui/LeftSidePanel.tsx | 72 - .../src/components/ui/RightSidePanel.tsx | 68 - .../src/components/ui/RightSidebar.tsx | 192 - .../src/components/ui/StudioFrame.tsx | 68 - .../studio-panel/src/components/ui/index.ts | 0 .../studio-panel/src/design/figma-tokens.json | 0 packages/studio-panel/src/global.d.ts | 4 - packages/studio-panel/src/hooks/useAssets.ts | 19 - packages/studio-panel/src/hooks/useChat.ts | 14 - .../studio-panel/src/hooks/useDestinations.ts | 41 - packages/studio-panel/src/hooks/usePeople.ts | 18 - packages/studio-panel/src/hooks/useScene.ts | 24 - packages/studio-panel/src/hooks/useStyle.ts | 10 - packages/studio-panel/src/index.css | 192 - .../studio-panel/src/layouts/StudioLayout.tsx | 39 - packages/studio-panel/src/main.tsx | 4 +- packages/studio-panel/src/setupTests.ts | 2 + packages/studio-panel/src/styles.css | 13 + packages/studio-panel/src/styles/globals.css | 30 + packages/studio-panel/src/types/index.d.ts | 18 - packages/studio-panel/ssl/localhost.crt | 20 - packages/studio-panel/ssl/localhost.csr | 15 - packages/studio-panel/ssl/localhost.key | 28 - packages/studio-panel/tailwind.config.cjs | 15 +- packages/studio-panel/token-server.js | 85 - packages/studio-panel/tsconfig.json | 30 +- packages/studio-panel/vite-dev.log | 34 - packages/studio-panel/vite.config.ts | 44 +- ...s.timestamp-1762497626946-f3a7a31a30d1.mjs | 25 - src/styles/custom/pages/_hero.scss | 50 +- 123 files changed, 6382 insertions(+), 10910 deletions(-) create mode 100644 docs/TAILWIND_STYLES_GUIDE.md create mode 100644 docs/VRISTO_UI_COMPONENTS.md create mode 100644 docs/screenshot_streamyard.png delete mode 100644 packages/landing-page/package-lock.json delete mode 100644 packages/studio-panel/.dockerignore delete mode 100644 packages/studio-panel/.env.local delete mode 100644 packages/studio-panel/.eslintrc.cjs delete mode 100644 packages/studio-panel/DOCKER.md delete mode 100644 packages/studio-panel/Dockerfile create mode 100644 packages/studio-panel/README.md delete mode 100644 packages/studio-panel/docs/BROADCAST_STUDIO_UI.md delete mode 100644 packages/studio-panel/docs/INTEGRATION_EXAMPLE.tsx delete mode 100644 packages/studio-panel/public/assets/Requiner-6RRLM.woff delete mode 100644 packages/studio-panel/public/assets/images/app/logo_avanzacast.svg delete mode 100644 packages/studio-panel/public/figma-assets/button-add-scene-icon.svg delete mode 100644 packages/studio-panel/public/figma-assets/button-help-icon.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-banners.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-clips.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-comentarios.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-escenas.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-estilo.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-fondo.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-logo.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-musica.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-notas.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-personas.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-qr.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-sonidos.svg delete mode 100644 packages/studio-panel/public/figma-assets/icon-superposicion.svg delete mode 100644 packages/studio-panel/public/figma-assets/logo-avanzacast.svg delete mode 100644 packages/studio-panel/public/figma-assets/screenshot-design.png delete mode 100644 packages/studio-panel/server-package.json delete mode 100644 packages/studio-panel/server.js create mode 100644 packages/studio-panel/src/components/Avatar.tsx create mode 100644 packages/studio-panel/src/components/BottomControls.tsx create mode 100644 packages/studio-panel/src/components/Button.tsx create mode 100644 packages/studio-panel/src/components/ChatPanel.tsx create mode 100644 packages/studio-panel/src/components/ControlBar.tsx create mode 100644 packages/studio-panel/src/components/Header.tsx create mode 100644 packages/studio-panel/src/components/LivekitConnector.tsx create mode 100644 packages/studio-panel/src/components/LowerThird.tsx create mode 100644 packages/studio-panel/src/components/MediaAssetCard.tsx create mode 100644 packages/studio-panel/src/components/ParticipantCard.tsx create mode 100644 packages/studio-panel/src/components/ParticipantsList.tsx create mode 100644 packages/studio-panel/src/components/RightTools.tsx create mode 100644 packages/studio-panel/src/components/Roster.tsx create mode 100644 packages/studio-panel/src/components/SceneThumbnail.tsx create mode 100644 packages/studio-panel/src/components/Sidebar.tsx create mode 100644 packages/studio-panel/src/components/StudioLayout.tsx create mode 100644 packages/studio-panel/src/components/ThemeToggle.tsx create mode 100644 packages/studio-panel/src/components/ToggleButton.tsx create mode 100644 packages/studio-panel/src/components/ToolbarFloating.tsx create mode 100644 packages/studio-panel/src/components/VideoGrid.tsx create mode 100644 packages/studio-panel/src/components/VideoTile.tsx create mode 100644 packages/studio-panel/src/components/__tests__/ChatPanel.test.tsx create mode 100644 packages/studio-panel/src/components/__tests__/Roster.test.tsx delete mode 100644 packages/studio-panel/src/components/figma/FigmaHeader.tsx delete mode 100644 packages/studio-panel/src/components/figma/MediaGrid.tsx delete mode 100644 packages/studio-panel/src/components/figma/PersonCard.tsx delete mode 100644 packages/studio-panel/src/components/header/Brand.tsx delete mode 100644 packages/studio-panel/src/components/header/LiveBadge.tsx delete mode 100644 packages/studio-panel/src/components/header/RecordButton.tsx create mode 100644 packages/studio-panel/src/components/icons/IconCamera.tsx create mode 100644 packages/studio-panel/src/components/icons/IconCameraOn.tsx create mode 100644 packages/studio-panel/src/components/icons/IconMic.tsx create mode 100644 packages/studio-panel/src/components/icons/IconMicOff.tsx delete mode 100644 packages/studio-panel/src/components/ui/AddDestinationDialog.tsx delete mode 100644 packages/studio-panel/src/components/ui/AddDestinationMenu.tsx delete mode 100644 packages/studio-panel/src/components/ui/Button.tsx delete mode 100644 packages/studio-panel/src/components/ui/ConfirmDialog.tsx delete mode 100644 packages/studio-panel/src/components/ui/Dialog.tsx delete mode 100644 packages/studio-panel/src/components/ui/Header.tsx delete mode 100644 packages/studio-panel/src/components/ui/IconButton.tsx delete mode 100644 packages/studio-panel/src/components/ui/LeftSidePanel.tsx delete mode 100644 packages/studio-panel/src/components/ui/RightSidePanel.tsx delete mode 100644 packages/studio-panel/src/components/ui/RightSidebar.tsx delete mode 100644 packages/studio-panel/src/components/ui/StudioFrame.tsx delete mode 100644 packages/studio-panel/src/components/ui/index.ts delete mode 100644 packages/studio-panel/src/design/figma-tokens.json delete mode 100644 packages/studio-panel/src/global.d.ts delete mode 100644 packages/studio-panel/src/hooks/useAssets.ts delete mode 100644 packages/studio-panel/src/hooks/useChat.ts delete mode 100644 packages/studio-panel/src/hooks/useDestinations.ts delete mode 100644 packages/studio-panel/src/hooks/usePeople.ts delete mode 100644 packages/studio-panel/src/hooks/useScene.ts delete mode 100644 packages/studio-panel/src/hooks/useStyle.ts delete mode 100644 packages/studio-panel/src/index.css delete mode 100644 packages/studio-panel/src/layouts/StudioLayout.tsx create mode 100644 packages/studio-panel/src/setupTests.ts create mode 100644 packages/studio-panel/src/styles.css create mode 100644 packages/studio-panel/src/styles/globals.css delete mode 100644 packages/studio-panel/src/types/index.d.ts delete mode 100644 packages/studio-panel/ssl/localhost.crt delete mode 100644 packages/studio-panel/ssl/localhost.csr delete mode 100644 packages/studio-panel/ssl/localhost.key delete mode 100644 packages/studio-panel/token-server.js delete mode 100644 packages/studio-panel/vite-dev.log delete mode 100644 packages/studio-panel/vite.config.ts.timestamp-1762497626946-f3a7a31a30d1.mjs diff --git a/docs/REMOVED_Hero.md b/docs/REMOVED_Hero.md index e69de29..afb5603 100644 --- a/docs/REMOVED_Hero.md +++ b/docs/REMOVED_Hero.md @@ -0,0 +1,21 @@ +REMOVED: `Hero` component +========================= + +Fecha: 2025-11-10 + +Acción tomada: se ha eliminado la funcionalidad del componente `Hero` en el paquete `studio-panel` porque este repositorio contiene el panel de usuario (studio) y no una landing page. + +Detalles: +- Archivo afectado: `packages/studio-panel/src/components/Hero.tsx`. +- Estado actual: el archivo se ha convertido en un stub que retorna `null` para evitar romper referencias existentes durante la transición. +- Import en `packages/studio-panel/src/App.tsx` fue removido y reemplazado por un comentario que indica que el `Hero` no corresponde al panel. + +Motivo: +- Evitar contenido de landing en el panel de usuario. + +Siguientes pasos recomendados: +1. Si deseas eliminar completamente el archivo del repositorio, puedo borrarlo (actualmente lo mantengo como stub para facilidad de reversión). +2. Si el contenido del `Hero` debe conservarse para la landing, puedo moverlo al paquete `landing-page` y limpiar referencias. +3. Limpiar assets no usados en `packages/studio-panel/public/figma-assets/` si quieres reducir el tamaño del repo. + +Si quieres que proceda a eliminar el archivo físicamente o a moverlo a otro paquete, dime la opción ("delete" / "move to landing-page" / "keep stub"). diff --git a/docs/TAILWIND_STYLES_GUIDE.md b/docs/TAILWIND_STYLES_GUIDE.md new file mode 100644 index 0000000..98df9a7 --- /dev/null +++ b/docs/TAILWIND_STYLES_GUIDE.md @@ -0,0 +1,162 @@ +# Guía de Estilos Tailwind CSS - Studio Panel + +## Actualización: 2025-11-10 + +Se ha aplicado Tailwind CSS de forma consistente en todo el `studio-panel`, siguiendo el patrón establecido en `broadcast-panel`. + +## Principios de Diseño + +### Colores Base +- **Fondo principal**: `bg-[#1f1f1f]` (gris oscuro) +- **Fondo secundario**: `bg-gray-900` +- **Gradientes**: `bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900` +- **Bordes sutiles**: `border-white/[0.04]` a `border-white/[0.12]` +- **Superficies elevadas**: `bg-white/[0.02]` a `bg-white/[0.06]` + +### Texto +- **Primario**: `text-white` +- **Secundario**: `text-white/80` +- **Terciario**: `text-white/60` +- **Muted**: `text-gray-400` + +### Espaciado Consistente +- **Padding pequeño**: `px-3 py-2` o `p-3` +- **Padding medio**: `px-4 py-2.5` o `p-4` +- **Padding grande**: `px-6 py-3` o `p-6` +- **Gaps**: `gap-2`, `gap-3`, `gap-4` + +### Bordes y Radios +- **Border radius estándar**: `rounded-lg` (0.5rem) +- **Border radius pequeño**: `rounded-md` (0.375rem) +- **Border radius extra**: `rounded-xl` (0.75rem) +- **Border radius completo**: `rounded-full` + +### Sombras +- **Sombra ligera**: `shadow-sm` +- **Sombra media**: `shadow-md` +- **Sombra grande**: `shadow-lg` +- **Sombra extra**: `shadow-xl` y `shadow-2xl` +- **Sombras de color**: `shadow-blue-500/20`, `shadow-red-500/20` + +## Componentes Actualizados + +### Header +```tsx +className="bg-[#1f1f1f] shadow-md border-b border-white/[0.04]" +``` + +### Button +- **Default**: Fondo semitransparente con hover +- **Primary**: Gradiente azul con sombra +- **Ghost**: Transparente con hover sutil +- **Danger**: Gradiente rojo con sombra + +### IconButton +```tsx +className="px-2.5 py-2.5 rounded-lg hover:bg-white/10 active:bg-white/5 transition-all duration-200" +``` + +### Cards +```tsx +className="bg-white/[0.02] border border-white/[0.06] rounded-lg p-6 hover:bg-white/[0.04] hover:border-white/[0.12] transition-all duration-200" +``` + +## Transiciones Estándar + +### Duración +- **Rápida**: `duration-150` +- **Normal**: `duration-200` +- **Lenta**: `duration-300` + +### Propiedades +- **Colores**: `transition-colors` +- **Todo**: `transition-all` +- **Opacidad**: `transition-opacity` + +### Hover States +```tsx +hover:bg-white/10 +hover:shadow-xl +hover:scale-105 +active:scale-95 +``` + +## Focus States +```tsx +focus:outline-none +focus:ring-2 +focus:ring-white/20 +focus:ring-offset-2 +focus:ring-offset-gray-900 +``` + +## Estados Disabled +```tsx +disabled:opacity-50 +disabled:cursor-not-allowed +disabled:pointer-events-none +``` + +## Mejores Prácticas + +1. **Usar clases utilitarias** en lugar de CSS personalizado +2. **Mantener consistencia** con espaciado (múltiplos de 4px) +3. **Aplicar transiciones** a elementos interactivos +4. **Usar opacidad** para variaciones de color (`white/10`, `white/60`) +5. **Gradientes sutiles** para profundidad visual +6. **Sombras contextuales** con colores de acento + +## Paleta de Colores Acento + +### Blue (Primary) +- `from-blue-600 to-blue-500` +- `hover:from-blue-500 hover:to-blue-400` +- `shadow-blue-500/20` + +### Red (Danger/Record) +- `from-red-600 to-red-500` +- `hover:from-red-500 hover:to-red-400` +- `shadow-red-500/20` + +### Green (Success) +- `bg-green-400` +- `shadow-green-400/50` + +### Yellow (Warning) +- `bg-yellow-400` +- `shadow-yellow-400/50` + +## Responsive Design + +### Breakpoints +- `sm:` - 640px +- `md:` - 768px +- `lg:` - 1024px +- `xl:` - 1280px + +### Grid Patterns +```tsx +grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 +``` + +## Archivos Modificados + +- `src/components/Header.tsx` +- `src/components/header/Brand.tsx` +- `src/components/header/LiveBadge.tsx` +- `src/components/header/RecordButton.tsx` +- `src/components/ui/Button.tsx` +- `src/components/ui/IconButton.tsx` +- `src/components/figma/FigmaHeader.tsx` +- `src/components/figma/PersonCard.tsx` +- `src/components/figma/MediaGrid.tsx` +- `src/App.tsx` + +## Validación + +✅ TypeCheck: OK +✅ Lint: OK +✅ Consistencia visual con broadcast-panel +✅ Transiciones suaves aplicadas +✅ Estados hover/focus/active implementados + diff --git a/docs/VRISTO_UI_COMPONENTS.md b/docs/VRISTO_UI_COMPONENTS.md new file mode 100644 index 0000000..84f7dd0 --- /dev/null +++ b/docs/VRISTO_UI_COMPONENTS.md @@ -0,0 +1,285 @@ +# 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 + setIsOpen(false)} + title="Nueva Escena" + size="md" + footer={} +> + {/* Contenido */} + +``` + +--- + +### 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 +, + content: + } + ]} +/> +``` + +--- + +### 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 +} + 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 + +``` + +--- + +### 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 +