@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/components/forms/CommonDeleter.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { LoaderCircleIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { useI18nRouter, useI18nTranslations } from "../../i18n";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from "../../shadcnui";
+import { errorToast } from "../errors";
+
+type CommonDeleterProps = {
+  type: string;
+  deleteFunction: () => Promise<void>;
+  redirectTo?: string;
+  forceShow?: boolean;
+};
+
+export function CommonDeleter({ deleteFunction, redirectTo, type, forceShow }: CommonDeleterProps) {
+  const t = useI18nTranslations();
+  const router = useI18nRouter();
+  const [open, setOpen] = useState<boolean>(forceShow || false);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteFunction();
+
+      setOpen(false);
+      if (redirectTo) router.push(redirectTo);
+    } catch (error) {
+      errorToast({ title: t(`generic.errors.delete`), error: error });
+    }
+    setIsDeleting(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      {forceShow ? null : (
+        <AlertDialogTrigger asChild>
+          <Button size="sm" variant={"ghost"} className="text-muted-foreground hover:text-destructive">
+            <Trash2Icon />
+          </Button>
+        </AlertDialogTrigger>
+      )}
+      <AlertDialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t(`generic.delete.title`, { type: t(`types.${type}`, { count: 1 }) })}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t(`generic.delete.subtitle`, { type: t(`types.${type}`, { count: 1 }) })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="text-destructive p-4 text-sm">
+          {t(`generic.delete.description`, { type: t(`types.${type}`, { count: 1 }) })}
+        </div>
+        <div className="flex justify-end">
+          <Button
+            className="mr-2"
+            variant={"outline"}
+            type={`button`}
+            onClick={() => setOpen(false)}
+            disabled={isDeleting}
+          >
+            {t(`generic.buttons.cancel`)}
+          </Button>
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              handleDelete();
+            }}
+            variant={"destructive"}
+            disabled={isDeleting}
+          >
+            {isDeleting ? (
+              <>
+                {t(`generic.buttons.is_deleting`)}
+                <LoaderCircleIcon className="animate-spin-slow h-5 w-5" />
+              </>
+            ) : (
+              t(`generic.buttons.delete`)
+            )}
+          </Button>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/forms/CommonEditorButtons.tsx

@@ -0,0 +1,30 @@
+import { useTranslations } from "next-intl";
+import { Button } from "../../shadcnui";
+
+type CommonEditorButtonsProps = {
+  isEdit: boolean;
+  form: any;
+  disabled?: boolean;
+  setOpen: (open: boolean) => void;
+};
+export function CommonEditorButtons({ isEdit, form, disabled, setOpen }: CommonEditorButtonsProps) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex justify-end">
+      <Button
+        className="mr-2"
+        variant={"outline"}
+        type={`button`}
+        onClick={() => setOpen(false)}
+        data-testid={`modal-button-cancel`}
+      >
+        {t(`generic.buttons.cancel`)}
+      </Button>
+
+      <Button type="submit" disabled={form.formState.isSubmitting || disabled} data-testid={`modal-button-create`}>
+        {isEdit ? t(`generic.buttons.confirm_update`) : t(`generic.buttons.confirm_create`)}
+      </Button>
+    </div>
+  );
+}

package/src/components/forms/CommonEditorHeader.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { DialogDescription, DialogHeader, DialogTitle } from "../../shadcnui";
+
+type CommonEditorHeaderProps = {
+  type: string;
+  name?: string;
+};
+
+export function CommonEditorHeader({ type, name }: CommonEditorHeaderProps) {
+  const t = useTranslations();
+
+  return (
+    <DialogHeader>
+      <DialogTitle>
+        {name
+          ? t(`generic.edit.update.title`, {
+              type: type,
+            })
+          : t(`generic.edit.create.title`, { type: type })}
+      </DialogTitle>
+      <DialogDescription>
+        {name
+          ? t(`generic.edit.update.description`, {
+              type: type,
+              name: name,
+            })
+          : t(`generic.edit.create.description`, {
+              type: type,
+            })}
+      </DialogDescription>
+    </DialogHeader>
+  );
+}

package/src/components/forms/CommonEditorTrigger.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { PencilIcon } from "lucide-react";
+
+import { useTranslations } from "next-intl";
+import { Button, DialogTrigger } from "../../shadcnui";
+
+type CommonEditorTriggerProps = { isEdit: boolean; edit?: string; create?: string };
+
+export function CommonEditorTrigger({ isEdit, edit, create }: CommonEditorTriggerProps) {
+  const t = useTranslations();
+
+  return (
+    <DialogTrigger asChild>
+      {isEdit ? (
+        <Button size="sm" variant={`ghost`} className="text-muted-foreground">
+          <PencilIcon />
+        </Button>
+      ) : (
+        <Button size="sm" variant={`outline`}>
+          {create ? create : t(`generic.buttons.create`)}
+        </Button>
+      )}
+    </DialogTrigger>
+  );
+}

package/src/components/forms/DatePickerPopover.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { isValid, parse } from "date-fns";
+import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
+import { ReactNode, useMemo, useState } from "react";
+import { useI18nDateFnsLocale, useI18nLocale } from "../../i18n";
+import {
+  Calendar,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../shadcnui";
+import { cn } from "../../utils";
+
+type DatePickerPopoverProps = {
+  children: ReactNode;
+  value?: Date;
+  onSelect: (date?: Date) => void;
+  minDate?: Date;
+  align?: "start" | "center" | "end";
+  className?: string;
+};
+
+export const DatePickerPopover = ({
+  children,
+  value,
+  onSelect,
+  minDate,
+  align = "start",
+  className,
+}: DatePickerPopoverProps) => {
+  const locale = useI18nLocale();
+  const dateFnsLocale = useI18nDateFnsLocale();
+  const [isOpen, setIsOpen] = useState(false);
+  const [displayMonth, setDisplayMonth] = useState<Date>(() => value || 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>(() => (value ? formatDate(value) : ""));
+
+  // Generate year options (1900 to current year + 10)
+  const currentYear = new Date().getFullYear();
+  const yearOptions = Array.from({ length: currentYear - 1900 + 11 }, (_, 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 = (inputValue: string) => {
+    setInputValue(inputValue);
+
+    // Try to parse the date using locale format
+    const parsedDate = parse(inputValue, dateFormatPattern, new Date());
+
+    if (isValid(parsedDate)) {
+      onSelect(parsedDate);
+      setDisplayMonth(parsedDate);
+    } else if (inputValue === "") {
+      onSelect(undefined);
+    }
+  };
+
+  // Handle calendar selection
+  const handleCalendarSelect = (selectedDate: Date | undefined) => {
+    onSelect(selectedDate);
+    if (selectedDate) {
+      setInputValue(formatDate(selectedDate));
+      setDisplayMonth(selectedDate);
+    } else {
+      setInputValue("");
+    }
+    setIsOpen(false);
+  };
+
+  // Handle clear button
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelect(undefined);
+    setInputValue("");
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className={cn("w-auto p-0", className)} align={align} onClick={(e) => e.stopPropagation()}>
+        <div className="p-3">
+          {/* Manual Input */}
+          <div className="relative mb-3">
+            <Input
+              value={inputValue}
+              onChange={(e) => handleInputChange(e.target.value)}
+              placeholder={datePlaceholder}
+              className="pr-16"
+              onClick={(e) => e.stopPropagation()}
+            />
+            <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
+              <button
+                type="button"
+                className="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <CalendarIcon className="h-4 w-4 opacity-50" />
+              </button>
+              {value && (
+                <button
+                  type="button"
+                  className="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted"
+                  onClick={handleClear}
+                >
+                  <CircleXIcon className="h-4 w-4 opacity-50 hover:opacity-100" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* 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={value}
+            onSelect={handleCalendarSelect}
+            disabled={(date) => (minDate && date < minDate ? true : false)}
+            locale={dateFnsLocale}
+            weekStartsOn={1}
+            month={displayMonth}
+            onMonthChange={setDisplayMonth}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/forms/DateRangeSelector.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { DateRange } from "react-day-picker";
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "../../shadcnui";
+import { cn } from "../../utils";
+
+type DateRangeSelectorProps = {
+  onDateChange: (date?: DateRange) => void;
+  avoidSettingDates?: boolean;
+  showPreviousMonth?: boolean;
+};
+
+export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviousMonth }: DateRangeSelectorProps) {
+  const [date, setDate] = useState<DateRange | undefined>(
+    avoidSettingDates
+      ? undefined
+      : {
+          from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+          to: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
+        },
+  );
+
+  const [open, setOpen] = useState(false);
+
+  const [prevRange, setPrevRange] = useState<DateRange | undefined>(date);
+  useEffect(() => {
+    if (
+      date?.from &&
+      date?.to &&
+      date.to > date.from &&
+      (prevRange?.from?.getTime() !== date.from.getTime() || prevRange?.to?.getTime() !== date.to.getTime())
+    ) {
+      onDateChange(date);
+      setPrevRange(date);
+      setOpen(false);
+    }
+  }, [date, prevRange, onDateChange]);
+
+  // Custom handler to reset end date if a new start date is picked
+  const handleSelect = (range: DateRange | undefined) => {
+    if (!range) {
+      setDate(undefined);
+      return;
+    }
+    // If a new start date is picked, reset end date
+    if (range.from && (!date?.from || range.from.getTime() !== date.from.getTime())) {
+      setDate({ from: range.from, to: undefined });
+    } else {
+      setDate(range);
+    }
+  };
+
+  return (
+    <div className={cn("grid gap-2")}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+          >
+            <CalendarIcon />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col gap-2 p-2">
+            <Calendar
+              mode="range"
+              defaultMonth={
+                date?.from ??
+                (showPreviousMonth ? new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1) : undefined)
+              }
+              selected={date}
+              onSelect={handleSelect}
+              numberOfMonths={2}
+            />
+            <Button
+              variant="secondary"
+              type="button"
+              onClick={() => {
+                setDate(undefined);
+                setPrevRange(undefined);
+                onDateChange(undefined);
+                setOpen(false);
+              }}
+              className="cursor-pointer"
+              disabled={!date}
+            >
+              Clear
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}