@onpe/ui 1.0.24 → 1.0.26

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.
Files changed (2) hide show
  1. package/README.md +226 -3
  2. package/package.json +120 -120
package/README.md CHANGED
@@ -13,10 +13,20 @@ Librería completa de componentes de interfaz de usuario para aplicaciones de la
13
13
 
14
14
  ## 🚀 Instalación
15
15
 
16
+ ### Instalación Completa de la Librería
16
17
  ```bash
17
18
  npm install @onpe/ui
18
19
  ```
19
20
 
21
+ ### Instalación Individual de Componentes (CLI)
22
+ ```bash
23
+ # Instalar la CLI globalmente
24
+ npm install -g @onpe/ui
25
+
26
+ # O usar directamente con npx
27
+ npx onpe-ui add <componente>
28
+ ```
29
+
20
30
  ## ⚠️ Importante sobre TailwindCSS
21
31
 
22
32
  Esta librería **NO requiere** que instales TailwindCSS en tu proyecto. Los estilos ya están compilados y optimizados. Solo necesitas importar los estilos:
@@ -29,14 +39,14 @@ Si quieres extender los estilos con tus propias clases de TailwindCSS, entonces
29
39
 
30
40
  ## 📖 Uso Básico
31
41
 
32
- ### Importar estilos
42
+ ### Opción 1: Usar la Librería Completa
33
43
 
44
+ #### Importar estilos
34
45
  ```css
35
46
  @import "@onpe/ui/styles";
36
47
  ```
37
48
 
38
- ### Usar componentes
39
-
49
+ #### Usar componentes
40
50
  ```tsx
41
51
  import { Button } from '@onpe/ui/components';
42
52
 
@@ -50,6 +60,103 @@ function App() {
50
60
  }
51
61
  ```
52
62
 
63
+ ### Opción 2: Instalar Componentes Individualmente con CLI
64
+
65
+ #### Instalar un componente específico
66
+ ```bash
67
+ # Instalar Button
68
+ npx onpe-ui add button
69
+
70
+ # Instalar Modal (instala automáticamente Portal y Overlay)
71
+ npx onpe-ui add modal
72
+
73
+ # Instalar Portal
74
+ npx onpe-ui add portal
75
+
76
+ # Instalar Overlay
77
+ npx onpe-ui add overlay
78
+
79
+ # Instalar Show
80
+ npx onpe-ui add show
81
+ ```
82
+
83
+ #### Usar componentes instalados individualmente
84
+ ```tsx
85
+ // Después de instalar con CLI
86
+ import { Button } from './components/ui/Button';
87
+ import { Modal } from './components/ui/Modal';
88
+
89
+ function App() {
90
+ const [isOpen, setIsOpen] = useState(false);
91
+
92
+ return (
93
+ <div>
94
+ <Button color="primary" title="Abrir Modal" onClick={() => setIsOpen(true)} />
95
+ <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
96
+ <h2>Contenido del Modal</h2>
97
+ </Modal>
98
+ </div>
99
+ );
100
+ }
101
+ ```
102
+
103
+ #### Configuración requerida para componentes individuales
104
+
105
+ **1. Instalar Tailwind CSS:**
106
+ ```bash
107
+ npm install -D tailwindcss postcss autoprefixer
108
+ npx tailwindcss init -p
109
+ ```
110
+
111
+ **2. Configurar tailwind.config.js:**
112
+ ```javascript
113
+ /** @type {import('tailwindcss').Config} */
114
+ module.exports = {
115
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
116
+ theme: {
117
+ extend: {
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
+ },
133
+ },
134
+ plugins: [],
135
+ }
136
+ ```
137
+
138
+ **3. Agregar estilos base en index.css:**
139
+ ```css
140
+ @tailwind base;
141
+ @tailwind components;
142
+ @tailwind utilities;
143
+ ```
144
+
145
+ **4. Para componentes que usan Portal, agregar en public/index.html:**
146
+ ```html
147
+ <!DOCTYPE html>
148
+ <html lang="es">
149
+ <head>
150
+ <meta charset="utf-8" />
151
+ <title>Mi App</title>
152
+ </head>
153
+ <body>
154
+ <div id="root"></div>
155
+ <div id="portal"></div>
156
+ </body>
157
+ </html>
158
+ ```
159
+
53
160
  ## 🎨 Paleta de Colores ONPE
54
161
 
55
162
  ### Colores Principales
@@ -69,6 +176,60 @@ function App() {
69
176
  - **Gray Light**: `#bdbdbd` - Texto terciario
70
177
  - **Gray Extra Light**: `#f2f2f2` - Fondos suaves
71
178
 
179
+ ## 🔗 Dependencias entre Componentes
180
+
181
+ ### Mapa de Dependencias
182
+ ```
183
+ Modal
184
+ ├── Portal (requerido)
185
+ ├── Overlay (requerido)
186
+ └── IconClose (requerido)
187
+
188
+ Portal
189
+ └── react-dom (createPortal)
190
+
191
+ Overlay
192
+ └── (sin dependencias externas)
193
+
194
+ Button
195
+ └── (sin dependencias externas)
196
+
197
+ Show
198
+ └── (sin dependencias externas)
199
+ ```
200
+
201
+ ### Instalación Automática de Dependencias
202
+
203
+ **Modal** - Instala automáticamente sus dependencias:
204
+ ```bash
205
+ npx onpe-ui add modal
206
+ # Esto instalará automáticamente:
207
+ # - Portal.tsx
208
+ # - Overlay.tsx
209
+ # - IconClose.tsx (si está disponible)
210
+ ```
211
+
212
+ **Otros componentes** - Instalación independiente:
213
+ ```bash
214
+ npx onpe-ui add button # Sin dependencias
215
+ npx onpe-ui add portal # Sin dependencias
216
+ npx onpe-ui add overlay # Sin dependencias
217
+ npx onpe-ui add show # Sin dependencias
218
+ ```
219
+
220
+ ### Estructura de Archivos Después de la Instalación
221
+
222
+ ```
223
+ src/
224
+ └── components/
225
+ └── ui/
226
+ ├── Button.tsx
227
+ ├── Modal.tsx
228
+ ├── Overlay.tsx
229
+ ├── Portal.tsx
230
+ └── Show.tsx
231
+ ```
232
+
72
233
  ## 🧩 Componentes Disponibles
73
234
 
74
235
  ### Button
@@ -420,6 +581,68 @@ MIT © ONPE - Oficina Nacional de Procesos Electorales
420
581
  4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
421
582
  5. Abre un Pull Request
422
583
 
584
+ ## 🐛 Solución de Problemas
585
+
586
+ ### Problemas con la CLI
587
+
588
+ **Error: "Componente no encontrado"**
589
+ ```bash
590
+ # Verificar componentes disponibles
591
+ npx onpe-ui add --help
592
+
593
+ # Componentes válidos:
594
+ # button, modal, overlay, portal, show
595
+ ```
596
+
597
+ **Error: "No se pudo descargar el componente"**
598
+ ```bash
599
+ # Verificar conexión a internet
600
+ ping github.com
601
+
602
+ # Verificar que el repositorio esté disponible
603
+ curl https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/components/Button/Button.tsx
604
+ ```
605
+
606
+ **Los estilos no se aplican**
607
+ ```bash
608
+ # Verificar que Tailwind esté instalado
609
+ npm list tailwindcss
610
+
611
+ # Verificar configuración
612
+ cat tailwind.config.js
613
+ ```
614
+
615
+ **Portal no funciona**
616
+ ```bash
617
+ # Verificar que tengas el elemento portal en HTML
618
+ grep -r "id=\"portal\"" public/
619
+ ```
620
+
621
+ ### Problemas con la Librería Completa
622
+
623
+ **Error: "Module not found"**
624
+ ```bash
625
+ # Verificar instalación
626
+ npm list @onpe/ui
627
+
628
+ # Reinstalar si es necesario
629
+ npm uninstall @onpe/ui
630
+ npm install @onpe/ui
631
+ ```
632
+
633
+ **Estilos no se cargan**
634
+ ```css
635
+ /* Verificar que tengas la importación correcta */
636
+ @import "@onpe/ui/styles";
637
+ ```
638
+
639
+ ### Problemas con Storybook
640
+
641
+ **Error: "Failed to fetch dynamically imported module"**
642
+ - Verificar que el archivo `preview.ts` importe correctamente `../src/styles.css`
643
+ - Asegurar que Tailwind CSS esté configurado correctamente
644
+ - Verificar que PostCSS esté configurado
645
+
423
646
  ## 📞 Soporte
424
647
 
425
648
  - 📧 Email: desarrollo@onpe.gob.pe
package/package.json CHANGED
@@ -1,120 +1,120 @@
1
- {
2
- "name": "@onpe/ui",
3
- "version": "1.0.24",
4
- "type": "module",
5
- "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
- "main": "dist/index.js",
7
- "module": "dist/index.esm.js",
8
- "types": "dist/index.d.ts",
9
- "bin": {
10
- "onpe-ui": "dist/cli.js"
11
- },
12
- "exports": {
13
- ".": {
14
- "import": "./dist/index.esm.js",
15
- "require": "./dist/index.js",
16
- "types": "./dist/index.d.ts"
17
- },
18
- "./components": {
19
- "import": "./dist/components.esm.js",
20
- "require": "./dist/components.js",
21
- "types": "./dist/components.d.ts"
22
- },
23
- "./hooks": {
24
- "import": "./dist/hooks.esm.js",
25
- "require": "./dist/hooks.js",
26
- "types": "./dist/hooks.d.ts"
27
- },
28
- "./utils": {
29
- "import": "./dist/utils.esm.js",
30
- "require": "./dist/utils.js",
31
- "types": "./dist/utils.d.ts"
32
- },
33
- "./lib": {
34
- "import": "./dist/lib.esm.js",
35
- "require": "./dist/lib.js",
36
- "types": "./dist/lib.d.ts"
37
- },
38
- "./styles": "./dist/index.css",
39
- "./tailwind-preset": "./tailwind-preset.js"
40
- },
41
- "files": [
42
- "dist",
43
- "!dist/**/*.stories.*",
44
- "!dist/**/IconsOverview.*",
45
- "!dist/**/*.map"
46
- ],
47
- "scripts": {
48
- "build": "rollup -c",
49
- "dev": "rollup -c -w",
50
- "test": "jest",
51
- "lint": "eslint src --ext .ts,.tsx",
52
- "lint:fix": "eslint src --ext .ts,.tsx --fix",
53
- "type-check": "tsc --noEmit",
54
- "storybook": "storybook dev -p 6006",
55
- "build-storybook": "storybook build"
56
- },
57
- "keywords": [
58
- "react",
59
- "components",
60
- "hooks",
61
- "utils",
62
- "lib",
63
- "tailwind",
64
- "ui",
65
- "typescript",
66
- "onpe",
67
- "peru",
68
- "elecciones"
69
- ],
70
- "author": "ONPE",
71
- "license": "MIT",
72
- "repository": {
73
- "type": "git",
74
- "url": "https://github.com/ricardosv46/onpe-ui.git"
75
- },
76
- "bugs": {
77
- "url": "https://github.com/ricardosv46/onpe-ui/issues"
78
- },
79
- "homepage": "https://github.com/ricardosv46/onpe-ui#readme",
80
- "peerDependencies": {
81
- "react": ">=16.8.0",
82
- "react-dom": ">=16.8.0"
83
- },
84
- "devDependencies": {
85
- "@rollup/plugin-commonjs": "^25.0.7",
86
- "@rollup/plugin-node-resolve": "^15.2.3",
87
- "@rollup/plugin-typescript": "^11.1.5",
88
- "@storybook/addon-essentials": "^7.6.6",
89
- "@storybook/addon-interactions": "^7.6.6",
90
- "@storybook/addon-links": "^7.6.6",
91
- "@storybook/blocks": "^7.6.6",
92
- "@storybook/react": "^7.6.6",
93
- "@storybook/react-vite": "^7.6.6",
94
- "@storybook/testing-library": "^0.2.2",
95
- "@tailwindcss/postcss": "^4.1.13",
96
- "@types/react": "^18.2.45",
97
- "@types/react-dom": "^18.2.18",
98
- "@typescript-eslint/eslint-plugin": "^6.14.0",
99
- "@typescript-eslint/parser": "^6.14.0",
100
- "autoprefixer": "^10.4.16",
101
- "eslint": "^8.55.0",
102
- "eslint-plugin-react": "^7.33.2",
103
- "eslint-plugin-react-hooks": "^4.6.0",
104
- "postcss": "^8.4.32",
105
- "react": "^18.2.0",
106
- "react-dom": "^18.2.0",
107
- "rollup": "^4.9.1",
108
- "rollup-plugin-dts": "^6.1.0",
109
- "rollup-plugin-peer-deps-external": "^2.2.4",
110
- "rollup-plugin-postcss": "^4.0.2",
111
- "storybook": "^7.6.6",
112
- "tailwindcss": "^4.1.13",
113
- "typescript": "^5.3.3"
114
- },
115
- "dependencies": {
116
- "clsx": "^2.0.0",
117
- "commander": "^11.1.0",
118
- "fs-extra": "^11.3.1"
119
- }
120
- }
1
+ {
2
+ "name": "@onpe/ui",
3
+ "version": "1.0.26",
4
+ "type": "module",
5
+ "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.esm.js",
8
+ "types": "dist/index.d.ts",
9
+ "bin": {
10
+ "onpe-ui": "dist/cli.js"
11
+ },
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/index.esm.js",
15
+ "require": "./dist/index.js",
16
+ "types": "./dist/index.d.ts"
17
+ },
18
+ "./components": {
19
+ "import": "./dist/components.esm.js",
20
+ "require": "./dist/components.js",
21
+ "types": "./dist/components.d.ts"
22
+ },
23
+ "./hooks": {
24
+ "import": "./dist/hooks.esm.js",
25
+ "require": "./dist/hooks.js",
26
+ "types": "./dist/hooks.d.ts"
27
+ },
28
+ "./utils": {
29
+ "import": "./dist/utils.esm.js",
30
+ "require": "./dist/utils.js",
31
+ "types": "./dist/utils.d.ts"
32
+ },
33
+ "./lib": {
34
+ "import": "./dist/lib.esm.js",
35
+ "require": "./dist/lib.js",
36
+ "types": "./dist/lib.d.ts"
37
+ },
38
+ "./styles": "./dist/index.css",
39
+ "./tailwind-preset": "./tailwind-preset.js"
40
+ },
41
+ "files": [
42
+ "dist",
43
+ "!dist/**/*.stories.*",
44
+ "!dist/**/IconsOverview.*",
45
+ "!dist/**/*.map"
46
+ ],
47
+ "scripts": {
48
+ "build": "rollup -c",
49
+ "dev": "rollup -c -w",
50
+ "test": "jest",
51
+ "lint": "eslint src --ext .ts,.tsx",
52
+ "lint:fix": "eslint src --ext .ts,.tsx --fix",
53
+ "type-check": "tsc --noEmit",
54
+ "storybook": "storybook dev -p 6006",
55
+ "build-storybook": "storybook build"
56
+ },
57
+ "keywords": [
58
+ "react",
59
+ "components",
60
+ "hooks",
61
+ "utils",
62
+ "lib",
63
+ "tailwind",
64
+ "ui",
65
+ "typescript",
66
+ "onpe",
67
+ "peru",
68
+ "elecciones"
69
+ ],
70
+ "author": "ONPE",
71
+ "license": "MIT",
72
+ "repository": {
73
+ "type": "git",
74
+ "url": "https://github.com/ricardosv46/onpe-ui.git"
75
+ },
76
+ "bugs": {
77
+ "url": "https://github.com/ricardosv46/onpe-ui/issues"
78
+ },
79
+ "homepage": "https://github.com/ricardosv46/onpe-ui#readme",
80
+ "peerDependencies": {
81
+ "react": ">=16.8.0",
82
+ "react-dom": ">=16.8.0"
83
+ },
84
+ "devDependencies": {
85
+ "@rollup/plugin-commonjs": "^25.0.7",
86
+ "@rollup/plugin-node-resolve": "^15.2.3",
87
+ "@rollup/plugin-typescript": "^11.1.5",
88
+ "@storybook/addon-essentials": "^7.6.6",
89
+ "@storybook/addon-interactions": "^7.6.6",
90
+ "@storybook/addon-links": "^7.6.6",
91
+ "@storybook/blocks": "^7.6.6",
92
+ "@storybook/react": "^7.6.6",
93
+ "@storybook/react-vite": "^7.6.6",
94
+ "@storybook/testing-library": "^0.2.2",
95
+ "@tailwindcss/postcss": "^4.1.13",
96
+ "@types/react": "^18.2.45",
97
+ "@types/react-dom": "^18.2.18",
98
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
99
+ "@typescript-eslint/parser": "^6.14.0",
100
+ "autoprefixer": "^10.4.16",
101
+ "eslint": "^8.55.0",
102
+ "eslint-plugin-react": "^7.33.2",
103
+ "eslint-plugin-react-hooks": "^4.6.0",
104
+ "postcss": "^8.4.32",
105
+ "react": "^18.2.0",
106
+ "react-dom": "^18.2.0",
107
+ "rollup": "^4.9.1",
108
+ "rollup-plugin-dts": "^6.1.0",
109
+ "rollup-plugin-peer-deps-external": "^2.2.4",
110
+ "rollup-plugin-postcss": "^4.0.2",
111
+ "storybook": "^7.6.6",
112
+ "tailwindcss": "^4.1.13",
113
+ "typescript": "^5.3.3"
114
+ },
115
+ "dependencies": {
116
+ "clsx": "^2.0.0",
117
+ "commander": "^11.1.0",
118
+ "fs-extra": "^11.3.1"
119
+ }
120
+ }