cli-error-capa-8 1.0.2 → 1.0.4
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/index.js +181 -46
- package/package.json +1 -1
- package/parches/{App.jsx → App.tsx} +37 -94
package/index.js
CHANGED
|
@@ -83,7 +83,7 @@ async function main(){
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
run(
|
|
86
|
-
`npm create vite@latest ${name} -- --template react --no-interactive`,
|
|
86
|
+
`npm create vite@latest ${name} -- --template react-ts --no-interactive`,
|
|
87
87
|
process.cwd()
|
|
88
88
|
);
|
|
89
89
|
|
|
@@ -111,12 +111,16 @@ async function main(){
|
|
|
111
111
|
Dependencias extras
|
|
112
112
|
*/
|
|
113
113
|
|
|
114
|
+
|
|
115
|
+
/*
|
|
116
|
+
zod y react-hook-form
|
|
117
|
+
*/
|
|
118
|
+
|
|
119
|
+
|
|
114
120
|
console.log(
|
|
115
121
|
"\nInstalando zod y react-hook-form..."
|
|
116
122
|
);
|
|
117
123
|
|
|
118
|
-
try{
|
|
119
|
-
|
|
120
124
|
run(
|
|
121
125
|
"npm install zod react-hook-form",
|
|
122
126
|
projectPath
|
|
@@ -126,15 +130,10 @@ async function main(){
|
|
|
126
130
|
"zod y react-hook-form instalados"
|
|
127
131
|
);
|
|
128
132
|
|
|
129
|
-
}catch(e){
|
|
130
|
-
|
|
131
|
-
console.log(
|
|
132
|
-
"Error al instalar zod y react-hook-form:"
|
|
133
|
-
);
|
|
134
|
-
|
|
135
|
-
console.log(e.message);
|
|
136
133
|
|
|
137
|
-
|
|
134
|
+
/*
|
|
135
|
+
tailwindcss y @tailwindcss/vite
|
|
136
|
+
*/
|
|
138
137
|
|
|
139
138
|
|
|
140
139
|
|
|
@@ -149,7 +148,6 @@ async function main(){
|
|
|
149
148
|
);
|
|
150
149
|
|
|
151
150
|
|
|
152
|
-
|
|
153
151
|
/*
|
|
154
152
|
Mostrar dependencias
|
|
155
153
|
*/
|
|
@@ -183,61 +181,170 @@ async function main(){
|
|
|
183
181
|
}
|
|
184
182
|
|
|
185
183
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
modificar vite.config.js
|
|
184
|
+
/*
|
|
185
|
+
modificar tsconfig.json
|
|
189
186
|
*/
|
|
187
|
+
const tsconfig = path.join(
|
|
188
|
+
projectPath,
|
|
189
|
+
"tsconfig.json"
|
|
190
|
+
);
|
|
190
191
|
|
|
192
|
+
if(fs.existsSync(tsconfig)){
|
|
191
193
|
|
|
192
|
-
const
|
|
193
|
-
|
|
194
|
-
"
|
|
194
|
+
const data = fs.readFileSync(
|
|
195
|
+
tsconfig,
|
|
196
|
+
"utf8"
|
|
195
197
|
);
|
|
196
198
|
|
|
199
|
+
const json = JSON.parse(data);
|
|
200
|
+
|
|
201
|
+
json.compilerOptions = {
|
|
202
|
+
...(json.compilerOptions || {}),
|
|
203
|
+
baseUrl: ".",
|
|
204
|
+
paths: {
|
|
205
|
+
"@/*": [
|
|
206
|
+
"./src/*"
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
fs.writeFileSync(
|
|
212
|
+
tsconfig,
|
|
213
|
+
JSON.stringify(json, null, 2)
|
|
214
|
+
);
|
|
197
215
|
|
|
198
216
|
console.log(
|
|
199
|
-
"
|
|
200
|
-
vite
|
|
217
|
+
"tsconfig.json modificado"
|
|
201
218
|
);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
/*
|
|
224
|
+
modificar vite.config.ts
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
const viteconfig = path.join(
|
|
228
|
+
projectPath,
|
|
229
|
+
"vite.config.ts"
|
|
230
|
+
);
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
console.log(
|
|
234
|
+
"\nViteConfig:",
|
|
235
|
+
viteconfig
|
|
236
|
+
);
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
if(fs.existsSync(viteconfig)){
|
|
240
|
+
|
|
241
|
+
editFile(viteconfig,(data)=>{
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
// agregar imports
|
|
245
|
+
if(!data.includes("@tailwindcss/vite")){
|
|
246
|
+
|
|
247
|
+
data = data.replace(
|
|
248
|
+
"import react from '@vitejs/plugin-react'",
|
|
249
|
+
"import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'"
|
|
250
|
+
);
|
|
251
|
+
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
if(!data.includes("from \"path\"")){
|
|
256
|
+
|
|
257
|
+
data = data.replace(
|
|
258
|
+
"import tailwindcss from '@tailwindcss/vite'",
|
|
259
|
+
"import path from 'path'\nimport tailwindcss from '@tailwindcss/vite'"
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
// agregar tailwind al plugin
|
|
267
|
+
if(data.includes("plugins: [react()]")){
|
|
268
|
+
|
|
269
|
+
data = data.replace(
|
|
270
|
+
"plugins: [react()]",
|
|
271
|
+
"plugins: [react(), tailwindcss()]"
|
|
272
|
+
);
|
|
273
|
+
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
// agregar alias
|
|
279
|
+
if(!data.includes("alias:")){
|
|
280
|
+
|
|
281
|
+
data = data.replace(
|
|
282
|
+
"export default defineConfig({",
|
|
283
|
+
`export default defineConfig({
|
|
284
|
+
resolve: {
|
|
285
|
+
alias: {
|
|
286
|
+
"@": path.resolve(__dirname, "./src"),
|
|
287
|
+
},
|
|
288
|
+
},`
|
|
289
|
+
);
|
|
290
|
+
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
return data;
|
|
295
|
+
|
|
296
|
+
});
|
|
297
|
+
|
|
202
298
|
|
|
203
299
|
console.log(
|
|
204
|
-
"
|
|
205
|
-
fs.existsSync(vite)
|
|
300
|
+
"vite.config.ts modificado"
|
|
206
301
|
);
|
|
207
302
|
|
|
303
|
+
}
|
|
304
|
+
/*
|
|
305
|
+
modificar tsconfig.app.json
|
|
306
|
+
*/
|
|
307
|
+
|
|
308
|
+
const tsconfigApp = path.join(
|
|
309
|
+
projectPath,
|
|
310
|
+
"tsconfig.app.json"
|
|
311
|
+
);
|
|
208
312
|
|
|
209
|
-
if(fs.existsSync(vite)){
|
|
210
313
|
|
|
211
|
-
|
|
314
|
+
console.log(
|
|
315
|
+
"\ntsconfig.app:",
|
|
316
|
+
tsconfigApp
|
|
317
|
+
);
|
|
212
318
|
|
|
213
|
-
if(
|
|
214
|
-
!data.includes("@tailwindcss/vite")
|
|
215
|
-
){
|
|
216
319
|
|
|
217
|
-
|
|
218
|
-
.replace(
|
|
219
|
-
"import react from '@vitejs/plugin-react'",
|
|
220
|
-
"import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'"
|
|
221
|
-
)
|
|
222
|
-
.replace(
|
|
223
|
-
"plugins: [react()]",
|
|
224
|
-
"plugins: [react(), tailwindcss()]"
|
|
225
|
-
);
|
|
320
|
+
if(fs.existsSync(tsconfigApp)){
|
|
226
321
|
|
|
227
|
-
|
|
322
|
+
editFile(tsconfigApp,(data)=>{
|
|
228
323
|
|
|
229
|
-
|
|
324
|
+
if(!data.includes('"baseUrl"')){
|
|
230
325
|
|
|
231
|
-
|
|
326
|
+
return data.replace(
|
|
327
|
+
`"compilerOptions": {`,
|
|
328
|
+
`"compilerOptions": {
|
|
329
|
+
"baseUrl": ".",
|
|
330
|
+
"paths": {
|
|
331
|
+
"@/*": ["./src/*"]
|
|
332
|
+
},`
|
|
333
|
+
);
|
|
232
334
|
|
|
233
|
-
|
|
234
|
-
"vite.config.js modificado"
|
|
235
|
-
);
|
|
335
|
+
}
|
|
236
336
|
|
|
237
|
-
|
|
337
|
+
return data;
|
|
238
338
|
|
|
339
|
+
});
|
|
239
340
|
|
|
240
341
|
|
|
342
|
+
console.log(
|
|
343
|
+
"tsconfig.app.json modificado"
|
|
344
|
+
);
|
|
345
|
+
|
|
346
|
+
}
|
|
347
|
+
|
|
241
348
|
/*
|
|
242
349
|
modificar CSS
|
|
243
350
|
*/
|
|
@@ -322,18 +429,18 @@ fs.cpSync(
|
|
|
322
429
|
|
|
323
430
|
|
|
324
431
|
console.log(
|
|
325
|
-
"\nModificando App.
|
|
432
|
+
"\nModificando App.Tsx ..."
|
|
326
433
|
);
|
|
327
434
|
const appjsx_origin = path.join(
|
|
328
435
|
__dirname,
|
|
329
436
|
"parches",
|
|
330
|
-
"App.
|
|
437
|
+
"App.Tsx"
|
|
331
438
|
);
|
|
332
439
|
|
|
333
440
|
const appjsx_dest = path.join(
|
|
334
441
|
projectPath,
|
|
335
442
|
"src",
|
|
336
|
-
"App.
|
|
443
|
+
"App.Tsx"
|
|
337
444
|
);
|
|
338
445
|
|
|
339
446
|
fs.cpSync(
|
|
@@ -344,6 +451,34 @@ fs.cpSync(
|
|
|
344
451
|
}
|
|
345
452
|
);
|
|
346
453
|
|
|
454
|
+
|
|
455
|
+
/*
|
|
456
|
+
████████████████████████████████████████████████████████████████████████████████████████████████████████
|
|
457
|
+
FASE PRUEBA FALTA EL CONFIG DE VITE Y EL tSCONFIG PARA EL SHADCN/UI
|
|
458
|
+
████████████████████████████████████████████████████████████████████████████████████████████████████████
|
|
459
|
+
|
|
460
|
+
*/
|
|
461
|
+
|
|
462
|
+
/*
|
|
463
|
+
shadcn/ui
|
|
464
|
+
*/
|
|
465
|
+
/*
|
|
466
|
+
shadcn/ui
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
console.log(
|
|
470
|
+
"\nInstalando shadcn/ui..."
|
|
471
|
+
);
|
|
472
|
+
|
|
473
|
+
run(
|
|
474
|
+
"npx shadcn@latest init",
|
|
475
|
+
projectPath
|
|
476
|
+
);
|
|
477
|
+
console.log(
|
|
478
|
+
"shadcn/ui instalado"
|
|
479
|
+
);
|
|
480
|
+
|
|
481
|
+
*/
|
|
347
482
|
console.log(`
|
|
348
483
|
████████████████████████████████████████████████████████████████████████████████████████████████████████
|
|
349
484
|
██ ██
|
package/package.json
CHANGED
|
@@ -1,85 +1,65 @@
|
|
|
1
1
|
import img from './assets/sombrero sin pupila.png'
|
|
2
|
-
import { useState } from 'react'
|
|
2
|
+
import { useState, type MouseEvent } from 'react'
|
|
3
3
|
import './App.css'
|
|
4
4
|
|
|
5
|
-
const TopHat = () => {
|
|
5
|
+
const TopHat = (): React.JSX.Element => {
|
|
6
|
+
const [pos, setPos] = useState<{ x: number; y: number }>({
|
|
7
|
+
x: 0,
|
|
8
|
+
y: 0,
|
|
9
|
+
})
|
|
6
10
|
|
|
7
|
-
const [
|
|
8
|
-
const [scale,setScale] = useState(1);
|
|
11
|
+
const [scale, setScale] = useState<number>(1)
|
|
9
12
|
|
|
13
|
+
function move(e: MouseEvent<HTMLDivElement>): void {
|
|
14
|
+
const box = e.currentTarget.getBoundingClientRect()
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
const x = e.clientX - box.left
|
|
17
|
+
const y = e.clientY - box.top
|
|
12
18
|
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
const x = e.clientX - box.left;
|
|
16
|
-
const y = e.clientY - box.top;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const centerX = box.width / 2;
|
|
20
|
-
const centerY = box.height / 2;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
let dx = x - centerX;
|
|
24
|
-
let dy = y - centerY;
|
|
19
|
+
const centerX = box.width / 2
|
|
20
|
+
const centerY = box.height / 2
|
|
25
21
|
|
|
22
|
+
let dx = x - centerX
|
|
23
|
+
let dy = y - centerY
|
|
26
24
|
|
|
27
25
|
const distance = Math.sqrt(
|
|
28
26
|
dx * dx + dy * dy
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const angle = Math.atan2(dy,dx);
|
|
27
|
+
)
|
|
33
28
|
|
|
29
|
+
const angle = Math.atan2(dy, dx)
|
|
34
30
|
|
|
35
31
|
// zona central pequeña
|
|
36
|
-
const deadZone = 5
|
|
37
|
-
|
|
32
|
+
const deadZone = 5
|
|
38
33
|
|
|
39
34
|
// movimiento máximo
|
|
40
|
-
const maxRadius = 26
|
|
35
|
+
const maxRadius = 26
|
|
41
36
|
|
|
37
|
+
let radius = 0
|
|
42
38
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if(distance > deadZone){
|
|
47
|
-
|
|
39
|
+
if (distance > deadZone) {
|
|
48
40
|
radius =
|
|
49
41
|
Math.min(
|
|
50
42
|
distance / (box.width / 2),
|
|
51
43
|
1
|
|
52
|
-
) * maxRadius
|
|
53
|
-
|
|
44
|
+
) * maxRadius
|
|
54
45
|
}
|
|
55
46
|
|
|
56
|
-
|
|
57
47
|
setPos({
|
|
58
|
-
|
|
59
48
|
x: Math.cos(angle) * radius,
|
|
60
|
-
|
|
61
49
|
y: Math.sin(angle) * radius
|
|
62
|
-
|
|
63
|
-
});
|
|
64
|
-
|
|
50
|
+
})
|
|
65
51
|
}
|
|
66
52
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
function leave(){
|
|
70
|
-
|
|
53
|
+
function leave(): void {
|
|
71
54
|
setPos({
|
|
72
|
-
x:0,
|
|
73
|
-
y:0
|
|
74
|
-
})
|
|
75
|
-
|
|
55
|
+
x: 0,
|
|
56
|
+
y: 0
|
|
57
|
+
})
|
|
76
58
|
}
|
|
77
59
|
|
|
78
|
-
|
|
79
|
-
|
|
80
60
|
return (
|
|
81
|
-
|
|
82
|
-
|
|
61
|
+
<div
|
|
62
|
+
className="
|
|
83
63
|
min-h-screen
|
|
84
64
|
bg-black
|
|
85
65
|
flex
|
|
@@ -88,15 +68,12 @@ const TopHat = () => {
|
|
|
88
68
|
justify-center
|
|
89
69
|
gap-8
|
|
90
70
|
overflow-hidden
|
|
91
|
-
"
|
|
92
|
-
|
|
93
|
-
|
|
71
|
+
"
|
|
72
|
+
>
|
|
94
73
|
{/* CIRCULO */}
|
|
95
74
|
<div
|
|
96
|
-
|
|
97
75
|
onMouseMove={move}
|
|
98
76
|
onMouseLeave={leave}
|
|
99
|
-
|
|
100
77
|
className="
|
|
101
78
|
relative
|
|
102
79
|
w-[clamp(320px,70vw,800px)]
|
|
@@ -107,13 +84,10 @@ const TopHat = () => {
|
|
|
107
84
|
overflow-hidden
|
|
108
85
|
"
|
|
109
86
|
>
|
|
110
|
-
|
|
111
|
-
|
|
112
87
|
{/* SOMBRERO */}
|
|
113
88
|
<img
|
|
114
|
-
|
|
115
89
|
src={img}
|
|
116
|
-
|
|
90
|
+
alt="Sombrero"
|
|
117
91
|
className="
|
|
118
92
|
absolute
|
|
119
93
|
w-[70%]
|
|
@@ -124,24 +98,14 @@ const TopHat = () => {
|
|
|
124
98
|
"
|
|
125
99
|
/>
|
|
126
100
|
|
|
127
|
-
|
|
128
|
-
|
|
129
101
|
{/* IRIS DRAGÓN */}
|
|
130
102
|
<div
|
|
131
|
-
|
|
132
|
-
onMouseEnter={()=>{
|
|
133
|
-
|
|
103
|
+
onMouseEnter={() => {
|
|
134
104
|
setScale(0.65)
|
|
135
|
-
|
|
136
105
|
}}
|
|
137
|
-
|
|
138
|
-
onMouseLeave={()=>{
|
|
139
|
-
|
|
106
|
+
onMouseLeave={() => {
|
|
140
107
|
setScale(1)
|
|
141
|
-
|
|
142
108
|
}}
|
|
143
|
-
|
|
144
|
-
|
|
145
109
|
className="
|
|
146
110
|
absolute
|
|
147
111
|
left-[50%]
|
|
@@ -152,34 +116,20 @@ const TopHat = () => {
|
|
|
152
116
|
transition-transform
|
|
153
117
|
duration-100
|
|
154
118
|
"
|
|
155
|
-
|
|
156
|
-
|
|
157
119
|
style={{
|
|
158
|
-
|
|
159
|
-
|
|
160
120
|
clipPath:
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
121
|
+
"path('M22.5 0 C27 10 32 22 32 30 C32 38 27 50 22.5 60 C18 50 13 38 13 30 C13 22 18 10 22.5 0 Z')",
|
|
164
122
|
|
|
165
|
-
transform:
|
|
166
|
-
`
|
|
123
|
+
transform: `
|
|
167
124
|
translate(-50%,-90%)
|
|
168
125
|
translate(${pos.x}px,${pos.y}px)
|
|
169
126
|
scale(${scale})
|
|
170
127
|
`
|
|
171
|
-
|
|
172
128
|
}}
|
|
173
|
-
|
|
174
129
|
/>
|
|
175
|
-
|
|
176
|
-
|
|
177
130
|
</div>
|
|
178
131
|
|
|
179
|
-
|
|
180
|
-
|
|
181
132
|
<div
|
|
182
|
-
|
|
183
133
|
className="
|
|
184
134
|
text-white
|
|
185
135
|
tracking-[0.5em]
|
|
@@ -189,18 +139,11 @@ const TopHat = () => {
|
|
|
189
139
|
font-mono
|
|
190
140
|
text-center
|
|
191
141
|
"
|
|
192
|
-
|
|
193
142
|
>
|
|
194
|
-
|
|
195
143
|
CLI - ERROR-CAPA-8
|
|
196
|
-
|
|
197
144
|
</div>
|
|
198
|
-
|
|
199
|
-
|
|
200
145
|
</div>
|
|
201
|
-
|
|
202
146
|
)
|
|
203
|
-
|
|
204
147
|
}
|
|
205
148
|
|
|
206
|
-
export default TopHat
|
|
149
|
+
export default TopHat
|