@onpe/ui 1.2.0 → 1.2.3
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/dist/cli.esm.js +95 -16
- package/dist/cli.js +95 -16
- package/dist/components/Footer/Footer.d.ts +1 -1
- package/package.json +1 -1
package/dist/cli.esm.js
CHANGED
|
@@ -6075,16 +6075,21 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
|
|
|
6075
6075
|
var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
|
|
6076
6076
|
function addComponent(componentName) {
|
|
6077
6077
|
return __awaiter(this, void 0, void 0, function () {
|
|
6078
|
-
var isIcon, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
|
|
6078
|
+
var isIcon, isHook, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableHooks, availableIcons, componentFile, availableItems, itemType, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, itemType, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
|
|
6079
6079
|
return __generator(this, function (_a) {
|
|
6080
6080
|
switch (_a.label) {
|
|
6081
6081
|
case 0:
|
|
6082
6082
|
isIcon = componentName.toLowerCase().startsWith("icon-");
|
|
6083
|
+
isHook = componentName.toLowerCase().startsWith("use-");
|
|
6083
6084
|
isModalComponent = componentName.toLowerCase().startsWith("modal") && componentName !== "modal";
|
|
6084
6085
|
if (isIcon) {
|
|
6085
6086
|
iconCategory = getIconCategory(componentName);
|
|
6086
6087
|
componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "icons", iconCategory);
|
|
6087
6088
|
}
|
|
6089
|
+
else if (isHook) {
|
|
6090
|
+
// Los hooks van en src/hooks/
|
|
6091
|
+
componentPath = path$d.join(process.cwd(), "src", "hooks");
|
|
6092
|
+
}
|
|
6088
6093
|
else if (isModalComponent) {
|
|
6089
6094
|
// Los modales específicos van en src/components/onpe/modals/
|
|
6090
6095
|
componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "modals");
|
|
@@ -6099,10 +6104,14 @@ function addComponent(componentName) {
|
|
|
6099
6104
|
// Crear directorio si no existe
|
|
6100
6105
|
_a.sent();
|
|
6101
6106
|
componentDependencies = {
|
|
6107
|
+
// Modales especializados
|
|
6102
6108
|
"modal-browser-incompatible": ["modal", "icon-warning", "icon-chrome-color", "icon-safari-color", "icon-mozilla-color", "icon-edge-color"],
|
|
6103
6109
|
"modal-system-incompatible": ["modal", "icon-warning", "icon-window", "icon-android", "icon-apple"],
|
|
6104
6110
|
"modal-confirm": ["modal"],
|
|
6105
6111
|
"modal-loading": ["modal"],
|
|
6112
|
+
// Componentes complejos - ORDEN IMPORTANTE: primero las dependencias, luego el componente principal
|
|
6113
|
+
"browser-recommended": ["icon-chrome", "icon-safari", "icon-mozilla", "icon-edge"],
|
|
6114
|
+
footer: ["browser-recommended", "icon-info", "use-toggle"],
|
|
6106
6115
|
};
|
|
6107
6116
|
availableComponents = {
|
|
6108
6117
|
// Componentes básicos
|
|
@@ -6120,6 +6129,11 @@ function addComponent(componentName) {
|
|
|
6120
6129
|
"modal-confirm": "Feedback/ModalConfirm/ModalConfirm.tsx",
|
|
6121
6130
|
"modal-loading": "Feedback/ModalLoading/ModalLoading.tsx",
|
|
6122
6131
|
};
|
|
6132
|
+
availableHooks = {
|
|
6133
|
+
"use-toggle": "useToggle/useToggle.ts",
|
|
6134
|
+
"use-debounce": "useDebounce/useDebounce.ts",
|
|
6135
|
+
"use-local-storage": "useLocalStorage/useLocalStorage.ts",
|
|
6136
|
+
};
|
|
6123
6137
|
availableIcons = {
|
|
6124
6138
|
"icon-check": "Actions/IconCheck/IconCheck.tsx",
|
|
6125
6139
|
"icon-close": "Actions/IconClose/IconClose.tsx",
|
|
@@ -6142,15 +6156,36 @@ function addComponent(componentName) {
|
|
|
6142
6156
|
"icon-apple": "OperatingSystems/IconApple/IconApple.tsx",
|
|
6143
6157
|
"icon-window": "OperatingSystems/IconWindow/IconWindow.tsx",
|
|
6144
6158
|
};
|
|
6145
|
-
|
|
6159
|
+
if (isIcon) {
|
|
6160
|
+
componentFile = availableIcons[componentName.toLowerCase()];
|
|
6161
|
+
}
|
|
6162
|
+
else if (isHook) {
|
|
6163
|
+
componentFile = availableHooks[componentName.toLowerCase()];
|
|
6164
|
+
}
|
|
6165
|
+
else {
|
|
6166
|
+
componentFile = availableComponents[componentName.toLowerCase()];
|
|
6167
|
+
}
|
|
6146
6168
|
if (!componentFile) {
|
|
6147
|
-
availableItems =
|
|
6148
|
-
|
|
6169
|
+
availableItems = void 0;
|
|
6170
|
+
itemType = void 0;
|
|
6171
|
+
if (isIcon) {
|
|
6172
|
+
availableItems = Object.keys(availableIcons);
|
|
6173
|
+
itemType = "Icono";
|
|
6174
|
+
}
|
|
6175
|
+
else if (isHook) {
|
|
6176
|
+
availableItems = Object.keys(availableHooks);
|
|
6177
|
+
itemType = "Hook";
|
|
6178
|
+
}
|
|
6179
|
+
else {
|
|
6180
|
+
availableItems = Object.keys(availableComponents);
|
|
6181
|
+
itemType = "Componente";
|
|
6182
|
+
}
|
|
6183
|
+
throw new Error("".concat(itemType, " '").concat(componentName, "' no encontrado. ").concat(itemType, "s disponibles: ").concat(availableItems.join(", ")));
|
|
6149
6184
|
}
|
|
6150
6185
|
_a.label = 2;
|
|
6151
6186
|
case 2:
|
|
6152
6187
|
_a.trys.push([2, 17, , 18]);
|
|
6153
|
-
if (!(!isIcon && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
|
|
6188
|
+
if (!(!isIcon && !isHook && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
|
|
6154
6189
|
dependencies = componentDependencies[componentName.toLowerCase()];
|
|
6155
6190
|
console.log("\uD83D\uDD17 Instalando dependencias: ".concat(dependencies.join(", ")));
|
|
6156
6191
|
_i = 0, dependencies_1 = dependencies;
|
|
@@ -6161,9 +6196,11 @@ function addComponent(componentName) {
|
|
|
6161
6196
|
_a.label = 4;
|
|
6162
6197
|
case 4:
|
|
6163
6198
|
_a.trys.push([4, 6, , 7]);
|
|
6199
|
+
console.log(" \uD83D\uDCE6 Instalando: ".concat(dependency));
|
|
6164
6200
|
return [4 /*yield*/, addComponent(dependency)];
|
|
6165
6201
|
case 5:
|
|
6166
6202
|
_a.sent();
|
|
6203
|
+
console.log(" \u2705 ".concat(dependency, " instalado correctamente"));
|
|
6167
6204
|
return [3 /*break*/, 7];
|
|
6168
6205
|
case 6:
|
|
6169
6206
|
depError_1 = _a.sent();
|
|
@@ -6173,7 +6210,16 @@ function addComponent(componentName) {
|
|
|
6173
6210
|
_i++;
|
|
6174
6211
|
return [3 /*break*/, 3];
|
|
6175
6212
|
case 8:
|
|
6176
|
-
downloadUrl =
|
|
6213
|
+
downloadUrl = void 0;
|
|
6214
|
+
if (isIcon) {
|
|
6215
|
+
downloadUrl = "".concat(ICONS_URL, "/").concat(componentFile);
|
|
6216
|
+
}
|
|
6217
|
+
else if (isHook) {
|
|
6218
|
+
downloadUrl = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/hooks/".concat(componentFile);
|
|
6219
|
+
}
|
|
6220
|
+
else {
|
|
6221
|
+
downloadUrl = "".concat(COMPONENTS_URL, "/").concat(componentFile);
|
|
6222
|
+
}
|
|
6177
6223
|
return [4 /*yield*/, fetch(downloadUrl)];
|
|
6178
6224
|
case 9:
|
|
6179
6225
|
response = _a.sent();
|
|
@@ -6184,12 +6230,13 @@ function addComponent(componentName) {
|
|
|
6184
6230
|
case 10:
|
|
6185
6231
|
componentCode = _a.sent();
|
|
6186
6232
|
personalizedCode = personalizeComponent(componentCode, componentName);
|
|
6187
|
-
fileName = "".concat(convertToPascalCase(componentName), ".tsx");
|
|
6233
|
+
fileName = isHook ? "".concat(convertToPascalCase(componentName), ".ts") : "".concat(convertToPascalCase(componentName), ".tsx");
|
|
6188
6234
|
filePath = path$d.join(componentPath, fileName);
|
|
6189
6235
|
return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
|
|
6190
6236
|
case 11:
|
|
6191
6237
|
_a.sent();
|
|
6192
|
-
|
|
6238
|
+
itemType = isIcon ? "Icono" : isHook ? "Hook" : "Componente";
|
|
6239
|
+
console.log("\uD83D\uDCC1 ".concat(itemType, " guardado en: ").concat(filePath));
|
|
6193
6240
|
_a.label = 12;
|
|
6194
6241
|
case 12:
|
|
6195
6242
|
_a.trys.push([12, 15, , 16]);
|
|
@@ -6209,7 +6256,7 @@ function addComponent(componentName) {
|
|
|
6209
6256
|
case 16:
|
|
6210
6257
|
// Mostrar instrucciones
|
|
6211
6258
|
console.log("\n📋 Próximos pasos:");
|
|
6212
|
-
console.log("1. Importa el ".concat(
|
|
6259
|
+
console.log("1. Importa el ".concat(itemType.toLowerCase(), ":"));
|
|
6213
6260
|
componentNamePascal = convertToPascalCase(componentName);
|
|
6214
6261
|
// Mostrar opciones de importación
|
|
6215
6262
|
if (isIcon) {
|
|
@@ -6221,6 +6268,12 @@ function addComponent(componentName) {
|
|
|
6221
6268
|
console.log(" // Opci\u00F3n 3: Importaci\u00F3n desde ra\u00EDz");
|
|
6222
6269
|
console.log(" import { ".concat(componentNamePascal, " } from '../onpe';"));
|
|
6223
6270
|
}
|
|
6271
|
+
else if (isHook) {
|
|
6272
|
+
console.log(" // Opci\u00F3n 1: Importaci\u00F3n directa");
|
|
6273
|
+
console.log(" import { ".concat(componentNamePascal, " } from '../hooks/").concat(componentNamePascal, "';"));
|
|
6274
|
+
console.log(" // Opci\u00F3n 2: Importaci\u00F3n con barril (recomendado)");
|
|
6275
|
+
console.log(" import { ".concat(componentNamePascal, " } from '../hooks';"));
|
|
6276
|
+
}
|
|
6224
6277
|
else {
|
|
6225
6278
|
if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
|
|
6226
6279
|
console.log(" // Opci\u00F3n 1: Importaci\u00F3n directa");
|
|
@@ -6240,7 +6293,7 @@ function addComponent(componentName) {
|
|
|
6240
6293
|
}
|
|
6241
6294
|
}
|
|
6242
6295
|
// Mostrar dependencias si las hay
|
|
6243
|
-
if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
|
|
6296
|
+
if (!isIcon && !isHook && componentDependencies[componentName.toLowerCase()]) {
|
|
6244
6297
|
dependencies = componentDependencies[componentName.toLowerCase()];
|
|
6245
6298
|
console.log("2. Tambi\u00E9n se instalaron las dependencias:");
|
|
6246
6299
|
dependencies.forEach(function (dep) {
|
|
@@ -6248,22 +6301,30 @@ function addComponent(componentName) {
|
|
|
6248
6301
|
var depPath;
|
|
6249
6302
|
if (dep.startsWith("icon-")) {
|
|
6250
6303
|
var iconCategory = getIconCategory(dep);
|
|
6251
|
-
depPath = "../onpe
|
|
6304
|
+
depPath = "../onpe/icons/".concat(iconCategory, "/").concat(depPascal);
|
|
6305
|
+
}
|
|
6306
|
+
else if (dep.startsWith("use-")) {
|
|
6307
|
+
depPath = "../hooks/".concat(depPascal);
|
|
6252
6308
|
}
|
|
6253
6309
|
else if (dep.startsWith("modal") && dep !== "modal") {
|
|
6254
|
-
depPath = "../onpe
|
|
6310
|
+
depPath = "../onpe/modals/".concat(depPascal);
|
|
6255
6311
|
}
|
|
6256
6312
|
else {
|
|
6257
|
-
depPath = "../onpe
|
|
6313
|
+
depPath = "../onpe/ui/".concat(depPascal);
|
|
6258
6314
|
}
|
|
6259
6315
|
console.log(" import { ".concat(depPascal, " } from '").concat(depPath, "'"));
|
|
6260
6316
|
});
|
|
6261
|
-
console.log("3. Usa el ".concat(
|
|
6317
|
+
console.log("3. Usa el ".concat(itemType.toLowerCase(), ":"));
|
|
6318
|
+
}
|
|
6319
|
+
else {
|
|
6320
|
+
console.log("2. Usa el ".concat(itemType.toLowerCase(), ":"));
|
|
6321
|
+
}
|
|
6322
|
+
if (isHook) {
|
|
6323
|
+
console.log(" const [state, toggle, open, close] = ".concat(componentNamePascal, "();"));
|
|
6262
6324
|
}
|
|
6263
6325
|
else {
|
|
6264
|
-
console.log("
|
|
6326
|
+
console.log(" <".concat(componentNamePascal, " />"));
|
|
6265
6327
|
}
|
|
6266
|
-
console.log(" <".concat(componentNamePascal, " />"));
|
|
6267
6328
|
return [3 /*break*/, 18];
|
|
6268
6329
|
case 17:
|
|
6269
6330
|
error_1 = _a.sent();
|
|
@@ -6321,6 +6382,8 @@ function personalizeComponent(code, componentName) {
|
|
|
6321
6382
|
Portal: "../onpe/ui/Portal",
|
|
6322
6383
|
Show: "../onpe/ui/Show",
|
|
6323
6384
|
Modal: "../onpe/ui/Modal",
|
|
6385
|
+
Footer: "../onpe/ui/Footer",
|
|
6386
|
+
BrowserRecommended: "../onpe/ui/BrowserRecommended",
|
|
6324
6387
|
// Modales especializados - van en onpe/modals/
|
|
6325
6388
|
ModalConfirm: "../onpe/modals/ModalConfirm",
|
|
6326
6389
|
ModalLoading: "../onpe/modals/ModalLoading",
|
|
@@ -6410,6 +6473,22 @@ function personalizeComponent(code, componentName) {
|
|
|
6410
6473
|
if (!componentName.toLowerCase().startsWith("icon-") && !componentName.toLowerCase().startsWith("modal")) {
|
|
6411
6474
|
personalizedCode = personalizedCode.replace(/from "\.\.\/onpe\/ui\/([^"]+)"/g, function (match, component) { return "from \"./".concat(component, "\""); });
|
|
6412
6475
|
}
|
|
6476
|
+
// Para Footer que importa BrowserRecommended
|
|
6477
|
+
if (componentName.toLowerCase() === "footer") {
|
|
6478
|
+
// Arreglar importación de BrowserRecommended
|
|
6479
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
|
|
6480
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
|
|
6481
|
+
// Arreglar importación de IconInfo
|
|
6482
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
|
|
6483
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
|
|
6484
|
+
// Arreglar importación de useToggle
|
|
6485
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle\/useToggle"/g, "from \"../../hooks/useToggle\"");
|
|
6486
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle"/g, "from \"../../hooks/useToggle\"");
|
|
6487
|
+
}
|
|
6488
|
+
// Para BrowserRecommended que importa iconos
|
|
6489
|
+
if (componentName.toLowerCase() === "browser-recommended") {
|
|
6490
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Browsers\/([^"]+)"/g, function (match, icon) { return "from \"../icons/browsers/".concat(icon, "\""); });
|
|
6491
|
+
}
|
|
6413
6492
|
// Para modales que importan componentes UI
|
|
6414
6493
|
if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
|
|
6415
6494
|
// Arreglar importación de Modal específicamente
|
package/dist/cli.js
CHANGED
|
@@ -6075,16 +6075,21 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
|
|
|
6075
6075
|
var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
|
|
6076
6076
|
function addComponent(componentName) {
|
|
6077
6077
|
return __awaiter(this, void 0, void 0, function () {
|
|
6078
|
-
var isIcon, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
|
|
6078
|
+
var isIcon, isHook, isModalComponent, componentPath, iconCategory, componentDependencies, availableComponents, availableHooks, availableIcons, componentFile, availableItems, itemType, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, itemType, barrelError_1, componentNamePascal, iconCategory, dependencies, error_1;
|
|
6079
6079
|
return __generator(this, function (_a) {
|
|
6080
6080
|
switch (_a.label) {
|
|
6081
6081
|
case 0:
|
|
6082
6082
|
isIcon = componentName.toLowerCase().startsWith("icon-");
|
|
6083
|
+
isHook = componentName.toLowerCase().startsWith("use-");
|
|
6083
6084
|
isModalComponent = componentName.toLowerCase().startsWith("modal") && componentName !== "modal";
|
|
6084
6085
|
if (isIcon) {
|
|
6085
6086
|
iconCategory = getIconCategory(componentName);
|
|
6086
6087
|
componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "icons", iconCategory);
|
|
6087
6088
|
}
|
|
6089
|
+
else if (isHook) {
|
|
6090
|
+
// Los hooks van en src/hooks/
|
|
6091
|
+
componentPath = path$d.join(process.cwd(), "src", "hooks");
|
|
6092
|
+
}
|
|
6088
6093
|
else if (isModalComponent) {
|
|
6089
6094
|
// Los modales específicos van en src/components/onpe/modals/
|
|
6090
6095
|
componentPath = path$d.join(process.cwd(), "src", "components", "onpe", "modals");
|
|
@@ -6099,10 +6104,14 @@ function addComponent(componentName) {
|
|
|
6099
6104
|
// Crear directorio si no existe
|
|
6100
6105
|
_a.sent();
|
|
6101
6106
|
componentDependencies = {
|
|
6107
|
+
// Modales especializados
|
|
6102
6108
|
"modal-browser-incompatible": ["modal", "icon-warning", "icon-chrome-color", "icon-safari-color", "icon-mozilla-color", "icon-edge-color"],
|
|
6103
6109
|
"modal-system-incompatible": ["modal", "icon-warning", "icon-window", "icon-android", "icon-apple"],
|
|
6104
6110
|
"modal-confirm": ["modal"],
|
|
6105
6111
|
"modal-loading": ["modal"],
|
|
6112
|
+
// Componentes complejos - ORDEN IMPORTANTE: primero las dependencias, luego el componente principal
|
|
6113
|
+
"browser-recommended": ["icon-chrome", "icon-safari", "icon-mozilla", "icon-edge"],
|
|
6114
|
+
footer: ["browser-recommended", "icon-info", "use-toggle"],
|
|
6106
6115
|
};
|
|
6107
6116
|
availableComponents = {
|
|
6108
6117
|
// Componentes básicos
|
|
@@ -6120,6 +6129,11 @@ function addComponent(componentName) {
|
|
|
6120
6129
|
"modal-confirm": "Feedback/ModalConfirm/ModalConfirm.tsx",
|
|
6121
6130
|
"modal-loading": "Feedback/ModalLoading/ModalLoading.tsx",
|
|
6122
6131
|
};
|
|
6132
|
+
availableHooks = {
|
|
6133
|
+
"use-toggle": "useToggle/useToggle.ts",
|
|
6134
|
+
"use-debounce": "useDebounce/useDebounce.ts",
|
|
6135
|
+
"use-local-storage": "useLocalStorage/useLocalStorage.ts",
|
|
6136
|
+
};
|
|
6123
6137
|
availableIcons = {
|
|
6124
6138
|
"icon-check": "Actions/IconCheck/IconCheck.tsx",
|
|
6125
6139
|
"icon-close": "Actions/IconClose/IconClose.tsx",
|
|
@@ -6142,15 +6156,36 @@ function addComponent(componentName) {
|
|
|
6142
6156
|
"icon-apple": "OperatingSystems/IconApple/IconApple.tsx",
|
|
6143
6157
|
"icon-window": "OperatingSystems/IconWindow/IconWindow.tsx",
|
|
6144
6158
|
};
|
|
6145
|
-
|
|
6159
|
+
if (isIcon) {
|
|
6160
|
+
componentFile = availableIcons[componentName.toLowerCase()];
|
|
6161
|
+
}
|
|
6162
|
+
else if (isHook) {
|
|
6163
|
+
componentFile = availableHooks[componentName.toLowerCase()];
|
|
6164
|
+
}
|
|
6165
|
+
else {
|
|
6166
|
+
componentFile = availableComponents[componentName.toLowerCase()];
|
|
6167
|
+
}
|
|
6146
6168
|
if (!componentFile) {
|
|
6147
|
-
availableItems =
|
|
6148
|
-
|
|
6169
|
+
availableItems = void 0;
|
|
6170
|
+
itemType = void 0;
|
|
6171
|
+
if (isIcon) {
|
|
6172
|
+
availableItems = Object.keys(availableIcons);
|
|
6173
|
+
itemType = "Icono";
|
|
6174
|
+
}
|
|
6175
|
+
else if (isHook) {
|
|
6176
|
+
availableItems = Object.keys(availableHooks);
|
|
6177
|
+
itemType = "Hook";
|
|
6178
|
+
}
|
|
6179
|
+
else {
|
|
6180
|
+
availableItems = Object.keys(availableComponents);
|
|
6181
|
+
itemType = "Componente";
|
|
6182
|
+
}
|
|
6183
|
+
throw new Error("".concat(itemType, " '").concat(componentName, "' no encontrado. ").concat(itemType, "s disponibles: ").concat(availableItems.join(", ")));
|
|
6149
6184
|
}
|
|
6150
6185
|
_a.label = 2;
|
|
6151
6186
|
case 2:
|
|
6152
6187
|
_a.trys.push([2, 17, , 18]);
|
|
6153
|
-
if (!(!isIcon && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
|
|
6188
|
+
if (!(!isIcon && !isHook && componentDependencies[componentName.toLowerCase()])) return [3 /*break*/, 8];
|
|
6154
6189
|
dependencies = componentDependencies[componentName.toLowerCase()];
|
|
6155
6190
|
console.log("\uD83D\uDD17 Instalando dependencias: ".concat(dependencies.join(", ")));
|
|
6156
6191
|
_i = 0, dependencies_1 = dependencies;
|
|
@@ -6161,9 +6196,11 @@ function addComponent(componentName) {
|
|
|
6161
6196
|
_a.label = 4;
|
|
6162
6197
|
case 4:
|
|
6163
6198
|
_a.trys.push([4, 6, , 7]);
|
|
6199
|
+
console.log(" \uD83D\uDCE6 Instalando: ".concat(dependency));
|
|
6164
6200
|
return [4 /*yield*/, addComponent(dependency)];
|
|
6165
6201
|
case 5:
|
|
6166
6202
|
_a.sent();
|
|
6203
|
+
console.log(" \u2705 ".concat(dependency, " instalado correctamente"));
|
|
6167
6204
|
return [3 /*break*/, 7];
|
|
6168
6205
|
case 6:
|
|
6169
6206
|
depError_1 = _a.sent();
|
|
@@ -6173,7 +6210,16 @@ function addComponent(componentName) {
|
|
|
6173
6210
|
_i++;
|
|
6174
6211
|
return [3 /*break*/, 3];
|
|
6175
6212
|
case 8:
|
|
6176
|
-
downloadUrl =
|
|
6213
|
+
downloadUrl = void 0;
|
|
6214
|
+
if (isIcon) {
|
|
6215
|
+
downloadUrl = "".concat(ICONS_URL, "/").concat(componentFile);
|
|
6216
|
+
}
|
|
6217
|
+
else if (isHook) {
|
|
6218
|
+
downloadUrl = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/hooks/".concat(componentFile);
|
|
6219
|
+
}
|
|
6220
|
+
else {
|
|
6221
|
+
downloadUrl = "".concat(COMPONENTS_URL, "/").concat(componentFile);
|
|
6222
|
+
}
|
|
6177
6223
|
return [4 /*yield*/, fetch(downloadUrl)];
|
|
6178
6224
|
case 9:
|
|
6179
6225
|
response = _a.sent();
|
|
@@ -6184,12 +6230,13 @@ function addComponent(componentName) {
|
|
|
6184
6230
|
case 10:
|
|
6185
6231
|
componentCode = _a.sent();
|
|
6186
6232
|
personalizedCode = personalizeComponent(componentCode, componentName);
|
|
6187
|
-
fileName = "".concat(convertToPascalCase(componentName), ".tsx");
|
|
6233
|
+
fileName = isHook ? "".concat(convertToPascalCase(componentName), ".ts") : "".concat(convertToPascalCase(componentName), ".tsx");
|
|
6188
6234
|
filePath = path$d.join(componentPath, fileName);
|
|
6189
6235
|
return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
|
|
6190
6236
|
case 11:
|
|
6191
6237
|
_a.sent();
|
|
6192
|
-
|
|
6238
|
+
itemType = isIcon ? "Icono" : isHook ? "Hook" : "Componente";
|
|
6239
|
+
console.log("\uD83D\uDCC1 ".concat(itemType, " guardado en: ").concat(filePath));
|
|
6193
6240
|
_a.label = 12;
|
|
6194
6241
|
case 12:
|
|
6195
6242
|
_a.trys.push([12, 15, , 16]);
|
|
@@ -6209,7 +6256,7 @@ function addComponent(componentName) {
|
|
|
6209
6256
|
case 16:
|
|
6210
6257
|
// Mostrar instrucciones
|
|
6211
6258
|
console.log("\n📋 Próximos pasos:");
|
|
6212
|
-
console.log("1. Importa el ".concat(
|
|
6259
|
+
console.log("1. Importa el ".concat(itemType.toLowerCase(), ":"));
|
|
6213
6260
|
componentNamePascal = convertToPascalCase(componentName);
|
|
6214
6261
|
// Mostrar opciones de importación
|
|
6215
6262
|
if (isIcon) {
|
|
@@ -6221,6 +6268,12 @@ function addComponent(componentName) {
|
|
|
6221
6268
|
console.log(" // Opci\u00F3n 3: Importaci\u00F3n desde ra\u00EDz");
|
|
6222
6269
|
console.log(" import { ".concat(componentNamePascal, " } from '../onpe';"));
|
|
6223
6270
|
}
|
|
6271
|
+
else if (isHook) {
|
|
6272
|
+
console.log(" // Opci\u00F3n 1: Importaci\u00F3n directa");
|
|
6273
|
+
console.log(" import { ".concat(componentNamePascal, " } from '../hooks/").concat(componentNamePascal, "';"));
|
|
6274
|
+
console.log(" // Opci\u00F3n 2: Importaci\u00F3n con barril (recomendado)");
|
|
6275
|
+
console.log(" import { ".concat(componentNamePascal, " } from '../hooks';"));
|
|
6276
|
+
}
|
|
6224
6277
|
else {
|
|
6225
6278
|
if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
|
|
6226
6279
|
console.log(" // Opci\u00F3n 1: Importaci\u00F3n directa");
|
|
@@ -6240,7 +6293,7 @@ function addComponent(componentName) {
|
|
|
6240
6293
|
}
|
|
6241
6294
|
}
|
|
6242
6295
|
// Mostrar dependencias si las hay
|
|
6243
|
-
if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
|
|
6296
|
+
if (!isIcon && !isHook && componentDependencies[componentName.toLowerCase()]) {
|
|
6244
6297
|
dependencies = componentDependencies[componentName.toLowerCase()];
|
|
6245
6298
|
console.log("2. Tambi\u00E9n se instalaron las dependencias:");
|
|
6246
6299
|
dependencies.forEach(function (dep) {
|
|
@@ -6248,22 +6301,30 @@ function addComponent(componentName) {
|
|
|
6248
6301
|
var depPath;
|
|
6249
6302
|
if (dep.startsWith("icon-")) {
|
|
6250
6303
|
var iconCategory = getIconCategory(dep);
|
|
6251
|
-
depPath = "../onpe
|
|
6304
|
+
depPath = "../onpe/icons/".concat(iconCategory, "/").concat(depPascal);
|
|
6305
|
+
}
|
|
6306
|
+
else if (dep.startsWith("use-")) {
|
|
6307
|
+
depPath = "../hooks/".concat(depPascal);
|
|
6252
6308
|
}
|
|
6253
6309
|
else if (dep.startsWith("modal") && dep !== "modal") {
|
|
6254
|
-
depPath = "../onpe
|
|
6310
|
+
depPath = "../onpe/modals/".concat(depPascal);
|
|
6255
6311
|
}
|
|
6256
6312
|
else {
|
|
6257
|
-
depPath = "../onpe
|
|
6313
|
+
depPath = "../onpe/ui/".concat(depPascal);
|
|
6258
6314
|
}
|
|
6259
6315
|
console.log(" import { ".concat(depPascal, " } from '").concat(depPath, "'"));
|
|
6260
6316
|
});
|
|
6261
|
-
console.log("3. Usa el ".concat(
|
|
6317
|
+
console.log("3. Usa el ".concat(itemType.toLowerCase(), ":"));
|
|
6318
|
+
}
|
|
6319
|
+
else {
|
|
6320
|
+
console.log("2. Usa el ".concat(itemType.toLowerCase(), ":"));
|
|
6321
|
+
}
|
|
6322
|
+
if (isHook) {
|
|
6323
|
+
console.log(" const [state, toggle, open, close] = ".concat(componentNamePascal, "();"));
|
|
6262
6324
|
}
|
|
6263
6325
|
else {
|
|
6264
|
-
console.log("
|
|
6326
|
+
console.log(" <".concat(componentNamePascal, " />"));
|
|
6265
6327
|
}
|
|
6266
|
-
console.log(" <".concat(componentNamePascal, " />"));
|
|
6267
6328
|
return [3 /*break*/, 18];
|
|
6268
6329
|
case 17:
|
|
6269
6330
|
error_1 = _a.sent();
|
|
@@ -6321,6 +6382,8 @@ function personalizeComponent(code, componentName) {
|
|
|
6321
6382
|
Portal: "../onpe/ui/Portal",
|
|
6322
6383
|
Show: "../onpe/ui/Show",
|
|
6323
6384
|
Modal: "../onpe/ui/Modal",
|
|
6385
|
+
Footer: "../onpe/ui/Footer",
|
|
6386
|
+
BrowserRecommended: "../onpe/ui/BrowserRecommended",
|
|
6324
6387
|
// Modales especializados - van en onpe/modals/
|
|
6325
6388
|
ModalConfirm: "../onpe/modals/ModalConfirm",
|
|
6326
6389
|
ModalLoading: "../onpe/modals/ModalLoading",
|
|
@@ -6410,6 +6473,22 @@ function personalizeComponent(code, componentName) {
|
|
|
6410
6473
|
if (!componentName.toLowerCase().startsWith("icon-") && !componentName.toLowerCase().startsWith("modal")) {
|
|
6411
6474
|
personalizedCode = personalizedCode.replace(/from "\.\.\/onpe\/ui\/([^"]+)"/g, function (match, component) { return "from \"./".concat(component, "\""); });
|
|
6412
6475
|
}
|
|
6476
|
+
// Para Footer que importa BrowserRecommended
|
|
6477
|
+
if (componentName.toLowerCase() === "footer") {
|
|
6478
|
+
// Arreglar importación de BrowserRecommended
|
|
6479
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
|
|
6480
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/BrowserRecommended"/g, "from \"./BrowserRecommended\"");
|
|
6481
|
+
// Arreglar importación de IconInfo
|
|
6482
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
|
|
6483
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Actions\/IconInfo"/g, "from \"../icons/actions/IconInfo\"");
|
|
6484
|
+
// Arreglar importación de useToggle
|
|
6485
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle\/useToggle"/g, "from \"../../hooks/useToggle\"");
|
|
6486
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/hooks\/useToggle"/g, "from \"../../hooks/useToggle\"");
|
|
6487
|
+
}
|
|
6488
|
+
// Para BrowserRecommended que importa iconos
|
|
6489
|
+
if (componentName.toLowerCase() === "browser-recommended") {
|
|
6490
|
+
personalizedCode = personalizedCode.replace(/from "\.\.\/\.\.\/icons\/Browsers\/([^"]+)"/g, function (match, icon) { return "from \"../icons/browsers/".concat(icon, "\""); });
|
|
6491
|
+
}
|
|
6413
6492
|
// Para modales que importan componentes UI
|
|
6414
6493
|
if (componentName.toLowerCase().startsWith("modal") && componentName !== "modal") {
|
|
6415
6494
|
// Arreglar importación de Modal específicamente
|