@griddo/ax 11.10.11-rc.0 → 11.10.12-rc.0

package/README.md

@@ -1,7 +1,60 @@
 # Griddo AX
 
-Panel de Administración de Griddo.
+- [Arquitectura del proyecto](docs/PROJECT-ARCHITECTURE.md)
+- [Estándares de commits](docs/COMMITS.md)
+- [Comandos de npm](#comandos-de-npm)
+- [AGENTS.md](#agentsmd)
 
-# Arrancar el entorno de desarrollo
+## AGENTS.md
 
-Ejecuta `yarn start:dev` en la raíz de este paquete o en la raíz del monorepo.
+Este repositorio incluye un archivo llamado [AGENTS.md](docs/AGENTS.md) que contiene las directrices y reglas de arquitectura que la IA sigue al generar o modificar código. Este archivo define la estructura del proyecto, las convenciones tecnológicas (por ejemplo, el uso de React Router v5, estilo con styled-components, Redux manual), y recomendaciones específicas para mantener la coherencia y calidad del proyecto. Cada vez que la IA realiza cambios en el código, consulta este documento para asegurarse de respetar los patrones legacy y las mejores prácticas establecidas por el equipo de Griddo AX.
+
+## Comandos de npm
+
+### Desarrollo
+
+- `yarn start` - Alias para `start:dev`
+- `yarn start:local` - Inicia el servidor de desarrollo en entorno local
+- `yarn start:dev` - Inicia el servidor de desarrollo en entorno de desarrollo
+- `yarn start:staging` - Inicia el servidor de desarrollo en entorno de staging
+
+### Build
+
+- `yarn build` - Construye la aplicación para producción
+- `yarn build:dev` - Construye la aplicación para desarrollo
+
+### Testing
+
+- `yarn test` - Ejecuta los tests con Jest
+- `yarn test:watch` - Ejecuta los tests en modo watch
+- `yarn test:ci` - Ejecuta los tests en modo CI (sin paralelización)
+- `yarn test:coverage` - Ejecuta los tests y genera reporte de cobertura
+- `yarn test:dev` - Ejecuta los tests en modo watch (alias de `test:watch`)
+- `yarn test:dev:coverage` - Ejecuta los tests con cobertura en modo watch
+
+### Linting y Formato
+
+- `yarn lint` - Verifica el código con Biome (sin escribir)
+- `yarn format:write` - Formatea el código con Biome (escribiendo)
+
+¿Quieres comprobar solo una regla o categoría específica?
+```bash
+biome lint . --only=<GROUP|RULE|DOMAIN>
+# por ejemplo, desde la raíz del proyecto
+node_modules/.bin/biome lint . --only=noConsole
+```
+
+
+## Extras
+
+### Biome organize imports constants group
+
+// OJo! tiene que ser @/ no @ax/ etc..
+- :ALIAS: sources starting with #, @/, ~, $, or %.
+- :BUN: sources starting with the protocol bun: or that correspond to a built-in Bun module such as bun.
+- :NODE: sources starting with the protocol node: or that correspond to a built-in Node.js module such as fs or path.
+- :PACKAGE: scoped and bare packages.
+- :PACKAGE_WITH_PROTOCOL: scoped and bare packages with a protocol.
+- :PATH: absolute and relative paths.
+- :URL: sources starting with https:// and http://.
+- :BLANK_LINE: blank line.

package/config/env.js

@@ -7,18 +7,18 @@ delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
-  throw new Error("The NODE_ENV environment variable is required but was not specified.");
+	throw new Error("The NODE_ENV environment variable is required but was not specified.");
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 const dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== "test" && `${paths.dotenv}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
+	`${paths.dotenv}.${NODE_ENV}.local`,
+	// Don't include `.env.local` for `test` environment
+	// since normally you expect tests to produce the same
+	// results for everyone
+	NODE_ENV !== "test" && `${paths.dotenv}.local`,
+	`${paths.dotenv}.${NODE_ENV}`,
+	paths.dotenv,
 ].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
@@ -27,13 +27,13 @@ const dotenvFiles = [
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach((dotenvFile) => {
-  if (fs.existsSync(dotenvFile)) {
-    require("dotenv-expand")(
-      require("dotenv").config({
-        path: dotenvFile,
-      })
-    );
-  }
+	if (fs.existsSync(dotenvFile)) {
+		require("dotenv-expand")(
+			require("dotenv").config({
+				path: dotenvFile,
+			}),
+		);
+	}
 });
 
 // We support resolving modules according to `NODE_PATH`.
@@ -47,10 +47,10 @@ dotenvFiles.forEach((dotenvFile) => {
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || "")
-  .split(path.delimiter)
-  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map((folder) => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
+	.split(path.delimiter)
+	.filter((folder) => folder && !path.isAbsolute(folder))
+	.map((folder) => path.resolve(appDirectory, folder))
+	.join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in webpack configuration.
@@ -58,44 +58,44 @@ const REACT_APP = /^REACT_APP_/i;
 const GRIDDO = /^GRIDDO_/i;
 
 function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter((key) => REACT_APP.test(key) || GRIDDO.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || "development",
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-        // We support configuring the sockjs pathname during development.
-        // These settings let a developer run multiple simultaneous projects.
-        // They are used as the connection `hostname`, `pathname` and `port`
-        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
-        // and `sockPort` options in webpack-dev-server.
-        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
-        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
-        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
-        // Whether or not react-refresh is enabled.
-        // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
-      }
-    );
-  // Stringify all values so we can feed into webpack DefinePlugin
-  const stringified = {
-    "process.env": Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
+	const raw = Object.keys(process.env)
+		.filter((key) => REACT_APP.test(key) || GRIDDO.test(key))
+		.reduce(
+			(env, key) => {
+				env[key] = process.env[key];
+				return env;
+			},
+			{
+				// Useful for determining whether we’re running in production mode.
+				// Most importantly, it switches React into the correct mode.
+				NODE_ENV: process.env.NODE_ENV || "development",
+				// Useful for resolving the correct path to static assets in `public`.
+				// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+				// This should only be used as an escape hatch. Normally you would put
+				// images into the `src` and `import` them in code to get their paths.
+				PUBLIC_URL: publicUrl,
+				// We support configuring the sockjs pathname during development.
+				// These settings let a developer run multiple simultaneous projects.
+				// They are used as the connection `hostname`, `pathname` and `port`
+				// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+				// and `sockPort` options in webpack-dev-server.
+				WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+				WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+				WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+				// Whether or not react-refresh is enabled.
+				// It is defined here so it is available in the webpackHotDevClient.
+				FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+			},
+		);
+	// Stringify all values so we can feed into webpack DefinePlugin
+	const stringified = {
+		"process.env": Object.keys(raw).reduce((env, key) => {
+			env[key] = JSON.stringify(raw[key]);
+			return env;
+		}, {}),
+	};
 
-  return { raw, stringified };
+	return { raw, stringified };
 }
 
 module.exports = getClientEnvironment;

package/config/getHttpsConfig.js

@@ -7,50 +7,50 @@ const paths = require("./paths");
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
 function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted;
-  try {
-    // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from("test"));
-  } catch (err) {
-    throw new Error(`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`);
-  }
+	let encrypted;
+	try {
+		// publicEncrypt will throw an error with an invalid cert
+		encrypted = crypto.publicEncrypt(cert, Buffer.from("test"));
+	} catch (err) {
+		throw new Error(`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`);
+	}
 
-  try {
-    // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted);
-  } catch (err) {
-    throw new Error(`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${err.message}`);
-  }
+	try {
+		// privateDecrypt will throw an error with an invalid key
+		crypto.privateDecrypt(key, encrypted);
+	} catch (err) {
+		throw new Error(`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${err.message}`);
+	}
 }
 
 // Read file and throw an error if it doesn't exist
 function readEnvFile(file, type) {
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `You specified ${chalk.cyan(type)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    );
-  }
-  return fs.readFileSync(file);
+	if (!fs.existsSync(file)) {
+		throw new Error(
+			`You specified ${chalk.cyan(type)} in your env, but the file "${chalk.yellow(file)}" can't be found.`,
+		);
+	}
+	return fs.readFileSync(file);
 }
 
 // Get the https config
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === "true";
+	const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+	const isHttps = HTTPS === "true";
 
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
-      key: readEnvFile(keyFile, "SSL_KEY_FILE"),
-    };
+	if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+		const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+		const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+		const config = {
+			cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
+			key: readEnvFile(keyFile, "SSL_KEY_FILE"),
+		};
 
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
-  }
-  return isHttps;
+		validateKeyAndCerts({ ...config, keyFile, crtFile });
+		return config;
+	}
+	return isHttps;
 }
 
 module.exports = getHttpsConfig;

package/config/griddo-config/cx-polyfills/builder.ssr.js

@@ -1,6 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const onRenderBody = () => {};
 
 export default {
-  onRenderBody,
+	onRenderBody,
 };

package/config/griddo-config/index.js

@@ -14,30 +14,30 @@ const componentsBundlePolyfillPath = path.resolve(__dirname, "./cx-polyfills/com
  * @returns {string | undefined} la ruta completa si el path existe o de lo contrario undefined.
  */
 const resolveComponentsPath = (customPath = "") => {
-  const filePath = isComponentLibraryEnv
-    ? path.resolve(pkgDir.sync(process.cwd()), customPath)
-    : path.resolve(pkgDir.sync(__dirname), "../griddo-components", customPath);
+	const filePath = isComponentLibraryEnv
+		? path.resolve(pkgDir.sync(process.cwd()), customPath)
+		: path.resolve(pkgDir.sync(__dirname), "../griddo-components", customPath);
 
-  if (fs.existsSync(filePath)) {
-    return filePath;
-  }
+	if (fs.existsSync(filePath)) {
+		return filePath;
+	}
 
-  return undefined;
+	return undefined;
 };
 
 const resolveBuilderSSRPath = () => {
-  const builderSSRPolyfillPath = path.resolve(__dirname, "./cx-polyfills/builder.ssr.js");
-  const builderSSRPath = resolveComponentsPath("builder.ssr.js");
-  const builderSSRPathExists = fs.existsSync(builderSSRPath);
+	const builderSSRPolyfillPath = path.resolve(__dirname, "./cx-polyfills/builder.ssr.js");
+	const builderSSRPath = resolveComponentsPath("builder.ssr.js");
+	const builderSSRPathExists = fs.existsSync(builderSSRPath);
 
-  return builderSSRPathExists ? builderSSRPath : builderSSRPolyfillPath;
+	return builderSSRPathExists ? builderSSRPath : builderSSRPolyfillPath;
 };
 
 const getComponentsJSConfig = () => {
-  const jsConfigPath = findUp.sync("jsconfig.json", { cwd: resolveComponentsPath() });
-  const tsConfigPath = findUp.sync("tsconfig.json", { cwd: resolveComponentsPath() });
+	const jsConfigPath = findUp.sync("jsconfig.json", { cwd: resolveComponentsPath() });
+	const tsConfigPath = findUp.sync("tsconfig.json", { cwd: resolveComponentsPath() });
 
-  return tsConfigPath || jsConfigPath || false;
+	return tsConfigPath || jsConfigPath || false;
 };
 
 /**
@@ -45,48 +45,48 @@ const getComponentsJSConfig = () => {
  * @returns {string | undefined} la ruta completa del archivo de configuración
  */
 const resolveComponentsGriddoConfig = () => {
-  return resolveComponentsPath("griddo.config.js") || resolveComponentsPath("griddo.config.ts");
+	return resolveComponentsPath("griddo.config.js") || resolveComponentsPath("griddo.config.ts");
 };
 
 const getComponentsLibAliases = () => {
-  const xsConfig = require(getComponentsJSConfig());
-
-  return Object.keys(xsConfig?.compilerOptions?.paths).reduce(
-    (currentAlias, pathKey) => {
-      const [aliasKey] = pathKey.split("/");
-      const [pathAtJsConfig] = xsConfig?.compilerOptions?.paths[pathKey];
-
-      const [relativePathToDir] = pathAtJsConfig.split("/*");
-
-      const absolutePath = resolveComponentsPath(relativePathToDir);
-
-      return {
-        ...currentAlias,
-        [aliasKey]: absolutePath,
-      };
-    },
-    {
-      components: componentsBundlePolyfillPath,
-      __componentsIndex: resolveComponentsPath("src/index.js"),
-      __componentsConfig: resolveComponentsGriddoConfig(),
-      __ssrConfig: resolveBuilderSSRPath(),
-      __ssrHelpers: path.resolve(__dirname, "./ssrHelpers"),
-    }
-  );
+	const xsConfig = require(getComponentsJSConfig());
+
+	return Object.keys(xsConfig?.compilerOptions?.paths).reduce(
+		(currentAlias, pathKey) => {
+			const [aliasKey] = pathKey.split("/");
+			const [pathAtJsConfig] = xsConfig?.compilerOptions?.paths[pathKey];
+
+			const [relativePathToDir] = pathAtJsConfig.split("/*");
+
+			const absolutePath = resolveComponentsPath(relativePathToDir);
+
+			return {
+				...currentAlias,
+				[aliasKey]: absolutePath,
+			};
+		},
+		{
+			components: componentsBundlePolyfillPath,
+			__componentsIndex: resolveComponentsPath("src/index.js"),
+			__componentsConfig: resolveComponentsGriddoConfig(),
+			__ssrConfig: resolveBuilderSSRPath(),
+			__ssrHelpers: path.resolve(__dirname, "./ssrHelpers"),
+		},
+	);
 };
 
 const griddoAxAliases = {
-  "@ax/api": path.resolve(__dirname, "../../src/api/"),
-  "@ax/components": path.resolve(__dirname, "../../src/components"),
-  "@ax/containers": path.resolve(__dirname, "../../src/containers"),
-  "@ax/forms": path.resolve(__dirname, "../../src/forms"),
-  "@ax/guards": path.resolve(__dirname, "../../src/guards"),
-  "@ax/helpers": path.resolve(__dirname, "../../src/helpers/"),
-  "@ax/hooks": path.resolve(__dirname, "../../src/hooks/"),
-  "@ax/modules": path.resolve(__dirname, "../../src/modules"),
-  "@ax/routes": path.resolve(__dirname, "../../src/routes"),
-  "@ax/types": path.resolve(__dirname, "../../src/types"),
-  "@ax/schemas": path.resolve(__dirname, "../../src/schemas"),
+	"@ax/api": path.resolve(__dirname, "../../src/api/"),
+	"@ax/components": path.resolve(__dirname, "../../src/components"),
+	"@ax/containers": path.resolve(__dirname, "../../src/containers"),
+	"@ax/forms": path.resolve(__dirname, "../../src/forms"),
+	"@ax/guards": path.resolve(__dirname, "../../src/guards"),
+	"@ax/helpers": path.resolve(__dirname, "../../src/helpers/"),
+	"@ax/hooks": path.resolve(__dirname, "../../src/hooks/"),
+	"@ax/modules": path.resolve(__dirname, "../../src/modules"),
+	"@ax/routes": path.resolve(__dirname, "../../src/routes"),
+	"@ax/types": path.resolve(__dirname, "../../src/types"),
+	"@ax/schemas": path.resolve(__dirname, "../../src/schemas"),
 };
 
 const griddoComponentsLibAliases = getComponentsLibAliases();
@@ -94,15 +94,15 @@ const griddoComponentsLibAliases = getComponentsLibAliases();
 const findCommonElements = (arr1, arr2) => arr1.some((item) => arr2.includes(item));
 
 const thereAreAliasConflicts = () =>
-  isComponentLibraryEnv && findCommonElements(Object.keys(griddoAxAliases), Object.keys(getComponentsLibAliases()));
+	isComponentLibraryEnv && findCommonElements(Object.keys(griddoAxAliases), Object.keys(getComponentsLibAliases()));
 
 const mergeComponentsAliases = (...arrs) => {
-  const keys = arrs.map((arr) => Object.keys(arr)).flat();
+	const keys = arrs.map((arr) => Object.keys(arr)).flat();
 
-  const merged = {};
-  keys.map((key) => (merged[key] = [arrs.map((a) => a[key]).filter((a) => a !== undefined)].flat()));
+	const merged = {};
+	keys.map((key) => (merged[key] = [arrs.map((a) => a[key]).filter((a) => a !== undefined)].flat()));
 
-  return merged;
+	return merged;
 };
 
 /* Components Static Paths */
@@ -112,20 +112,20 @@ const componentsThumbnailsPath = resolveComponentsPath("thumbnails");
 const componentsThumbnailsPathExists = fs.existsSync(componentsThumbnailsPath);
 
 module.exports = {
-  isComponentLibraryEnv,
-  componentsPath: resolveComponentsPath(),
-  resolveComponentsPath,
-  getComponentsJSConfig,
-  getComponentsLibAliases,
-  griddoComponentsLibAliases,
-  griddoAxAliases,
-  thereAreAliasConflicts,
-  mergeComponentsAliases,
-  projectAliases: { ...griddoAxAliases, ...griddoComponentsLibAliases },
-  // projectAliases: mergeComponentsAliases(griddoComponentsLibAliases, griddoAxAliases),
-  componentsStaticPath,
-  componentsStaticPathExists,
-  componentsThumbnailsPath,
-  componentsThumbnailsPathExists,
-  resolveComponentsGriddoConfig,
+	isComponentLibraryEnv,
+	componentsPath: resolveComponentsPath(),
+	resolveComponentsPath,
+	getComponentsJSConfig,
+	getComponentsLibAliases,
+	griddoComponentsLibAliases,
+	griddoAxAliases,
+	thereAreAliasConflicts,
+	mergeComponentsAliases,
+	projectAliases: { ...griddoAxAliases, ...griddoComponentsLibAliases },
+	// projectAliases: mergeComponentsAliases(griddoComponentsLibAliases, griddoAxAliases),
+	componentsStaticPath,
+	componentsStaticPathExists,
+	componentsThumbnailsPath,
+	componentsThumbnailsPathExists,
+	resolveComponentsGriddoConfig,
 };

package/config/griddo-config/ssrHelpers.js

@@ -1,47 +1,45 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-
 export const setHeadComponents = (props) => {
-  const headKeyIdentifier = "data-head-component";
-  const headValueIdentifier = "griddo-instance-head-component";
-  const headElementsIdentifier = `[${headKeyIdentifier}="${headValueIdentifier}"]`;
+	const headKeyIdentifier = "data-head-component";
+	const headValueIdentifier = "griddo-instance-head-component";
+	const headElementsIdentifier = `[${headKeyIdentifier}="${headValueIdentifier}"]`;
 
-  [...document.querySelectorAll(headElementsIdentifier)].map((e) => e.remove());
+	[...document.querySelectorAll(headElementsIdentifier)].map((e) => e.remove());
 
-  props.map((tag) => {
-    const element = document.createElement(tag.type);
-    element.setAttribute(headKeyIdentifier, headValueIdentifier);
+	props.map((tag) => {
+		const element = document.createElement(tag.type);
+		element.setAttribute(headKeyIdentifier, headValueIdentifier);
 
-    Object.keys(tag.props).map((attKey) => {
-      if (attKey === "dangerouslySetInnerHTML") {
-        return (element.innerHTML = tag.props.dangerouslySetInnerHTML.__html);
-      }
-      return element.setAttribute(attKey, tag.props[attKey]);
-    });
+		Object.keys(tag.props).map((attKey) => {
+			if (attKey === "dangerouslySetInnerHTML") {
+				return (element.innerHTML = tag.props.dangerouslySetInnerHTML.__html);
+			}
+			return element.setAttribute(attKey, tag.props[attKey]);
+		});
 
-    document.head.appendChild(element);
-  });
+		document.head.appendChild(element);
+	});
 
-  return props;
+	return props;
 };
 
 export const setHtmlAttributes = (props) => {
-  return props;
+	return props;
 };
 
 export const setBodyAttributes = (props) => {
-  return props;
+	return props;
 };
 
 export const setPreBodyComponents = (props) => {
-  return props;
+	return props;
 };
 
 export const setPostBodyComponents = (props) => {
-  return props;
+	return props;
 };
 
 export const setBodyProps = (props) => {
-  return props;
+	return props;
 };
 
 export const pathname = "ax-editor";