@carlonicora/nextjs-jsonapi 1.59.0 → 1.61.0

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

@@ -0,0 +1,217 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { EditorSheet } from "../EditorSheet";
+
+// Mock next-intl
+vi.mock("next-intl", () => ({
+  useTranslations: () => {
+    const t = (key: string, params?: Record<string, string>) => {
+      if (params?.type) return `${key}:${params.type}`;
+      return key;
+    };
+    return t;
+  },
+}));
+
+// Mock usePageUrlGenerator
+vi.mock("../../../hooks/usePageUrlGenerator", () => ({
+  usePageUrlGenerator: () => (params: { page?: any; id?: string }) => `/test/${params.id || ""}`,
+}));
+
+// Mock errorToast
+vi.mock("../../errors/errorToast", () => ({
+  errorToast: vi.fn(),
+}));
+
+const testModule = { pageUrl: "/test", name: "tests" } as any;
+
+const schema = z.object({
+  name: z.string().min(1),
+});
+
+function TestEditor({
+  onSubmit = vi.fn().mockResolvedValue({ id: "123" }),
+  isEdit = false,
+  ...props
+}: Partial<React.ComponentProps<typeof EditorSheet>> & { onSubmit?: any }) {
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "" },
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      onSubmit={onSubmit}
+      onReset={() => ({ name: "" })}
+      entityType="Test Entity"
+      isEdit={isEdit}
+      module={testModule}
+      {...props}
+    >
+      <input {...form.register("name")} data-testid="name-input" />
+    </EditorSheet>
+  );
+}
+
+describe("EditorSheet", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("trigger rendering", () => {
+    it("should render create button when not editing", () => {
+      render(<TestEditor />);
+      expect(screen.getByText("ui.buttons.create")).toBeTruthy();
+    });
+
+    it("should render custom trigger when provided", () => {
+      render(<TestEditor trigger={<button>Custom</button>} />);
+      expect(screen.getByText("Custom")).toBeTruthy();
+    });
+
+    it("should not render trigger when dialogOpen is controlled", () => {
+      render(<TestEditor dialogOpen={false} />);
+      expect(screen.queryByText("ui.buttons.create")).toBeNull();
+    });
+  });
+
+  describe("sheet header", () => {
+    it("should show create title when not editing", () => {
+      render(<TestEditor dialogOpen={true} />);
+      expect(screen.getByText("common.edit.create.title:Test Entity")).toBeTruthy();
+    });
+
+    it("should show update title when editing", () => {
+      render(<TestEditor dialogOpen={true} isEdit={true} entityName="My Item" />);
+      expect(screen.getByText("common.edit.update.title:Test Entity")).toBeTruthy();
+    });
+  });
+
+  describe("size presets", () => {
+    it("should default to xl size", () => {
+      render(<TestEditor dialogOpen={true} />);
+      const content = document.querySelector("[data-side]");
+      expect(content?.className).toContain("max-w-7xl");
+    });
+
+    it("should apply sm size", () => {
+      render(<TestEditor dialogOpen={true} size="sm" />);
+      const content = document.querySelector("[data-side]");
+      expect(content?.className).toContain("max-w-2xl");
+    });
+  });
+
+  describe("submit flow", () => {
+    it("should call onSubmit with form values on submit", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc" });
+      render(<TestEditor dialogOpen={true} onSubmit={onSubmit} />);
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({ name: "Test Name" }));
+    });
+
+    it("should call onSuccess instead of navigation when provided", async () => {
+      const onSubmit = vi.fn().mockResolvedValue(undefined);
+      const onSuccess = vi.fn();
+      const onNavigate = vi.fn();
+      render(<TestEditor dialogOpen={true} onSubmit={onSubmit} onSuccess={onSuccess} onNavigate={onNavigate} />);
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(onSuccess).toHaveBeenCalled();
+      expect(onNavigate).not.toHaveBeenCalled();
+    });
+
+    it("should call onNavigate when onSuccess is not provided", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc" });
+      const onNavigate = vi.fn();
+      render(<TestEditor dialogOpen={true} onSubmit={onSubmit} onNavigate={onNavigate} />);
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(onNavigate).toHaveBeenCalledWith("/test/abc");
+    });
+
+    it("should call onRevalidate on successful submit", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc" });
+      const onRevalidate = vi.fn();
+      render(<TestEditor dialogOpen={true} onSubmit={onSubmit} onRevalidate={onRevalidate} />);
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(onRevalidate).toHaveBeenCalled();
+    });
+
+    it("should call propagateChanges instead of onNavigate when editing", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc", name: "Updated" });
+      const propagateChanges = vi.fn();
+      const onNavigate = vi.fn();
+      render(
+        <TestEditor
+          dialogOpen={true}
+          isEdit={true}
+          onSubmit={onSubmit}
+          propagateChanges={propagateChanges}
+          onNavigate={onNavigate}
+        />,
+      );
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(propagateChanges).toHaveBeenCalledWith({ id: "abc", name: "Updated" });
+      expect(onNavigate).not.toHaveBeenCalled();
+    });
+
+    it("should show error toast on submit failure", async () => {
+      const { errorToast: mockErrorToast } = await import("../../errors/errorToast");
+      const error = new Error("Network error");
+      const onSubmit = vi.fn().mockRejectedValue(error);
+      render(<TestEditor dialogOpen={true} onSubmit={onSubmit} />);
+
+      const input = screen.getByTestId("name-input");
+      await userEvent.type(input, "Test Name");
+
+      const submitButton = screen.getByTestId("modal-button-create");
+      await userEvent.click(submitButton);
+
+      expect(mockErrorToast).toHaveBeenCalledWith({
+        title: "generic.errors.create",
+        error,
+      });
+    });
+  });
+
+  describe("disabled prop", () => {
+    it("should disable submit button when disabled prop is true", () => {
+      render(<TestEditor dialogOpen={true} disabled={true} />);
+      const submitButton = screen.getByTestId("modal-button-create");
+      expect(submitButton).toBeDisabled();
+    });
+  });
+});

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,10 @@ export * from "./CommonAssociationForm";
 export * from "./CommonDeleter";
 export * from "./CommonEditorButtons";
 export * from "./CommonEditorHeader";
+export * from "./CommonEditorDiscardDialog";
 export * from "./CommonEditorTrigger";
+export * from "./useEditorDialog";
+export * from "./EditorSheet";
 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) && (
                       <>