Cesar Mendivil
e43686e36d
- Introduced ModalDestinationButton for destination selection with customizable icons and labels. - Added ModalInput for text input with optional character counter. - Implemented ModalLink for reusable links styled as underlined text. - Created ModalPlatformCard for platform selection with badges. - Developed ModalRadioGroup for radio button groups with custom styling. - Added ModalSection for grouping modal content with optional labels. - Implemented ModalSelect for dropdown selections with custom styling. - Created ModalShareButtons for sharing options via Gmail, Email, and Messenger. - Developed ModalTextarea for multi-line text input with character counter. - Introduced ModalToggle for toggle switches with optional help text and links. - Updated README.md with component descriptions, usage examples, and design guidelines. - Added index.ts for centralized exports of modal components.
125 lines
3.6 KiB
Markdown
125 lines
3.6 KiB
Markdown
# 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
|