AvanzaCast/packages/avanza-ui/README.md

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:

{
  "dependencies": {
    "avanza-ui": "workspace:*"
  }
}

Uso Básico

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.

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

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

--studio-space-xs: 4px;
--studio-space-sm: 8px;
--studio-space-md: 12px;
--studio-space-lg: 16px;
--studio-space-xl: 24px;

Tipografía

--studio-text-xs: 11px;
--studio-text-sm: 12px;
--studio-text-base: 14px;
--studio-text-md: 16px;
--studio-text-lg: 18px;

Border Radius

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

: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