@onpe/ui 1.0.43 → 1.0.45

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 (7) hide show
  1. package/dist/cli.esm.js +89 -11
  2. package/dist/cli.js +89 -11
  3. package/dist/components.esm.js +1 -1
  4. package/dist/components.js +1 -1
  5. package/dist/index.esm.js +1 -1
  6. package/dist/index.js +1 -1
  7. package/package.json +1 -1
package/dist/cli.esm.js CHANGED
@@ -5865,12 +5865,20 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
5865
5865
  var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
5866
5866
  function addComponent(componentName) {
5867
5867
  return __awaiter(this, void 0, void 0, function () {
5868
- var isIcon, componentPath, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, importPath, error_1;
5868
+ var isIcon, isModal, folderName, componentPath, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, componentNamePascal, importPath, dependencies, error_1;
5869
5869
  return __generator(this, function (_a) {
5870
5870
  switch (_a.label) {
5871
5871
  case 0:
5872
5872
  isIcon = componentName.toLowerCase().startsWith("icon-");
5873
- componentPath = require$$1.join(process.cwd(), "src", "components", isIcon ? "onpe-icons" : "onpe-ui");
5873
+ isModal = componentName.toLowerCase().startsWith("modal");
5874
+ folderName = "onpe-ui";
5875
+ if (isIcon) {
5876
+ folderName = "onpe-icons";
5877
+ }
5878
+ else if (isModal) {
5879
+ folderName = "onpe-modals";
5880
+ }
5881
+ componentPath = require$$1.join(process.cwd(), "src", "components", folderName);
5874
5882
  // Crear directorio si no existe
5875
5883
  return [4 /*yield*/, lib.ensureDir(componentPath)];
5876
5884
  case 1:
@@ -5958,7 +5966,7 @@ function addComponent(componentName) {
5958
5966
  case 10:
5959
5967
  componentCode = _a.sent();
5960
5968
  personalizedCode = personalizeComponent(componentCode, componentName);
5961
- fileName = "".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), ".tsx");
5969
+ fileName = "".concat(convertToPascalCase(componentName), ".tsx");
5962
5970
  filePath = require$$1.join(componentPath, fileName);
5963
5971
  return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
5964
5972
  case 11:
@@ -5967,10 +5975,24 @@ function addComponent(componentName) {
5967
5975
  // Mostrar instrucciones
5968
5976
  console.log("\n📋 Próximos pasos:");
5969
5977
  console.log("1. Importa el ".concat(isIcon ? "icono" : "componente", ":"));
5970
- importPath = isIcon ? "./components/onpe-icons/".concat(fileName.replace(".tsx", "")) : "./components/onpe-ui/".concat(fileName.replace(".tsx", ""));
5971
- console.log(" import { ".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " } from '").concat(importPath, "'"));
5972
- console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5973
- console.log(" <".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " />"));
5978
+ componentNamePascal = convertToPascalCase(componentName);
5979
+ importPath = "./components/".concat(folderName, "/").concat(fileName.replace(".tsx", ""));
5980
+ console.log(" import { ".concat(componentNamePascal, " } from '").concat(importPath, "'"));
5981
+ // Mostrar dependencias si las hay
5982
+ if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
5983
+ dependencies = componentDependencies[componentName.toLowerCase()];
5984
+ console.log("2. Tambi\u00E9n se instalaron las dependencias:");
5985
+ dependencies.forEach(function (dep) {
5986
+ var depPascal = convertToPascalCase(dep);
5987
+ var depFolder = dep.startsWith("icon-") ? "onpe-icons" : dep.startsWith("modal") ? "onpe-modals" : "onpe-ui";
5988
+ console.log(" import { ".concat(depPascal, " } from './components/").concat(depFolder, "/").concat(depPascal, "'"));
5989
+ });
5990
+ console.log("3. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5991
+ }
5992
+ else {
5993
+ console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5994
+ }
5995
+ console.log(" <".concat(componentNamePascal, " />"));
5974
5996
  return [3 /*break*/, 13];
5975
5997
  case 12:
5976
5998
  error_1 = _a.sent();
@@ -5980,14 +6002,70 @@ function addComponent(componentName) {
5980
6002
  });
5981
6003
  });
5982
6004
  }
6005
+ function convertToPascalCase(name) {
6006
+ // Convertir kebab-case a PascalCase
6007
+ // Ejemplo: "icon-android" → "IconAndroid"
6008
+ return name
6009
+ .split("-")
6010
+ .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); })
6011
+ .join("");
6012
+ }
5983
6013
  function personalizeComponent(code, componentName) {
5984
- // Solo agregar comentario, sin cambiar nada
5985
- var personalizedCode = "// Componente ".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " copiado tal cual\n// Puedes modificar los colores y estilos seg\u00FAn tus necesidades\n\n").concat(code);
5986
- return personalizedCode;
6014
+ var componentNamePascal = convertToPascalCase(componentName);
6015
+ // Mapeo de componentes y sus nuevas ubicaciones
6016
+ var componentPaths = {
6017
+ // Componentes básicos → onpe-ui
6018
+ Button: "./components/onpe-ui/Button",
6019
+ Overlay: "./components/onpe-ui/Overlay",
6020
+ Portal: "./components/onpe-ui/Portal",
6021
+ Show: "./components/onpe-ui/Show",
6022
+ // Modales → onpe-modals
6023
+ Modal: "./components/onpe-modals/Modal",
6024
+ ModalConfirm: "./components/onpe-modals/ModalConfirm",
6025
+ ModalLoading: "./components/onpe-modals/ModalLoading",
6026
+ ModalBrowserIncompatible: "./components/onpe-modals/ModalBrowserIncompatible",
6027
+ ModalSystemIncompatible: "./components/onpe-modals/ModalSystemIncompatible",
6028
+ // Iconos → onpe-icons
6029
+ IconCheck: "./components/onpe-icons/IconCheck",
6030
+ IconClose: "./components/onpe-icons/IconClose",
6031
+ IconWarning: "./components/onpe-icons/IconWarning",
6032
+ IconSpinnerDesktop: "./components/onpe-icons/IconSpinnerDesktop",
6033
+ IconSpinnerMobile: "./components/onpe-icons/IconSpinnerMobile",
6034
+ IconChrome: "./components/onpe-icons/IconChrome",
6035
+ IconChromeColor: "./components/onpe-icons/IconChromeColor",
6036
+ IconEdge: "./components/onpe-icons/IconEdge",
6037
+ IconEdgeColor: "./components/onpe-icons/IconEdgeColor",
6038
+ IconMozilla: "./components/onpe-icons/IconMozilla",
6039
+ IconMozillaColor: "./components/onpe-icons/IconMozillaColor",
6040
+ IconSafari: "./components/onpe-icons/IconSafari",
6041
+ IconSafariColor: "./components/onpe-icons/IconSafariColor",
6042
+ IconAndroid: "./components/onpe-icons/IconAndroid",
6043
+ IconApple: "./components/onpe-icons/IconApple",
6044
+ IconWindow: "./components/onpe-icons/IconWindow",
6045
+ };
6046
+ // Reemplazar las rutas de importación
6047
+ var personalizedCode = code;
6048
+ // Reemplazar imports relativos con las nuevas rutas
6049
+ Object.entries(componentPaths).forEach(function (_a) {
6050
+ var component = _a[0], newPath = _a[1];
6051
+ var oldPatterns = [
6052
+ "from \"../".concat(component, "/").concat(component, "\""),
6053
+ "from \"../".concat(component, "\""),
6054
+ "from \"../../icons/Actions/".concat(component, "\""),
6055
+ "from \"../../icons/Browsers/".concat(component, "\""),
6056
+ "from \"../../icons/OperatingSystems/".concat(component, "\""),
6057
+ "from \"../../icons/ONPE/".concat(component, "\""),
6058
+ ];
6059
+ oldPatterns.forEach(function (pattern) {
6060
+ personalizedCode = personalizedCode.replace(pattern, "from \"".concat(newPath, "\""));
6061
+ });
6062
+ });
6063
+ var finalCode = "// Componente ".concat(componentNamePascal, " copiado y ajustado para la nueva estructura\n// Las rutas de importaci\u00F3n han sido actualizadas autom\u00E1ticamente\n\n").concat(personalizedCode);
6064
+ return finalCode;
5987
6065
  }
5988
6066
 
5989
6067
  var program = new Command();
5990
- program.name("onpe-ui").description("CLI para instalar componentes ONPE UI").version("1.0.42");
6068
+ program.name("onpe-ui").description("CLI para instalar componentes ONPE UI").version("1.0.44");
5991
6069
  program
5992
6070
  .command("add <component>")
5993
6071
  .description("Agregar un componente ONPE UI al proyecto")
package/dist/cli.js CHANGED
@@ -5865,12 +5865,20 @@ var COMPONENTS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main
5865
5865
  var ICONS_URL = "https://raw.githubusercontent.com/ricardosv46/onpe-ui/main/src/icons";
5866
5866
  function addComponent(componentName) {
5867
5867
  return __awaiter(this, void 0, void 0, function () {
5868
- var isIcon, componentPath, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, importPath, error_1;
5868
+ var isIcon, isModal, folderName, componentPath, componentDependencies, availableComponents, availableIcons, componentFile, availableItems, dependencies, _i, dependencies_1, dependency, depError_1, downloadUrl, response, componentCode, personalizedCode, fileName, filePath, componentNamePascal, importPath, dependencies, error_1;
5869
5869
  return __generator(this, function (_a) {
5870
5870
  switch (_a.label) {
5871
5871
  case 0:
5872
5872
  isIcon = componentName.toLowerCase().startsWith("icon-");
5873
- componentPath = require$$1.join(process.cwd(), "src", "components", isIcon ? "onpe-icons" : "onpe-ui");
5873
+ isModal = componentName.toLowerCase().startsWith("modal");
5874
+ folderName = "onpe-ui";
5875
+ if (isIcon) {
5876
+ folderName = "onpe-icons";
5877
+ }
5878
+ else if (isModal) {
5879
+ folderName = "onpe-modals";
5880
+ }
5881
+ componentPath = require$$1.join(process.cwd(), "src", "components", folderName);
5874
5882
  // Crear directorio si no existe
5875
5883
  return [4 /*yield*/, lib.ensureDir(componentPath)];
5876
5884
  case 1:
@@ -5958,7 +5966,7 @@ function addComponent(componentName) {
5958
5966
  case 10:
5959
5967
  componentCode = _a.sent();
5960
5968
  personalizedCode = personalizeComponent(componentCode, componentName);
5961
- fileName = "".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), ".tsx");
5969
+ fileName = "".concat(convertToPascalCase(componentName), ".tsx");
5962
5970
  filePath = require$$1.join(componentPath, fileName);
5963
5971
  return [4 /*yield*/, lib.writeFile(filePath, personalizedCode)];
5964
5972
  case 11:
@@ -5967,10 +5975,24 @@ function addComponent(componentName) {
5967
5975
  // Mostrar instrucciones
5968
5976
  console.log("\n📋 Próximos pasos:");
5969
5977
  console.log("1. Importa el ".concat(isIcon ? "icono" : "componente", ":"));
5970
- importPath = isIcon ? "./components/onpe-icons/".concat(fileName.replace(".tsx", "")) : "./components/onpe-ui/".concat(fileName.replace(".tsx", ""));
5971
- console.log(" import { ".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " } from '").concat(importPath, "'"));
5972
- console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5973
- console.log(" <".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " />"));
5978
+ componentNamePascal = convertToPascalCase(componentName);
5979
+ importPath = "./components/".concat(folderName, "/").concat(fileName.replace(".tsx", ""));
5980
+ console.log(" import { ".concat(componentNamePascal, " } from '").concat(importPath, "'"));
5981
+ // Mostrar dependencias si las hay
5982
+ if (!isIcon && componentDependencies[componentName.toLowerCase()]) {
5983
+ dependencies = componentDependencies[componentName.toLowerCase()];
5984
+ console.log("2. Tambi\u00E9n se instalaron las dependencias:");
5985
+ dependencies.forEach(function (dep) {
5986
+ var depPascal = convertToPascalCase(dep);
5987
+ var depFolder = dep.startsWith("icon-") ? "onpe-icons" : dep.startsWith("modal") ? "onpe-modals" : "onpe-ui";
5988
+ console.log(" import { ".concat(depPascal, " } from './components/").concat(depFolder, "/").concat(depPascal, "'"));
5989
+ });
5990
+ console.log("3. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5991
+ }
5992
+ else {
5993
+ console.log("2. Usa el ".concat(isIcon ? "icono" : "componente", ":"));
5994
+ }
5995
+ console.log(" <".concat(componentNamePascal, " />"));
5974
5996
  return [3 /*break*/, 13];
5975
5997
  case 12:
5976
5998
  error_1 = _a.sent();
@@ -5980,14 +6002,70 @@ function addComponent(componentName) {
5980
6002
  });
5981
6003
  });
5982
6004
  }
6005
+ function convertToPascalCase(name) {
6006
+ // Convertir kebab-case a PascalCase
6007
+ // Ejemplo: "icon-android" → "IconAndroid"
6008
+ return name
6009
+ .split("-")
6010
+ .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); })
6011
+ .join("");
6012
+ }
5983
6013
  function personalizeComponent(code, componentName) {
5984
- // Solo agregar comentario, sin cambiar nada
5985
- var personalizedCode = "// Componente ".concat(componentName.charAt(0).toUpperCase() + componentName.slice(1), " copiado tal cual\n// Puedes modificar los colores y estilos seg\u00FAn tus necesidades\n\n").concat(code);
5986
- return personalizedCode;
6014
+ var componentNamePascal = convertToPascalCase(componentName);
6015
+ // Mapeo de componentes y sus nuevas ubicaciones
6016
+ var componentPaths = {
6017
+ // Componentes básicos → onpe-ui
6018
+ Button: "./components/onpe-ui/Button",
6019
+ Overlay: "./components/onpe-ui/Overlay",
6020
+ Portal: "./components/onpe-ui/Portal",
6021
+ Show: "./components/onpe-ui/Show",
6022
+ // Modales → onpe-modals
6023
+ Modal: "./components/onpe-modals/Modal",
6024
+ ModalConfirm: "./components/onpe-modals/ModalConfirm",
6025
+ ModalLoading: "./components/onpe-modals/ModalLoading",
6026
+ ModalBrowserIncompatible: "./components/onpe-modals/ModalBrowserIncompatible",
6027
+ ModalSystemIncompatible: "./components/onpe-modals/ModalSystemIncompatible",
6028
+ // Iconos → onpe-icons
6029
+ IconCheck: "./components/onpe-icons/IconCheck",
6030
+ IconClose: "./components/onpe-icons/IconClose",
6031
+ IconWarning: "./components/onpe-icons/IconWarning",
6032
+ IconSpinnerDesktop: "./components/onpe-icons/IconSpinnerDesktop",
6033
+ IconSpinnerMobile: "./components/onpe-icons/IconSpinnerMobile",
6034
+ IconChrome: "./components/onpe-icons/IconChrome",
6035
+ IconChromeColor: "./components/onpe-icons/IconChromeColor",
6036
+ IconEdge: "./components/onpe-icons/IconEdge",
6037
+ IconEdgeColor: "./components/onpe-icons/IconEdgeColor",
6038
+ IconMozilla: "./components/onpe-icons/IconMozilla",
6039
+ IconMozillaColor: "./components/onpe-icons/IconMozillaColor",
6040
+ IconSafari: "./components/onpe-icons/IconSafari",
6041
+ IconSafariColor: "./components/onpe-icons/IconSafariColor",
6042
+ IconAndroid: "./components/onpe-icons/IconAndroid",
6043
+ IconApple: "./components/onpe-icons/IconApple",
6044
+ IconWindow: "./components/onpe-icons/IconWindow",
6045
+ };
6046
+ // Reemplazar las rutas de importación
6047
+ var personalizedCode = code;
6048
+ // Reemplazar imports relativos con las nuevas rutas
6049
+ Object.entries(componentPaths).forEach(function (_a) {
6050
+ var component = _a[0], newPath = _a[1];
6051
+ var oldPatterns = [
6052
+ "from \"../".concat(component, "/").concat(component, "\""),
6053
+ "from \"../".concat(component, "\""),
6054
+ "from \"../../icons/Actions/".concat(component, "\""),
6055
+ "from \"../../icons/Browsers/".concat(component, "\""),
6056
+ "from \"../../icons/OperatingSystems/".concat(component, "\""),
6057
+ "from \"../../icons/ONPE/".concat(component, "\""),
6058
+ ];
6059
+ oldPatterns.forEach(function (pattern) {
6060
+ personalizedCode = personalizedCode.replace(pattern, "from \"".concat(newPath, "\""));
6061
+ });
6062
+ });
6063
+ var finalCode = "// Componente ".concat(componentNamePascal, " copiado y ajustado para la nueva estructura\n// Las rutas de importaci\u00F3n han sido actualizadas autom\u00E1ticamente\n\n").concat(personalizedCode);
6064
+ return finalCode;
5987
6065
  }
5988
6066
 
5989
6067
  var program = new Command();
5990
- program.name("onpe-ui").description("CLI para instalar componentes ONPE UI").version("1.0.42");
6068
+ program.name("onpe-ui").description("CLI para instalar componentes ONPE UI").version("1.0.44");
5991
6069
  program
5992
6070
  .command("add <component>")
5993
6071
  .description("Agregar un componente ONPE UI al proyecto")
package/dist/components.esm.js CHANGED
@@ -198,7 +198,7 @@ var Modal = function (_a) {
198
198
  return (jsx(Portal, { children: jsxs("div", { className: classNames([
199
199
  isOpen ? (topAbsolute ? "opacity-100 z-100" : "opacity-100 z-50") : "opacity-0 -z-10",
200
200
  "fixed top-0 w-full h-screen grid place-items-center ",
201
- ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "z-20 grid place-items-center relative", children: [jsx("div", { className: classNames([
201
+ ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "relative z-20 grid place-items-center", children: [jsx("div", { className: classNames([
202
202
  "relative",
203
203
  whitoutBackground
204
204
  ? "flex flex-col items-center justify-center"
package/dist/components.js CHANGED
@@ -198,7 +198,7 @@ var Modal = function (_a) {
198
198
  return (jsx(Portal, { children: jsxs("div", { className: classNames([
199
199
  isOpen ? (topAbsolute ? "opacity-100 z-100" : "opacity-100 z-50") : "opacity-0 -z-10",
200
200
  "fixed top-0 w-full h-screen grid place-items-center ",
201
- ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "z-20 grid place-items-center relative", children: [jsx("div", { className: classNames([
201
+ ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "relative z-20 grid place-items-center", children: [jsx("div", { className: classNames([
202
202
  "relative",
203
203
  whitoutBackground
204
204
  ? "flex flex-col items-center justify-center"
package/dist/index.esm.js CHANGED
@@ -198,7 +198,7 @@ var Modal = function (_a) {
198
198
  return (jsx(Portal, { children: jsxs("div", { className: classNames([
199
199
  isOpen ? (topAbsolute ? "opacity-100 z-100" : "opacity-100 z-50") : "opacity-0 -z-10",
200
200
  "fixed top-0 w-full h-screen grid place-items-center ",
201
- ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "z-20 grid place-items-center relative", children: [jsx("div", { className: classNames([
201
+ ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "relative z-20 grid place-items-center", children: [jsx("div", { className: classNames([
202
202
  "relative",
203
203
  whitoutBackground
204
204
  ? "flex flex-col items-center justify-center"
package/dist/index.js CHANGED
@@ -198,7 +198,7 @@ var Modal = function (_a) {
198
198
  return (jsx(Portal, { children: jsxs("div", { className: classNames([
199
199
  isOpen ? (topAbsolute ? "opacity-100 z-100" : "opacity-100 z-50") : "opacity-0 -z-10",
200
200
  "fixed top-0 w-full h-screen grid place-items-center ",
201
- ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "z-20 grid place-items-center relative", children: [jsx("div", { className: classNames([
201
+ ]), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "relative z-20 grid place-items-center", children: [jsx("div", { className: classNames([
202
202
  "relative",
203
203
  whitoutBackground
204
204
  ? "flex flex-col items-center justify-center"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onpe/ui",
3
- "version": "1.0.43",
3
+ "version": "1.0.45",
4
4
  "type": "module",
5
5
  "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
6
  "main": "dist/index.js",