174 lines
2.9 KiB
Markdown
174 lines
2.9 KiB
Markdown
# 🚀 Avanza UI - Inicio Rápido
|
||
|
||
## Instalación en 3 Pasos
|
||
|
||
### 1️⃣ Instalar la biblioteca
|
||
|
||
```bash
|
||
cd packages/studio-panel
|
||
npm install ../ui-components
|
||
```
|
||
|
||
### 2️⃣ Importar estilos globales
|
||
|
||
```tsx
|
||
// packages/studio-panel/src/main.tsx
|
||
import 'avanza-ui/dist/index.css';
|
||
```
|
||
|
||
### 3️⃣ ¡Usar componentes!
|
||
|
||
```tsx
|
||
import { Button, Card } from 'avanza-ui';
|
||
|
||
function App() {
|
||
return (
|
||
<Card>
|
||
<Button variant="primary">¡Funciona!</Button>
|
||
</Card>
|
||
);
|
||
}
|
||
```
|
||
|
||
## 📖 Componentes Disponibles
|
||
|
||
```tsx
|
||
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
|
||
|
||
```tsx
|
||
// Cambiar a dark mode
|
||
document.documentElement.setAttribute('data-theme', 'dark');
|
||
|
||
// Cambiar a light mode
|
||
document.documentElement.setAttribute('data-theme', 'light');
|
||
```
|
||
|
||
## 💡 Ejemplos Rápidos
|
||
|
||
### Button
|
||
|
||
```tsx
|
||
<Button variant="primary" size="md">Click me</Button>
|
||
<Button variant="secondary" loading>Loading...</Button>
|
||
<Button variant="danger" leftIcon={<TrashIcon />}>Delete</Button>
|
||
```
|
||
|
||
### Card
|
||
|
||
```tsx
|
||
<Card hoverable onClick={() => console.log('clicked')}>
|
||
<CardHeader>Title</CardHeader>
|
||
<CardBody>Content</CardBody>
|
||
<CardFooter>Footer</CardFooter>
|
||
</Card>
|
||
```
|
||
|
||
### Input
|
||
|
||
```tsx
|
||
<Input
|
||
label="Email"
|
||
type="email"
|
||
placeholder="you@example.com"
|
||
error={hasError}
|
||
errorMessage="Invalid email"
|
||
/>
|
||
```
|
||
|
||
### Modal
|
||
|
||
```tsx
|
||
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
|
||
|
||
```tsx
|
||
<Alert
|
||
variant="success"
|
||
title="Success!"
|
||
message="Operation completed"
|
||
closable
|
||
/>
|
||
```
|
||
|
||
### Avatar
|
||
|
||
```tsx
|
||
<Avatar src="/user.jpg" size="md" status="online" />
|
||
<Avatar initials="AB" size="lg" />
|
||
```
|
||
|
||
### Dropdown
|
||
|
||
```tsx
|
||
<Dropdown trigger={<Button>Options</Button>}>
|
||
<DropdownItem icon={<UserIcon />}>Profile</DropdownItem>
|
||
<DropdownDivider />
|
||
<DropdownItem danger>Logout</DropdownItem>
|
||
</Dropdown>
|
||
```
|
||
|
||
## 🎯 Personalización
|
||
|
||
```css
|
||
/* Personaliza colores */
|
||
:root {
|
||
--au-primary-600: #your-color;
|
||
--au-spacing-4: 1.5rem;
|
||
}
|
||
```
|
||
|
||
## 📦 Build para Producción
|
||
|
||
```bash
|
||
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!
|
||
|