@carlonicora/nextjs-jsonapi 1.24.1 → 1.24.3

package/src/features/role/components/forms/FormRoles.tsx

@@ -1,13 +1,10 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { FormFieldWrapper } from "../../../../components/forms";
 import {
   Checkbox,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+  FieldLabel,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -29,54 +26,46 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
 
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
-        name={id}
-        render={({ field }) => (
-          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
-            <FormControl>
-              <div>
-                <div className="text-sm font-semibold">{name}</div>
-                {roles
-                  .filter((role: RoleInterface) => role.isSelectable)
-                  .sort((a: RoleInterface, b: RoleInterface) => a.name.localeCompare(b.name))
-                  .map((role: RoleInterface) => {
-                    if (role.requiredFeature && !hasAccesToFeature(role.requiredFeature.id)) return null;
+      <FormFieldWrapper form={form} name={id} label={name}>
+        {(field) => (
+          <div>
+            {roles
+              .filter((role: RoleInterface) => role.isSelectable)
+              .sort((a: RoleInterface, b: RoleInterface) => a.name.localeCompare(b.name))
+              .map((role: RoleInterface) => {
+                if (role.requiredFeature && !hasAccesToFeature(role.requiredFeature.id)) return null;
 
-                    return (
-                      <div key={role.id}>
-                        <Checkbox
-                          defaultChecked={(field.value as string[]).some((roleId: string) => roleId === role.id)}
-                          onCheckedChange={(checked) => {
-                            if (checked) {
-                              form.setValue(id, [...(field.value as string[]), role.id]);
-                            } else {
-                              form.setValue(
-                                id,
-                                (field.value as string[]).filter((roleId: string) => roleId !== role.id),
-                              );
-                            }
-                          }}
-                        />
-                        <Tooltip>
-                          <TooltipTrigger>
-                            <FormLabel className="ml-3 font-normal">
-                              {t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
-                            </FormLabel>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {t(`foundations.role.roles_descriptions`, { role: role.id.replaceAll(`-`, ``) })}
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                    );
-                  })}
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+                return (
+                  <div key={role.id}>
+                    <Checkbox
+                      defaultChecked={(field.value as string[]).some((roleId: string) => roleId === role.id)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          form.setValue(id, [...(field.value as string[]), role.id]);
+                        } else {
+                          form.setValue(
+                            id,
+                            (field.value as string[]).filter((roleId: string) => roleId !== role.id),
+                          );
+                        }
+                      }}
+                    />
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <FieldLabel className="ml-3 font-normal">
+                          {t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
+                        </FieldLabel>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {t(`foundations.role.roles_descriptions`, { role: role.id.replaceAll(`-`, ``) })}
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                );
+              })}
+          </div>
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

package/src/features/user/components/forms/UserMultiSelect.tsx

@@ -2,17 +2,13 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useWatch } from "react-hook-form";
+import { FormFieldWrapper } from "../../../../components/forms";
 import { Modules } from "../../../../core";
 import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
   MultiSelect,
 } from "../../../../shadcnui";
 import { useCurrentUserContext } from "../../contexts";
@@ -189,31 +185,18 @@ export function UserMultiSelect({
 
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
-        name={id}
-        render={({ field }) => (
-          <FormItem className={`${label ? "mb-5" : "mb-1"}`}>
-            {label && (
-              <FormLabel className="flex items-center">
-                {label}
-                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-              </FormLabel>
-            )}
-            <FormControl>
-              <MultiSelect
-                options={userOptions}
-                onValueChange={handleValueChange}
-                defaultValue={selectedUserIds}
-                placeholder={placeholder}
-                maxCount={maxCount}
-                animation={0}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
+        {() => (
+          <MultiSelect
+            options={userOptions}
+            onValueChange={handleValueChange}
+            defaultValue={selectedUserIds}
+            placeholder={placeholder}
+            maxCount={maxCount}
+            animation={0}
+          />
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

package/src/features/user/components/forms/UserSelector.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Modules } from "../../../../core";
 import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import { FormFieldWrapper } from "../../../../components/forms";
 import {
   Avatar,
   AvatarFallback,
@@ -12,11 +13,6 @@ import {
   Command,
   CommandItem,
   CommandList,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
   Input,
   Popover,
   PopoverContent,
@@ -92,99 +88,91 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
 
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
+      <FormFieldWrapper
+        form={form}
         name={id}
-        render={({ field }) => (
-          <FormItem className={`${label ? "mb-5" : "mb-1"}`}>
-            {label && (
-              <FormLabel className="flex items-center">
-                {label}
-                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-              </FormLabel>
-            )}
-            <FormControl>
-              <Popover open={open} onOpenChange={setOpen} modal={true}>
-                <div className="flex w-full flex-row items-center justify-between">
-                  <PopoverTrigger className="w-full">
-                    <div className="flex w-full flex-row items-center justify-start rounded-md">
-                      {field.value ? (
-                        <>
-                          <div className="flex w-full flex-row items-center justify-start rounded-md border p-2">
-                            <div className="*:ring-border *:ring-1">
-                              <Avatar className={`mr-2 h-6 w-6`}>
-                                <AvatarImage src={field.value?.avatar} />
-                                <AvatarFallback>
-                                  {field.value?.name
-                                    ? field.value?.name.split(" ").map((name: string) => name.charAt(0).toUpperCase())
-                                    : "X"}
-                                </AvatarFallback>
-                              </Avatar>
-                            </div>
-                            <span className="">{field.value?.name ?? ""}</span>
-                          </div>
-                        </>
-                      ) : (
-                        <div className="text-muted-foreground mr-7 flex h-10 w-full flex-row items-center justify-start rounded-md border p-2 text-sm">
-                          {placeholder ?? t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
+        label={label}
+        isRequired={isRequired}
+      >
+        {(field) => (
+          <Popover open={open} onOpenChange={setOpen} modal={true}>
+            <div className="flex w-full flex-row items-center justify-between">
+              <PopoverTrigger className="w-full">
+                <div className="flex w-full flex-row items-center justify-start rounded-md">
+                  {field.value ? (
+                    <>
+                      <div className="flex w-full flex-row items-center justify-start rounded-md border p-2">
+                        <div className="*:ring-border *:ring-1">
+                          <Avatar className={`mr-2 h-6 w-6`}>
+                            <AvatarImage src={field.value?.avatar} />
+                            <AvatarFallback>
+                              {field.value?.name
+                                ? field.value?.name.split(" ").map((name: string) => name.charAt(0).toUpperCase())
+                                : "X"}
+                            </AvatarFallback>
+                          </Avatar>
                         </div>
-                      )}
+                        <span className="">{field.value?.name ?? ""}</span>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="text-muted-foreground mr-7 flex h-10 w-full flex-row items-center justify-start rounded-md border p-2 text-sm">
+                      {placeholder ?? t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
                     </div>
-                  </PopoverTrigger>
-                  {field.value && (
-                    <CircleX
-                      className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
-                      onClick={() => setUser()}
+                  )}
+                </div>
+              </PopoverTrigger>
+              {field.value && (
+                <CircleX
+                  className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                  onClick={() => setUser()}
+                />
+              )}
+            </div>
+            <PopoverContent>
+              <Command shouldFilter={false}>
+                <div className="relative mb-2 w-full">
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <Input
+                    placeholder={t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
+                    type="text"
+                    className="w-full pr-8 pl-8"
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    value={searchTerm}
+                  />
+                  {isSearching ? (
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                  ) : searchTermRef.current ? (
+                    <XIcon
+                      className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      onClick={() => {
+                        setSearchTerm("");
+                        search("");
+                      }}
                     />
+                  ) : (
+                    <></>
                   )}
                 </div>
-                <PopoverContent>
-                  <Command shouldFilter={false}>
-                    <div className="relative mb-2 w-full">
-                      <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
-                      <Input
-                        placeholder={t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
-                        type="text"
-                        className="w-full pr-8 pl-8"
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        value={searchTerm}
-                      />
-                      {isSearching ? (
-                        <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
-                      ) : searchTermRef.current ? (
-                        <XIcon
-                          className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
-                          onClick={() => {
-                            setSearchTerm("");
-                            search("");
-                          }}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                    </div>
-                    <CommandList>
-                      {data.data &&
-                        data.data.length > 0 &&
-                        (data.data as UserInterface[]).map((user: UserInterface) => (
-                          <CommandItem
-                            className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
-                            key={user.id}
-                            onSelect={() => setUser(user)}
-                          >
-                            <UserAvatar user={user} className={`mr-2 h-4 w-4`} />
-                            <span className="">{user.name}</span>
-                          </CommandItem>
-                        ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+                <CommandList>
+                  {data.data &&
+                    data.data.length > 0 &&
+                    (data.data as UserInterface[]).map((user: UserInterface) => (
+                      <CommandItem
+                        className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
+                        key={user.id}
+                        onSelect={() => setUser(user)}
+                      >
+                        <UserAvatar user={user} className={`mr-2 h-4 w-4`} />
+                        <span className="">{user.name}</span>
+                      </CommandItem>
+                    ))}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

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

@@ -25,7 +25,11 @@ describe("useDataListRetriever", () => {
         })
       );
 
-      // Initially should not be loaded
+      // Wait for async operations to settle
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
       expect(result.current.ready).toBe(true);
       expect(result.current.isSearch).toBe(false);
     });
@@ -194,6 +198,11 @@ describe("useDataListRetriever", () => {
         result.current.setReady(true);
       });
 
+      // Wait for async operations triggered by setReady(true) to settle
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
       expect(result.current.ready).toBe(true);
     });
   });

package/src/shadcnui/index.ts

@@ -19,9 +19,11 @@ export * from "./ui/context-menu";
 export * from "./ui/dialog";
 export * from "./ui/drawer";
 export * from "./ui/dropdown-menu";
+export * from "./ui/field";
 export * from "./ui/form";
 export * from "./ui/hover-card";
 export * from "./ui/input";
+export * from "./ui/input-group";
 export * from "./ui/input-otp";
 export * from "./ui/label";
 export * from "./ui/navigation-menu";

package/src/shadcnui/ui/field.tsx

@@ -3,9 +3,9 @@
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "../../utils/cn"
+import { Label } from "./label"
+import { Separator } from "./separator"
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (

package/src/shadcnui/ui/form.tsx

@@ -1,138 +1,21 @@
 "use client";
 
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
-
-import { Label } from "./label";
-import { cn } from "../../utils/cn";
-
+import { FormProvider } from "react-hook-form";
+
+/**
+ * Form component is a wrapper around react-hook-form's FormProvider.
+ * Use this to wrap your form and spread the form object into it.
+ *
+ * @example
+ * const form = useForm<FormValues>();
+ * return (
+ *   <Form {...form}>
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <FormInput form={form} id="email" name="Email" />
+ *     </form>
+ *   </Form>
+ * );
+ */
 const Form = FormProvider;
 
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
-  ({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-    return (
-      <Slot
-        ref={ref}
-        id={formItemId}
-        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-        aria-invalid={!!error}
-        {...props}
-      />
-    );
-  },
-);
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-
-    return (
-      <p ref={ref} id={formDescriptionId} className={cn("text-muted-foreground text-[0.8rem]", className)} {...props} />
-    );
-  },
-);
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn("text-destructive text-[0.8rem] font-medium", className)}
-        {...props}
-      >
-        {body}
-      </p>
-    );
-  },
-);
-FormMessage.displayName = "FormMessage";
-
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+export { Form };

package/src/shadcnui/ui/input-group.tsx

@@ -3,10 +3,10 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { cn } from "../../utils/cn"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/shadcnui/ui/resizable.tsx

@@ -8,12 +8,12 @@ import { cn } from "@/lib/utils"
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Group>) {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
   return (
-    <ResizablePrimitive.Group
+    <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
         className
       )}
       {...props}
@@ -31,22 +31,22 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.Separator
+    <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
+        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
       )}
-    </ResizablePrimitive.Separator>
+    </ResizablePrimitive.PanelResizeHandle>
   )
 }