228 lines
5.2 KiB
Markdown
228 lines
5.2 KiB
Markdown
# Avanza-UI
|
|
|
|
Biblioteca de componentes React personalizados para AvanzaCast, basada en el diseño de StreamYard con estilos propios sin dependencias de frameworks CSS.
|
|
|
|
## Características
|
|
|
|
- ✅ **Sin dependencias de CSS frameworks** - Estilos propios y personalizados
|
|
- ✅ **Basado en StreamYard** - Diseño moderno y profesional
|
|
- ✅ **TypeScript** - Tipado completo
|
|
- ✅ **Tema oscuro** - Optimizado para reducir fatiga visual
|
|
- ✅ **Accesible** - Componentes accesibles por defecto
|
|
- ✅ **Reutilizable** - Se puede importar desde cualquier package
|
|
|
|
## Instalación
|
|
|
|
Como esta es una librería local dentro del monorepo, simplemente impórtala en tu package:
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"avanza-ui": "workspace:*"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Uso Básico
|
|
|
|
```tsx
|
|
import { Button } from 'avanza-ui';
|
|
|
|
function App() {
|
|
return (
|
|
<div className="studio-theme">
|
|
<Button variant="primary">Click me</Button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
**Importante:** Asegúrate de envolver tu aplicación con la clase `studio-theme` para aplicar los estilos correctamente.
|
|
|
|
## Componentes Disponibles
|
|
|
|
### Button
|
|
|
|
Botón personalizable con múltiples variantes y tamaños.
|
|
|
|
```tsx
|
|
import { Button } from 'avanza-ui';
|
|
|
|
// Variantes
|
|
<Button variant="primary">Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="danger">Danger</Button>
|
|
<Button variant="success">Success</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
|
|
// Tamaños
|
|
<Button size="sm">Small</Button>
|
|
<Button size="md">Medium</Button>
|
|
<Button size="lg">Large</Button>
|
|
|
|
// Con íconos
|
|
<Button leftIcon={<Icon />}>With Left Icon</Button>
|
|
<Button rightIcon={<Icon />}>With Right Icon</Button>
|
|
<Button iconOnly><Icon /></Button>
|
|
|
|
// Estados
|
|
<Button loading>Loading...</Button>
|
|
<Button disabled>Disabled</Button>
|
|
|
|
// Full width
|
|
<Button fullWidth>Full Width</Button>
|
|
```
|
|
|
|
#### Props del Button
|
|
|
|
| Prop | Tipo | Default | Descripción |
|
|
|------|------|---------|-------------|
|
|
| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'success' \| 'ghost'` | `'secondary'` | Variante visual del botón |
|
|
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
|
|
| `loading` | `boolean` | `false` | Muestra spinner de carga |
|
|
| `disabled` | `boolean` | `false` | Deshabilita el botón |
|
|
| `fullWidth` | `boolean` | `false` | Ancho completo |
|
|
| `iconOnly` | `boolean` | `false` | Solo muestra ícono (sin texto) |
|
|
| `leftIcon` | `ReactNode` | - | Ícono a la izquierda |
|
|
| `rightIcon` | `ReactNode` | - | Ícono a la derecha |
|
|
|
|
## Variables CSS (Studio Theme)
|
|
|
|
Todas las variables CSS están definidas en `studio-theme.css` y pueden ser personalizadas:
|
|
|
|
### Colores
|
|
|
|
```css
|
|
--studio-bg-primary: #0f0f0f;
|
|
--studio-bg-secondary: #1a1a1a;
|
|
--studio-bg-tertiary: #242424;
|
|
--studio-accent: #3b82f6;
|
|
--studio-success: #10b981;
|
|
--studio-warning: #f59e0b;
|
|
--studio-danger: #ef4444;
|
|
```
|
|
|
|
### Espaciado
|
|
|
|
```css
|
|
--studio-space-xs: 4px;
|
|
--studio-space-sm: 8px;
|
|
--studio-space-md: 12px;
|
|
--studio-space-lg: 16px;
|
|
--studio-space-xl: 24px;
|
|
```
|
|
|
|
### Tipografía
|
|
|
|
```css
|
|
--studio-text-xs: 11px;
|
|
--studio-text-sm: 12px;
|
|
--studio-text-base: 14px;
|
|
--studio-text-md: 16px;
|
|
--studio-text-lg: 18px;
|
|
```
|
|
|
|
### Border Radius
|
|
|
|
```css
|
|
--studio-radius-sm: 4px;
|
|
--studio-radius-md: 6px;
|
|
--studio-radius-lg: 8px;
|
|
--studio-radius-xl: 12px;
|
|
```
|
|
|
|
## Personalización
|
|
|
|
Puedes sobrescribir las variables CSS en tu aplicación:
|
|
|
|
```css
|
|
:root {
|
|
--studio-accent: #your-color;
|
|
--studio-bg-primary: #your-bg;
|
|
}
|
|
```
|
|
|
|
## Próximos Componentes
|
|
|
|
- [ ] Input
|
|
- [ ] Select
|
|
- [ ] Textarea
|
|
- [ ] Checkbox
|
|
- [ ] Radio
|
|
- [ ] Switch
|
|
- [ ] Modal
|
|
- [ ] Dropdown
|
|
- [ ] Tooltip
|
|
- [ ] Card
|
|
- [ ] Badge
|
|
- [ ] Avatar
|
|
- [ ] IconButton
|
|
- [ ] Tabs
|
|
- [ ] Panel
|
|
- [ ] Layout components (StudioLayout, TopBar, BottomBar, etc.)
|
|
|
|
## Desarrollo
|
|
|
|
### Estructura del Proyecto
|
|
|
|
```
|
|
avanza-ui/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── Button/
|
|
│ │ │ ├── Button.tsx
|
|
│ │ │ ├── Button.css
|
|
│ │ │ └── index.ts
|
|
│ │ └── ... (más componentes)
|
|
│ ├── styles/
|
|
│ │ └── studio-theme.css
|
|
│ └── index.ts
|
|
├── package.json
|
|
└── README.md
|
|
```
|
|
|
|
### Agregar un Nuevo Componente
|
|
|
|
1. Crea una carpeta en `src/components/`
|
|
2. Crea `ComponentName.tsx` con el componente React
|
|
3. Crea `ComponentName.css` con los estilos
|
|
4. Crea `index.ts` para exportar el componente
|
|
5. Actualiza `src/index.ts` para exportar desde la raíz
|
|
|
|
### Convenciones de Nomenclatura
|
|
|
|
- **Componentes**: PascalCase (ej: `Button`, `IconButton`)
|
|
- **Archivos**: PascalCase para componentes, kebab-case para estilos
|
|
- **CSS Classes**: kebab-case con prefijo `avanza-` (ej: `avanza-button`)
|
|
- **CSS Variables**: kebab-case con prefijo `--studio-` (ej: `--studio-accent`)
|
|
|
|
## Guía de Estilo
|
|
|
|
### CSS
|
|
|
|
- Usa variables CSS de `studio-theme.css` en lugar de valores hardcoded
|
|
- Sigue el patrón BEM para nombres de clases
|
|
- Agrupa propiedades relacionadas
|
|
- Usa transiciones para interacciones suaves
|
|
|
|
### TypeScript
|
|
|
|
- Exporta interfaces de props
|
|
- Usa `React.forwardRef` para componentes que necesiten refs
|
|
- Documenta props con JSDoc
|
|
- Usa tipos estrictos (evita `any`)
|
|
|
|
## Licencia
|
|
|
|
Uso interno - AvanzaCast
|
|
|
|
## Contribuidores
|
|
|
|
- Equipo AvanzaCast
|
|
|
|
---
|
|
|
|
**Versión:** 1.0.0
|
|
**Última actualización:** 2025-11-11
|
|
|