@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -51,7 +51,7 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
     if (!token && dehydratedUser) setDehydratedUser(null);
   }, [dehydratedUser, setDehydratedUser]);
 
-  const matchUrlToModule = (params?: { path: string }): ModuleWithPermissions | undefined => {
+  const matchUrlToModule = (_params?: { path: string }): ModuleWithPermissions | undefined => {
     const moduleKeys = Object.getOwnPropertyNames(Modules).filter(
       (key) => key !== "prototype" && key !== "_factory" && key !== "length" && key !== "name",
     );
@@ -138,41 +138,44 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
   // Function to refresh user data from the API
   // skipCookieUpdate: When true, only updates React state without calling the Server Action
   // This prevents page reloads when refresh is triggered by WebSocket events
-  const refreshUser = useCallback(async (options?: { skipCookieUpdate?: boolean }): Promise<void> => {
-    if (isRefreshing) {
-      return;
-    }
+  const refreshUser = useCallback(
+    async (options?: { skipCookieUpdate?: boolean }): Promise<void> => {
+      if (isRefreshing) {
+        return;
+      }
 
-    setIsRefreshing(true);
-    try {
-      const fullUser = await UserService.findFullUser();
-      if (fullUser) {
-        const dehydrated = fullUser.dehydrate();
-
-        setDehydratedUser(dehydrated as any);
-        setUser(fullUser);
-
-        // Update authentication cookies with fresh user data
-        // Skip when triggered by WebSocket to prevent page reload (Server Actions modify cookies)
-        if (!options?.skipCookieUpdate) {
-          await getTokenHandler()?.updateToken({
-            userId: fullUser.id,
-            companyId: fullUser.company?.id,
-            roles: fullUser.roles.map((role) => role.id),
-            features: fullUser.company?.features?.map((feature) => feature.id) ?? [],
-            modules: fullUser.modules.map((module) => ({
-              id: module.id,
-              permissions: module.permissions,
-            })),
-          });
+      setIsRefreshing(true);
+      try {
+        const fullUser = await UserService.findFullUser();
+        if (fullUser) {
+          const dehydrated = fullUser.dehydrate();
+
+          setDehydratedUser(dehydrated as any);
+          setUser(fullUser);
+
+          // Update authentication cookies with fresh user data
+          // Skip when triggered by WebSocket to prevent page reload (Server Actions modify cookies)
+          if (!options?.skipCookieUpdate) {
+            await getTokenHandler()?.updateToken({
+              userId: fullUser.id,
+              companyId: fullUser.company?.id,
+              roles: fullUser.roles.map((role) => role.id),
+              features: fullUser.company?.features?.map((feature) => feature.id) ?? [],
+              modules: fullUser.modules.map((module) => ({
+                id: module.id,
+                permissions: module.permissions,
+              })),
+            });
+          }
         }
+      } catch (error) {
+        console.error("Failed to refresh user data:", error);
+      } finally {
+        setIsRefreshing(false);
       }
-    } catch (error) {
-      console.error("Failed to refresh user data:", error);
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, [isRefreshing, setDehydratedUser]);
+    },
+    [isRefreshing, setDehydratedUser],
+  );
 
   // WebSocket integration for real-time token updates
   const { socket, isConnected } = useSocketContext();

package/src/hooks/__tests__/useDataListRetriever.test.ts

@@ -22,7 +22,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       // Wait for async operations to settle
@@ -42,7 +42,7 @@ describe("useDataListRetriever", () => {
           retriever,
           module: mockModule,
           ready: false,
-        })
+        }),
       );
 
       expect(result.current.ready).toBe(false);
@@ -63,7 +63,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -82,7 +82,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -96,16 +96,14 @@ describe("useDataListRetriever", () => {
 
   describe("search", () => {
     it("should search and call retriever with search term", async () => {
-      const mockData = [
-        createMockApiData({ type: "articles", id: "1", attributes: { title: "Search Result" } }),
-      ];
+      const mockData = [createMockApiData({ type: "articles", id: "1", attributes: { title: "Search Result" } })];
       const retriever = vi.fn().mockResolvedValue(mockData);
 
       const { result } = renderHook(() =>
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -133,7 +131,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -161,7 +159,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -189,7 +187,7 @@ describe("useDataListRetriever", () => {
           retriever,
           module: mockModule,
           ready: false,
-        })
+        }),
       );
 
       expect(result.current.ready).toBe(false);
@@ -209,16 +207,14 @@ describe("useDataListRetriever", () => {
 
   describe("element management", () => {
     it("should update element with setRefreshedElement", async () => {
-      const mockData = [
-        createMockApiData({ type: "articles", id: "1", attributes: { title: "Original" } }),
-      ];
+      const mockData = [createMockApiData({ type: "articles", id: "1", attributes: { title: "Original" } })];
       const retriever = vi.fn().mockResolvedValue(mockData);
 
       const { result } = renderHook(() =>
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -250,7 +246,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -276,7 +272,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {
@@ -288,9 +284,7 @@ describe("useDataListRetriever", () => {
       });
 
       await waitFor(() => {
-        expect(retriever).toHaveBeenCalledWith(
-          expect.objectContaining({ filter: "active" })
-        );
+        expect(retriever).toHaveBeenCalledWith(expect.objectContaining({ filter: "active" }));
       });
     });
 
@@ -301,7 +295,7 @@ describe("useDataListRetriever", () => {
         useDataListRetriever({
           retriever,
           module: mockModule,
-        })
+        }),
       );
 
       await waitFor(() => {

package/src/hooks/__tests__/useDebounce.test.ts

@@ -92,9 +92,7 @@ describe("useDebounce", () => {
 
   it("should pass multiple arguments to callback", () => {
     const callback = vi.fn();
-    const { result } = renderHook(() =>
-      useDebounce((a: string, b: number, c: boolean) => callback(a, b, c), 500)
-    );
+    const { result } = renderHook(() => useDebounce((a: string, b: number, c: boolean) => callback(a, b, c), 500));
 
     act(() => {
       result.current("hello", 42, true);
@@ -111,10 +109,7 @@ describe("useDebounce", () => {
     const callback1 = vi.fn();
     const callback2 = vi.fn();
 
-    const { result, rerender } = renderHook(
-      ({ cb }) => useDebounce(cb, 500),
-      { initialProps: { cb: callback1 } }
-    );
+    const { result, rerender } = renderHook(({ cb }) => useDebounce(cb, 500), { initialProps: { cb: callback1 } });
 
     act(() => {
       result.current("test");

package/src/hooks/useCustomD3Graph.tsx

@@ -269,7 +269,7 @@ export function useCustomD3Graph(
       }
     });
 
-    for (const [nodeId, node] of nodeHierarchy.entries()) {
+    for (const [_nodeId, node] of nodeHierarchy.entries()) {
       if (node.depth === 1 && node.angle !== undefined && node.x !== undefined && node.y !== undefined) {
         const childAngle = node.angle;
         const childX = node.x;
@@ -527,7 +527,7 @@ export function useCustomD3Graph(
         const Icon = d.icon as React.FC<{ size: number; color: string }>;
         const iconSvg = renderToStaticMarkup(<Icon size={nodeRadius / 2} color="white" />);
 
-        const iconGroup = d3
+        const _iconGroup = d3
           .select(this)
           .append("g")
           .html(iconSvg)

package/src/shadcnui/custom/multi-select.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cva, type VariantProps } from "class-variance-authority";
-import { CheckIcon, ChevronDown, WandSparkles, XCircle, XIcon } from "lucide-react";
+import { CheckIcon, ChevronDown, Loader2, WandSparkles, XCircle, XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../utils/cn";
@@ -108,6 +108,24 @@ interface MultiSelectProps
    * Optional, receives the search string.
    */
   onSearchChange?: (search: string) => void;
+
+  /**
+   * Whether the component is in a loading state (e.g., during search).
+   * Optional, defaults to false.
+   */
+  loading?: boolean;
+
+  /**
+   * Text to display when loading.
+   * Optional, defaults to "Searching...".
+   */
+  loadingText?: string;
+
+  /**
+   * Text to display when no results are found.
+   * Optional, defaults to "No results found.".
+   */
+  emptyText?: string;
 }
 
 export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
@@ -124,6 +142,9 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
       modalPopover = false,
       className,
       onSearchChange,
+      loading = false,
+      loadingText = "Searching...",
+      emptyText = "No results found.",
       ...props
     },
     _ref,
@@ -293,8 +314,13 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
               onKeyDown={handleInputKeyDown}
               onValueChange={onSearchChange}
             />
+            {loading && (
+              <div className="flex items-center justify-center py-2">
+                <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+              </div>
+            )}
             <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandEmpty>{loading ? loadingText : emptyText}</CommandEmpty>
               <CommandGroup>
                 <CommandItem
                   key="all"

package/src/shadcnui/ui/accordion.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
@@ -12,7 +12,7 @@ function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
       className={cn("overflow-hidden rounded-md border flex w-full flex-col", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
@@ -22,37 +22,35 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
       className={cn("data-open:bg-muted/50 not-last:border-b", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.Trigger.Props) {
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
           "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
-          className
+          className,
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: AccordionPrimitive.Panel.Props) {
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
@@ -62,13 +60,13 @@ function AccordionContent({
       <div
         className={cn(
           "pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
-          className
+          className,
         )}
       >
         {children}
       </div>
     </AccordionPrimitive.Panel>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/shadcnui/ui/alert-dialog.tsx

@@ -1,41 +1,34 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
 function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
   return (
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
         "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -43,7 +36,7 @@ function AlertDialogContent({
   size = "default",
   ...props
 }: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
+  size?: "default" | "sm";
 }) {
   return (
     <AlertDialogPortal>
@@ -53,67 +46,64 @@ function AlertDialogContent({
         data-size={size}
         className={cn(
           "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-3 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
+          className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4", className)}
+      className={cn(
+        "bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+      className={cn(
+        "text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -123,23 +113,17 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
 }
 
 function AlertDialogCancel({
@@ -147,8 +131,7 @@ function AlertDialogCancel({
   variant = "outline",
   size = "default",
   ...props
-}: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
     <AlertDialogPrimitive.Close
       data-slot="alert-dialog-cancel"
@@ -156,7 +139,7 @@ function AlertDialogCancel({
       render={<Button variant={variant} size={size} />}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -172,4 +155,4 @@ export {
   AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-}
+};