@lets-events/react 11.5.3 → 11.6.0

package/src/components/FormFields/AddressFormFields/CountryFormField.tsx

@@ -0,0 +1,33 @@
+import { Flex } from "../../Flex";
+import { SelectFormField } from "../SelectFormField";
+import { useCountries } from "../../../hooks/useCountries";
+
+type CountryFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  language?: "es" | "pt-BR" | "en";
+  haveError?: boolean;
+};
+
+export function CountryFormField({
+  name,
+  label,
+  required,
+  language = "pt-BR",
+}: CountryFormFieldProps) {
+  const countries = useCountries(language);
+
+  return (
+    <Flex direction="column">
+      <SelectFormField
+        label={label}
+        name={name}
+        options={countries}
+        required={required}
+        defaultValue="Brasil"
+      />
+    </Flex>
+  );
+}

package/src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx

@@ -0,0 +1,45 @@
+import { useController, useFormContext } from "react-hook-form";
+import { TextFormField } from "../TextFormField";
+
+export const PostalCodeFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+}: {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+}) => {
+  const { control } = useFormContext();
+  const {
+    field: { onChange, value },
+  } = useController({ name, control });
+
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "00000-000"}
+      mask={{
+        mask: "_____-___",
+        replacement: { _: /[0-9]/ },
+      }}
+      value={value}
+      onChange={onChange}
+      validation={{
+        validate: (value: string) => {
+          const isEmpty = value.replace(/[^\d]/g, "").length === 0;
+          if (!required && isEmpty) return true;
+          return (
+            /^\d{8}$/.test(value.replace(/\D/g, "")) || validationErrorMessage
+          );
+        },
+      }}
+    />
+  );
+};

package/src/components/FormFields/AddressFormFields/StateFormField.tsx

@@ -0,0 +1,32 @@
+import { SelectFormField } from "../SelectFormField";
+import { TextFormField } from "../TextFormField";
+import { brazilianStates } from "../../../utils/states";
+
+type StateFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  isBrazil: boolean;
+};
+
+export function StateFormField({
+  name,
+  label,
+  required,
+  isBrazil,
+}: StateFormFieldProps) {
+  return (
+    <>
+      {isBrazil ? (
+        <SelectFormField
+          name={name}
+          options={brazilianStates}
+          required={required}
+          label={label}
+        />
+      ) : (
+        <TextFormField name={name} required={required} label={label} />
+      )}
+    </>
+  );
+}

package/src/components/FormFields/AddressFormFields/index.tsx

@@ -0,0 +1,139 @@
+import { useEffect } from "react";
+import { useFormContext, useWatch, useFormState } from "react-hook-form";
+import { CountryFormField } from "./CountryFormField";
+import { PostalCodeFormField } from "./PostalCodeFormField";
+import { StateFormField } from "./StateFormField";
+import { CityFormField } from "./CityFormField";
+import { FormLabel } from "../FormLabel";
+import { TextFormField } from "../TextFormField";
+import { styled } from "../../../styles";
+
+type AddressFormFieldsProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  layout?: "column" | "grid";
+};
+
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+
+const AddressContainerStyled = styled("div", {
+  variants: {
+    layout: {
+      column: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$4",
+      },
+      grid: {
+        display: "grid",
+        gap: "$8 $16",
+        gridTemplateColumns: "repeat(2, 1fr)",
+
+        "& > *:nth-child(1)": {
+          gridColumn: "span 2",
+        },
+      },
+    },
+  },
+});
+export function AddressFormFields({
+  name,
+  label,
+  required,
+  layout = "column",
+}: AddressFormFieldsProps) {
+  const { control, setValue } = useFormContext();
+  const { errors } = useFormState({ control });
+
+  const selectedCountry = useWatch({ control, name: `${name}.country` });
+  const cep = useWatch({ control, name: `${name}.zip_code` });
+  const isBrazil = selectedCountry === "Brasil";
+
+  const addressErrors = getNestedValue(errors, name);
+  const haveError = !!addressErrors;
+
+  useEffect(() => {
+    const cleanedCep = cep?.replace(/\D/g, "");
+
+    if (isBrazil && cleanedCep?.length === 8) {
+      fetch(`https://viacep.com.br/ws/${cleanedCep}/json`)
+        .then((res) => res.json())
+        .then((data) => {
+          if (!data.erro) {
+            setValue(`${name}.street`, data.logradouro || "");
+            setValue(`${name}.neighborhood`, data.bairro || "");
+            setValue(`${name}.city`, data.localidade || "");
+            setValue(`${name}.state`, data.uf || "");
+          }
+        })
+        .catch(() => {
+          console.error("Erro ao buscar CEP");
+        });
+    }
+  }, [cep, isBrazil]);
+
+  return (
+    <AddressContainerStyled layout={layout}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+
+      <CountryFormField
+        name={`${name}.country`}
+        label="País"
+        required={required}
+        language="pt-BR"
+      />
+
+      {isBrazil ? (
+        <PostalCodeFormField
+          name={`${name}.zip_code`}
+          label="CEP"
+          required={required}
+          placeholder="00000-000"
+          validationErrorMessage="CEP inválido"
+        />
+      ) : (
+        <TextFormField
+          name={`${name}.zip_code`}
+          label="Código Postal"
+          required={required}
+        />
+      )}
+
+      <StateFormField
+        name={`${name}.state`}
+        label="Estado"
+        required={required}
+        isBrazil={isBrazil}
+      />
+
+      <CityFormField
+        name={`${name}.city`}
+        stateName={`${name}.state`}
+        label="Cidade"
+        required={required}
+        isBrazil={isBrazil}
+      />
+
+      <TextFormField name={`${name}.street`} label="Rua" required={required} />
+      <TextFormField
+        name={`${name}.number`}
+        label="Número"
+        required={required}
+      />
+      <TextFormField
+        name={`${name}.neighborhood`}
+        label="Bairro"
+        required={required}
+      />
+      <TextFormField name={`${name}.complement`} label="Complemento" />
+    </AddressContainerStyled>
+  );
+}

package/src/components/FormFields/BirthDateFormField.tsx

@@ -0,0 +1,87 @@
+import { TextFormField } from "./TextFormField";
+
+type Language = "pt-BR" | "en" | "es";
+
+type BirthDateFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+  language: Language;
+};
+
+const isValidDate = (day: number, month: number, year: number): boolean => {
+  const date = new Date(year, month - 1, day);
+  return (
+    date.getFullYear() === year &&
+    date.getMonth() === month - 1 &&
+    date.getDate() === day
+  );
+};
+
+const isValidBirthDate = (value: string, language: Language): boolean => {
+  const [part1, part2, part3] = value.split("/").map(Number);
+  let day = 0,
+    month = 0,
+    year = 0;
+
+  if (language === "en") {
+    month = part1;
+    day = part2;
+    year = part3;
+  } else {
+    day = part1;
+    month = part2;
+    year = part3;
+  }
+
+  if (!isValidDate(day, month, year)) return false;
+
+  const today = new Date();
+  const birthDate = new Date(year, month - 1, day);
+
+  if (birthDate > today) return false;
+
+  const age = today.getFullYear() - birthDate.getFullYear();
+  const beforeBirthday =
+    today.getMonth() < birthDate.getMonth() ||
+    (today.getMonth() === birthDate.getMonth() &&
+      today.getDate() < birthDate.getDate());
+
+  const realAge = beforeBirthday ? age - 1 : age;
+
+  return realAge <= 100;
+};
+
+export const BirthDateFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+  language,
+}: BirthDateFormFieldProps) => {
+  const inputPlaceholder =
+    placeholder || (language === "en" ? "MM/DD/YYYY" : "DD/MM/AAAA");
+
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={inputPlaceholder}
+      mask={{
+        mask: "__/__/____",
+        replacement: { _: /[0-9]/ },
+      }}
+      validation={{
+        validate: (value: string) => {
+          const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
+          if (!required && isEmpty) return true;
+          return isValidBirthDate(value, language) || validationErrorMessage;
+        },
+      }}
+    />
+  );
+};

package/src/components/FormFields/CNPJFormField.tsx

@@ -0,0 +1,89 @@
+import { TextFormField } from "./TextFormField";
+
+type CNPJFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+};
+
+const matchesNonDigit = new RegExp(/\D+/g);
+
+const getWeights = (size: number, start: number, end: number) => {
+  const weights = [];
+  for (let i = size - 1; i >= 0; i--) {
+    weights.push((end ? i % (end - start + 1) : i) + start);
+  }
+  return weights;
+};
+const calcValidatorDigit = (basicDigits: number[], weights: number[]) => {
+  const sum = basicDigits.reduce(
+    (sum, digit, index) => sum + digit * weights[index],
+    0
+  );
+  const mod = sum % 11;
+  return mod < 2 ? 0 : 11 - mod;
+};
+const cnpjWeights1 = getWeights(12, 2, 9);
+const cnpjWeights2 = getWeights(13, 2, 9);
+export const isValidCNPJ = (cnpj: string) => {
+  const digitsOnlyCnpj = cnpj.replace(matchesNonDigit, "");
+
+  if (digitsOnlyCnpj.length !== 14) {
+    return false;
+  }
+  // Elimina CNPJs com todos os dígitos iguais (ex: 11.111.111/1111-11)
+  if (/^(\d)\1+$/.test(digitsOnlyCnpj)) return false;
+
+  const cnpjArray = digitsOnlyCnpj
+    .split("")
+    .map((digit) => Number.parseInt(digit));
+
+  const validatorDigit1 = cnpjArray[12];
+  const validatorDigit2 = cnpjArray[13];
+  const basicDigits = cnpjArray.slice(0, 12);
+
+  const expectedValidator1 = calcValidatorDigit(basicDigits, cnpjWeights1);
+  if (expectedValidator1 !== validatorDigit1) {
+    return false;
+  }
+
+  const expectedValidator2 = calcValidatorDigit(
+    [...basicDigits, validatorDigit1],
+    cnpjWeights2
+  );
+  if (expectedValidator2 !== validatorDigit2) {
+    return false;
+  }
+
+  return true;
+};
+
+export const CNPJFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+}: CNPJFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "00.000.000/0000-00"}
+      mask={{
+        mask: "__.___.___/____-__",
+        replacement: { _: /[0-9]/ },
+      }}
+      validation={{
+        validate: (value: string) => {
+          const isEmpty = value.replace(matchesNonDigit, "").length === 0;
+          if (!required && isEmpty) return true;
+          return isValidCNPJ(value) || validationErrorMessage;
+        },
+      }}
+    />
+  );
+};

package/src/components/FormFields/CPFFormField.tsx

@@ -0,0 +1,79 @@
+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]/ },
+        }}
+        validation={{
+          validate: (value: string) => {
+            if (!required || foreigner) return true;
+            return isValidCPF(value) || validationErrorMessage;
+          },
+        }}
+        disabled={foreigner}
+      />
+
+      <CheckboxGroup
+        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/CheckboxGroupFormField.tsx

@@ -0,0 +1,90 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./FormLabel";
+import { ErrorFormMessage } from "./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}
+            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/ErrorFormMessage.tsx

@@ -1,36 +1,36 @@
-import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { colors } from "@lets-events/tokens";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import {
-  FieldError,
-  FieldErrorsImpl,
-  FieldValues,
-  Merge,
-} from "react-hook-form";
-
-export type ErrorFormMessageProps = {
-  message?:
-    | string
-    | FieldError
-    | Merge<FieldError, FieldErrorsImpl<any>>
-    | undefined;
-};
-
-export const ErrorFormMessage = ({ message }: ErrorFormMessageProps) => {
-  if (!message) return null;
-
-  if (typeof message !== "string") {
-    return null;
-  }
-  
-  return (
-    <Flex justify={"start"} align={"center"} gap={6}>
-      <FontAwesomeIcon icon={faXmarkCircle} color={colors.error600} size="1x" />
-      <Text typography={"bodyXS"} fontWeight={"medium"} color="error600">
-        {message}
-      </Text>
-    </Flex>
-  );
-};
+import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { colors } from "@lets-events/tokens";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import {
+  FieldError,
+  FieldErrorsImpl,
+  FieldValues,
+  Merge,
+} from "react-hook-form";
+
+export type ErrorFormMessageProps = {
+  message?:
+    | string
+    | FieldError
+    | Merge<FieldError, FieldErrorsImpl<any>>
+    | undefined;
+};
+
+export const ErrorFormMessage = ({ message }: ErrorFormMessageProps) => {
+  if (!message) return null;
+
+  if (typeof message !== "string") {
+    return null;
+  }
+  
+  return (
+    <Flex justify={"start"} align={"center"} gap={6}>
+      <FontAwesomeIcon icon={faXmarkCircle} color={colors.error600} size="1x" />
+      <Text typography={"bodyXS"} fontWeight={"medium"} color="error600">
+        {message}
+      </Text>
+    </Flex>
+  );
+};