@carlonicora/nextjs-jsonapi 1.59.0 → 1.60.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/scripts/generate-web-module/templates/components/editor.template.ts

@@ -53,26 +53,9 @@ function ${names.pascalCase}EditorInternal({
 }: ${names.pascalCase}EditorProps) {
   const router = useRouter();
   const generateUrl = usePageUrlGenerator();
-  const [open, setOpen] = useState<boolean>(false);
   const t = useTranslations();
 ${hasAuthor ? `  const { currentUser } = useCurrentUserContext<UserInterface>();` : ""}
 
-  useEffect(() => {
-    if (dialogOpen !== undefined) {
-      setOpen(dialogOpen);
-    }
-  }, [dialogOpen]);
-
-  useEffect(() => {
-    if (typeof onDialogOpenChange === "function") {
-      onDialogOpenChange(open);
-    }
-  }, [open, onDialogOpenChange]);
-
-  useEffect(() => {
-    if (forceShow) setOpen(true);
-  }, [forceShow]);
-
 ${formSchema}
 
 ${defaultValues}
@@ -82,10 +65,19 @@ ${defaultValues}
     defaultValues: getDefaultValues(),
   });
 
+  const { dirtyFields } = form.formState;
+
+  const isFormDirty = useCallback(() => {
+    return Object.keys(dirtyFields).length > 0;
+  }, [dirtyFields]);
+
+  const { open, setOpen, handleOpenChange, discardDialogProps } = useEditorDialog(isFormDirty, {
+    dialogOpen, onDialogOpenChange, forceShow, onClose,
+  });
+
   useEffect(() => {
     if (!open) {
       form.reset(getDefaultValues());
-      if (onClose) onClose();
     }
   }, [open]);
 
@@ -101,25 +93,9 @@ ${
 
 ${onSubmit}
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && open) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-
-    if (open) {
-      document.addEventListener("keydown", handleKeyDown, true);
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [open]);
-
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       {dialogOpen === undefined && (trigger ? <DialogTrigger>{trigger}</DialogTrigger> : <CommonEditorTrigger isEdit={!!${names.camelCase}} />)}
       <DialogContent
         className="flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto"
@@ -129,12 +105,14 @@ ${onSubmit}
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex w-full flex-col gap-y-4">
             <div className="flex flex-col justify-between gap-x-4">
 ${formFields}
-              <CommonEditorButtons form={form} setOpen={setOpen} isEdit={!!${names.camelCase}} />
+              <CommonEditorButtons form={form} setOpen={handleOpenChange} isEdit={!!${names.camelCase}} />
             </div>
           </form>
         </Form>
       </DialogContent>
     </Dialog>
+    <CommonEditorDiscardDialog {...discardDialogProps} />
+    </>
   );
 }
 
@@ -194,7 +172,7 @@ function generateImports(data: FrontendTemplateData): string {
   imports.push(`import { revalidatePaths } from "@/utils/revalidation";`);
 
   // Library component imports
-  const componentImports: string[] = ["CommonEditorButtons", "CommonEditorHeader", "CommonEditorTrigger", "errorToast"];
+  const componentImports: string[] = ["CommonEditorButtons", "CommonEditorDiscardDialog", "CommonEditorHeader", "CommonEditorTrigger", "errorToast", "useEditorDialog"];
 
   // Check for field types that need specific components
   const hasContentField = fields.some((f) => f.isContentField || f.name === "content");
@@ -251,7 +229,7 @@ function generateImports(data: FrontendTemplateData): string {
   // Other imports
   imports.push(`import { zodResolver } from "@hookform/resolvers/zod";`);
   imports.push(`import { useTranslations } from "next-intl";`);
-  imports.push(`import { ReactNode, useEffect, useState } from "react";`);
+  imports.push(`import { ReactNode, useCallback, useEffect } from "react";`);
   imports.push(`import { SubmitHandler, useForm } from "react-hook-form";`);
   imports.push(`import { v4 } from "uuid";`);
   imports.push(`import { z } from "zod";`);

package/src/components/forms/CommonEditorDiscardDialog.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../shadcnui";
+
+type CommonEditorDiscardDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDiscard: () => void;
+};
+
+export function CommonEditorDiscardDialog({ open, onOpenChange, onDiscard }: CommonEditorDiscardDialogProps) {
+  const t = useTranslations();
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t(`ui.dialogs.unsaved_changes_title`)}</AlertDialogTitle>
+          <AlertDialogDescription>{t(`ui.dialogs.unsaved_changes_description`)}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t(`ui.buttons.cancel`)}</AlertDialogCancel>
+          <AlertDialogAction variant="destructive" onClick={onDiscard}>
+            {t(`ui.dialogs.unsaved_changes_discard`)}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/forms/__tests__/CommonEditorDiscardDialog.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { CommonEditorDiscardDialog } from "../CommonEditorDiscardDialog";
+
+// Mock next-intl
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+describe("CommonEditorDiscardDialog", () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: vi.fn(),
+    onDiscard: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render dialog content when open", () => {
+    render(<CommonEditorDiscardDialog {...defaultProps} />);
+    expect(screen.getByText("ui.dialogs.unsaved_changes_title")).toBeInTheDocument();
+    expect(screen.getByText("ui.dialogs.unsaved_changes_description")).toBeInTheDocument();
+  });
+
+  it("should render cancel and discard buttons", () => {
+    render(<CommonEditorDiscardDialog {...defaultProps} />);
+    expect(screen.getByText("ui.buttons.cancel")).toBeInTheDocument();
+    expect(screen.getByText("ui.dialogs.unsaved_changes_discard")).toBeInTheDocument();
+  });
+
+  it("should call onDiscard when discard button is clicked", () => {
+    render(<CommonEditorDiscardDialog {...defaultProps} />);
+    fireEvent.click(screen.getByText("ui.dialogs.unsaved_changes_discard"));
+    expect(defaultProps.onDiscard).toHaveBeenCalled();
+  });
+
+  it("should not render when closed", () => {
+    render(<CommonEditorDiscardDialog {...defaultProps} open={false} />);
+    expect(screen.queryByText("ui.dialogs.unsaved_changes_title")).not.toBeInTheDocument();
+  });
+});

package/src/components/forms/__tests__/useEditorDialog.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useEditorDialog } from "../useEditorDialog";
+
+describe("useEditorDialog", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("open state", () => {
+    it("should start closed by default", () => {
+      const { result } = renderHook(() => useEditorDialog(() => false));
+      expect(result.current.open).toBe(false);
+    });
+
+    it("should allow setting open state directly", () => {
+      const { result } = renderHook(() => useEditorDialog(() => false));
+      act(() => result.current.setOpen(true));
+      expect(result.current.open).toBe(true);
+    });
+  });
+
+  describe("handleOpenChange", () => {
+    it("should open dialog when called with true", () => {
+      const { result } = renderHook(() => useEditorDialog(() => false));
+      act(() => result.current.handleOpenChange(true));
+      expect(result.current.open).toBe(true);
+    });
+
+    it("should close dialog when form is not dirty", () => {
+      const { result } = renderHook(() => useEditorDialog(() => false));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.handleOpenChange(false));
+      expect(result.current.open).toBe(false);
+    });
+
+    it("should show discard confirmation when form is dirty and closing", () => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.handleOpenChange(false));
+      expect(result.current.open).toBe(true);
+      expect(result.current.discardDialogProps.open).toBe(true);
+    });
+  });
+
+  describe("discardDialogProps", () => {
+    it("should close both dialogs on discard", () => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.handleOpenChange(false));
+      expect(result.current.discardDialogProps.open).toBe(true);
+      act(() => result.current.discardDialogProps.onDiscard());
+      expect(result.current.discardDialogProps.open).toBe(false);
+      expect(result.current.open).toBe(false);
+    });
+
+    it("should allow dismissing discard dialog via onOpenChange", () => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.handleOpenChange(false));
+      act(() => result.current.discardDialogProps.onOpenChange(false));
+      expect(result.current.discardDialogProps.open).toBe(false);
+      expect(result.current.open).toBe(true);
+    });
+  });
+
+  describe("options.dialogOpen", () => {
+    it("should sync open state from external dialogOpen prop", () => {
+      const { result, rerender } = renderHook(({ dialogOpen }) => useEditorDialog(() => false, { dialogOpen }), {
+        initialProps: { dialogOpen: false },
+      });
+      expect(result.current.open).toBe(false);
+      rerender({ dialogOpen: true });
+      expect(result.current.open).toBe(true);
+    });
+  });
+
+  describe("options.onDialogOpenChange", () => {
+    it("should notify parent when open state changes", () => {
+      const onDialogOpenChange = vi.fn();
+      const { result } = renderHook(() => useEditorDialog(() => false, { onDialogOpenChange }));
+      act(() => result.current.setOpen(true));
+      expect(onDialogOpenChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe("options.forceShow", () => {
+    it("should open dialog when forceShow becomes true", () => {
+      const { result, rerender } = renderHook(({ forceShow }) => useEditorDialog(() => false, { forceShow }), {
+        initialProps: { forceShow: false },
+      });
+      expect(result.current.open).toBe(false);
+      rerender({ forceShow: true });
+      expect(result.current.open).toBe(true);
+    });
+  });
+
+  describe("options.onClose", () => {
+    it("should call onClose when dialog closes", () => {
+      const onClose = vi.fn();
+      const { result } = renderHook(() => useEditorDialog(() => false, { onClose }));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.setOpen(false));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it("should call onClose when discard is confirmed", () => {
+      const onClose = vi.fn();
+      const { result } = renderHook(() => useEditorDialog(() => true, { onClose }));
+      act(() => result.current.setOpen(true));
+      act(() => result.current.handleOpenChange(false));
+      act(() => result.current.discardDialogProps.onDiscard());
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("escape key handler", () => {
+    it("should trigger handleOpenChange(false) on Escape when open", () => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+      act(() => result.current.setOpen(true));
+
+      const event = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      });
+      act(() => document.dispatchEvent(event));
+
+      expect(result.current.discardDialogProps.open).toBe(true);
+    });
+
+    it("should not react to Escape when closed", () => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+
+      const event = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      });
+      act(() => document.dispatchEvent(event));
+
+      expect(result.current.discardDialogProps.open).toBe(false);
+    });
+  });
+});

package/src/components/forms/index.ts

@@ -2,7 +2,9 @@ export * from "./CommonAssociationForm";
 export * from "./CommonDeleter";
 export * from "./CommonEditorButtons";
 export * from "./CommonEditorHeader";
+export * from "./CommonEditorDiscardDialog";
 export * from "./CommonEditorTrigger";
+export * from "./useEditorDialog";
 export * from "./DatePickerPopover";
 export * from "./DateRangeSelector";
 export * from "./FileUploader";

package/src/components/forms/useEditorDialog.ts

@@ -0,0 +1,93 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+type UseEditorDialogOptions = {
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+  forceShow?: boolean;
+  onClose?: () => void;
+};
+
+type UseEditorDialogReturn = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleOpenChange: (nextOpen: boolean) => void;
+  discardDialogProps: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onDiscard: () => void;
+  };
+};
+
+export function useEditorDialog(isFormDirty: () => boolean, options?: UseEditorDialogOptions): UseEditorDialogReturn {
+  const [open, setOpen] = useState<boolean>(false);
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
+
+  // Sync open state from external dialogOpen prop
+  useEffect(() => {
+    if (options?.dialogOpen !== undefined) {
+      setOpen(options.dialogOpen);
+    }
+  }, [options?.dialogOpen]);
+
+  // Notify parent when open state changes
+  useEffect(() => {
+    if (typeof options?.onDialogOpenChange === "function") {
+      options.onDialogOpenChange(open);
+    }
+  }, [open, options?.onDialogOpenChange]);
+
+  // Force show
+  useEffect(() => {
+    if (options?.forceShow) setOpen(true);
+  }, [options?.forceShow]);
+
+  // Call onClose when dialog closes
+  useEffect(() => {
+    if (!open) {
+      if (options?.onClose) options.onClose();
+    }
+  }, [open]);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen && isFormDirty()) {
+        setShowDiscardConfirm(true);
+        return;
+      }
+      setOpen(nextOpen);
+    },
+    [isFormDirty],
+  );
+
+  // Escape key handler
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleOpenChange(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown, true);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [open, handleOpenChange]);
+
+  const discardDialogProps = {
+    open: showDiscardConfirm,
+    onOpenChange: setShowDiscardConfirm,
+    onDiscard: () => {
+      setShowDiscardConfirm(false);
+      setOpen(false);
+    },
+  };
+
+  return { open, setOpen, handleOpenChange, discardDialogProps };
+}

package/src/components/tables/ContentListTable.tsx

@@ -101,20 +101,19 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                   <div className="flex w-full items-center justify-between gap-x-2">
                     {/* <div className="w-full">{fullWidth ? `` : props.title}</div> */}
                     <div className="w-full">
-                      {fullWidth ? (
-                        <div
-                          className={
-                            "text-muted-foreground flex items-center gap-x-2 text-lg font-light whitespace-nowrap"
-                          }
-                        >
-                          {props.tableGeneratorType.icon && (
-                            <props.tableGeneratorType.icon className="text-primary h-6 w-6" />
-                          )}
-                          {props.title}
-                        </div>
-                      ) : (
-                        props.title
-                      )}
+                      <div
+                        className={cn(
+                          "text-muted-foreground flex items-center gap-x-2  font-light whitespace-nowrap",
+                          fullWidth ? `text-lg` : `text-sm`,
+                        )}
+                      >
+                        {props.tableGeneratorType.icon && (
+                          <props.tableGeneratorType.icon
+                            className={cn(`text-primary`, fullWidth ? `h-6 w-6` : `h-4 w-4`)}
+                          />
+                        )}
+                        {props.title}
+                      </div>
                     </div>
                     {(props.functions || props.filters || allowSearch) && (
                       <>