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: 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

Crear componente en shared/components/
Agregar estilos en .module.css
Exportar en index.ts
Documentar en este README
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

README.md

Shared Components - AvanzaCast

Estructura