AvanzaCast/packages/ui-components/QUICKSTART.md

🚀 Avanza UI - Inicio Rápido

Instalación en 3 Pasos

1️⃣ Instalar la biblioteca

cd packages/studio-panel
npm install ../ui-components

2️⃣ Importar estilos globales

// packages/studio-panel/src/main.tsx
import 'avanza-ui/dist/index.css';

3️⃣ ¡Usar componentes!

import { Button, Card } from 'avanza-ui';

function App() {
  return (
    <Card>
      <Button variant="primary">¡Funciona!</Button>
    </Card>
  );
}

📖 Componentes Disponibles

import {
  // Layout
  Card, CardHeader, CardBody, CardFooter,
  
  // Forms
  Button, Input,
  
  // Feedback
  Alert, Spinner, Tooltip,
  
  // Display
  Avatar, Badge,
  
  // Overlay
  Modal, ModalHeader, ModalBody, ModalFooter,
  Dropdown, DropdownItem, DropdownDivider, DropdownHeader,
  
  // Utils
  cn, debounce, throttle, generateId
} from 'avanza-ui';

🎨 Temas

// Cambiar a dark mode
document.documentElement.setAttribute('data-theme', 'dark');

// Cambiar a light mode
document.documentElement.setAttribute('data-theme', 'light');

💡 Ejemplos Rápidos

Button

<Button variant="primary" size="md">Click me</Button>
<Button variant="secondary" loading>Loading...</Button>
<Button variant="danger" leftIcon={<TrashIcon />}>Delete</Button>

Card

<Card hoverable onClick={() => console.log('clicked')}>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>

Input

<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  error={hasError}
  errorMessage="Invalid email"
/>

Modal

const [isOpen, setIsOpen] = useState(false);

<>
  <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
  
  <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
    <ModalHeader title="Hello" onClose={() => setIsOpen(false)} />
    <ModalBody>Content here</ModalBody>
    <ModalFooter>
      <Button onClick={() => setIsOpen(false)}>Close</Button>
    </ModalFooter>
  </Modal>
</>

Alert

<Alert
  variant="success"
  title="Success!"
  message="Operation completed"
  closable
/>

Avatar

<Avatar src="/user.jpg" size="md" status="online" />
<Avatar initials="AB" size="lg" />

Dropdown

<Dropdown trigger={<Button>Options</Button>}>
  <DropdownItem icon={<UserIcon />}>Profile</DropdownItem>
  <DropdownDivider />
  <DropdownItem danger>Logout</DropdownItem>
</Dropdown>

🎯 Personalización

/* Personaliza colores */
:root {
  --au-primary-600: #your-color;
  --au-spacing-4: 1.5rem;
}

📦 Build para Producción

cd packages/ui-components
npm run build

🔗 Links Útiles

• 📚 README.md - Documentación completa
• 🎓 GUIDE.md - Guía de desarrollo
• 🏗️ STUDIO_IMPLEMENTATION.md - Implementación en studio-panel
• 📊 SUMMARY.md - Resumen del proyecto

---

Avanza UI v1.0.0 - ¡Listo para usar!