@carlonicora/nextjs-jsonapi 1.24.2 → 1.25.0

package/src/components/forms/FormCheckbox.tsx

@@ -2,15 +2,12 @@
 
 import {
   Checkbox,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+  FieldLabel,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "../../shadcnui";
+import { FormFieldWrapper } from "./FormFieldWrapper";
 
 type FormCheckboxProps = {
   form: any;
@@ -24,14 +21,14 @@ type FormCheckboxProps = {
 export function FormCheckbox({ form, id, name, labelBefore, description, isRequired }: FormCheckboxProps) {
   const simpleLabel = () => {
     return (
-      <FormLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ml-3"}`}>
+      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ml-3"}`}>
         {name}
-      </FormLabel>
+      </FieldLabel>
     );
   };
 
   const label = () => {
-    if (description) return simpleLabel();
+    if (!description) return simpleLabel();
     else
       return (
         <Tooltip>
@@ -43,24 +40,21 @@ export function FormCheckbox({ form, id, name, labelBefore, description, isRequi
 
   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"}`}>
-            <FormControl>
-              <div className="flex gap-x-4">
-                {labelBefore && label()}
-                {labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-                <Checkbox id={id} defaultChecked={field.value} onCheckedChange={field.onChange} />
-                {!labelBefore && label()}
-                {!labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+        orientation="horizontal"
+      >
+        {(field) => (
+          <div className="flex gap-x-4">
+            {labelBefore && label()}
+            {labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+            <Checkbox id={id} defaultChecked={field.value} onCheckedChange={field.onChange} />
+            {!labelBefore && label()}
+            {!labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+          </div>
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

package/src/components/forms/FormDate.tsx

@@ -6,12 +6,10 @@ import { useMemo, useState } from "react";
 import { useI18nDateFnsLocale, useI18nLocale } from "../../i18n";
 import {
   Calendar,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -21,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../shadcnui";
+import { FormFieldWrapper } from "./FormFieldWrapper";
 
 export function FormDate({
   form,
@@ -130,119 +129,107 @@ export function FormDate({
 
   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 className="dlex items-center">
-                {name} {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
-              </FormLabel>
-            )}
-            <FormControl>
-              <div className="relative">
-                <Popover open={open} onOpenChange={setOpen} modal={true}>
-                  <div className="relative">
-                    <Input
-                      value={inputValue}
-                      onChange={(e) => handleInputChange(e.target.value, field)}
-                      placeholder={datePlaceholder}
-                      className="pr-16"
-                    />
-                    <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
-                      <PopoverTrigger
-                        render={<div />}
-                        nativeButton={false}
-                        className="hover:bg-muted flex h-8 w-8 cursor-pointer items-center justify-center rounded-md"
-                      >
-                        <CalendarIcon className="h-4 w-4 opacity-50" />
-                      </PopoverTrigger>
-                      {field.value && (
-                        <button
-                          type="button"
-                          className="hover:bg-muted flex h-8 w-8 items-center justify-center rounded-md"
-                          onClick={() => {
-                            field.onChange(undefined);
-                            setInputValue("");
-                            if (onChange) onChange(undefined);
-                          }}
-                        >
-                          <CircleXIcon className="h-4 w-4 opacity-50 hover:opacity-100" />
-                        </button>
-                      )}
-                    </div>
-                  </div>
-                  <PopoverContent className="w-auto p-0" align="start">
-                    <div className="p-3">
-                      {/* Year and Month Selectors */}
-                      <div className="mb-3 flex gap-2">
-                        <Select
-                          value={displayMonth.getMonth().toString()}
-                          onValueChange={(value) => {
-                            if (!value) return;
-                            const newMonth = parseInt(value);
-                            const newDate = new Date(displayMonth.getFullYear(), newMonth, 1);
-                            setDisplayMonth(newDate);
-                          }}
-                        >
-                          <SelectTrigger className="w-[130px]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {monthNames.map((month, index) => (
-                              <SelectItem key={index} value={index.toString()}>
-                                {month}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-
-                        <Select
-                          value={displayMonth.getFullYear().toString()}
-                          onValueChange={(value) => {
-                            if (!value) return;
-                            const newYear = parseInt(value);
-                            const newDate = new Date(newYear, displayMonth.getMonth(), 1);
-                            setDisplayMonth(newDate);
-                          }}
-                        >
-                          <SelectTrigger className="w-[80px]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {yearOptions.reverse().map((year) => (
-                              <SelectItem key={year} value={year.toString()}>
-                                {year}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      {/* Calendar */}
-                      <Calendar
-                        mode="single"
-                        selected={field.value}
-                        onSelect={(e) => {
-                          handleCalendarSelect(e, field);
-                          setOpen(false);
-                        }}
-                        disabled={(date) => (minDate && date < minDate ? true : false)}
-                        locale={dateFnsLocale}
-                        weekStartsOn={1}
-                        month={displayMonth}
-                        onMonthChange={setDisplayMonth}
-                      />
-                    </div>
-                  </PopoverContent>
-                </Popover>
+        label={name}
+        isRequired={isRequired}
+      >
+        {(field) => (
+          <Popover open={open} onOpenChange={setOpen} modal={true}>
+            <InputGroup>
+              <InputGroupInput
+                value={inputValue}
+                onChange={(e) => handleInputChange(e.target.value, field)}
+                placeholder={datePlaceholder}
+              />
+              <InputGroupAddon align="inline-end">
+                <PopoverTrigger render={<div />} nativeButton={false}>
+                  <InputGroupButton variant="ghost" size="icon-xs">
+                    <CalendarIcon className="h-4 w-4 opacity-50" />
+                  </InputGroupButton>
+                </PopoverTrigger>
+                {field.value && (
+                  <InputGroupButton
+                    variant="ghost"
+                    size="icon-xs"
+                    onClick={() => {
+                      field.onChange(undefined);
+                      setInputValue("");
+                      if (onChange) onChange(undefined);
+                    }}
+                  >
+                    <CircleXIcon className="h-4 w-4 opacity-50 hover:opacity-100" />
+                  </InputGroupButton>
+                )}
+              </InputGroupAddon>
+            </InputGroup>
+            <PopoverContent className="w-auto p-0" align="start">
+              <div className="p-3">
+                {/* Year and Month Selectors */}
+                <div className="mb-3 flex gap-2">
+                  <Select
+                    value={displayMonth.getMonth().toString()}
+                    onValueChange={(value) => {
+                      if (!value) return;
+                      const newMonth = parseInt(value);
+                      const newDate = new Date(displayMonth.getFullYear(), newMonth, 1);
+                      setDisplayMonth(newDate);
+                    }}
+                  >
+                    <SelectTrigger className="w-[130px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {monthNames.map((month, index) => (
+                        <SelectItem key={index} value={index.toString()}>
+                          {month}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  <Select
+                    value={displayMonth.getFullYear().toString()}
+                    onValueChange={(value) => {
+                      if (!value) return;
+                      const newYear = parseInt(value);
+                      const newDate = new Date(newYear, displayMonth.getMonth(), 1);
+                      setDisplayMonth(newDate);
+                    }}
+                  >
+                    <SelectTrigger className="w-[80px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {yearOptions.reverse().map((year) => (
+                        <SelectItem key={year} value={year.toString()}>
+                          {year}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Calendar */}
+                <Calendar
+                  mode="single"
+                  selected={field.value}
+                  onSelect={(e) => {
+                    handleCalendarSelect(e, field);
+                    setOpen(false);
+                  }}
+                  disabled={(date) => (minDate && date < minDate ? true : false)}
+                  locale={dateFnsLocale}
+                  weekStartsOn={1}
+                  month={displayMonth}
+                  onMonthChange={setDisplayMonth}
+                />
               </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
+            </PopoverContent>
+          </Popover>
         )}
-      />
+      </FormFieldWrapper>
     </div>
   );
 }

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>
   );
 }