AvanzaCast/shared/components

Shared Components - AvanzaCast

Componentes reutilizables compartidos entre todos los paquetes del monorepo AvanzaCast.

Estructura

shared/components/
├── Modal.tsx                          # Componente base de modal
├── Modal.module.css
├── modal-parts/                       # Componentes modulares para modales
│   ├── ModalLink.tsx                  # Enlaces azules estilo StreamYard
│   ├── ModalCopyInput.tsx             # Input + botón copiar
│   ├── ModalShareButtons.tsx          # Botones de compartir (Gmail, Email, Messenger)
│   ├── ModalToggle.tsx                # Toggle switch Material Design
│   ├── README.md                      # Documentación detallada
│   └── *.module.css
├── LanguageSelector.tsx               # Selector de idioma
├── AuthButton.tsx                     # Botón de autenticación
└── index.ts                           # Exportaciones centralizadas

Uso en Paquetes

Configuración TypeScript

Cada paquete debe configurar su tsconfig.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../..",
    "paths": {
      "@/*": ["packages/[paquete]/src/*"],
      "@shared/*": ["shared/*"]
    }
  },
  "include": ["src", "../../shared"]
}

Configuración Vite

Agregar alias en vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@shared': path.resolve(__dirname, '../../shared')
    }
  }
})

Importación

// Importar componentes individuales
import { Modal, ModalLink, ModalCopyInput } from '@shared/components'

// O usando path completo
import { Modal } from '@shared/components/Modal'
import { ModalLink } from '@shared/components/modal-parts/ModalLink'

Componentes Disponibles

Modal System

• Modal: Componente base usando <dialog> nativo
• ModalLink: Enlaces azules subrayados
• ModalCopyInput: Input con botón de copiar
• ModalShareButtons: Botones de compartir en redes sociales
• ModalToggle: Toggle switch con icono de ayuda

Ver documentación completa en modal-parts/README.md

UI Components

• LanguageSelector: Selector de idioma multilenguaje
• AuthButton: Botón de autenticación/login

Diseño y Estilo

Todos los componentes siguen el sistema de diseño de StreamYard/Google Material:

• Colores: #1a73e8 (primary blue), #202124 (text), #5f6368 (secondary)
• Espaciado: Múltiplos de 4px (8px, 12px, 16px, 24px)
• Bordes: Border radius 4px
• Tipografía: 14px body, 16px títulos
• Dark Mode: Soporte completo con atributo [data-theme="dark"]

Ventajas

✅ Reutilización: Un solo componente usado en todos los paquetes
✅ Mantenibilidad: Cambios centralizados
✅ Consistencia: Diseño uniforme en toda la aplicación
✅ Performance: Code splitting automático con Vite
✅ TypeScript: Tipado completo y autocomplete
✅ Testing: Un solo lugar para testear componentes

Agregar Nuevos Componentes

1. Crear componente en shared/components/
2. Agregar estilos en .module.css
3. Exportar en index.ts
4. Documentar en este README
5. Importar usando @shared/components

Ejemplos

Ver packages/broadcast-panel/src/components/ para ejemplos de uso:

• InviteGuestsModal.tsx - Uso completo del sistema modular
• NewTransmissionModal.tsx - Modal con formulario
• ExampleModal.tsx - Demostración de todos los componentes