@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.4

package/src/components/forms/FormDateTime.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useI18nDateFnsLocale, useI18nLocale, useI18nTranslations } from "../../i18n";
+import {
+  Button,
+  Calendar,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../shadcnui";
+import { cn } from "../../utils";
+
+export function FormDateTime({
+  form,
+  id,
+  name,
+  minDate,
+  onChange,
+  allowEmpty,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  minDate?: Date;
+  onChange?: (date?: Date) => Promise<void>;
+  allowEmpty?: boolean;
+}) {
+  const [open, setOpen] = useState<boolean>(false);
+  const t = useI18nTranslations();
+  const locale = useI18nLocale();
+  const dateFnsLocale = useI18nDateFnsLocale();
+
+  // Locale-aware date-time formatter
+  const dateTimeFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+    [locale],
+  );
+
+  // Format date-time for display
+  const formatDateTime = (date: Date): string => dateTimeFormatter.format(date);
+
+  const [selectedHours, setSelectedHours] = useState<number>(new Date().getHours());
+  const [selectedMinutes, setSelectedMinutes] = useState<number>(roundToNearestFiveMinutes(new Date().getMinutes()));
+
+  const hoursOptions = Array.from({ length: 24 }, (_, i) => {
+    const hour = i;
+    return {
+      value: hour,
+      label: hour.toString().padStart(2, "0"),
+    };
+  });
+
+  const minutesOptions = Array.from({ length: 12 }, (_, i) => {
+    const minute = i * 5;
+    return {
+      value: minute,
+      label: minute.toString().padStart(2, "0"),
+    };
+  });
+
+  function roundToNearestFiveMinutes(minutes: number): number {
+    return (Math.round(minutes / 5) * 5) % 60;
+  }
+
+  const handleTimeChange = (hours: number, minutes: number) => {
+    const currentDate = form.getValues(id);
+    if (currentDate) {
+      const updatedDate = new Date(currentDate);
+      updatedDate.setHours(hours);
+      updatedDate.setMinutes(minutes);
+      form.setValue(id, updatedDate);
+      if (onChange) onChange(updatedDate);
+    }
+  };
+
+  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>{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 asChild>
+                      <FormControl>
+                        <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" />
+                        </Button>
+                      </FormControl>
+                    </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()));
+                          }
+                        }}
+                        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) => {
+                              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 placeholder="Hour" />
+                            </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) => {
+                              const minutes = parseInt(value);
+                              setSelectedMinutes(minutes);
+                              handleTimeChange(field.value ? new Date(field.value).getHours() : selectedHours, minutes);
+                            }}
+                          >
+                            <SelectTrigger id="minutes-select" className="w-[70px]">
+                              <SelectValue placeholder="Min" />
+                            </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);
+                        }}
+                      >
+                        {t(`generic.buttons.select_date`)}
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormInput.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import React from "react";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "../../shadcnui";
+
+export function FormInput({
+  form,
+  id,
+  name,
+  placeholder,
+  type,
+  onBlur,
+  disabled,
+  onKeyDown,
+  autoFocus,
+  onChange,
+  testId,
+  isRequired = false,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  type?: "text" | "number" | "currency" | "password" | "link";
+  onBlur?: () => Promise<void>;
+  disabled?: boolean;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  autoFocus?: boolean;
+  onChange?: (value: string | number) => Promise<void>;
+  testId?: string;
+  isRequired?: boolean;
+}) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => {
+          const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
+            let value = e.target.value;
+
+            if (type === "link" && value) {
+              if (!/^https?:\/\//i.test(value)) {
+                value = "https://" + value;
+                field.onChange(value);
+              }
+              try {
+                new URL(value);
+                form.clearErrors(id);
+              } catch (error) {
+                form.setError(id, {
+                  type: "validate",
+                  message: t(`generic.errors.valid_url`),
+                });
+              }
+            }
+
+            if (onBlur) await onBlur();
+            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>
+          );
+        }}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormPassword.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../shadcnui";
+import { PasswordInput } from "./PasswordInput";
+
+export function FormPassword({
+  form,
+  id,
+  name,
+  placeholder,
+  onBlur,
+  disabled,
+  testId,
+  isRequired,
+}: {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  onBlur?: () => Promise<void>;
+  disabled?: boolean;
+  testId?: string;
+  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>
+                {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>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "../../shadcnui";
+import { cn } from "../../utils";
+
+/**
+ * FormPlaceAutocomplete component integrates Google Places API (New)
+ * to provide address suggestions as the user types.
+ *
+ * Prerequisites:
+ * 1. Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY environment variable
+ * 2. Enable Places API (New) in Google Cloud Console
+ * 3. Configure API key restrictions as needed
+ *
+ * Note: This uses the new Places API via REST calls, not the legacy JavaScript API
+ */
+
+interface PlaceSuggestion {
+  place_id: string;
+  description: string;
+  structured_formatting: {
+    main_text: string;
+    secondary_text: string;
+  };
+}
+
+interface PlaceAutocompleteProps {
+  form: any;
+  id: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  testId?: string;
+  isRequired?: boolean;
+  onPlaceSelect?: (place: PlaceSuggestion) => void;
+  className?: string;
+  /**
+   * Optional array of place types to include in search results.
+   * When not specified, defaults to address types: ["street_address", "premise", "subpremise"]
+   * For cities, use: ["locality", "administrative_area_level_3"]
+   * For regions, use: ["administrative_area_level_1", "administrative_area_level_2"]
+   */
+  includeTypes?: string[];
+}
+
+export function FormPlaceAutocomplete({
+  form,
+  id,
+  name,
+  placeholder,
+  disabled,
+  testId,
+  isRequired = false,
+  onPlaceSelect,
+  className,
+  includeTypes,
+}: PlaceAutocompleteProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Initialize API key
+  useEffect(() => {
+    const key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY;
+
+    if (!key) {
+      console.error("Google Maps API key not found. Please set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY environment variable.");
+      setLoadError(true);
+      return;
+    }
+
+    setApiKey(key);
+  }, []);
+
+  // Update input value when form value changes
+  useEffect(() => {
+    const formValue = form.getValues(id);
+    if (formValue !== inputValue) {
+      setInputValue(formValue || "");
+    }
+  }, [form.watch(id), id, inputValue]);
+
+  // Fetch place suggestions from Google Places API (New)
+  const fetchSuggestions = async (input: string) => {
+    if (!apiKey) return;
+
+    try {
+      setIsLoading(true);
+
+      // Using the new Places API autocomplete endpoint
+      const response = await fetch(`https://places.googleapis.com/v1/places:autocomplete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Goog-Api-Key": apiKey,
+        },
+        body: JSON.stringify({
+          input: input,
+          includedPrimaryTypes: includeTypes || ["street_address", "premise", "subpremise"],
+          languageCode: "en",
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Places API error: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.suggestions) {
+        const formattedSuggestions: PlaceSuggestion[] = data.suggestions.map((suggestion: any) => ({
+          place_id: suggestion.placePrediction?.placeId || "",
+          description: suggestion.placePrediction?.text?.text || "",
+          structured_formatting: {
+            main_text: suggestion.placePrediction?.structuredFormat?.mainText?.text || "",
+            secondary_text: suggestion.placePrediction?.structuredFormat?.secondaryText?.text || "",
+          },
+        }));
+
+        setSuggestions(formattedSuggestions);
+        setShowSuggestions(true);
+      } else {
+        setSuggestions([]);
+      }
+    } catch (error) {
+      console.error("Error fetching place suggestions:", error);
+      setSuggestions([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle input changes with debouncing
+  const handleInputChange = (value: string) => {
+    setInputValue(value);
+    form.setValue(id, value);
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    if (value.length > 2 && apiKey) {
+      debounceRef.current = setTimeout(() => {
+        fetchSuggestions(value);
+      }, 300);
+    } else {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      setIsLoading(false);
+    }
+  };
+
+  // Handle suggestion selection
+  const handleSuggestionSelect = (suggestion: PlaceSuggestion) => {
+    setInputValue(suggestion.description);
+    form.setValue(id, suggestion.description);
+    setShowSuggestions(false);
+    setSuggestions([]);
+
+    if (onPlaceSelect) {
+      onPlaceSelect(suggestion);
+    }
+  };
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
+  // Fallback to regular input if API key is not available
+  if (loadError) {
+    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">
+                  {name}
+                  {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+                </FormLabel>
+              )}
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={placeholder}
+                  disabled={disabled}
+                  data-testid={testId}
+                  className={cn("w-full", className)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col" ref={containerRef}>
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <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">
+                <Input
+                  value={inputValue}
+                  onChange={(e) => handleInputChange(e.target.value)}
+                  onBlur={field.onBlur}
+                  onFocus={() => {
+                    if (suggestions.length > 0) {
+                      setShowSuggestions(true);
+                    }
+                  }}
+                  placeholder={placeholder}
+                  disabled={disabled || !apiKey}
+                  data-testid={testId}
+                  className={cn("w-full", className)}
+                />
+
+                {/* Loading indicator */}
+                {isLoading && (
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                    <div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent"></div>
+                  </div>
+                )}
+
+                {/* Suggestions dropdown */}
+                {showSuggestions && suggestions.length > 0 && (
+                  <div className="bg-background absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border shadow-lg">
+                    {suggestions.map((suggestion, index) => (
+                      <div
+                        key={suggestion.place_id || index}
+                        className="hover:bg-muted cursor-pointer px-3 py-2 text-sm"
+                        onClick={() => handleSuggestionSelect(suggestion)}
+                      >
+                        <div className="font-medium">{suggestion.structured_formatting?.main_text}</div>
+                        <div className="text-muted-foreground">{suggestion.structured_formatting?.secondary_text}</div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}