@carlonicora/nextjs-jsonapi 1.116.0 → 1.117.0

package/src/components/forms/CommonEditorTrigger.tsx

@@ -1,18 +1,23 @@
 "use client";
 
-import { PencilIcon } from "lucide-react";
+import { PencilIcon, PlusCircleIcon } from "lucide-react";
 
 import { useTranslations } from "next-intl";
+import React from "react";
 import { Button, DialogTrigger } from "../../shadcnui";
 
-type CommonEditorTriggerProps = { isEdit: boolean; edit?: string; create?: string; testId?: string };
+type CommonEditorTriggerProps = { isEdit: boolean; edit?: string; create?: string; testId?: string; title?: string };
 
-export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId }: CommonEditorTriggerProps) {
+export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId, title }: CommonEditorTriggerProps) {
   const t = useTranslations();
 
   return (
     <DialogTrigger>
-      {isEdit ? (
+      {title ? (
+        <Button render={<div />} nativeButton={false} size="sm" variant={`outline`} data-testid={testId}>
+          {title}
+        </Button>
+      ) : isEdit ? (
         <Button
           render={<div />}
           nativeButton={false}
@@ -31,3 +36,12 @@ export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId }: Com
     </DialogTrigger>
   );
 }
+
+export const CommonAddTrigger = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<typeof Button>>(
+  (props, ref) => (
+    <Button ref={ref} variant="ghost" size="sm" className="text-muted-foreground" {...props}>
+      <PlusCircleIcon />
+    </Button>
+  ),
+);
+CommonAddTrigger.displayName = "CommonAddTrigger";

package/src/components/forms/DateRangeSelector.tsx

@@ -2,6 +2,7 @@
 
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { DateRange } from "react-day-picker";
 import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "../../shadcnui";
@@ -14,6 +15,7 @@ type DateRangeSelectorProps = {
 };
 
 export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviousMonth }: DateRangeSelectorProps) {
+  const t = useTranslations();
   const [date, setDate] = useState<DateRange | undefined>(
     avoidSettingDates
       ? undefined
@@ -24,6 +26,12 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
   );
 
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch by only rendering Popover after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const [prevRange, setPrevRange] = useState<DateRange | undefined>(date);
   useEffect(() => {
@@ -53,28 +61,56 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
     }
   };
 
+  // Show placeholder button during SSR to prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <div className={cn("grid gap-2")}>
+        <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>{t("ui.labels.pick_a_date")}</span>
+          )}
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className={cn("grid gap-2")}>
       <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger>
-          <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")
-              )
+        <PopoverTrigger
+          render={
+            <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")}
+              </>
             ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
+              format(date.from, "LLL dd, y")
+            )
+          ) : (
+            <span>{t("ui.labels.pick_a_date")}</span>
+          )}
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col gap-2 p-2">
@@ -100,7 +136,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
               className="cursor-pointer"
               disabled={!date}
             >
-              Clear
+              {t("ui.buttons.clear")}
             </Button>
           </div>
         </PopoverContent>

package/src/components/forms/EditorSheet.tsx

@@ -62,6 +62,17 @@ export type EditorSheetProps<T extends FieldValues> = {
   dialogOpen?: boolean;
   onDialogOpenChange?: (open: boolean) => void;
 
+  /** Render a fully custom footer instead of the default CommonEditorButtons.
+   *  `setOpen` is the dirty-checked open handler (shows the discard dialog);
+   *  `closeWithoutConfirm` is the raw setter that bypasses the discard dialog
+   *  (use after a successful submit when no confirmation is needed). */
+  renderFooter?: (props: {
+    form: UseFormReturn<T>;
+    isEdit: boolean;
+    setOpen: (open: boolean) => void;
+    closeWithoutConfirm: (open: boolean) => void;
+  }) => ReactNode;
+
   children: ReactNode;
 };
 
@@ -90,6 +101,7 @@ export function EditorSheet<T extends FieldValues>({
   onClose,
   dialogOpen,
   onDialogOpenChange,
+  renderFooter,
   children,
 }: EditorSheetProps<T>) {
   const t = useTranslations();
@@ -147,6 +159,7 @@ export function EditorSheet<T extends FieldValues>({
     <>
       <Sheet open={open} onOpenChange={handleOpenChange}>
         {dialogOpen === undefined &&
+          forceShow === undefined &&
           (trigger ? (
             <SheetTrigger>{trigger}</SheetTrigger>
           ) : (
@@ -184,17 +197,31 @@ export function EditorSheet<T extends FieldValues>({
             </SheetDescription>
           </SheetHeader>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(wrappedOnSubmit)} className="flex min-h-0 flex-1 flex-col">
+            <form
+              onSubmit={(e) => {
+                // The Sheet content is portaled, but React synthetic events still
+                // bubble up the React tree — so without stopPropagation an inner
+                // EditorSheet's submit also triggers the outer form's submit
+                // (e.g. a create dialog opened from within another editor).
+                e.stopPropagation();
+                return form.handleSubmit(wrappedOnSubmit)(e);
+              }}
+              className="flex min-h-0 flex-1 flex-col"
+            >
               <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
               <SheetFooter className="shrink-0 border-t px-6 py-4">
-                <CommonEditorButtons
-                  form={form}
-                  setOpen={handleOpenChange}
-                  isEdit={isEdit}
-                  disabled={disabled}
-                  hideSubmit={hideSubmit}
-                  centerButtons={centerButtons}
-                />
+                {renderFooter ? (
+                  renderFooter({ form, isEdit, setOpen: handleOpenChange, closeWithoutConfirm: setOpen })
+                ) : (
+                  <CommonEditorButtons
+                    form={form}
+                    setOpen={handleOpenChange}
+                    isEdit={isEdit}
+                    disabled={disabled}
+                    hideSubmit={hideSubmit}
+                    centerButtons={centerButtons}
+                  />
+                )}
               </SheetFooter>
             </form>
           </Form>

package/src/components/forms/FileUploader.tsx

@@ -10,12 +10,13 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
-import { DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
+import { Accept, DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
 import { showError } from "../../utils/toast";
-import { buttonVariants, Input } from "../../shadcnui";
+import { buttonVariants, Input, Tooltip, TooltipContent, TooltipTrigger } from "../../shadcnui";
 import { cn } from "../../utils";
 
 export type { DropzoneOptions } from "react-dropzone";
@@ -31,6 +32,7 @@ type FileUploaderContextType = {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  accept?: Accept;
 };
 
 const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
@@ -195,6 +197,7 @@ export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React
           setActiveIndex,
           orientation,
           direction,
+          accept: dropzoneOptions.accept,
         }}
       >
         <div
@@ -283,35 +286,62 @@ FileUploaderItem.displayName = "FileUploaderItem";
 
 export const FileInput = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => {
-    const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+    const { dropzoneState, isFileTooBig, isLOF, accept } = useFileUpload();
+    const t = useTranslations();
     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;
 
+    const acceptedLabels = useMemo(() => {
+      if (!accept) return null;
+      const extensions = new Set<string>();
+      let hasWildcardImages = false;
+      for (const [mime, exts] of Object.entries(accept)) {
+        if (mime === "image/*") hasWildcardImages = true;
+        for (const ext of exts) extensions.add(ext);
+      }
+      const labels = Array.from(extensions).sort();
+      if (hasWildcardImages) labels.push(t("ui.labels.images"));
+      return labels.length > 0 ? labels : null;
+    }, [accept, t]);
+
+    const dropArea = (
+      <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>
+    );
+
     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>
+        {acceptedLabels ? (
+          <Tooltip>
+            <TooltipTrigger render={dropArea} />
+            <TooltipContent>
+              {t("ui.labels.accepted_file_types")}: {acceptedLabels.join(", ")}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          dropArea
+        )}
         <Input
           ref={dropzoneState.inputRef}
           disabled={isLOF}

package/src/components/forms/FormDate.tsx

@@ -26,6 +26,8 @@ export function FormDate({
   isRequired = false,
   defaultMonth,
   allowEmpty,
+  description,
+  futureYears,
 }: {
   form: any;
   id: string;
@@ -36,6 +38,8 @@ export function FormDate({
   isRequired?: boolean;
   defaultMonth?: Date;
   allowEmpty?: boolean;
+  description?: string;
+  futureYears?: number;
 }) {
   const t = useI18nTranslations();
   const locale = useI18nLocale();
@@ -117,7 +121,7 @@ export function FormDate({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <Popover open={open} onOpenChange={setOpen} modal={true}>
             <InputGroup>
@@ -162,7 +166,7 @@ export function FormDate({
                 month={displayMonth}
                 onMonthChange={setDisplayMonth}
                 startMonth={new Date(1900, 0)}
-                endMonth={new Date(new Date().getFullYear() + 10, 11)}
+                endMonth={new Date(new Date().getFullYear() + (futureYears ?? 10), 11)}
               />
               {allowEmpty !== false && (
                 <div className="border-t p-2">

package/src/components/forms/FormDateTime.tsx

@@ -27,6 +27,9 @@ export function FormDateTime({
   onChange,
   allowEmpty,
   defaultMonth,
+  placeholder,
+  isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -36,6 +39,8 @@ export function FormDateTime({
   onChange?: (date?: Date) => Promise<void>;
   allowEmpty?: boolean;
   defaultMonth?: Date;
+  isRequired?: boolean;
+  description?: string;
 }) {
   const [open, setOpen] = useState<boolean>(false);
   const t = useI18nTranslations();
@@ -100,7 +105,7 @@ export function FormDateTime({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <div className="relative flex flex-row">
             <Popover open={open} onOpenChange={setOpen} modal={true}>
@@ -113,7 +118,11 @@ export function FormDateTime({
                     />
                   }
                 >
-                  {field.value ? formatDateTime(field.value) : <span>{t(`common.pick_date_time`)}</span>}
+                  {field.value ? (
+                    formatDateTime(field.value)
+                  ) : (
+                    <span>{placeholder ? placeholder : t(`common.pick_date_time`)}</span>
+                  )}
                   <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                 </PopoverTrigger>
                 {field.value && allowEmpty !== false && (

package/src/components/forms/FormFieldWrapper.tsx

@@ -18,6 +18,7 @@ type FormFieldWrapperProps<T extends FieldValues> = {
   description?: string;
   isRequired?: boolean;
   orientation?: "vertical" | "horizontal" | "responsive";
+  className?: string;
   children: (field: ControllerRenderProps<T, Path<T>>, fieldState: ControllerFieldState) => ReactNode;
   testId?: string;
 };
@@ -29,6 +30,7 @@ export function FormFieldWrapper<T extends FieldValues>({
   description,
   isRequired,
   orientation = "vertical",
+  className,
   children,
   testId,
 }: FormFieldWrapperProps<T>) {
@@ -37,7 +39,7 @@ export function FormFieldWrapper<T extends FieldValues>({
       control={form.control}
       name={name}
       render={({ field, fieldState }) => (
-        <Field orientation={orientation} data-invalid={!!fieldState.error} data-testid={testId}>
+        <Field orientation={orientation} className={className} data-invalid={!!fieldState.error} data-testid={testId}>
           {label && (
             <FieldLabel>
               {label}

package/src/components/forms/FormInput.tsx

@@ -9,6 +9,7 @@ export function FormInput({
   form,
   id,
   name,
+  description,
   placeholder,
   type,
   onBlur,
@@ -22,6 +23,7 @@ export function FormInput({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   type?: "text" | "number" | "currency" | "decimal" | "password" | "link";
   onBlur?: () => Promise<void>;
@@ -36,7 +38,7 @@ export function FormInput({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => {
           const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
             let value = e.target.value;

package/src/components/forms/FormPassword.tsx

@@ -12,6 +12,7 @@ export function FormPassword({
   disabled,
   testId,
   isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -21,10 +22,18 @@ export function FormPassword({
   disabled?: boolean;
   testId?: string;
   isRequired?: boolean;
+  description?: string;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        isRequired={isRequired}
+        description={description}
+        testId={testId}
+      >
         {(field) => (
           <PasswordInput
             {...field}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -42,6 +42,7 @@ interface PlaceAutocompleteProps {
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   testId?: string;
@@ -56,12 +57,15 @@ interface PlaceAutocompleteProps {
    * For regions, use: ["administrative_area_level_1", "administrative_area_level_2"]
    */
   includeTypes?: string[];
+  /** Google Places language code for results. Defaults to "en". */
+  languageCode?: string;
 }
 
 export function FormPlaceAutocomplete({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   testId,
@@ -69,6 +73,7 @@ export function FormPlaceAutocomplete({
   onPlaceSelect,
   className,
   includeTypes,
+  languageCode = "en",
 }: PlaceAutocompleteProps) {
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
@@ -117,7 +122,7 @@ export function FormPlaceAutocomplete({
         body: JSON.stringify({
           input: input,
           ...(includeTypes ? { includedPrimaryTypes: includeTypes } : {}),
-          languageCode: "en",
+          languageCode: languageCode,
         }),
       });
 
@@ -270,7 +275,7 @@ export function FormPlaceAutocomplete({
   if (loadError) {
     return (
       <div className="flex w-full flex-col">
-        <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+        <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
           {(field) => (
             <Input
               {...field}
@@ -287,7 +292,7 @@ export function FormPlaceAutocomplete({
 
   return (
     <div className="flex w-full flex-col" ref={containerRef}>
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => (
           <div className="relative">
             <Input

package/src/components/forms/FormSelect.tsx

@@ -9,6 +9,7 @@ export function FormSelect({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   values,
@@ -21,6 +22,7 @@ export function FormSelect({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   values: { id: string; text: string }[];
@@ -36,6 +38,7 @@ export function FormSelect({
         form={form}
         name={id}
         label={name}
+        description={description}
         isRequired={isRequired}
         orientation={useRows ? "horizontal" : "vertical"}
         testId={testId}

package/src/components/forms/FormSlider.tsx

@@ -10,6 +10,7 @@ export function FormSlider({
   name,
   disabled,
   showPercentage,
+  description,
 }: {
   form: any;
   id: string;
@@ -17,12 +18,13 @@ export function FormSlider({
   placeholder?: string;
   disabled?: boolean;
   showPercentage?: boolean;
+  description?: string;
 }) {
   const value = useWatch({ control: form.control, name: id });
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description}>
         {() => (
           <div>
             {showPercentage && (

package/src/components/forms/FormTextarea.tsx

@@ -11,6 +11,9 @@ export function FormTextarea({
   className,
   placeholder,
   testId,
+  description,
+  isRequired,
+  textareaRef,
 }: {
   form: any;
   id: string;
@@ -18,13 +21,24 @@ export function FormTextarea({
   placeholder?: string;
   className?: string;
   testId?: string;
+  description?: string;
+  isRequired?: boolean;
+  textareaRef?: React.RefObject<HTMLTextAreaElement>;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        description={description}
+        isRequired={isRequired}
+        testId={testId}
+      >
         {(field) => (
           <Textarea
             {...field}
+            ref={textareaRef}
             className={cn("min-h-96 w-full", className)}
             disabled={form.formState.isSubmitting}
             placeholder={placeholder}

package/src/shadcnui/ui/badge.tsx

@@ -17,6 +17,18 @@ const badgeVariants = cva(
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
+        warning: "bg-warning text-warning-foreground [a]:hover:bg-warning/80",
+        blue: "bg-sky-500 text-primary-foreground [a]:hover:bg-sky-500/80",
+        green: "bg-emerald-500 text-primary-foreground [a]:hover:bg-emerald-500/80",
+        red: "bg-red-500 text-primary-foreground [a]:hover:bg-red-500/80",
+        yellow: "bg-yellow-500 text-primary-foreground [a]:hover:bg-yellow-500/80",
+        purple: "bg-purple-500 text-primary-foreground [a]:hover:bg-purple-500/80",
+        pink: "bg-pink-500 text-primary-foreground [a]:hover:bg-pink-500/80",
+        gray: "bg-gray-500 text-primary-foreground [a]:hover:bg-gray-500/80",
+        orange: "bg-orange-500 text-primary-foreground [a]:hover:bg-orange-500/80",
+        teal: "bg-teal-500 text-primary-foreground [a]:hover:bg-teal-500/80",
+        lime: "bg-lime-500 text-primary-foreground [a]:hover:bg-lime-500/80",
+        none: "border-input bg-transparent text-muted-foreground min-w-20 min-h-5",
       },
     },
     defaultVariants: {
@@ -47,4 +59,7 @@ function Badge({
   });
 }
 
+type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
+
 export { Badge, badgeVariants };
+export type { BadgeProps };