@griddo/ax 12.10.5 → 12.11.1-rc.0

package/README.md

@@ -25,8 +25,6 @@
 - `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
 

package/config/webpack.config.js

@@ -381,7 +381,8 @@ module.exports = function (webpackEnv) {
 						{
 							test: /\.(js|mjs|jsx|ts|tsx)$/,
 							include: [paths.appSrc, paths.componentsPath],
-							exclude: [/node_modules\/(?!@griddo).*/],
+							// pnpm installs ax under node_modules/.pnpm/<id>/node_modules/@griddo/ax.
+							exclude: [/node_modules\/(?!(\.pnpm\/[^/]+\/node_modules\/)?@griddo).*/],
 							loader: require.resolve("babel-loader"),
 							options: {
 								customize: require.resolve("babel-preset-react-app/webpack-overrides"),

package/config/webpackSchemas.config.js

@@ -24,10 +24,13 @@ const createConfig = ({ input, output }) => ({
 				resolve: { extensions: [".ts", ".js"] },
 				exclude: /(node_modules|bower_components)/,
 				use: {
-					loader: "babel-loader",
+					loader: require.resolve("babel-loader"),
 					options: {
-						presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
-						plugins: ["@babel/plugin-transform-optional-chaining"],
+						presets: [
+							[require.resolve("@babel/preset-env"), { targets: { node: "current" } }],
+							require.resolve("@babel/preset-typescript"),
+						],
+						plugins: [require.resolve("@babel/plugin-transform-optional-chaining")],
 					},
 				},
 			},
@@ -36,7 +39,7 @@ const createConfig = ({ input, output }) => ({
 			// API crashing (it hasn't webpack)
 			{
 				test: /\.(png|jpe?g|gif)$/i,
-				use: [{ loader: "ignore-loader" }],
+				use: [{ loader: require.resolve("ignore-loader") }],
 			},
 		],
 	},

package/package.json

@@ -1,15 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.10.5",
-	"authors": [
-		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
-		"Diego M. Béjar <diego.bejar@secuoyas.com>",
-		"Francis Vega <francis.vega@secuoyas.com>",
-		"Gonzalo Hernández <gonzalo.hernandez@secuoyas.com>",
-		"Sergio Ródenas <sergio.rodenas@secuoyas.com>",
-		"Txema León <txema.leon@secuoyas.com>"
-	],
+	"version": "12.11.1-rc.0",
 	"homepage": "https://griddo.io",
 	"repository": {
 		"type": "git",
@@ -20,62 +12,57 @@
 		"griddo-sync-schemas": "./scripts/griddo-sync-schemas.js"
 	},
 	"scripts": {
-		"// START": "",
 		"start": "npm run start:dev",
 		"start:local": "node --env-file=./env/.env.local ./scripts/start.js",
 		"start:dev": "node --env-file=./env/.env.development ./scripts/start.js",
 		"start:staging": "node --env-file=./env/.env.staging ./scripts/start.js",
-		"// BUILD": "",
 		"build": "node ./scripts/build.js",
 		"build:dev": "node --env-file=./env/.env.development ./scripts/build.js",
-		"// TEST": "",
 		"test": "vitest run",
 		"test:watch": "vitest",
 		"test:ci": "vitest run --no-file-parallelism",
 		"test:coverage": "vitest run --coverage",
-		"test:dev": "vitest",
-		"test:dev:coverage": "vitest --coverage",
-		"// TYPES": "",
 		"typecheck": "tsc --noEmit",
-		"// LINT": "",
 		"lint": "biome check",
 		"format:write": "biome format --write"
 	},
 	"dependencies": {
+		"@babel/core": "7.29.7",
+		"@babel/plugin-transform-optional-chaining": "7.29.7",
+		"@babel/preset-env": "7.29.7",
+		"@babel/preset-typescript": "7.29.7",
 		"@dnd-kit/core": "6.3.1",
 		"@dnd-kit/sortable": "10.0.0",
-		"@griddo/api-types": "1.1.3",
+		"@dnd-kit/utilities": "3.2.2",
+		"@griddo/api-types": "1.3.2",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
-		"@styled-system/prop-types": "5.1.5",
-		"@styled-system/theme-get": "5.1.2",
 		"@svgr/webpack": "8.1.0",
 		"@testing-library/jest-dom": "5.17.0",
 		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.6.6",
+		"@testing-library/user-event": "14.6.7",
 		"@types/compress.js": "1.1.3",
 		"@types/draft-js": "0.11.20",
 		"@types/lodash.isequal": "4.5.8",
 		"@types/markdown-draft-js": "2.2.7",
-		"@types/node": "20.19.43",
+		"@types/node": "24.12.4",
 		"@types/react": "18.2.79",
-		"@types/react-beautiful-dnd": "13.1.8",
 		"@types/react-datepicker": "4.19.6",
 		"@types/react-dom": "18.2.25",
 		"@types/react-draft-wysiwyg": "1.13.9",
 		"@types/react-redux": "7.1.34",
+		"@types/react-router": "5.1.20",
 		"@types/react-router-dom": "5.3.3",
 		"@types/react-slick": "0.23.13",
-		"@types/react-test-renderer": "17.0.9",
 		"@types/styled-components": "5.1.36",
+		"@types/testing-library__jest-dom": "5.14.9",
 		"@types/uuid": "8.3.4",
-		"@types/webpack-env": "1.18.8",
 		"axios": "0.19.0",
 		"babel-loader": "9.2.1",
 		"babel-plugin-named-asset-import": "0.3.8",
-		"babel-plugin-root-import": "6.6.0",
 		"babel-plugin-styled-components": "2.3.0",
 		"babel-preset-react-app": "10.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.4.0",
+		"chalk": "4.1.2",
 		"compress.js": "1.2.2",
 		"connected-react-router": "6.9.3",
 		"css-loader": "6.11.0",
@@ -86,30 +73,28 @@
 		"draft-js": "0.11.7",
 		"draft-js-import-html": "1.4.1",
 		"draftjs-to-html": "0.9.1",
-		"enhanced-resolve": "5.18.1",
-		"env-cmd": "10.1.0",
 		"find-up": "5.0.0",
+		"froala-editor": "4.0.4",
 		"fs-extra": "7.0.1",
+		"history": "4.10.1",
 		"html-to-draftjs": "1.5.0",
-		"html-to-image": "1.11.7",
+		"html-to-image": "1.11.13",
 		"html-webpack-plugin": "5.6.8",
 		"ignore-loader": "0.1.2",
-		"is-wsl": "3.1.0",
+		"immutable": "3.7.6",
 		"jsdom": "20.0.3",
-		"jsdom-global": "3.0.2",
 		"lodash.isequal": "4.5.0",
 		"markdown-draft-js": "2.4.0",
 		"mini-css-extract-plugin": "2.10.2",
 		"node-polyfill-webpack-plugin": "3.0.0",
 		"pkg-dir": "5.0.0",
 		"polished": "3.7.2",
-		"postcss": "8.5.26",
+		"postcss": "8.5.28",
 		"postcss-flexbugs-fixes": "5.0.2",
 		"postcss-loader": "7.3.4",
 		"postcss-normalize": "7.0.1",
 		"postcss-preset-env": "6.7.2",
 		"react": "18.2.0",
-		"react-app-polyfill": "1.0.6",
 		"react-datepicker": "4.25.0",
 		"react-dev-utils": "12.0.1",
 		"react-dom": "18.2.0",
@@ -120,6 +105,7 @@
 		"react-qr-code": "2.2.0",
 		"react-redux": "7.2.9",
 		"react-refresh": "0.14.2",
+		"react-router": "5.3.4",
 		"react-router-dom": "5.3.4",
 		"react-select": "5.10.2",
 		"react-slick": "0.30.3",
@@ -128,50 +114,37 @@
 		"redux": "4.2.1",
 		"redux-devtools-extension": "2.13.9",
 		"redux-persist": "6.0.0",
-		"reflect-metadata": "0.1.13",
+		"redux-thunk": "2.4.2",
 		"resolve": "1.22.12",
 		"resolve-url-loader": "4.0.0",
-		"sass-alias": "1.0.5",
 		"sass-loader": "16.0.8",
 		"semver": "7.8.5",
 		"slick-carousel": "1.8.1",
-		"source-map-loader": "1.1.3",
-		"string-replace-loader": "3.1.0",
 		"style-loader": "3.3.4",
 		"styled-components": "5.3.11",
 		"styled-reset": "4.0.1",
-		"styled-system": "5.1.5",
 		"terser-webpack-plugin": "5.6.1",
 		"typescript": "6.0.3",
 		"uuid": "8.3.2",
-		"webpack": "5.109.2",
+		"webpack": "5.111.1",
 		"webpack-dev-server": "4.15.2",
 		"webpack-manifest-plugin": "5.0.1"
 	},
 	"devDependencies": {
-		"@babel/core": "7.29.7",
-		"@babel/helper-environment-visitor": "7.24.7",
-		"@babel/helper-function-name": "7.24.7",
-		"@babel/helper-hoist-variables": "7.24.7",
-		"@babel/helper-split-export-declaration": "7.24.7",
-		"@babel/plugin-transform-optional-chaining": "7.29.7",
-		"@babel/preset-env": "7.29.7",
-		"@babel/preset-react": "7.29.7",
-		"@babel/preset-typescript": "7.29.7",
 		"@biomejs/biome": "2.3.8",
+		"@griddo/core": "12.11.1-rc.0",
 		"@types/redux-mock-store": "1.5.0",
-		"@vitest/coverage-v8": "4.1.10",
+		"@vitest/coverage-v8": "4.1.11",
 		"axios-mock-adapter": "1.22.0",
-		"prettier": "3.4.2",
-		"react-test-renderer": "18.2.0",
 		"redux-mock-store": "1.5.5",
-		"redux-thunk": "2.4.2",
-		"ts-node": "10.9.2",
-		"vite": "7.3.6",
-		"vitest": "4.1.10",
+		"vite": "8.3.1",
+		"vitest": "4.1.11",
 		"vitest-mock-extended": "5.1.1",
 		"vitest-styled-components": "1.0.0"
 	},
+	"peerDependencies": {
+		"@griddo/core": ">=12 <13"
+	},
 	"babel": {
 		"presets": [
 			"react-app"
@@ -189,9 +162,11 @@
 			"last 1 safari version"
 		]
 	},
+	"engines": {
+		"node": ">=24.12.0"
+	},
 	"files": [
 		"config",
-		"patches",
 		"public",
 		"scripts",
 		"src",
@@ -201,5 +176,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9ec0a833c7547915d64745182be330df4bfc1e9c"
+	"gitHead": "7ac7ef01e60f52a92be0b5414c50cd60e5f0714e"
 }

package/src/__tests__/components/Fields/ConditionalField/ConditionalField.test.tsx

@@ -87,6 +87,23 @@ describe("ConditionalField component rendering", () => {
 	});
 });
 
+describe("ConditionalField spacing", () => {
+	it("should reset the bottom margin of its direct child only", () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<ConditionalField {...defaultProps} />
+			</ThemeProvider>,
+		);
+
+		const conditionalFieldContent = screen.getByTestId("conditionalFieldContent");
+
+		expect(conditionalFieldContent).toHaveStyleRule("margin-bottom", "0", { modifier: "> div:last-child" });
+		// A descendant selector would also reach every nested field and "Add" button,
+		// flattening the spacing of nested ArrayFieldGroups (sc-110266).
+		expect(conditionalFieldContent).not.toHaveStyleRule("margin-bottom", "0", { modifier: "div:last-child" });
+	});
+});
+
 interface IConditionalFieldProps {
 	value: string | boolean;
 	options: any[];

package/src/__tests__/components/Fields/RadioField/RadioField.test.tsx

@@ -94,3 +94,69 @@ describe("onClick events", () => {
 		expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
 	});
 });
+
+describe("RadioField description", () => {
+	const baseProps: IRadioFieldProps = {
+		name: "redirectionType",
+		value: "301",
+		title: "301 - Permanent",
+	};
+
+	const renderField = (props: IRadioFieldProps) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<RadioField {...props} />
+			</ThemeProvider>,
+		);
+
+	it("should not render a description when none is given", () => {
+		renderField(baseProps);
+
+		expect(screen.queryByTestId("radio-field-description")).toBeNull();
+	});
+
+	it("should render the description below the title", () => {
+		renderField({ ...baseProps, description: "Keeps SEO. Use for definitive redirects." });
+
+		const description = screen.getByTestId("radio-field-description");
+		expect(description.textContent).toEqual("Keeps SEO. Use for definitive redirects.");
+		expect(description).toHaveStyleRule("display", "block");
+	});
+
+	it("should render the description smaller than the title", () => {
+		// Mismo tamaño que el HelpText de FieldsBehavior (uiXS), que es el texto
+		// descriptivo que ya usa el CMS bajo un campo.
+		renderField({ ...baseProps, description: "Keeps SEO." });
+
+		expect(screen.getByTestId("radio-field-description")).toHaveStyleRule("font-size", "12px");
+	});
+
+	it("should name the radio with the title alone", () => {
+		// Con la descripción colgando del <label> sin más, el nombre accesible
+		// concatenaba las dos cadenas sin separador ("301 - PermanentKeeps SEO.").
+		renderField({ ...baseProps, description: "Keeps SEO. Use for definitive redirects." });
+
+		const radio = screen.getByRole("radio", { name: "301 - Permanent" });
+		expect(radio).toBeTruthy();
+		expect(radio.getAttribute("aria-describedby")).toEqual("redirectionType-301-description");
+	});
+
+	it("should emphasise the title only when there is a description", () => {
+		const { container: withDescription } = renderField({ ...baseProps, description: "Keeps SEO." });
+		expect(withDescription.querySelector("label")).toHaveStyleRule("font-weight", "600");
+
+		cleanup();
+
+		const { container: withoutDescription } = renderField(baseProps);
+		expect(withoutDescription.querySelector("label")).not.toHaveStyleRule("font-weight", "600");
+	});
+
+	it("should select the option when the description is clicked", () => {
+		const onChange = vi.fn();
+		renderField({ ...baseProps, description: "Keeps SEO.", onChange });
+
+		fireEvent.click(screen.getByTestId("radio-field-description"));
+
+		expect(onChange).toHaveBeenCalledWith("301");
+	});
+});

package/src/__tests__/components/Fields/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,76 @@
+import type * as React from "react";
+
+import RadioGroup from "@ax/components/Fields/RadioGroup";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+
+afterEach(cleanup);
+
+const options = [
+	{
+		name: "301",
+		value: "301",
+		title: "301 - Permanent",
+		description: "Keeps SEO. Use for definitive redirects.",
+	},
+	{
+		name: "302",
+		value: "302",
+		title: "302 - Temporary",
+		description: "Doesn't keep SEO. Use for short-lived changes.",
+	},
+];
+
+const renderGroup = (props: Partial<React.ComponentProps<typeof RadioGroup>> = {}) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RadioGroup name="redirectionType" value="301" options={options} onChange={vi.fn()} {...props} />
+		</ThemeProvider>,
+	);
+
+describe("RadioGroup component rendering", () => {
+	it("should render one radio per option", () => {
+		renderGroup();
+
+		expect(screen.getAllByTestId("radio-field-input")).toHaveLength(2);
+	});
+
+	it("should check the option matching the value", () => {
+		renderGroup();
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(true);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("should forward each option description to its radio", () => {
+		renderGroup();
+
+		const descriptions = screen.getAllByTestId("radio-field-description").map((node) => node.textContent);
+		expect(descriptions).toEqual([
+			"Keeps SEO. Use for definitive redirects.",
+			"Doesn't keep SEO. Use for short-lived changes.",
+		]);
+	});
+
+	it("should render no descriptions when the options have none", () => {
+		renderGroup({ options: options.map(({ description: _description, ...option }) => option) });
+
+		expect(screen.queryByTestId("radio-field-description")).toBeNull();
+	});
+});
+
+describe("RadioGroup events", () => {
+	it("should report the value of the clicked option", () => {
+		const onChange = vi.fn();
+		renderGroup({ onChange });
+
+		const [, temporary] = screen.getAllByTestId("radio-field-input");
+		fireEvent.click(temporary);
+
+		expect(onChange).toHaveBeenCalledWith("302");
+	});
+});

package/src/__tests__/modules/Redirects/BulkHeader/TableHeader.test.tsx

@@ -0,0 +1,123 @@
+import { parseTheme } from "@ax/helpers";
+import TableHeader from "@ax/modules/Redirects/BulkHeader/TableHeader";
+import * as HeaderStyle from "@ax/modules/Redirects/BulkHeader/TableHeader/style";
+import * as ItemStyle from "@ax/modules/Redirects/RedirectItem/style";
+import globalTheme from "@ax/themes/theme.json";
+import type { IQueryValue } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const store = configureStore([thunk])({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const renderHeader = (
+	isSiteItem: boolean,
+	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void = vi.fn(),
+	type: IQueryValue[] = [],
+) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<TableHeader
+				totalItems={1}
+				isScrolling={false}
+				selectAllItems={vi.fn()}
+				filterItems={filterItems}
+				filterValues={{ sites: [], type, order: [] }}
+				isSiteItem={isSiteItem}
+				sortItems={vi.fn()}
+				sortedListStatus={{ isAscending: false, sortedByDate: false }}
+				checkState={{ isAllSelected: false, hoverCheck: false }}
+				setHoverCheck={vi.fn()}
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+describe("[UC-AX-manage-redirects] Redirects TableHeader", () => {
+	it("AC8 · heads the redirection type column in global scope", () => {
+		renderHeader(false);
+
+		expect(screen.getByText("Type")).toBeTruthy();
+	});
+
+	it("AC8 · heads it in site scope too", () => {
+		renderHeader(true);
+
+		expect(screen.getByText("Type")).toBeTruthy();
+	});
+});
+
+describe("[UC-AX-manage-redirects] Redirects type column alignment", () => {
+	// La tabla es flex con anchuras fijas por celda: cabecera y fila se alinean
+	// solo porque coinciden a mano. Si una de las dos deriva, la columna entera
+	// se descuadra y jsdom no hace layout, así que nadie más lo vería.
+	const width = "96px";
+
+	it("AC8 · keeps header and cell the same width", () => {
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<>
+					<HeaderStyle.TypeHeader data-testid="header" />
+					<ItemStyle.TypeCell data-testid="cell" />
+				</>
+			</ThemeProvider>,
+			{ store },
+		);
+
+		expect(container.querySelector('[data-testid="header"]')).toHaveStyleRule("width", width);
+		expect(container.querySelector('[data-testid="cell"]')).toHaveStyleRule("width", width);
+	});
+});
+
+describe("[UC-AX-manage-redirects] Redirects type filter", () => {
+	const openTypeFilter = () => fireEvent.click(screen.getByTestId("redirect-type-filter"));
+
+	const optionFor = (label: string) => screen.getAllByTestId("list-item").find((item) => item.textContent === label);
+
+	it("AC9 · filters the listing by the chosen type", () => {
+		const filterItems = vi.fn();
+		renderHeader(false, filterItems);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("302") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", [{ value: "302", label: "302" }]);
+	});
+
+	it("AC9 · offers 301 and 302, with none chosen to start with", () => {
+		renderHeader(false);
+
+		openTypeFilter();
+
+		expect(screen.getByText("Filter by type")).toBeTruthy();
+		expect(screen.getAllByTestId("list-item").map((item) => item.textContent)).toEqual(["301", "302"]);
+	});
+
+	it("AC9 · clears the filter when the chosen type is picked again", () => {
+		const filterItems = vi.fn();
+		renderHeader(false, filterItems, [{ value: "302", label: "302" }]);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("302") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", []);
+	});
+
+	it("AC9 · offers the filter in site scope too, where the Site one is hidden", () => {
+		const filterItems = vi.fn();
+		renderHeader(true, filterItems);
+
+		openTypeFilter();
+		fireEvent.click(optionFor("301") as HTMLElement);
+
+		expect(filterItems).toHaveBeenCalledWith("type", [{ value: "301", label: "301" }]);
+	});
+});