@lets-events/react 12.10.17 → 12.11.1

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

@@ -1,141 +1,141 @@
-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 "../subComponents/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 isBrazil = selectedCountry === "Brasil";
-
-  const addressErrors = getNestedValue(errors, name);
-  const haveError = !!addressErrors;
-
-  const handleCEPChange = (cep: string) => {
-    if (!isBrazil) return;
-
-    const cleanedCep = cep?.replace(/\D/g, "");
-
-    if (cleanedCep?.length !== 8) return;
-
-    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");
-      });
-  };
-
-  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"
-          onChange={handleCEPChange}
-        />
-      ) : (
-        <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>
-  );
-}
+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 "../subComponents/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 isBrazil = selectedCountry === "Brasil";
+
+  const addressErrors = getNestedValue(errors, name);
+  const haveError = !!addressErrors;
+
+  const handleCEPChange = (cep: string) => {
+    if (!isBrazil) return;
+
+    const cleanedCep = cep?.replace(/\D/g, "");
+
+    if (cleanedCep?.length !== 8) return;
+
+    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");
+      });
+  };
+
+  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"
+          onChange={handleCEPChange}
+        />
+      ) : (
+        <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

@@ -1,84 +1,84 @@
-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 => {
-  if (!/^\d{8}$/.test(value)) return false;
-
-  let day = 0;
-  let month = 0;
-  let year = 0;
-  if (language === "en") {
-    month = Number(value.slice(0, 2));
-    day = Number(value.slice(2, 4));
-    year = Number(value.slice(4));
-  } else {
-    day = Number(value.slice(0, 2));
-    month = Number(value.slice(2, 4));
-    year = Number(value.slice(4));
-  }
-
-  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 === "pt-BR" ? "DD/MM/AAAA" : "MM/DD/YYYY");
-
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={inputPlaceholder}
-      mask={{
-        mask: "__/__/____",
-        replacement: { _: /[0-9]/ },
-      }}
-      validate={(value: string) => {
-        const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
-        if (!required && isEmpty) return true;
-        return isValidBirthDate(value, language) || validationErrorMessage;
-      }}
-    />
-  );
-};
+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 => {
+  if (!/^\d{8}$/.test(value)) return false;
+
+  let day = 0;
+  let month = 0;
+  let year = 0;
+  if (language === "en") {
+    month = Number(value.slice(0, 2));
+    day = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
+  } else {
+    day = Number(value.slice(0, 2));
+    month = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
+  }
+
+  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 === "pt-BR" ? "DD/MM/AAAA" : "MM/DD/YYYY");
+
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={inputPlaceholder}
+      mask={{
+        mask: "__/__/____",
+        replacement: { _: /[0-9]/ },
+      }}
+      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

@@ -1,87 +1,87 @@
-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]/ },
-      }}
-      validate={(value: string) => {
-        const isEmpty = value.replace(matchesNonDigit, "").length === 0;
-        if (!required && isEmpty) return true;
-        return isValidCNPJ(value) || validationErrorMessage;
-      }}
-    />
-  );
-};
+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]/ },
+      }}
+      validate={(value: string) => {
+        const isEmpty = value.replace(matchesNonDigit, "").length === 0;
+        if (!required && isEmpty) return true;
+        return isValidCNPJ(value) || validationErrorMessage;
+      }}
+    />
+  );
+};