@carlonicora/nextjs-jsonapi 0.0.1 → 1.0.4

package/src/components/forms/FileUploader.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { Trash2 as RemoveIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import {
+  createContext,
+  Dispatch,
+  forwardRef,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
+import { toast } from "sonner";
+import { buttonVariants, Input } from "../../shadcnui";
+import { cn } from "../../utils";
+
+type DirectionOptions = "rtl" | "ltr" | undefined;
+
+type FileUploaderContextType = {
+  dropzoneState: DropzoneState;
+  isLOF: boolean;
+  isFileTooBig: boolean;
+  removeFileFromSet: (index: number) => void;
+  activeIndex: number;
+  setActiveIndex: Dispatch<SetStateAction<number>>;
+  orientation: "horizontal" | "vertical";
+  direction: DirectionOptions;
+};
+
+const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
+
+export const useFileUpload = () => {
+  const context = useContext(FileUploaderContext);
+  if (!context) {
+    throw new Error("useFileUpload must be used within a FileUploaderProvider");
+  }
+  return context;
+};
+
+type FileUploaderProps = {
+  value: File[] | null;
+  reSelect?: boolean;
+  onValueChange: (value: File[] | null) => void;
+  dropzoneOptions: DropzoneOptions;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React.HTMLAttributes<HTMLDivElement>>(
+  (
+    { className, dropzoneOptions, value, onValueChange, reSelect, orientation = "vertical", children, dir, ...props },
+    ref,
+  ) => {
+    const [isFileTooBig, setIsFileTooBig] = useState(false);
+    const [isLOF, setIsLOF] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const { maxFiles = 1, maxSize = 4 * 1024 * 1024, multiple = true } = dropzoneOptions;
+    const t = useTranslations();
+
+    const reSelectAll = maxFiles === 1 ? true : reSelect;
+    const direction: DirectionOptions = dir === "rtl" ? "rtl" : "ltr";
+
+    const removeFileFromSet = useCallback(
+      (i: number) => {
+        if (!value) return;
+        const newFiles = value.filter((_, index) => index !== i);
+        onValueChange(newFiles);
+      },
+      [value, onValueChange],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!value) return;
+
+        const moveNext = () => {
+          const nextIndex = activeIndex + 1;
+          setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex);
+        };
+
+        const movePrev = () => {
+          const nextIndex = activeIndex - 1;
+          setActiveIndex(nextIndex < 0 ? value.length - 1 : nextIndex);
+        };
+
+        const prevKey = orientation === "horizontal" ? (direction === "ltr" ? "ArrowLeft" : "ArrowRight") : "ArrowUp";
+
+        const nextKey = orientation === "horizontal" ? (direction === "ltr" ? "ArrowRight" : "ArrowLeft") : "ArrowDown";
+
+        if (e.key === nextKey) {
+          moveNext();
+        } else if (e.key === prevKey) {
+          movePrev();
+        } else if (e.key === "Enter" || e.key === "Space") {
+          if (activeIndex === -1) {
+            dropzoneState.inputRef.current?.click();
+          }
+        } else if (e.key === "Delete" || e.key === "Backspace") {
+          if (activeIndex !== -1) {
+            removeFileFromSet(activeIndex);
+            if (value.length - 1 === 0) {
+              setActiveIndex(-1);
+              return;
+            }
+            movePrev();
+          }
+        } else if (e.key === "Escape") {
+          setActiveIndex(-1);
+        }
+      },
+      [value, activeIndex, removeFileFromSet],
+    );
+
+    const onDrop = useCallback(
+      (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+        const files = acceptedFiles;
+
+        if (!files) {
+          toast.error(t("generic.errors.file"), {
+            description: t("generic.errors.file_large"),
+          });
+          return;
+        }
+
+        const newValues: File[] = value ? [...value] : [];
+
+        if (reSelectAll) {
+          newValues.splice(0, newValues.length);
+        }
+
+        files.forEach((file) => {
+          if (newValues.length < maxFiles) {
+            newValues.push(file);
+          }
+        });
+
+        onValueChange(newValues);
+
+        if (rejectedFiles.length > 0) {
+          for (let i = 0; i < rejectedFiles.length; i++) {
+            if (rejectedFiles[i].errors[0]?.code === "file-too-large") {
+              toast.error(t("generic.errors.file"), {
+                description: t(`generic.errors.file_max`, { size: maxSize / 1024 / 1024 }),
+              });
+              break;
+            }
+            if (rejectedFiles[i].errors[0]?.message) {
+              toast.error(t(`generic.errors.file`), {
+                description: rejectedFiles[i].errors[0].message,
+              });
+              break;
+            }
+          }
+        }
+      },
+      [reSelectAll, value],
+    );
+
+    useEffect(() => {
+      if (!value) return;
+      if (value.length === maxFiles) {
+        // setIsLOF(true);
+        return;
+      }
+      setIsLOF(false);
+    }, [value, maxFiles]);
+
+    const opts = dropzoneOptions ? dropzoneOptions : { maxFiles, maxSize, multiple };
+
+    const dropzoneState = useDropzone({
+      ...opts,
+      onDrop,
+      onDropRejected: () => setIsFileTooBig(true),
+      onDropAccepted: () => setIsFileTooBig(false),
+    });
+
+    const { isDragActive } = dropzoneState; // Correctly get isDragActive
+
+    return (
+      <FileUploaderContext.Provider
+        value={{
+          dropzoneState,
+          isLOF,
+          isFileTooBig,
+          removeFileFromSet,
+          activeIndex,
+          setActiveIndex,
+          orientation,
+          direction,
+        }}
+      >
+        <div
+          ref={ref}
+          tabIndex={0}
+          onKeyDownCapture={handleKeyDown}
+          className={cn(
+            "grid w-full overflow-hidden focus:outline-none",
+            className, // Original className from props
+            {
+              "gap-2": value && value.length > 0,
+              "bg-muted border-primary border-dashed": isDragActive, // Apply drag-active styles to the main FileUploader div
+            },
+          )}
+          dir={dir}
+          {...props}
+        >
+          {children}
+        </div>
+      </FileUploaderContext.Provider>
+    );
+  },
+);
+
+FileUploader.displayName = "FileUploader";
+
+export const FileUploaderContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => {
+    const { orientation } = useFileUpload();
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    return (
+      <div className={cn("w-full px-1")} ref={containerRef} aria-description="content file holder">
+        <div
+          {...props}
+          ref={ref}
+          className={cn(
+            "flex gap-1 rounded-xl",
+            orientation === "horizontal" ? "flex-raw flex-wrap" : "flex-col",
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+FileUploaderContent.displayName = "FileUploaderContent";
+
+export const FileUploaderItem = forwardRef<HTMLDivElement, { index: number } & React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, index, children, ...props }, ref) => {
+    const { removeFileFromSet, activeIndex, direction } = useFileUpload();
+    const isSelected = index === activeIndex;
+    const t = useTranslations();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          buttonVariants({ variant: "ghost" }),
+          "relative h-6 cursor-pointer justify-between p-1",
+          className,
+          isSelected ? "bg-muted" : "",
+        )}
+        {...props}
+      >
+        <div className="flex h-full w-full items-center gap-1.5 leading-none font-medium tracking-tight">
+          {children}
+        </div>
+        <button
+          type="button"
+          className={cn("absolute", direction === "rtl" ? "top-1 left-1" : "top-1 right-1")}
+          onClick={() => removeFileFromSet(index)}
+        >
+          <span className="sr-only">{t(`generic.remove_item`, { index: index })}</span>
+          <RemoveIcon className="hover:stroke-destructive h-4 w-4 duration-200 ease-in-out" />
+        </button>
+      </div>
+    );
+  },
+);
+
+FileUploaderItem.displayName = "FileUploaderItem";
+
+export const FileInput = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+    const rootProps = isLOF ? {} : dropzoneState.getRootProps();
+    // Get isDragActive from the context for FileInput as well, to ensure it can react if needed, or to simplify its own styling.
+    const { isDragActive: parentIsDragActive } = dropzoneState;
+
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cn(`relative w-full ${isLOF ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`, className)}
+      >
+        <div
+          className={cn(
+            "w-full rounded-lg duration-300 ease-in-out",
+            // Simpler border logic: if parent is drag-active, it controls the border.
+            // Otherwise, FileInput can show its own accept/reject/default border.
+            {
+              "border-green-500": dropzoneState.isDragAccept && !parentIsDragActive,
+              "border-red-500": (dropzoneState.isDragReject || isFileTooBig) && !parentIsDragActive,
+              "border-gray-300":
+                !dropzoneState.isDragAccept && !dropzoneState.isDragReject && !isFileTooBig && !parentIsDragActive,
+            },
+            // className from props should be last to allow overrides if necessary
+            className,
+          )}
+          {...rootProps}
+        >
+          {children}
+        </div>
+        <Input
+          ref={dropzoneState.inputRef}
+          disabled={isLOF}
+          {...dropzoneState.getInputProps()}
+          className={`${isLOF ? "cursor-not-allowed" : ""}`}
+        />
+      </div>
+    );
+  },
+);
+
+FileInput.displayName = "FileInput";

package/src/components/forms/FormCheckbox.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  Checkbox,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../shadcnui";
+
+type FormCheckboxProps = {
+  form: any;
+  id: string;
+  name: string;
+  labelBefore?: boolean;
+  description?: string;
+  isRequired?: boolean;
+};
+
+export function FormCheckbox({ form, id, name, labelBefore, description, isRequired }: FormCheckboxProps) {
+  const simpleLabel = () => {
+    return (
+      <FormLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ml-3"}`}>
+        {name}
+      </FormLabel>
+    );
+  };
+
+  const label = () => {
+    if (description) return simpleLabel();
+    else
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>{simpleLabel()}</TooltipTrigger>
+          <TooltipContent>{description}</TooltipContent>
+        </Tooltip>
+      );
+  };
+
+  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 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>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormContainerGeneric.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ReactElement } from "react";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../shadcnui";
+
+export function FormContainerGeneric({
+  form,
+  id,
+  name,
+  children,
+  isRequired = false,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  children: ReactElement<any>;
+  isRequired?: boolean;
+}) {
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
+            {name && (
+              <FormLabel className="flex items-center">
+                <span>{name}</span>
+                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+              </FormLabel>
+            )}
+            <FormControl>{children}</FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormDate.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { isValid, parse } from "date-fns";
+import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useI18nDateFnsLocale, useI18nLocale } from "../../i18n";
+import {
+  Calendar,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../shadcnui";
+
+export function FormDate({
+  form,
+  id,
+  name,
+  minDate,
+  onChange,
+  isRequired = false,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  minDate?: Date;
+  onChange?: (date?: Date) => Promise<void>;
+  isRequired?: boolean;
+}) {
+  const locale = useI18nLocale();
+  const dateFnsLocale = useI18nDateFnsLocale();
+  const [open, setOpen] = useState<boolean>(false);
+  const [displayMonth, setDisplayMonth] = useState<Date>(() => {
+    const currentValue = form.getValues(id);
+    return currentValue || new Date();
+  });
+
+  // Locale-aware date formatter
+  const dateFormatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }),
+    [locale],
+  );
+
+  // Format date for display
+  const formatDate = (date: Date): string => dateFormatter.format(date);
+
+  // Get placeholder based on locale format
+  const datePlaceholder = useMemo(() => {
+    const parts = dateFormatter.formatToParts(new Date(2000, 0, 1));
+    return parts
+      .map((part) => {
+        if (part.type === "day") return "dd";
+        if (part.type === "month") return "mm";
+        if (part.type === "year") return "yyyy";
+        return part.value;
+      })
+      .join("");
+  }, [dateFormatter]);
+
+  // Get date-fns format string from locale
+  const dateFormatPattern = useMemo(() => {
+    const parts = dateFormatter.formatToParts(new Date(2000, 0, 1));
+    return parts
+      .map((part) => {
+        if (part.type === "day") return "dd";
+        if (part.type === "month") return "MM";
+        if (part.type === "year") return "yyyy";
+        return part.value;
+      })
+      .join("");
+  }, [dateFormatter]);
+
+  const [inputValue, setInputValue] = useState<string>(() => {
+    const currentValue = form.getValues(id);
+    return currentValue ? formatDate(currentValue) : "";
+  });
+
+  // Generate year options (1900 to current year)
+  const currentYear = new Date().getFullYear();
+  const yearOptions = Array.from({ length: currentYear - 1900 + 1 }, (_, i) => 1900 + i);
+
+  // Generate month names dynamically based on current locale
+  const monthNames = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
+    return Array.from({ length: 12 }, (_, i) => {
+      const monthName = formatter.format(new Date(2000, i, 1));
+      return monthName.charAt(0).toUpperCase() + monthName.slice(1);
+    });
+  }, [locale]);
+
+  // Handle text input change
+  const handleInputChange = (value: string, field: any) => {
+    setInputValue(value);
+
+    // Try to parse the date using locale format
+    const parsedDate = parse(value, dateFormatPattern, new Date());
+
+    if (isValid(parsedDate)) {
+      field.onChange(parsedDate);
+      setDisplayMonth(parsedDate);
+      if (onChange) onChange(parsedDate);
+    } else if (value === "") {
+      field.onChange(undefined);
+      if (onChange) onChange(undefined);
+    }
+  };
+
+  // Handle calendar selection
+  const handleCalendarSelect = (selectedDate: Date | undefined, field: any) => {
+    field.onChange(selectedDate);
+    if (selectedDate) {
+      setInputValue(formatDate(selectedDate));
+      setDisplayMonth(selectedDate);
+    } else {
+      setInputValue("");
+    }
+    if (onChange) onChange(selectedDate);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        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 asChild>
+                        <button
+                          type="button"
+                          className="hover:bg-muted flex h-8 w-8 items-center justify-center rounded-md"
+                        >
+                          <CalendarIcon className="h-4 w-4 opacity-50" />
+                        </button>
+                      </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) => {
+                            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) => {
+                            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>
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}