@greatapps/common 1.1.697 → 1.1.698

package/src/components/ui/form/ComboboxField.tsx

@@ -1,159 +1,159 @@
-'use client';
-
-import { useState, useMemo } from 'react';
-import { useTranslations } from 'next-intl';
-import { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';
-import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
-import { cn } from '../../../infra/utils/clsx';
-
-export type ComboboxOption = {
-  value: string;
-  label: string;
-  displayValue?: string;
-};
-
-interface ComboboxFieldProps {
-  options: ComboboxOption[];
-  label?: string;
-  placeholder?: string;
-  searchPlaceholder?: string;
-  emptyMessage?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  className?: string;
-  containerClassName?: string;
-}
-
-export function ComboboxField({
-  options,
-  label,
-  placeholder,
-  searchPlaceholder,
-  emptyMessage,
-  value,
-  onChange,
-  disabled = false,
-  icon,
-  className,
-  containerClassName,
-}: ComboboxFieldProps) {
-  const translate = useTranslations();
-  const resolvedPlaceholder = placeholder ?? translate('common.forms.combobox.placeholder');
-  const resolvedSearchPlaceholder = searchPlaceholder ?? translate('common.forms.combobox.searchPlaceholder');
-  const resolvedEmptyMessage = emptyMessage ?? translate('common.forms.combobox.emptyMessage');
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-
-  const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value]
-  );
-
-  const filteredOptions = useMemo(() => {
-    const q = search.trim().toLowerCase();
-    if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
-  }, [options, search]);
-
-  const handleSelect = (optionValue: string) => {
-    onChange?.(optionValue);
-    setOpen(false);
-    setSearch('');
-  };
-
-  return (
-    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
-      {label && (
-        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
-          <span className="text-gray-600">{label}</span>
-        </div>
-      )}
-
-      <Popover
-        open={open}
-        onOpenChange={(v) => {
-          if (!disabled) {
-            setOpen(v);
-            if (!v) setSearch('');
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
-              'flex items-center justify-between gap-2 rounded-md border bg-transparent',
-              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',
-              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-              className
-            )}
-          >
-            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
-              {selectedOption
-                ? (selectedOption.displayValue ?? selectedOption.label)
-                : resolvedPlaceholder}
-            </span>
-            {icon ?? (
-              <IconChevronDown
-                className={cn(
-                  'size-4 opacity-50 shrink-0 transition-all duration-200',
-                  open && 'rotate-180 opacity-100 text-gray-950'
-                )}
-              />
-            )}
-          </button>
-        </PopoverTrigger>
-
-        <PopoverContent
-          className="p-0 overflow-hidden rounded-md border shadow-md"
-          align="start"
-          sideOffset={4}
-          style={{ width: 'var(--radix-popover-trigger-width)' }}
-          onWheel={(e) => e.stopPropagation()}
-        >
-          <div className="flex items-center gap-2 border-b border-gray-100 px-3 h-9">
-            <IconSearch className="size-4 shrink-0 opacity-50 text-gray-500" />
-            <input
-              autoFocus
-              placeholder={resolvedSearchPlaceholder}
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
-            />
-          </div>
-
-          <div className="overflow-y-auto max-h-[280px] p-1">
-            {filteredOptions.length === 0 ? (
-              <p className="py-6 text-center paragraph-small-medium text-gray-500">{resolvedEmptyMessage}</p>
-            ) : (
-              filteredOptions.map((option) => {
-                const isSelected = value === option.value;
-                return (
-                  <div
-                    key={option.value}
-                    className={cn(
-                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',
-                      'paragraph-small-medium text-gray-950',
-                      'hover:bg-gray-100',
-                      isSelected && 'bg-gray-50'
-                    )}
-                    onClick={() => handleSelect(option.value)}
-                  >
-                    <span className="flex-1 truncate">{option.label}</span>
-                    {isSelected && <IconCheck className="size-4 shrink-0 text-pages-600" />}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
-
-export default ComboboxField;
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
+import { cn } from '../../../infra/utils/clsx';
+
+export type ComboboxOption = {
+  value: string;
+  label: string;
+  displayValue?: string;
+};
+
+interface ComboboxFieldProps {
+  options: ComboboxOption[];
+  label?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}
+
+export function ComboboxField({
+  options,
+  label,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  value,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName,
+}: ComboboxFieldProps) {
+  const translate = useTranslations();
+  const resolvedPlaceholder = placeholder ?? translate('common.forms.combobox.placeholder');
+  const resolvedSearchPlaceholder = searchPlaceholder ?? translate('common.forms.combobox.searchPlaceholder');
+  const resolvedEmptyMessage = emptyMessage ?? translate('common.forms.combobox.emptyMessage');
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+
+  const filteredOptions = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+
+  const handleSelect = (optionValue: string) => {
+    onChange?.(optionValue);
+    setOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-gray-600">{label}</span>
+        </div>
+      )}
+
+      <Popover
+        open={open}
+        onOpenChange={(v) => {
+          if (!disabled) {
+            setOpen(v);
+            if (!v) setSearch('');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
+              'flex items-center justify-between gap-2 rounded-md border bg-transparent',
+              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+              className
+            )}
+          >
+            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
+              {selectedOption
+                ? (selectedOption.displayValue ?? selectedOption.label)
+                : resolvedPlaceholder}
+            </span>
+            {icon ?? (
+              <IconChevronDown
+                className={cn(
+                  'size-4 opacity-50 shrink-0 transition-all duration-200',
+                  open && 'rotate-180 opacity-100 text-gray-950'
+                )}
+              />
+            )}
+          </button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="p-0 overflow-hidden rounded-md border shadow-md"
+          align="start"
+          sideOffset={4}
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-2 border-b border-gray-100 px-3 h-9">
+            <IconSearch className="size-4 shrink-0 opacity-50 text-gray-500" />
+            <input
+              autoFocus
+              placeholder={resolvedSearchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
+            />
+          </div>
+
+          <div className="overflow-y-auto max-h-[280px] p-1">
+            {filteredOptions.length === 0 ? (
+              <p className="py-6 text-center paragraph-small-medium text-gray-500">{resolvedEmptyMessage}</p>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = value === option.value;
+                return (
+                  <div
+                    key={option.value}
+                    className={cn(
+                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',
+                      'paragraph-small-medium text-gray-950',
+                      'hover:bg-gray-100',
+                      isSelected && 'bg-gray-50'
+                    )}
+                    onClick={() => handleSelect(option.value)}
+                  >
+                    <span className="flex-1 truncate">{option.label}</span>
+                    {isSelected && <IconCheck className="size-4 shrink-0 text-pages-600" />}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default ComboboxField;

package/src/components/ui/form/DatePicker.tsx

@@ -1,100 +1,100 @@
-"use client";
-
-import { useState, forwardRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import { format } from "date-fns";
-import { Calendar } from "./Calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
-import { cn } from "../../../infra/utils/clsx";
-
-// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
-// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
-const isoParaDataLocal = (iso: string): Date => {
-  const [ano, mes, dia] = iso.split("-").map(Number);
-  return new Date(ano, mes - 1, dia);
-};
-
-interface DatePickerProps {
-  value?: string;
-  onChange?: (date: string | undefined) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
-  (
-    { value, onChange, placeholder, className, disabled },
-    ref,
-  ) => {
-    const translate = useTranslations();
-    const resolvedPlaceholder = placeholder ?? translate('common.forms.datePicker.placeholder');
-    const [open, setOpen] = useState(false);
-    const [date, setDate] = useState<Date | undefined>(() => {
-      return value ? isoParaDataLocal(value) : undefined;
-    });
-
-    // Sincroniza estado interno quando value mudar externamente
-    useEffect(() => {
-      if (value) {
-        setDate(isoParaDataLocal(value));
-      } else {
-        setDate(undefined);
-      }
-    }, [value]);
-
-    const handleDateSelect = (selectedDate: Date | undefined) => {
-      setDate(selectedDate);
-
-      if (selectedDate) {
-        onChange?.(format(selectedDate, "yyyy-MM-dd"));
-        setOpen(false); // Fecha o popover após seleção
-      } else {
-        onChange?.(undefined);
-      }
-    };
-
-    const displayText = date ? format(date, "dd/MM/yyyy") : resolvedPlaceholder;
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            disabled={disabled}
-            className={cn(
-              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
-              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              className,
-            )}
-          >
-            <span
-              className={cn(
-                "paragraph-small-medium",
-                date ? "text-gray-950" : "text-gray-500",
-              )}
-            >
-              {displayText}
-            </span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-          align="start"
-          sideOffset={8}
-        >
-          <div className="p-3">
-            <Calendar
-              mode="single"
-              selected={date}
-              onSelect={handleDateSelect}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-
-DatePicker.displayName = "DatePicker";
+"use client";
+
+import { useState, forwardRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { format } from "date-fns";
+import { Calendar } from "./Calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
+import { cn } from "../../../infra/utils/clsx";
+
+// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local
+// Evita bug de timezone onde new Date("2025-08-02") interpreta como UTC
+const isoParaDataLocal = (iso: string): Date => {
+  const [ano, mes, dia] = iso.split("-").map(Number);
+  return new Date(ano, mes - 1, dia);
+};
+
+interface DatePickerProps {
+  value?: string;
+  onChange?: (date: string | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    { value, onChange, placeholder, className, disabled },
+    ref,
+  ) => {
+    const translate = useTranslations();
+    const resolvedPlaceholder = placeholder ?? translate('common.forms.datePicker.placeholder');
+    const [open, setOpen] = useState(false);
+    const [date, setDate] = useState<Date | undefined>(() => {
+      return value ? isoParaDataLocal(value) : undefined;
+    });
+
+    // Sincroniza estado interno quando value mudar externamente
+    useEffect(() => {
+      if (value) {
+        setDate(isoParaDataLocal(value));
+      } else {
+        setDate(undefined);
+      }
+    }, [value]);
+
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+      setDate(selectedDate);
+
+      if (selectedDate) {
+        onChange?.(format(selectedDate, "yyyy-MM-dd"));
+        setOpen(false); // Fecha o popover após seleção
+      } else {
+        onChange?.(undefined);
+      }
+    };
+
+    const displayText = date ? format(date, "dd/MM/yyyy") : resolvedPlaceholder;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              "flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start",
+              "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              className,
+            )}
+          >
+            <span
+              className={cn(
+                "paragraph-small-medium",
+                date ? "text-gray-950" : "text-gray-500",
+              )}
+            >
+              {displayText}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+          align="start"
+          sideOffset={8}
+        >
+          <div className="p-3">
+            <Calendar
+              mode="single"
+              selected={date}
+              onSelect={handleDateSelect}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DatePicker.displayName = "DatePicker";