@lets-events/react 12.7.2 → 12.8.0

package/src/components/FormFields/CPFFormField.tsx

@@ -1,78 +1,78 @@
-import { useFormContext, useWatch } from "react-hook-form";
-import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
-import { Flex } from "../Flex";
-import { TextFormField } from "./TextFormField";
-
-type CPFFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  validationErrorMessage: string;
-  foreignerLabel: string;
-};
-
-const isValidCPF = (cpf: string) => {
-  cpf = cpf.replace(/[^\d]+/g, "");
-  if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
-
-  let sum = 0;
-  for (let i = 0; i < 9; i++) sum += parseInt(cpf.charAt(i)) * (10 - i);
-  let rest = (sum * 10) % 11;
-  if (rest === 10 || rest === 11) rest = 0;
-  if (rest !== parseInt(cpf.charAt(9))) return false;
-
-  sum = 0;
-  for (let i = 0; i < 10; i++) sum += parseInt(cpf.charAt(i)) * (11 - i);
-  rest = (sum * 10) % 11;
-  if (rest === 10 || rest === 11) rest = 0;
-  if (rest !== parseInt(cpf.charAt(10))) return false;
-
-  return true;
-};
-
-export const CPFFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  validationErrorMessage,
-  foreignerLabel,
-}: CPFFormFieldProps) => {
-  const { control, setValue } = useFormContext();
-  const foreigner = useWatch({ name: "foreigner", control });
-
-  return (
-    <Flex direction="column">
-      <TextFormField
-        name={name}
-        label={label}
-        required={required && !foreigner}
-        placeholder={placeholder || "000.000.000-00"}
-        mask={{
-          mask: "___.___.___-__",
-          replacement: { _: /[0-9]/ },
-        }}
-        validate={(value: string) => {
-          if (!required || foreigner) return true;
-          return isValidCPF(value) || validationErrorMessage;
-        }}
-        disabled={foreigner}
-      />
-
-      <CheckboxGroup
-        value={foreigner ? ["true"] : []}
-        name="foreigner"
-        onValueChange={(value) => {
-          const isForeigner = value.includes("true");
-          setValue("foreigner", isForeigner);
-          if (isForeigner) {
-            setValue(name, "");
-          }
-        }}
-      >
-        <CheckboxItem value="true">{foreignerLabel}</CheckboxItem>
-      </CheckboxGroup>
-    </Flex>
-  );
-};
+import { useFormContext, useWatch } from "react-hook-form";
+import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
+import { Flex } from "../Flex";
+import { TextFormField } from "./TextFormField";
+
+type CPFFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+  foreignerLabel: string;
+};
+
+const isValidCPF = (cpf: string) => {
+  cpf = cpf.replace(/[^\d]+/g, "");
+  if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
+
+  let sum = 0;
+  for (let i = 0; i < 9; i++) sum += parseInt(cpf.charAt(i)) * (10 - i);
+  let rest = (sum * 10) % 11;
+  if (rest === 10 || rest === 11) rest = 0;
+  if (rest !== parseInt(cpf.charAt(9))) return false;
+
+  sum = 0;
+  for (let i = 0; i < 10; i++) sum += parseInt(cpf.charAt(i)) * (11 - i);
+  rest = (sum * 10) % 11;
+  if (rest === 10 || rest === 11) rest = 0;
+  if (rest !== parseInt(cpf.charAt(10))) return false;
+
+  return true;
+};
+
+export const CPFFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+  foreignerLabel,
+}: CPFFormFieldProps) => {
+  const { control, setValue } = useFormContext();
+  const foreigner = useWatch({ name: "foreigner", control });
+
+  return (
+    <Flex direction="column">
+      <TextFormField
+        name={name}
+        label={label}
+        required={required && !foreigner}
+        placeholder={placeholder || "000.000.000-00"}
+        mask={{
+          mask: "___.___.___-__",
+          replacement: { _: /[0-9]/ },
+        }}
+        validate={(value: string) => {
+          if (!required || foreigner) return true;
+          return isValidCPF(value) || validationErrorMessage;
+        }}
+        disabled={foreigner}
+      />
+
+      <CheckboxGroup
+        value={foreigner ? ["true"] : []}
+        name="foreigner"
+        onValueChange={(value) => {
+          const isForeigner = value.includes("true");
+          setValue("foreigner", isForeigner);
+          if (isForeigner) {
+            setValue(name, "");
+          }
+        }}
+      >
+        <CheckboxItem value="true">{foreignerLabel}</CheckboxItem>
+      </CheckboxGroup>
+    </Flex>
+  );
+};

package/src/components/FormFields/CalendarFormField.tsx

@@ -1,95 +1,95 @@
-import React from "react";
-import { FieldValues, useController, RegisterOptions } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { Calendar, CalendarProps } from "../Calendar";
-import { useCallback } from "react";
-
-export type CalendarFormFieldProps = Omit<
-  CalendarProps,
-  "selected" | "setSelected"
-> & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  validate?: (value: Date | undefined) => boolean | string;
-  validationErrorMessage?: string;
-  rules?: Omit<
-    RegisterOptions<FieldValues, string>,
-    "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
-  >;
-  allowPastDates?: boolean;
-  maxYearsFromNow?: number;
-};
-
-export const CalendarFormField = ({
-  name,
-  label,
-  required,
-  validate,
-  validationErrorMessage = "Este campo é obrigatório.",
-  rules,
-  onChange,
-  allowPastDates,
-  maxYearsFromNow = 20,
-  ...calendarProps
-}: CalendarFormFieldProps) => {
-  const handleValidate = useCallback(
-    (value?: Date) => {
-      if (value === undefined || value === null) {
-        if (required) return validationErrorMessage;
-        return true;
-      }
-      return validate?.(value) ?? true;
-    },
-    [validate, required, validationErrorMessage]
-  );
-
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required: required ? validationErrorMessage : false,
-      validate: handleValidate,
-      ...rules,
-    },
-    defaultValue: undefined,
-  });
-
-  const fieldError = fieldState.error;
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-  const { value: selected, onChange: setSelected } = field;
-
-  const handleCalendarChange = (date: Date | undefined) => {
-    setSelected(date);
-  };
-
-  return (
-    <Flex direction="column" style={{ flex: "1" }}>
-      {label && (
-        <FormLabel
-          name={name}
-          label={label}
-          required={required}
-          haveError={haveError}
-        />
-      )}
-
-      <Calendar
-        selected={selected}
-        setSelected={(value) => {
-          const date = typeof value === "function" ? value(selected) : value;
-          handleCalendarChange(date);
-        }}
-        hasError={haveError}
-        allowPastDates={allowPastDates}
-        maxYearsFromNow={maxYearsFromNow}
-        {...calendarProps}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import React from "react";
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { Calendar, CalendarProps } from "../Calendar";
+import { useCallback } from "react";
+
+export type CalendarFormFieldProps = Omit<
+  CalendarProps,
+  "selected" | "setSelected"
+> & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  validate?: (value: Date | undefined) => boolean | string;
+  validationErrorMessage?: string;
+  rules?: Omit<
+    RegisterOptions<FieldValues, string>,
+    "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+  >;
+  allowPastDates?: boolean;
+  maxYearsFromNow?: number;
+};
+
+export const CalendarFormField = ({
+  name,
+  label,
+  required,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  rules,
+  onChange,
+  allowPastDates,
+  maxYearsFromNow = 20,
+  ...calendarProps
+}: CalendarFormFieldProps) => {
+  const handleValidate = useCallback(
+    (value?: Date) => {
+      if (value === undefined || value === null) {
+        if (required) return validationErrorMessage;
+        return true;
+      }
+      return validate?.(value) ?? true;
+    },
+    [validate, required, validationErrorMessage]
+  );
+
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate,
+      ...rules,
+    },
+    defaultValue: undefined,
+  });
+
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const { value: selected, onChange: setSelected } = field;
+
+  const handleCalendarChange = (date: Date | undefined) => {
+    setSelected(date);
+  };
+
+  return (
+    <Flex direction="column" style={{ flex: "1" }}>
+      {label && (
+        <FormLabel
+          name={name}
+          label={label}
+          required={required}
+          haveError={haveError}
+        />
+      )}
+
+      <Calendar
+        selected={selected}
+        setSelected={(value) => {
+          const date = typeof value === "function" ? value(selected) : value;
+          handleCalendarChange(date);
+        }}
+        hasError={haveError}
+        allowPastDates={allowPastDates}
+        maxYearsFromNow={maxYearsFromNow}
+        {...calendarProps}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/CheckboxGroupFormField.tsx

@@ -1,91 +1,91 @@
-import { Controller, useFormContext } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
-import { getNestedValue } from "../../utils/getNestedValue";
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-export type CheckboxGroupFormFieldProps = {
-  name: string;
-  label: string;
-  options: Option[];
-  required?: boolean;
-  validationErrorMessage?: string;
-  defaultValue?: string[];
-  color?: "blue" | "success" | "error";
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  disabled?: boolean;
-};
-
-export const CheckboxGroupFormField = ({
-  name,
-  label,
-  options,
-  required,
-  validationErrorMessage = "Selecione pelo menos uma opção.",
-  defaultValue = [],
-  color = "blue",
-  fontWeight = "regular",
-  disabled = false,
-}: CheckboxGroupFormFieldProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-
-  const fieldError = getNestedValue(errors, name);
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-  const validationRules = {
-    required: required ? validationErrorMessage : false,
-    validate: required
-      ? (value: string[]) => value?.length > 0 || validationErrorMessage
-      : undefined,
-  };
-
-  return (
-    <Flex direction="column">
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-
-      <Controller
-        name={name}
-        control={control}
-        rules={validationRules}
-        defaultValue={defaultValue}
-        render={({ field }) => (
-          <CheckboxGroup
-            name={name}
-            value={field.value}
-            onValueChange={field.onChange}
-            color={haveError ? "error" : color}
-            fontWeight={fontWeight}
-            disabled={disabled}
-          >
-            {options.map((option) => (
-              <CheckboxItem
-                key={option.value}
-                value={option.value}
-                disabled={disabled}
-              >
-                {option.label}
-              </CheckboxItem>
-            ))}
-          </CheckboxGroup>
-        )}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { Controller, useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { CheckboxGroup, CheckboxItem } from "../CheckboxGroup";
+import { getNestedValue } from "../../utils/getNestedValue";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+export type CheckboxGroupFormFieldProps = {
+  name: string;
+  label: string;
+  options: Option[];
+  required?: boolean;
+  validationErrorMessage?: string;
+  defaultValue?: string[];
+  color?: "blue" | "success" | "error";
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  disabled?: boolean;
+};
+
+export const CheckboxGroupFormField = ({
+  name,
+  label,
+  options,
+  required,
+  validationErrorMessage = "Selecione pelo menos uma opção.",
+  defaultValue = [],
+  color = "blue",
+  fontWeight = "regular",
+  disabled = false,
+}: CheckboxGroupFormFieldProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const fieldError = getNestedValue(errors, name);
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const validationRules = {
+    required: required ? validationErrorMessage : false,
+    validate: required
+      ? (value: string[]) => value?.length > 0 || validationErrorMessage
+      : undefined,
+  };
+
+  return (
+    <Flex direction="column">
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+
+      <Controller
+        name={name}
+        control={control}
+        rules={validationRules}
+        defaultValue={defaultValue}
+        render={({ field }) => (
+          <CheckboxGroup
+            name={name}
+            value={field.value}
+            onValueChange={field.onChange}
+            color={haveError ? "error" : color}
+            fontWeight={fontWeight}
+            disabled={disabled}
+          >
+            {options.map((option) => (
+              <CheckboxItem
+                key={option.value}
+                value={option.value}
+                disabled={disabled}
+              >
+                {option.label}
+              </CheckboxItem>
+            ))}
+          </CheckboxGroup>
+        )}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -0,0 +1,154 @@
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { Calendar, CalendarProps } from "../Calendar";
+import { TimePicker, TimePickerProps } from "../TimePicker";
+import { useCallback, useMemo } from "react";
+
+export type DateAndTimeFormFieldProps = Omit<
+    CalendarProps,
+    "selected" | "setSelected"
+> & Omit<
+    TimePickerProps,
+    "selected" | "setSelected"
+> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: string | undefined) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<
+        RegisterOptions<FieldValues, string>,
+        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+    >;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+
+export const DateAndTimeFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    ...props
+}: DateAndTimeFormFieldProps) => {
+    const handleValidate = useCallback(
+        (value?: string) => {
+            if (value === undefined || value === null || value === "") {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: "",
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: isoValue, onChange: setIsoValue } = field;
+
+    const { selectedDate, selectedTime } = useMemo(() => {
+        if (!isoValue) return { selectedDate: undefined, selectedTime: undefined };
+
+        try {
+            const date = new Date(isoValue);
+            if (isNaN(date.getTime())) {
+                return { selectedDate: undefined, selectedTime: undefined };
+            }
+
+            const hours = String(date.getHours()).padStart(2, "0");
+            const minutes = String(date.getMinutes()).padStart(2, "0");
+            const time = `${hours}:${minutes}`;
+
+            return { selectedDate: date, selectedTime: time };
+        } catch {
+            return { selectedDate: undefined, selectedTime: undefined };
+        }
+    }, [isoValue]);
+
+    const combineDateTime = useCallback(
+        (date?: Date, time?: string) => {
+            if (!date || !time) {
+                setIsoValue("");
+                return;
+            }
+
+            const [hours, minutes] = time.split(":").map(Number);
+            const combined = new Date(date);
+            combined.setHours(hours || 0, minutes || 0, 0, 0);
+
+            setIsoValue(combined.toISOString());
+        },
+        [setIsoValue]
+    );
+
+    const handleDateChange = (date: Date | undefined) => {
+        combineDateTime(date, selectedTime);
+    };
+
+    const handleTimeChange = (time: string | undefined) => {
+        combineDateTime(selectedDate, time);
+    };
+
+    return (
+        <Flex direction="column">
+            {label && (
+                <FormLabel
+                    name={name}
+                    label={label}
+                    required={required}
+                    haveError={haveError}
+                />
+            )}
+
+            <Flex gap={12} align="start">
+                <Flex direction="column">
+                    <Calendar
+                        selected={selectedDate}
+                        setSelected={(date) => {
+                            const d = typeof date === "function" ? date(selectedDate) : date;
+                            handleDateChange(d);
+                        }}
+                        hasError={haveError}
+                        allowPastDates={allowPastDates}
+                        maxYearsFromNow={maxYearsFromNow}
+                        {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+
+                <Flex direction="column">
+                    <TimePicker
+                        selected={selectedTime}
+                        setSelected={(value) => {
+                            const time = typeof value === "function" ? value(selectedTime) : value;
+                            handleTimeChange(time);
+                        }}
+                        hasError={haveError}
+                        {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+            </Flex>
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DateAndTimeFormField