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 +