# 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