@onpe/ui 1.0.29 → 1.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,29 +35,34 @@ npx onpe-ui add <componente>
|
|
|
35
35
|
|
|
36
36
|
### Instalar Componentes con CLI
|
|
37
37
|
|
|
38
|
-
#### Instalar
|
|
38
|
+
#### Instalar componentes específicos
|
|
39
39
|
```bash
|
|
40
|
-
#
|
|
40
|
+
# Componentes
|
|
41
41
|
npx onpe-ui add button
|
|
42
|
-
|
|
43
|
-
# Instalar Modal (instala automáticamente Portal y Overlay)
|
|
44
42
|
npx onpe-ui add modal
|
|
45
|
-
|
|
46
|
-
# Instalar Portal
|
|
47
43
|
npx onpe-ui add portal
|
|
48
|
-
|
|
49
|
-
# Instalar Overlay
|
|
50
44
|
npx onpe-ui add overlay
|
|
51
|
-
|
|
52
|
-
# Instalar Show
|
|
53
45
|
npx onpe-ui add show
|
|
46
|
+
|
|
47
|
+
# Iconos
|
|
48
|
+
npx onpe-ui add icon-close
|
|
49
|
+
npx onpe-ui add icon-check
|
|
50
|
+
npx onpe-ui add icon-warning
|
|
51
|
+
npx onpe-ui add icon-chrome
|
|
52
|
+
npx onpe-ui add icon-firefox
|
|
53
|
+
npx onpe-ui add icon-safari
|
|
54
|
+
npx onpe-ui add icon-edge
|
|
55
|
+
npx onpe-ui add icon-windows
|
|
56
|
+
npx onpe-ui add icon-apple
|
|
57
|
+
npx onpe-ui add icon-android
|
|
54
58
|
```
|
|
55
59
|
|
|
56
60
|
#### Usar componentes instalados individualmente
|
|
57
61
|
```tsx
|
|
58
62
|
// Después de instalar con CLI
|
|
59
|
-
import { Button } from './components/ui/Button';
|
|
60
|
-
import { Modal } from './components/ui/Modal';
|
|
63
|
+
import { Button } from './components/onpe-ui/Button';
|
|
64
|
+
import { Modal } from './components/onpe-ui/Modal';
|
|
65
|
+
import { IconClose } from './components/onpe-icons/IconClose';
|
|
61
66
|
import { useState } from 'react';
|
|
62
67
|
|
|
63
68
|
function App() {
|
|
@@ -80,11 +85,14 @@ function App() {
|
|
|
80
85
|
<div className="p-6">
|
|
81
86
|
<h2 className="text-xl font-bold mb-4">Contenido del Modal</h2>
|
|
82
87
|
<p className="mb-4">Este es un ejemplo de modal con contenido.</p>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
+
<div className="flex items-center gap-2">
|
|
89
|
+
<IconClose className="w-4 h-4" />
|
|
90
|
+
<Button
|
|
91
|
+
color="green"
|
|
92
|
+
title="Cerrar"
|
|
93
|
+
onClick={() => setIsOpen(false)}
|
|
94
|
+
/>
|
|
95
|
+
</div>
|
|
88
96
|
</div>
|
|
89
97
|
</Modal>
|
|
90
98
|
</div>
|
|
@@ -214,12 +222,21 @@ npx onpe-ui add show # Sin dependencias
|
|
|
214
222
|
```
|
|
215
223
|
src/
|
|
216
224
|
└── components/
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
225
|
+
├── ui/ # shadcn/ui (si está instalado)
|
|
226
|
+
│ ├── button.tsx
|
|
227
|
+
│ └── input.tsx
|
|
228
|
+
├── onpe-ui/ # ONPE UI - Componentes
|
|
229
|
+
│ ├── Button.tsx
|
|
230
|
+
│ ├── Modal.tsx
|
|
231
|
+
│ ├── Overlay.tsx
|
|
232
|
+
│ ├── Portal.tsx
|
|
233
|
+
│ └── Show.tsx
|
|
234
|
+
└── onpe-icons/ # ONPE UI - Iconos
|
|
235
|
+
├── IconClose.tsx
|
|
236
|
+
├── IconCheck.tsx
|
|
237
|
+
├── IconChrome.tsx
|
|
238
|
+
├── IconFirefox.tsx
|
|
239
|
+
└── IconWindows.tsx
|
|
223
240
|
```
|
|
224
241
|
|
|
225
242
|
## 🧩 Componentes Disponibles
|
|
@@ -1349,17 +1366,18 @@ npm install @onpe/ui
|
|
|
1349
1366
|
```tsx
|
|
1350
1367
|
/* Verificar que tengas la importación correcta */
|
|
1351
1368
|
import './onpe-ui.css';
|
|
1352
|
-
import { Button } from './components/ui/Button';
|
|
1369
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1353
1370
|
```
|
|
1354
1371
|
|
|
1355
1372
|
**Solución: Verificar rutas de importación**
|
|
1356
1373
|
```tsx
|
|
1357
1374
|
// ✅ CORRECTO: Importar archivo CSS personalizado
|
|
1358
1375
|
import './onpe-ui.css';
|
|
1359
|
-
import { Button } from './components/ui/Button';
|
|
1376
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1377
|
+
import { IconClose } from './components/onpe-icons/IconClose';
|
|
1360
1378
|
|
|
1361
1379
|
// ❌ INCORRECTO: No importar el archivo CSS
|
|
1362
|
-
import { Button } from './components/ui/Button';
|
|
1380
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1363
1381
|
```
|
|
1364
1382
|
|
|
1365
1383
|
**Solución: Verificar configuración de bundler**
|
|
@@ -1542,17 +1560,19 @@ npx tailwindcss init -p
|
|
|
1542
1560
|
```tsx
|
|
1543
1561
|
// En tu archivo principal (index.tsx)
|
|
1544
1562
|
import './onpe-ui.css';
|
|
1545
|
-
import { Button } from './components/ui/Button';
|
|
1563
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1564
|
+
import { IconClose } from './components/onpe-icons/IconClose';
|
|
1546
1565
|
```
|
|
1547
1566
|
|
|
1548
1567
|
**Paso 5: Verificar orden de importación**
|
|
1549
1568
|
```tsx
|
|
1550
1569
|
// ✅ CORRECTO
|
|
1551
1570
|
import './onpe-ui.css';
|
|
1552
|
-
import { Button } from './components/ui/Button';
|
|
1571
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1572
|
+
import { IconClose } from './components/onpe-icons/IconClose';
|
|
1553
1573
|
|
|
1554
1574
|
// ❌ INCORRECTO
|
|
1555
|
-
import { Button } from './components/ui/Button';
|
|
1575
|
+
import { Button } from './components/onpe-ui/Button';
|
|
1556
1576
|
// Falta importar el archivo CSS
|
|
1557
1577
|
```
|
|
1558
1578
|
|