@nrivera-iimp/ui-kit-iimp 0.1.0 → 0.1.2
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 +139 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,154 @@
|
|
|
1
|
-
|
|
1
|
+
# @nrivera-iimp/ui-kit-iimp 🚀
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Sistema de diseño premium para las verticales de **ProExplo**, **WMC** y **Gess**. Basado en shadcn/ui y Tailwind CSS.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Este paquete proporciona una base sólida, accesible y altamente personalizable para todas las aplicaciones web del IIMP, con un motor de theming dinámico integrado.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 🛠️ Instalación
|
|
10
|
+
|
|
11
|
+
Abre tu terminal en la carpeta del proyecto y ejecuta:
|
|
6
12
|
|
|
7
13
|
```bash
|
|
8
|
-
npm
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
npm install @nrivera-iimp/ui-kit-iimp lucide-react clsx tailwind-merge next-themes
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Requisitos Previos
|
|
18
|
+
- **Node.js**: 18.0 o superior
|
|
19
|
+
- **Next.js**: 13.0+ (App Router recomendado)
|
|
20
|
+
- **Tailwind CSS**: Configurado en el proyecto
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## ⚙️ Configuración Paso a Paso
|
|
25
|
+
|
|
26
|
+
### 1. Agregar el Preset de Tailwind
|
|
27
|
+
Modifica tu archivo `tailwind.config.ts` (o `.js`) para importar nuestro preset. Esto incluirá automáticamente todos los colores corporativos y animaciones.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// tailwind.config.ts
|
|
31
|
+
import { iimpPreset } from "@nrivera-iimp/ui-kit/preset";
|
|
32
|
+
|
|
33
|
+
export default {
|
|
34
|
+
// El preset añade las variables HSL y la configuración de shadcn/ui
|
|
35
|
+
presets: [iimpPreset],
|
|
36
|
+
content: [
|
|
37
|
+
"./src/**/*.{ts,tsx}",
|
|
38
|
+
"./node_modules/@nrivera-iimp/ui-kit-iimp/dist/**/*.{js,mjs}"
|
|
39
|
+
],
|
|
40
|
+
// ... resto de tu configuración
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 2. Importar Estilos Globales
|
|
45
|
+
En tu archivo `app/globals.css`, añade la importación de nuestros estilos base de Tailwind y los del UI-Kit.
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@import "tailwindcss";
|
|
49
|
+
@import "@nrivera-iimp/ui-kit-iimp/styles.css";
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 3. Script Anti-Flash (Crucial)
|
|
53
|
+
Para evitar el parpadeo blanco al cargar la página (mientras React inicializa), añade este script en el `<head>` de tu `app/layout.tsx`. Este script detecta la vertical y el tema preferido instantáneamente.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
// app/layout.tsx
|
|
57
|
+
export default function RootLayout({ children }) {
|
|
58
|
+
return (
|
|
59
|
+
<html lang="es" suppressHydrationWarning>
|
|
60
|
+
<head>
|
|
61
|
+
<script
|
|
62
|
+
dangerouslySetInnerHTML={{
|
|
63
|
+
__html: `
|
|
64
|
+
(function() {
|
|
65
|
+
try {
|
|
66
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
67
|
+
const themeParam = urlParams.get('theme');
|
|
68
|
+
// Cambia 'proexplo' por tu vertical por defecto (proexplo, wmc, gess)
|
|
69
|
+
const defaultVertical = 'proexplo';
|
|
70
|
+
|
|
71
|
+
let vertical = themeParam || localStorage.getItem('iimp-vertical') || defaultVertical;
|
|
72
|
+
|
|
73
|
+
if (themeParam) {
|
|
74
|
+
localStorage.setItem('iimp-vertical', themeParam);
|
|
75
|
+
const url = new URL(window.location);
|
|
76
|
+
url.searchParams.delete('theme');
|
|
77
|
+
window.history.replaceState({}, '', url);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
document.documentElement.setAttribute('data-vertical', vertical);
|
|
81
|
+
} catch (e) {}
|
|
82
|
+
})();
|
|
83
|
+
`,
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
86
|
+
</head>
|
|
87
|
+
<body>{children}</body>
|
|
88
|
+
</html>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 4. Configurar el VerticalProvider
|
|
94
|
+
Envuelve tu aplicación con el provider en el layout raíz para gestionar el estado de las verticales y el modo oscuro.
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { VerticalProvider } from "@nrivera-iimp/ui-kit-iimp";
|
|
98
|
+
import { ThemeProvider } from "next-themes";
|
|
99
|
+
|
|
100
|
+
export default function RootLayout({ children }) {
|
|
101
|
+
return (
|
|
102
|
+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
|
103
|
+
<VerticalProvider defaultVertical="proexplo">
|
|
104
|
+
{children}
|
|
105
|
+
</VerticalProvider>
|
|
106
|
+
</ThemeProvider>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
15
109
|
```
|
|
16
110
|
|
|
17
|
-
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 🎨 Theming y Verticales
|
|
18
114
|
|
|
19
|
-
|
|
115
|
+
El sistema utiliza un **HSL Engine** que inyecta variables dinámicamente.
|
|
20
116
|
|
|
21
|
-
|
|
117
|
+
### Verticales Disponibles:
|
|
118
|
+
- `proexplo`: Naranja IIMP (Enfoque en eventos y minería).
|
|
119
|
+
- `wmc`: Azul Corporativo (World Mining Congress).
|
|
120
|
+
- `gess`: Verde Sostenibilidad (Gestión Social).
|
|
22
121
|
|
|
23
|
-
|
|
122
|
+
### URL Theming (Dinámico)
|
|
123
|
+
Puedes forzar el cambio de tema para un cliente específico enviando un parámetro en la URL. El sistema lo detectará, lo guardará en `localStorage` y limpiará la URL automáticamente.
|
|
24
124
|
|
|
25
|
-
|
|
125
|
+
**Ejemplo:** `www.tu-sitio.com?theme=wmc`
|
|
26
126
|
|
|
27
|
-
|
|
28
|
-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
127
|
+
---
|
|
29
128
|
|
|
30
|
-
|
|
129
|
+
## 🌓 Dark Mode
|
|
130
|
+
El kit tiene soporte nativo para modo oscuro utilizando la clase `.dark` en el HTML.
|
|
131
|
+
- Utiliza los prefijos `dark:` de Tailwind para estilos específicos.
|
|
132
|
+
- El `VerticalProvider` ya maneja las variables de contraste optimizadas para fondos oscuros.
|
|
31
133
|
|
|
32
|
-
|
|
134
|
+
---
|
|
33
135
|
|
|
34
|
-
|
|
136
|
+
## 📦 Uso de Componentes
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { Button, Card, CardHeader, CardTitle } from "@nrivera-iimp/ui-kit-iimp";
|
|
140
|
+
|
|
141
|
+
export default function MiPagina() {
|
|
142
|
+
return (
|
|
143
|
+
<Card>
|
|
144
|
+
<CardHeader>
|
|
145
|
+
<CardTitle>Hola IIMP</CardTitle>
|
|
146
|
+
</CardHeader>
|
|
147
|
+
<Button variant="default">Click aquí</Button>
|
|
148
|
+
</Card>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
35
152
|
|
|
36
|
-
|
|
153
|
+
---
|
|
154
|
+
© 2026 Instituto de Ingenieros de Minas del Perú. Excelencia en Minería.
|