@carlonicora/nextjs-jsonapi 1.24.1 → 1.24.3

package/src/components/forms/FormDateTime.tsx

@@ -6,11 +6,6 @@ import { useI18nDateFnsLocale, useI18nLocale, useI18nTranslations } from "../../
 import {
   Button,
   Calendar,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
   Label,
   Popover,
   PopoverContent,
@@ -22,6 +17,7 @@ import {
   SelectValue,
 } from "../../shadcnui";
 import { cn } from "../../utils";
+import { FormFieldWrapper } from "./FormFieldWrapper";
 
 export function FormDateTime({
   form,
@@ -96,138 +92,134 @@ export function FormDateTime({
 
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
+      <FormFieldWrapper
+        form={form}
         name={id}
-        render={({ field }) => (
-          <FormItem className={`${name ? "mb-5" : "mb-1"} w-full`}>
-            {name && <FormLabel>{name}</FormLabel>}
-            <FormControl>
-              <div className="relative flex flex-row">
-                <Popover open={open} onOpenChange={setOpen} modal={true}>
-                  <div className="flex w-full flex-row items-center justify-between">
-                    <PopoverTrigger
-                      render={
-                        <Button
-                          variant={"outline"}
-                          className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-                        />
-                      }
-                    >
-                      {field.value ? formatDateTime(field.value) : <span>{t(`generic.pick_date_time`)}</span>}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </PopoverTrigger>
-                    {field.value && allowEmpty !== false && (
-                      <CircleXIcon
-                        className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
-                        onClick={() => {
-                          if (onChange) onChange(undefined);
-                          form.setValue(id, "");
-                        }}
-                      />
-                    )}
-                  </div>
-                  <PopoverContent className="w-auto p-4" align="start">
-                    <div className="flex flex-col space-y-4">
-                      <Calendar
-                        mode="single"
-                        selected={field.value}
-                        onSelect={(date) => {
-                          if (date) {
-                            // Preserve the current time when selecting a new date
-                            const newDate = new Date(date);
-                            if (field.value) {
-                              const currentDate = new Date(field.value);
-                              newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-                            } else {
-                              newDate.setHours(selectedHours, selectedMinutes);
-                            }
-                            form.setValue(id, newDate);
-                            if (onChange) onChange(newDate);
+        label={name}
+      >
+        {(field) => (
+          <div className="relative flex flex-row">
+            <Popover open={open} onOpenChange={setOpen} modal={true}>
+              <div className="flex w-full flex-row items-center justify-between">
+                <PopoverTrigger
+                  render={
+                    <Button
+                      variant={"outline"}
+                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                    />
+                  }
+                >
+                  {field.value ? formatDateTime(field.value) : <span>{t(`generic.pick_date_time`)}</span>}
+                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                </PopoverTrigger>
+                {field.value && allowEmpty !== false && (
+                  <CircleXIcon
+                    className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                    onClick={() => {
+                      if (onChange) onChange(undefined);
+                      form.setValue(id, "");
+                    }}
+                  />
+                )}
+              </div>
+              <PopoverContent className="w-auto p-4" align="start">
+                <div className="flex flex-col space-y-4">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={(date) => {
+                      if (date) {
+                        // Preserve the current time when selecting a new date
+                        const newDate = new Date(date);
+                        if (field.value) {
+                          const currentDate = new Date(field.value);
+                          newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+                        } else {
+                          newDate.setHours(selectedHours, selectedMinutes);
+                        }
+                        form.setValue(id, newDate);
+                        if (onChange) onChange(newDate);
 
-                            // Update time state values
-                            setSelectedHours(newDate.getHours());
-                            setSelectedMinutes(roundToNearestFiveMinutes(newDate.getMinutes()));
-                          }
+                        // Update time state values
+                        setSelectedHours(newDate.getHours());
+                        setSelectedMinutes(roundToNearestFiveMinutes(newDate.getMinutes()));
+                      }
+                    }}
+                    disabled={(date) => (minDate && date < minDate ? true : false)}
+                    locale={dateFnsLocale}
+                  />
+                  <div className="flex flex-row items-end justify-center space-x-4">
+                    <div className="flex flex-col space-y-2">
+                      <Label htmlFor="hours-select">{t(`generic.hours`)}</Label>
+                      <Select
+                        value={String(field.value ? new Date(field.value).getHours() : selectedHours)}
+                        onValueChange={(value) => {
+                          if (!value) return;
+                          const hours = parseInt(value);
+                          setSelectedHours(hours);
+                          handleTimeChange(
+                            hours,
+                            field.value
+                              ? roundToNearestFiveMinutes(new Date(field.value).getMinutes())
+                              : selectedMinutes,
+                          );
                         }}
-                        disabled={(date) => (minDate && date < minDate ? true : false)}
-                        locale={dateFnsLocale}
-                      />
-                      <div className="flex flex-row items-end justify-center space-x-4">
-                        <div className="flex flex-col space-y-2">
-                          <Label htmlFor="hours-select">{t(`generic.hours`)}</Label>
-                          <Select
-                            value={String(field.value ? new Date(field.value).getHours() : selectedHours)}
-                            onValueChange={(value) => {
-                              if (!value) return;
-                              const hours = parseInt(value);
-                              setSelectedHours(hours);
-                              handleTimeChange(
-                                hours,
-                                field.value
-                                  ? roundToNearestFiveMinutes(new Date(field.value).getMinutes())
-                                  : selectedMinutes,
-                              );
-                            }}
-                          >
-                            <SelectTrigger id="hours-select" className="w-[70px]">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {hoursOptions.map((option) => (
-                                <SelectItem key={option.value} value={String(option.value)}>
-                                  {option.label}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div className="mb-[9px] text-xl">:</div>
-                        <div className="flex flex-col space-y-2">
-                          <Label htmlFor="minutes-select">{t(`generic.minutes`)}</Label>
-                          <Select
-                            value={String(
-                              field.value
-                                ? roundToNearestFiveMinutes(new Date(field.value).getMinutes())
-                                : selectedMinutes,
-                            )}
-                            onValueChange={(value) => {
-                              if (!value) return;
-                              const minutes = parseInt(value);
-                              setSelectedMinutes(minutes);
-                              handleTimeChange(field.value ? new Date(field.value).getHours() : selectedHours, minutes);
-                            }}
-                          >
-                            <SelectTrigger id="minutes-select" className="w-[70px]">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {minutesOptions.map((option) => (
-                                <SelectItem key={option.value} value={String(option.value)}>
-                                  {option.label}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      </div>
-                      <Button
-                        className="mt-2"
-                        onClick={() => {
-                          setOpen(false);
+                      >
+                        <SelectTrigger id="hours-select" className="w-[70px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {hoursOptions.map((option) => (
+                            <SelectItem key={option.value} value={String(option.value)}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="mb-[9px] text-xl">:</div>
+                    <div className="flex flex-col space-y-2">
+                      <Label htmlFor="minutes-select">{t(`generic.minutes`)}</Label>
+                      <Select
+                        value={String(
+                          field.value
+                            ? roundToNearestFiveMinutes(new Date(field.value).getMinutes())
+                            : selectedMinutes,
+                        )}
+                        onValueChange={(value) => {
+                          if (!value) return;
+                          const minutes = parseInt(value);
+                          setSelectedMinutes(minutes);
+                          handleTimeChange(field.value ? new Date(field.value).getHours() : selectedHours, minutes);
                         }}
                       >
-                        {t(`generic.buttons.select_date`)}
-                      </Button>
+                        <SelectTrigger id="minutes-select" className="w-[70px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {minutesOptions.map((option) => (
+                            <SelectItem key={option.value} value={String(option.value)}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+                  </div>
+                  <Button
+                    className="mt-2"
+                    onClick={() => {
+                      setOpen(false);
+                    }}
+                  >
+                    {t(`generic.buttons.select_date`)}
+                  </Button>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

package/src/components/forms/FormFieldWrapper.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ReactNode } from "react";
+import {
+  Controller,
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldValues,
+  Path,
+  UseFormReturn,
+} from "react-hook-form";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../shadcnui";
+
+type FormFieldWrapperProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+  name: Path<T>;
+  label?: string;
+  description?: string;
+  isRequired?: boolean;
+  orientation?: "vertical" | "horizontal" | "responsive";
+  children: (field: ControllerRenderProps<T, Path<T>>, fieldState: ControllerFieldState) => ReactNode;
+  testId?: string;
+};
+
+export function FormFieldWrapper<T extends FieldValues>({
+  form,
+  name,
+  label,
+  description,
+  isRequired,
+  orientation = "vertical",
+  children,
+  testId,
+}: FormFieldWrapperProps<T>) {
+  return (
+    <Controller
+      control={form.control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Field orientation={orientation} data-invalid={!!fieldState.error} data-testid={testId}>
+          {label && (
+            <FieldLabel>
+              {label}
+              {isRequired && <span className="text-destructive ml-1 font-semibold">*</span>}
+            </FieldLabel>
+          )}
+          {children(field, fieldState)}
+          {description && <FieldDescription>{description}</FieldDescription>}
+          {fieldState.error && <FieldError>{fieldState.error.message}</FieldError>}
+        </Field>
+      )}
+    />
+  );
+}

package/src/components/forms/FormInput.tsx

@@ -2,7 +2,14 @@
 
 import { useTranslations } from "next-intl";
 import React from "react";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "../../shadcnui";
+import {
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "../../shadcnui";
+import { FormFieldWrapper } from "./FormFieldWrapper";
 
 export function FormInput({
   form,
@@ -35,10 +42,13 @@ export function FormInput({
 
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
+      <FormFieldWrapper
+        form={form}
         name={id}
-        render={({ field }) => {
+        label={name}
+        isRequired={isRequired}
+      >
+        {(field) => {
           const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
             let value = e.target.value;
 
@@ -62,49 +72,51 @@ export function FormInput({
             field.onBlur();
           };
 
-          return (
-            <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
-              {name && (
-                <FormLabel className="flex items-center">
-                  {name}
-                  {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-                </FormLabel>
-              )}
-              <FormControl>
-                <div className="relative">
-                  {type === "currency" && (
-                    <span className="text-muted-foreground absolute top-0 left-0 pt-2 pl-3">€</span>
-                  )}
-                  <Input
-                    data-testid={testId}
-                    {...field}
-                    autoFocus={autoFocus === true}
-                    type={
-                      type === "number" || type === "currency" ? "number" : type === "password" ? "password" : "text"
-                    }
-                    className={`w-full ${type === "number" || type === "currency" ? "text-end" : ""}`}
-                    disabled={disabled === true || form.formState.isSubmitting}
-                    placeholder={placeholder || ""}
-                    onBlur={handleBlur}
-                    onKeyDown={onKeyDown}
-                    onChange={(e) => {
-                      if (type === "number" || type === "currency") {
-                        const value = e.target.value.replace(/[^0-9]/g, "");
-                        field.onChange(+value);
-                        if (onChange) onChange(+value);
-                      } else {
-                        field.onChange(e.target.value);
-                        if (onChange) onChange(e.target.value);
-                      }
-                    }}
-                  />
-                </div>
-              </FormControl>
-              <FormMessage data-testid={testId ? `${testId}-error` : undefined} />
-            </FormItem>
-          );
+          const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (type === "number" || type === "currency") {
+              const value = e.target.value.replace(/[^0-9]/g, "");
+              field.onChange(+value);
+              if (onChange) onChange(+value);
+            } else {
+              field.onChange(e.target.value);
+              if (onChange) onChange(e.target.value);
+            }
+          };
+
+          const inputProps = {
+            ...field,
+            autoFocus: autoFocus === true,
+            type:
+              type === "number" || type === "currency"
+                ? "number"
+                : type === "password"
+                  ? "password"
+                  : "text",
+            className: `w-full ${type === "number" || type === "currency" ? "text-end" : ""}`,
+            disabled: disabled === true || form.formState.isSubmitting,
+            placeholder: placeholder || "",
+            onBlur: handleBlur,
+            onKeyDown,
+            onChange: handleChange,
+            "data-testid": testId,
+          };
+
+          // Use InputGroup for currency type to show Euro symbol
+          if (type === "currency") {
+            return (
+              <InputGroup>
+                <InputGroupAddon>
+                  <InputGroupText>{"\u20AC"}</InputGroupText>
+                </InputGroupAddon>
+                <InputGroupInput {...inputProps} />
+              </InputGroup>
+            );
+          }
+
+          // Regular input for other types
+          return <Input {...inputProps} />;
         }}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

package/src/components/forms/FormPassword.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../shadcnui";
+import { FormFieldWrapper } from "./FormFieldWrapper";
 import { PasswordInput } from "./PasswordInput";
 
 export function FormPassword({
@@ -24,31 +24,24 @@ export function FormPassword({
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormField
-        control={form.control}
+      <FormFieldWrapper
+        form={form}
         name={id}
-        render={({ field }) => (
-          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
-            {name && (
-              <FormLabel>
-                {name}
-                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-              </FormLabel>
-            )}
-            <FormControl>
-              <PasswordInput
-                {...field}
-                className={`w-full`}
-                disabled={disabled === true || form.formState.isSubmitting}
-                placeholder={placeholder ? placeholder : ""}
-                onBlur={onBlur}
-                data-testid={testId}
-              />
-            </FormControl>
-            <FormMessage data-testid={testId ? `${testId}-error` : undefined} />
-          </FormItem>
+        label={name}
+        isRequired={isRequired}
+        testId={testId}
+      >
+        {(field) => (
+          <PasswordInput
+            {...field}
+            className="w-full"
+            disabled={disabled === true || form.formState.isSubmitting}
+            placeholder={placeholder ? placeholder : ""}
+            onBlur={onBlur}
+            data-testid={testId}
+          />
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }