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

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

### Configuración Vite

Agregar alias en `vite.config.ts`:

```typescript
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

```typescript
// 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