@onpe/ui 1.0.40 → 1.0.41
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 +133 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,11 @@ npx @onpe/ui add <componente>
|
|
|
29
29
|
|
|
30
30
|
## ⚠️ Importante sobre Estilos
|
|
31
31
|
|
|
32
|
-
**Esta librería
|
|
32
|
+
**Esta librería usa Tailwind CSS v4** y requiere configuración específica. Los componentes usan clases de TailwindCSS que necesitan estar configuradas correctamente.
|
|
33
|
+
|
|
34
|
+
### 🆕 Tailwind CSS v4
|
|
35
|
+
|
|
36
|
+
Esta librería utiliza **Tailwind CSS v4** (la última versión) que tiene una configuración diferente a las versiones anteriores. La configuración se hace directamente en el CSS usando `@theme` y `@utility`.
|
|
33
37
|
|
|
34
38
|
## 📖 Uso Básico
|
|
35
39
|
|
|
@@ -108,41 +112,52 @@ npm install -D tailwindcss postcss autoprefixer
|
|
|
108
112
|
npx tailwindcss init -p
|
|
109
113
|
```
|
|
110
114
|
|
|
111
|
-
**2. Configurar
|
|
115
|
+
**2. Configurar PostCSS para Tailwind v4:**
|
|
112
116
|
```javascript
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
colors: {
|
|
119
|
-
'onpe-ui-blue': '#003770',
|
|
120
|
-
'onpe-ui-skyblue': '#0073cf',
|
|
121
|
-
'onpe-ui-skyblue-light': '#69b2e8',
|
|
122
|
-
'onpe-ui-yellow': '#ffb81c',
|
|
123
|
-
'onpe-ui-light-skyblue': '#aaeff6',
|
|
124
|
-
'onpe-ui-gray': '#bcbcbc',
|
|
125
|
-
'onpe-ui-gray-light': '#bdbdbd',
|
|
126
|
-
'onpe-ui-gray-extra-light': '#f2f2f2',
|
|
127
|
-
'onpe-ui-red': '#e3002b',
|
|
128
|
-
'onpe-ui-dark-gray': '#4f4f4f',
|
|
129
|
-
'onpe-ui-green': '#76bd43',
|
|
130
|
-
'onpe-ui-yellow-light': '#FFF1D2',
|
|
131
|
-
}
|
|
132
|
-
},
|
|
117
|
+
// postcss.config.js
|
|
118
|
+
export default {
|
|
119
|
+
plugins: {
|
|
120
|
+
'@tailwindcss/postcss': {},
|
|
121
|
+
autoprefixer: {},
|
|
133
122
|
},
|
|
134
|
-
plugins: [],
|
|
135
123
|
}
|
|
136
124
|
```
|
|
137
125
|
|
|
138
|
-
**3.
|
|
126
|
+
**3. Crear archivo CSS con configuración Tailwind v4:**
|
|
139
127
|
```css
|
|
140
|
-
|
|
141
|
-
@
|
|
142
|
-
|
|
128
|
+
/* onpe-ui.css */
|
|
129
|
+
@import "tailwindcss";
|
|
130
|
+
|
|
131
|
+
@theme {
|
|
132
|
+
--color-onpe-ui-blue: #003770;
|
|
133
|
+
--color-onpe-ui-skyblue: #0073cf;
|
|
134
|
+
--color-onpe-ui-skyblue-light: #69b2e8;
|
|
135
|
+
--color-onpe-ui-yellow: #ffb81c;
|
|
136
|
+
--color-onpe-ui-light-skyblue: #aaeff6;
|
|
137
|
+
--color-onpe-ui-gray: #bcbcbc;
|
|
138
|
+
--color-onpe-ui-gray-light: #bdbdbd;
|
|
139
|
+
--color-onpe-ui-gray-extra-light: #f2f2f2;
|
|
140
|
+
--color-onpe-ui-red: #e3002b;
|
|
141
|
+
--color-onpe-ui-dark-gray: #4f4f4f;
|
|
142
|
+
--color-onpe-ui-green: #76bd43;
|
|
143
|
+
--color-onpe-ui-yellow-light: #FFF1D2;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Clases personalizadas ONPE */
|
|
147
|
+
@utility bg-onpe-ui-blue { background-color: var(--color-onpe-ui-blue); }
|
|
148
|
+
@utility text-onpe-ui-blue { color: var(--color-onpe-ui-blue); }
|
|
149
|
+
@utility border-onpe-ui-blue { border-color: var(--color-onpe-ui-blue); }
|
|
150
|
+
/* ... resto de clases personalizadas */
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
**4. Importar el archivo CSS en tu aplicación:**
|
|
154
|
+
```tsx
|
|
155
|
+
// En tu archivo principal (index.tsx o App.tsx)
|
|
156
|
+
import './onpe-ui.css'; // ← IMPORTANTE: Importar primero
|
|
157
|
+
import { Button } from './components/onpe-ui/Button';
|
|
143
158
|
```
|
|
144
159
|
|
|
145
|
-
**
|
|
160
|
+
**5. Para componentes que usan Portal, agregar en public/index.html:**
|
|
146
161
|
```html
|
|
147
162
|
<!DOCTYPE html>
|
|
148
163
|
<html lang="es">
|
|
@@ -185,6 +200,21 @@ Modal
|
|
|
185
200
|
├── Overlay (requerido)
|
|
186
201
|
└── IconClose (requerido)
|
|
187
202
|
|
|
203
|
+
ModalBrowserIncompatible
|
|
204
|
+
├── Modal (requerido)
|
|
205
|
+
├── IconWarning (requerido)
|
|
206
|
+
├── IconChromeColor (requerido)
|
|
207
|
+
├── IconSafariColor (requerido)
|
|
208
|
+
├── IconMozillaColor (requerido)
|
|
209
|
+
└── IconEdgeColor (requerido)
|
|
210
|
+
|
|
211
|
+
ModalSystemIncompatible
|
|
212
|
+
├── Modal (requerido)
|
|
213
|
+
├── IconWarning (requerido)
|
|
214
|
+
├── IconWindow (requerido)
|
|
215
|
+
├── IconAndroid (requerido)
|
|
216
|
+
└── IconApple (requerido)
|
|
217
|
+
|
|
188
218
|
Portal
|
|
189
219
|
└── react-dom (createPortal)
|
|
190
220
|
|
|
@@ -209,6 +239,29 @@ npx @onpe/ui add modal
|
|
|
209
239
|
# - IconClose.tsx (si está disponible)
|
|
210
240
|
```
|
|
211
241
|
|
|
242
|
+
**ModalBrowserIncompatible** - Instala automáticamente sus dependencias:
|
|
243
|
+
```bash
|
|
244
|
+
npx @onpe/ui add modal-browser-incompatible
|
|
245
|
+
# Esto instalará automáticamente:
|
|
246
|
+
# - Modal.tsx
|
|
247
|
+
# - IconWarning.tsx
|
|
248
|
+
# - IconChromeColor.tsx
|
|
249
|
+
# - IconSafariColor.tsx
|
|
250
|
+
# - IconMozillaColor.tsx
|
|
251
|
+
# - IconEdgeColor.tsx
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
**ModalSystemIncompatible** - Instala automáticamente sus dependencias:
|
|
255
|
+
```bash
|
|
256
|
+
npx @onpe/ui add modal-system-incompatible
|
|
257
|
+
# Esto instalará automáticamente:
|
|
258
|
+
# - Modal.tsx
|
|
259
|
+
# - IconWarning.tsx
|
|
260
|
+
# - IconWindow.tsx
|
|
261
|
+
# - IconAndroid.tsx
|
|
262
|
+
# - IconApple.tsx
|
|
263
|
+
```
|
|
264
|
+
|
|
212
265
|
**Otros componentes** - Instalación independiente:
|
|
213
266
|
```bash
|
|
214
267
|
npx @onpe/ui add button # Sin dependencias
|
|
@@ -666,6 +719,58 @@ function App() {
|
|
|
666
719
|
}
|
|
667
720
|
```
|
|
668
721
|
|
|
722
|
+
### ModalBrowserIncompatible
|
|
723
|
+
|
|
724
|
+
Modal mejorado para mostrar cuando el navegador no es compatible con el sistema de votación.
|
|
725
|
+
|
|
726
|
+
```tsx
|
|
727
|
+
import { ModalBrowserIncompatible } from '@onpe/ui/components';
|
|
728
|
+
|
|
729
|
+
function App() {
|
|
730
|
+
const [showBrowserModal, setShowBrowserModal] = useState(false);
|
|
731
|
+
|
|
732
|
+
return (
|
|
733
|
+
<ModalBrowserIncompatible
|
|
734
|
+
isOpen={showBrowserModal}
|
|
735
|
+
onClose={() => setShowBrowserModal(false)}
|
|
736
|
+
/>
|
|
737
|
+
);
|
|
738
|
+
}
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
**Características del modal mejorado:**
|
|
742
|
+
- ✅ Mensaje claro sobre incompatibilidad
|
|
743
|
+
- ✅ Lista visual de navegadores compatibles con nombres
|
|
744
|
+
- ✅ Información sobre seguridad y versiones
|
|
745
|
+
- ✅ Diseño responsive y accesible
|
|
746
|
+
- ✅ Colores institucionales ONPE
|
|
747
|
+
|
|
748
|
+
### ModalSystemIncompatible
|
|
749
|
+
|
|
750
|
+
Modal mejorado para mostrar cuando el sistema operativo no es compatible con ONPEID.
|
|
751
|
+
|
|
752
|
+
```tsx
|
|
753
|
+
import { ModalSystemIncompatible } from '@onpe/ui/components';
|
|
754
|
+
|
|
755
|
+
function App() {
|
|
756
|
+
const [showSystemModal, setShowSystemModal] = useState(false);
|
|
757
|
+
|
|
758
|
+
return (
|
|
759
|
+
<ModalSystemIncompatible
|
|
760
|
+
isOpen={showSystemModal}
|
|
761
|
+
onClose={() => setShowSystemModal(false)}
|
|
762
|
+
/>
|
|
763
|
+
);
|
|
764
|
+
}
|
|
765
|
+
```
|
|
766
|
+
|
|
767
|
+
**Características del modal mejorado:**
|
|
768
|
+
- ✅ Información específica sobre ONPEID
|
|
769
|
+
- ✅ Lista de sistemas operativos compatibles con versiones mínimas
|
|
770
|
+
- ✅ Alternativa de acceso web
|
|
771
|
+
- ✅ Información de seguridad sobre fuentes oficiales
|
|
772
|
+
- ✅ Diseño intuitivo y profesional
|
|
773
|
+
|
|
669
774
|
## 🎯 Hooks Disponibles
|
|
670
775
|
|
|
671
776
|
### useDebounce
|