@griddo/ax 12.13.0-rc.1 → 12.13.1-beta.1

package/README.md

@@ -9,27 +9,27 @@
 
 ### Desarrollo
 
-- `pnpm start` - Alias para `start:dev`
-- `pnpm start:local` - Inicia el servidor de desarrollo en entorno local
-- `pnpm start:dev` - Inicia el servidor de desarrollo en entorno de desarrollo
-- `pnpm start:staging` - Inicia el servidor de desarrollo en entorno de staging
+- `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
 
-- `pnpm build` - Construye la aplicación para producción
-- `pnpm build:dev` - Construye la aplicación para desarrollo
+- `yarn build` - Construye la aplicación para producción
+- `yarn build:dev` - Construye la aplicación para desarrollo
 
 ### Testing
 
-- `pnpm test` - Ejecuta los tests con Jest
-- `pnpm test:watch` - Ejecuta los tests en modo watch
-- `pnpm test:ci` - Ejecuta los tests en modo CI (sin paralelización)
-- `pnpm test:coverage` - Ejecuta los tests y genera reporte de cobertura
+- `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
 
 ### Linting y Formato
 
-- `pnpm lint` - Verifica el código con Biome (sin escribir)
-- `pnpm format:write` - Formatea el código con Biome (escribiendo)
+- `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

package/config/webpack.config.js

@@ -83,7 +83,7 @@ const hasJsxRuntime = (() => {
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = (webpackEnv) => {
+module.exports = function (webpackEnv) {
 	const isEnvDevelopment = webpackEnv === "development";
 	const isEnvProduction = webpackEnv === "production";
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.13.0-rc.1",
+	"version": "12.13.1-beta.1",
 	"homepage": "https://griddo.io",
 	"repository": {
 		"type": "git",
@@ -127,7 +127,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.5.15",
-		"@griddo/core": "12.13.0-rc.1",
+		"@griddo/core": "12.13.1-beta.1",
 		"@types/redux-mock-store": "1.5.0",
 		"@vitest/coverage-v8": "4.1.11",
 		"axios-mock-adapter": "1.22.0",
@@ -138,7 +138,7 @@
 		"vitest-styled-components": "1.0.0"
 	},
 	"peerDependencies": {
-		"@griddo/core": "12.13.0-rc.1"
+		"@griddo/core": "12.13.1-beta.1"
 	},
 	"babel": {
 		"presets": [
@@ -171,5 +171,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "95c5d6a95667cad124b62e06cdabbb56baff05a2"
+	"gitHead": "2570d2896bbdf191bdc40861f422ca1d053f6e5c"
 }

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.caption.test.tsx

@@ -0,0 +1,232 @@
+import Wysiwyg from "@ax/components/Fields/Wysiwyg";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import { config } from "components";
+import FroalaEditor from "froala-editor";
+import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, render, waitFor } from "../../../../../config/tests/test-utils";
+
+// The real Froala, not the mock the rest of the Wysiwyg tests use: the bug lives
+// in its image plugin, so only the plugin itself can show it is gone.
+
+const schemasConfig = config.schemas.config;
+const store = configureStore()({ app: { token: "token" } });
+
+const mountEditor = async (value: string) => {
+	const { container } = render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<Wysiwyg value={value} onChange={vi.fn()} site={null} />
+		</ThemeProvider>,
+		{ store },
+	);
+	let editor: any;
+	await waitFor(() => {
+		const el = container.querySelector(".fr-element");
+		editor = (FroalaEditor as any).INSTANCES.find((instance: any) => instance.el === el);
+		expect(editor?.image).toBeTruthy();
+	});
+	return editor;
+};
+
+const toggleCaption = (editor: any, img: HTMLElement = editor.el.querySelector("img")) => {
+	editor.image.edit(editor.$(img));
+	editor.commands.exec("imageCaption");
+};
+
+// jsdom has no layout and no DOMRect
+const rect = (width: number) =>
+	({ x: 0, y: 0, top: 0, left: 0, right: width, bottom: 200, width, height: 200 }) as DOMRect;
+
+const caption = (editor: any): HTMLElement | null => editor.el.querySelector(".fr-img-caption");
+
+describe("Wysiwyg image caption", () => {
+	beforeAll(() => {
+		// Froala's licence check splits document.domain, which jsdom leaves undefined
+		Object.defineProperty(document, "domain", { value: "localhost", configurable: true });
+	});
+
+	afterEach(() => {
+		cleanup();
+		delete schemasConfig.richTextConfig;
+	});
+
+	describe("with image resizing on", () => {
+		beforeEach(() => {
+			schemasConfig.richTextConfig = { imageResize: true };
+		});
+
+		it.each([
+			["a new image in a paragraph", '<p><img src="http://x/a.png" alt="" class="fr-dib"></p>'],
+			["a linked image", '<p><a href="http://x"><img src="http://x/a.png" alt="" class="fr-dib"></a></p>'],
+			["an image outside a paragraph", '<ul><li><img src="http://x/a.png" alt="" class="fr-dib"></li></ul>'],
+		])("should open an editable caption under %s", async (_, html) => {
+			const editor = await mountEditor(html);
+
+			toggleCaption(editor);
+
+			const inner = caption(editor)?.querySelector(".fr-inner");
+			expect(inner?.textContent).toBe("Image Caption");
+			expect(inner?.getAttribute("contenteditable")).toBe("true");
+		});
+
+		it("should give the caption the width the image is showing at", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib"></p>');
+			vi.spyOn(editor.el.querySelector("img"), "getBoundingClientRect").mockReturnValue(rect(300));
+			vi.spyOn(editor.el.querySelector("p"), "getBoundingClientRect").mockReturnValue(rect(600));
+
+			toggleCaption(editor);
+
+			expect(caption(editor)?.style.width).toBe("50%");
+		});
+
+		it("should fall back to the full width when the image cannot be measured", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib"></p>');
+
+			toggleCaption(editor);
+
+			expect(caption(editor)?.style.width).toBe("100%");
+		});
+
+		it("should move a resized image's width to its caption and back", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib" style="width: 40%;"></p>');
+			const img = editor.el.querySelector("img");
+
+			toggleCaption(editor);
+
+			expect(caption(editor)?.style.width).toBe("40%");
+			expect(img.style.width).toBe("");
+
+			toggleCaption(editor);
+
+			expect(caption(editor)).toBeNull();
+			expect(img.style.width).toBe("40%");
+		});
+
+		it("should not leave the width it hands Froala in the content", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib"></p>');
+
+			toggleCaption(editor);
+
+			expect(editor.el.querySelector("[width]")).toBeNull();
+			expect(editor.el.querySelector("img").hasAttribute("style")).toBe(false);
+		});
+
+		it("should turn a pixel width from before percentages into the caption's share", async () => {
+			const editor = await mountEditor(
+				'<ul><li><img src="http://x/a.png" alt="" class="fr-dib" style="width: 300px;"></li></ul>',
+			);
+			const img = editor.el.querySelector("img");
+			vi.spyOn(img, "getBoundingClientRect").mockReturnValue(rect(300));
+			vi.spyOn(editor.el.querySelector("li"), "getBoundingClientRect").mockReturnValue(rect(600));
+
+			toggleCaption(editor);
+
+			expect(caption(editor)?.style.width).toBe("50%");
+			expect(img.style.width).toBe("");
+		});
+
+		it("should keep a resized image's size when its caption is put back", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib" style="width: 40%;"></p>');
+			const img = editor.el.querySelector("img");
+
+			toggleCaption(editor);
+			toggleCaption(editor);
+			toggleCaption(editor);
+
+			expect(caption(editor)?.style.width).toBe("40%");
+			expect(img.style.width).toBe("");
+			expect(editor.el.querySelectorAll(".fr-img-space-wrap")).toHaveLength(1);
+		});
+
+		it("should leave the other captions alone when an image is captioned again", async () => {
+			const editor = await mountEditor(
+				'<p><img id="first" src="http://x/a.png" alt="" class="fr-dib"></p><p><img id="second" src="http://x/b.png" alt="" class="fr-dib"></p>',
+			);
+			const first = editor.el.querySelector("#first");
+			const second = editor.el.querySelector("#second");
+
+			toggleCaption(editor, first);
+			toggleCaption(editor, second);
+			toggleCaption(editor, second);
+			toggleCaption(editor, second);
+
+			expect(first.closest(".fr-img-space-wrap")).not.toBeNull();
+			expect(first.closest(".fr-img-caption")).not.toBeNull();
+			expect(second.closest(".fr-img-caption")).not.toBeNull();
+			expect(editor.el.querySelectorAll(".fr-img-space-wrap")).toHaveLength(2);
+		});
+
+		describe("when resizing a captioned image", () => {
+			// jsdom has no layout: the column is 600px, and the caption, with the
+			// paragraph and image inside it, takes the share its style asks for
+			const COLUMN = 600;
+
+			beforeEach(() => {
+				vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+					const box = this.closest(".fr-img-caption") as HTMLElement | null;
+					return box ? (Number.parseFloat(box.style.width) / 100) * COLUMN : COLUMN;
+				});
+			});
+
+			const captioned = async () => {
+				const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib" style="width: 50%;"></p>');
+				const img = editor.el.querySelector("img");
+				toggleCaption(editor);
+				editor.image.edit(editor.$(img));
+				return { editor, img };
+			};
+
+			// Froala reads pageX, which jsdom does not derive from clientX
+			const mouse = (type: string, pageX = 0) =>
+				Object.defineProperty(new MouseEvent(type, { bubbles: true }), "pageX", { value: pageX });
+
+			const dragHandle = (moves: number[]) => {
+				const handle = document.querySelector(".fr-image-resizer .fr-hse") as HTMLElement;
+				handle.dispatchEvent(mouse("mousedown", 100));
+				return moves.map((x) => {
+					document.dispatchEvent(mouse("mousemove", x));
+					return (document.querySelector(".fr-img-caption") as HTMLElement).style.width;
+				});
+			};
+
+			it("should follow the pointer without bouncing", async () => {
+				await captioned();
+
+				expect(dragHandle([160, 160, 160, 130])).toEqual(["60%", "60%", "60%", "55%"]);
+			});
+
+			it("should put the caption back in its paragraph when the drag ends", async () => {
+				const { img } = await captioned();
+
+				dragHandle([160]);
+				document.body.dispatchEvent(mouse("mouseup"));
+
+				const paragraph = img.closest(".fr-img-wrap > p");
+				expect(paragraph).not.toBeNull();
+				expect(paragraph.querySelector(".fr-inner")?.textContent).toBe("Image Caption");
+			});
+		});
+
+		it("should remove the caption it added", async () => {
+			const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib"></p>');
+
+			toggleCaption(editor);
+			toggleCaption(editor);
+
+			expect(caption(editor)).toBeNull();
+			expect(editor.el.querySelector(".fr-inner")).toBeNull();
+			expect(editor.el.querySelector("img")).not.toBeNull();
+		});
+	});
+
+	it("should leave Froala's pixel caption alone when resizing is off", async () => {
+		const editor = await mountEditor('<p><img src="http://x/a.png" alt="" class="fr-dib"></p>');
+
+		toggleCaption(editor);
+
+		expect(caption(editor)?.style.width).toMatch(/px$/);
+	});
+});

package/src/__tests__/components/Fields/Wysiwyg/Wysiwyg.toolbar.test.tsx

@@ -0,0 +1,75 @@
+import Wysiwyg from "@ax/components/Fields/Wysiwyg";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+import FroalaEditor from "froala-editor";
+import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, render, waitFor } from "../../../../../config/tests/test-utils";
+
+// The real Froala, not the mock the rest of the Wysiwyg tests use: the bug lives
+// in its sticky toolbar, so only Froala itself can show it is gone.
+
+const store = configureStore()({ app: { token: "token" } });
+
+const mountEditor = async () => {
+	const { container } = render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<Wysiwyg value="<p>Lorem ipsum</p>" onChange={vi.fn()} site={null} />
+		</ThemeProvider>,
+		{ store },
+	);
+	let editor: any;
+	await waitFor(() => {
+		const el = container.querySelector(".fr-element");
+		editor = (FroalaEditor as any).INSTANCES.find((instance: any) => instance.el === el);
+		expect(editor?.$tb).toBeTruthy();
+	});
+	return editor;
+};
+
+// jsdom has no layout: Froala measures with offsetWidth/offsetHeight and places
+// the box with getBoundingClientRect
+const layOut = (box: HTMLElement, top: number) => {
+	vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(300);
+	vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(function (this: HTMLElement) {
+		return this === box ? 400 : 50;
+	});
+	vi.spyOn(box, "getBoundingClientRect").mockReturnValue({
+		x: 0,
+		y: top,
+		top,
+		left: 0,
+		right: 300,
+		bottom: top + 400,
+		width: 300,
+		height: 400,
+	} as DOMRect);
+};
+
+describe("Wysiwyg toolbar", () => {
+	beforeAll(() => {
+		// Froala's licence check splits document.domain, which jsdom leaves undefined
+		Object.defineProperty(document, "domain", { value: "localhost", configurable: true });
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.restoreAllMocks();
+	});
+
+	// AX scrolls an inner container, not the window, and Froala only re-places its
+	// sticky toolbar on window scroll, focus and resize. Focusing a half scrolled-out
+	// field pinned the toolbar under the app header, and scrolling back left it
+	// there, with an empty gap where it belonged, until the next focus.
+	it("should keep the toolbar in place when the field gets focus half scrolled out", async () => {
+		const editor = await mountEditor();
+		layOut(editor.$box.get(0), -100);
+
+		editor.events.trigger("focus");
+
+		expect(editor.$tb.get(0).classList.contains("fr-sticky-on")).toBe(false);
+		expect(editor.$box.get(0).querySelector(".fr-sticky-dummy")).toBeNull();
+	});
+});

package/src/components/Fields/Wysiwyg/config.tsx

@@ -120,6 +120,11 @@ const getWysiwygConfig = () => ({
 	pasteDeniedAttrs: ["class", "id", "style", "dir"],
 	listAdvancedTypes: false,
 	attribution: false,
+	// Froala only re-places its sticky toolbar on window scroll, but AX scrolls an
+	// inner container: focusing a half scrolled-out field pinned the toolbar under
+	// the app header and left it there. The content scrolls inside a capped box
+	// anyway, so the toolbar never ends up far from the text.
+	toolbarSticky: false,
 	paragraphFormat: {
 		N: "Normal",
 		H1: "Heading 1",
@@ -380,8 +385,8 @@ FroalaEditor.RegisterCommand("imageReplaceGriddo", {
 });
 
 export {
-	getButtonsFull as buttonsFull,
 	getButtons as buttons,
+	getButtonsFull as buttonsFull,
 	getInlineToolbar as inlineToolbar,
 	getWysiwygConfig as wysiwygConfig,
 };

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -140,12 +140,25 @@ const createPopupFunctions = (editor: any, editorEl: HTMLElement) => {
 	return { showPopup, showErrorPopup };
 };
 
+// The width an image is showing at, as the share of its block that Froala's
+// percentage resizing stores. Unmeasurable (hidden, or no layout) falls back to
+// the full width, as Froala does.
+const getImagePercentWidth = (editor: any, $img: any) => {
+	const img: HTMLElement = $img.get(0);
+	if (img.style.width.endsWith("%")) return img.style.width;
+
+	const block: HTMLElement = $img.parentsUntil(editor.$el, editor.html.blockTagsQuery()).get(0) || editor.el;
+	const percent = Math.round((img.getBoundingClientRect().width / block.getBoundingClientRect().width) * 100);
+	return percent > 0 && percent < 100 ? `${percent}%` : "100%";
+};
+
 export {
-	getRichTextConfig,
-	parseClassNames,
+	createPopupFunctions,
+	getImagePercentWidth,
 	getLanguageMenuHtml,
-	setLinkAttributes,
 	getPopupPosition,
-	createPopupFunctions,
+	getRichTextConfig,
 	type IRichTextConfig,
+	parseClassNames,
+	setLinkAttributes,
 };

package/src/components/Fields/Wysiwyg/index.tsx

@@ -11,7 +11,7 @@ import FroalaEditor from "froala-editor";
 
 import { LinkPopover } from "./atoms";
 import { buttons, buttonsFull, inlineToolbar, wysiwygConfig } from "./config";
-import { createPopupFunctions, getPopupPosition, setLinkAttributes } from "./helpers";
+import { createPopupFunctions, getImagePercentWidth, getPopupPosition, setLinkAttributes } from "./helpers";
 import "./vendors";
 
 import { useModals } from "@ax/hooks";
@@ -51,6 +51,8 @@ const Wysiwyg = (props: IWysiwygProps) => {
 		isImageLink?: boolean;
 	} | null>(null);
 	const replaceImgRef = useRef<any>(null);
+	const captionWidthRef = useRef<any>(null);
+	const liftedCaptionRef = useRef<{ paragraph: HTMLElement; nodes: ChildNode[] } | null>(null);
 	const lastValueRef = useRef(value);
 
 	useEffect(() => {
@@ -209,6 +211,28 @@ const Wysiwyg = (props: IWysiwygProps) => {
 					const editorEl = this.$el?.get?.(0) || this.el;
 					if (!editorEl) return;
 
+					// Froala resizes a percentage image against the nearest block around
+					// it, and with a caption on that is the <p> the caption keeps inside:
+					// every step of the drag measures against the width the step before
+					// just set, and the image bounces. Lift the caption's content out of
+					// that paragraph while dragging, so it measures against the column,
+					// and put it back in "image.resizeEnd". Capturing runs it before
+					// Froala's own mousedown on the handle.
+					if (this.opts.imageResizeWithPercent) {
+						this.$box?.get?.(0)?.addEventListener(
+							"mousedown",
+							(e: MouseEvent) => {
+								if (!(e.target as Element).closest?.(".fr-handler")) return;
+								const paragraph = this.image.get()?.get(0)?.closest(".fr-img-wrap > p");
+								if (!paragraph) return;
+								const nodes = [...paragraph.childNodes];
+								paragraph.replaceWith(...nodes);
+								liftedCaptionRef.current = { paragraph, nodes };
+							},
+							true,
+						);
+					}
+
 					editorEl.addEventListener("griddo:openLinkPopover", (e: Event) => {
 						const detail = (e as CustomEvent).detail;
 						setLinkPopoverOpen(true);
@@ -292,15 +316,59 @@ const Wysiwyg = (props: IWysiwygProps) => {
 				// Froala's own 2147483642, and with the option gone nothing ever clears
 				// it: the toolbar then paints over every modal the field opens. Seed the
 				// key the plugin reads, and drop what it left inline on the way out.
+				//
+				// With imageResizeWithPercent, Froala sizes a new caption from the width
+				// of the image, or of the <p>/<a> around it, and reads that width without
+				// checking there is one: on an image inside a paragraph, or never resized,
+				// it throws and no caption appears. Hand it the image's own width, and
+				// once the caption is in, give that width to the caption, as Froala's
+				// resizing expects, and take it off the image so it is not applied twice.
+				// Removing the caption gives it back to the image.
+				//
+				// Removing a caption also leaves the image in Froala's wrapper div, out
+				// of its paragraph. Captioning it again there nests a second wrapper that
+				// Froala then fails to unwrap, so put the image back in a paragraph first.
 				"commands.before": function (this: any, cmd: string) {
 					if (cmd === "fullscreen" && !this.fullscreen.isActive()) {
 						this.opts.z_index = this.opts.zIndex;
 					}
+					if (cmd === "imageCaption" && this.opts.imageResizeWithPercent && !this.image.hasCaption()) {
+						const $img = this.image.get();
+						if (!$img) return;
+						const img = $img.get(0);
+						const leftoverWrap = img.closest(".fr-img-space-wrap");
+						if (leftoverWrap) {
+							const p = document.createElement("p");
+							p.append(...leftoverWrap.childNodes);
+							leftoverWrap.replaceWith(p);
+						}
+						const width = getImagePercentWidth(this, $img);
+						const $sized = $img.parent().is("a") || $img.parent().is("p") ? $img.parent() : $img;
+						const seeded = !$sized.attr("style") && !$sized.attr("width");
+						if (seeded) $sized.attr("width", width);
+						captionWidthRef.current = { img, width, $seeded: seeded ? $sized : null };
+					}
 				},
 				"commands.after": function (this: any, cmd: string) {
 					if (cmd === "fullscreen" && !this.fullscreen.isActive()) {
 						this.$tb.css("z-index", "");
 					}
+					if (cmd === "imageCaption" && captionWidthRef.current) {
+						const { img, width, $seeded } = captionWidthRef.current;
+						$seeded?.removeAttr("width");
+						const caption = img.closest(".fr-img-caption");
+						if (caption) caption.style.width = width;
+						img.style.removeProperty("width");
+						if (!img.getAttribute("style")) img.removeAttribute("style");
+						captionWidthRef.current = null;
+					}
+				},
+				"image.resizeEnd": () => {
+					const lifted = liftedCaptionRef.current;
+					if (!lifted) return;
+					lifted.nodes[0].before(lifted.paragraph);
+					lifted.paragraph.append(...lifted.nodes);
+					liftedCaptionRef.current = null;
 				},
 				// Froala's shortcut dispatcher calls plugin commands unbound, so its own
 				// Ctrl/Cmd+K throws instead of opening anything. Returning false cancels

package/src/modules/ActivityLog/DownloadModal/index.tsx

@@ -1,10 +1,8 @@
 import type React from "react";
 
-import { FieldsBehavior, Modal } from "@ax/components";
-import type { IModal } from "@ax/types";
-
 import type { ExportFormat } from "@griddo/api-types";
-
+import type { IModal } from "@ax/types";
+import { FieldsBehavior, Modal } from "@ax/components";
 import type { IDownloadFormState } from "..";
 
 import * as S from "./style";

package/src/modules/ActivityLog/index.tsx

@@ -1,20 +1,19 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
+import { format, subDays } from "date-fns";
 
+import type { ExportFormat, LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+import type { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState, IStructuredData } from "@ax/types";
 import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Select, TableList } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
-import type { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState, IStructuredData } from "@ax/types";
 
-import type { ExportFormat, LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
-import { format, subDays } from "date-fns";
-
-import DownloadModal from "./DownloadModal";
 import { useFilterQuery } from "./hooks";
+import TableHeader from "./TableHeader";
 import ItemLog from "./ItemLog";
 import ItemLogUser from "./ItemLogUser";
-import TableHeader from "./TableHeader";
+import DownloadModal from "./DownloadModal";
 
 import * as S from "./style";