@lets-events/react 12.10.16 → 12.11.0

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

@@ -1,111 +1,111 @@
-import { useEffect, useState } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { SelectFormField } from "../SelectFormField";
-import { TextFormField } from "../TextFormField";
-
-type CityFormFieldProps = {
-  name: string;
-  label: string;
-  stateName: string;
-  required?: boolean;
-  isBrazil: boolean;
-  placeholder?: string;
-};
-
-type City = {
-  id: number;
-  nome: string;
-};
-
-export function CityFormField({
-  name,
-  label,
-  stateName,
-  required,
-  isBrazil,
-  placeholder,
-}: CityFormFieldProps) {
-  const { control, watch } = useFormContext();
-  const selectedState = watch(stateName);
-
-  const [cities, setCities] = useState<City[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!isBrazil) {
-      setCities([]);
-      return;
-    }
-    if (!selectedState) {
-      setCities([]);
-      return;
-    }
-
-    async function fetchCities() {
-      setLoading(true);
-      try {
-        const ufResponse = await fetch(
-          `https://servicodados.ibge.gov.br/api/v1/localidades/estados`
-        );
-        const estados = await ufResponse.json();
-        const estadoSelecionado = estados.find(
-          (e: { sigla: string }) => e.sigla === selectedState
-        );
-
-        if (!estadoSelecionado) {
-          setCities([]);
-          setLoading(false);
-          return;
-        }
-
-        const response = await fetch(
-          `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${estadoSelecionado.id}/municipios`
-        );
-        const data = await response.json();
-
-        setCities(data);
-      } catch (error) {
-        setCities([]);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchCities();
-  }, [selectedState, isBrazil]);
-
-  return (
-    <>
-      {isBrazil && cities.length > 0 ? (
-        <Controller
-          name={name}
-          control={control}
-          rules={{ required }}
-          render={({ field }) => (
-            <SelectFormField
-              label={label}
-              required={required}
-              {...field}
-              options={cities.map((city) => ({
-                value: city.nome,
-                label: city.nome,
-              }))}
-              placeholder={
-                loading
-                  ? "Carregando cidades..."
-                  : placeholder || "Selecione a cidade"
-              }
-            />
-          )}
-        />
-      ) : (
-        <TextFormField
-          name={name}
-          required={required}
-          placeholder={placeholder}
-          label={label}
-        />
-      )}
-    </>
-  );
-}
+import { useEffect, useState } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { SelectFormField } from "../SelectFormField";
+import { TextFormField } from "../TextFormField";
+
+type CityFormFieldProps = {
+  name: string;
+  label: string;
+  stateName: string;
+  required?: boolean;
+  isBrazil: boolean;
+  placeholder?: string;
+};
+
+type City = {
+  id: number;
+  nome: string;
+};
+
+export function CityFormField({
+  name,
+  label,
+  stateName,
+  required,
+  isBrazil,
+  placeholder,
+}: CityFormFieldProps) {
+  const { control, watch } = useFormContext();
+  const selectedState = watch(stateName);
+
+  const [cities, setCities] = useState<City[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isBrazil) {
+      setCities([]);
+      return;
+    }
+    if (!selectedState) {
+      setCities([]);
+      return;
+    }
+
+    async function fetchCities() {
+      setLoading(true);
+      try {
+        const ufResponse = await fetch(
+          `https://servicodados.ibge.gov.br/api/v1/localidades/estados`
+        );
+        const estados = await ufResponse.json();
+        const estadoSelecionado = estados.find(
+          (e: { sigla: string }) => e.sigla === selectedState
+        );
+
+        if (!estadoSelecionado) {
+          setCities([]);
+          setLoading(false);
+          return;
+        }
+
+        const response = await fetch(
+          `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${estadoSelecionado.id}/municipios`
+        );
+        const data = await response.json();
+
+        setCities(data);
+      } catch (error) {
+        setCities([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchCities();
+  }, [selectedState, isBrazil]);
+
+  return (
+    <>
+      {isBrazil && cities.length > 0 ? (
+        <Controller
+          name={name}
+          control={control}
+          rules={{ required }}
+          render={({ field }) => (
+            <SelectFormField
+              label={label}
+              required={required}
+              {...field}
+              options={cities.map((city) => ({
+                value: city.nome,
+                label: city.nome,
+              }))}
+              placeholder={
+                loading
+                  ? "Carregando cidades..."
+                  : placeholder || "Selecione a cidade"
+              }
+            />
+          )}
+        />
+      ) : (
+        <TextFormField
+          name={name}
+          required={required}
+          placeholder={placeholder}
+          label={label}
+        />
+      )}
+    </>
+  );
+}

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

@@ -1,33 +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>
-  );
-}
+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

@@ -1,39 +1,39 @@
-import { useController, useFormContext } from "react-hook-form";
-import { TextFormField } from "../TextFormField";
-
-export const PostalCodeFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  validationErrorMessage,
-  onChange,
-}: {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  validationErrorMessage: string;
-  onChange?: (cep: string) => void;
-}) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={placeholder || "00000-000"}
-      mask={{
-        mask: "_____-___",
-        replacement: { _: /[0-9]/ },
-      }}
-      onChange={(e) => onChange?.(e.target.value)}
-      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
-        );
-      }}
-    />
-  );
-};
+import { useController, useFormContext } from "react-hook-form";
+import { TextFormField } from "../TextFormField";
+
+export const PostalCodeFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+  onChange,
+}: {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+  onChange?: (cep: string) => void;
+}) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "00000-000"}
+      mask={{
+        mask: "_____-___",
+        replacement: { _: /[0-9]/ },
+      }}
+      onChange={(e) => onChange?.(e.target.value)}
+      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

@@ -1,32 +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} />
-      )}
-    </>
-  );
-}
+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} />
+      )}
+    </>
+  );
+}