@lets-events/react 11.6.1 → 11.6.2

package/src/components/FormFields/CPFFormField.tsx

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

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

package/src/components/FormFields/Form.tsx

@@ -1,29 +1,29 @@
-import { JSX } from "react";
-import {
-  FormProvider,
-  useForm,
-  SubmitHandler,
-  FieldValues,
-  UseFormProps,
-} from "react-hook-form";
-
-export type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
-  onSubmit: SubmitHandler<T>;
-  children: JSX.Element;
-  methods?: ReturnType<typeof useForm<T>>;
-};
-
-export const Form = <T extends FieldValues = FieldValues>({
-  onSubmit,
-  children,
-  methods,
-  ...props
-}: FormProps<T>) => {
-  const formMethods = methods || useForm<T>(props);
-
-  return (
-    <FormProvider {...formMethods}>
-      <form onSubmit={formMethods.handleSubmit(onSubmit)}>{children}</form>
-    </FormProvider>
-  );
-};
+import { JSX } from "react";
+import {
+  FormProvider,
+  useForm,
+  SubmitHandler,
+  FieldValues,
+  UseFormProps,
+} from "react-hook-form";
+
+export type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
+  onSubmit: SubmitHandler<T>;
+  children: JSX.Element;
+  methods?: ReturnType<typeof useForm<T>>;
+};
+
+export const Form = <T extends FieldValues = FieldValues>({
+  onSubmit,
+  children,
+  methods,
+  ...props
+}: FormProps<T>) => {
+  const formMethods = methods || useForm<T>(props);
+
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={formMethods.handleSubmit(onSubmit)}>{children}</form>
+    </FormProvider>
+  );
+};

package/src/components/FormFields/FormLabel.tsx

@@ -1,29 +1,29 @@
-import { Text } from "../Text";
-
-export type FormLabelProps = {
-  name: string;
-  label?: string;
-  haveError?: boolean;
-  required?: boolean;
-};
-
-export const FormLabel = ({
-  name,
-  label,
-  haveError,
-  required,
-}: FormLabelProps) => {
-  if (!label) return null;
-
-  return (
-    <Text
-      typography={"labelMedium"}
-      fontWeight={"medium"}
-      color={haveError ? "error600" : "dark700"}
-      id={`${name}-label`}
-    >
-      {label}
-      {!required && <Text color="dark500"> (opcional)</Text>}
-    </Text>
-  );
-};
+import { Text } from "../Text";
+
+export type FormLabelProps = {
+  name: string;
+  label?: string;
+  haveError?: boolean;
+  required?: boolean;
+};
+
+export const FormLabel = ({
+  name,
+  label,
+  haveError,
+  required,
+}: FormLabelProps) => {
+  if (!label) return null;
+
+  return (
+    <Text
+      typography={"labelMedium"}
+      fontWeight={"medium"}
+      color={haveError ? "error600" : "dark700"}
+      id={`${name}-label`}
+    >
+      {label}
+      {!required && <Text color="dark500"> (opcional)</Text>}
+    </Text>
+  );
+};

package/src/components/FormFields/IdentityDocumentNumberFormField.tsx

@@ -1,42 +1,42 @@
-import { TextFormField } from "./TextFormField";
-
-type IdentityDocumentNumberFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  validationErrorMessage: string;
-};
-
-const isValidRG = (rg: string): boolean => {
-  const cleaned = rg.replace(/[^\d]/g, "");
-  return /^\d{9}$/.test(cleaned);
-};
-
-export const IdentityDocumentNumberFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  validationErrorMessage,
-}: IdentityDocumentNumberFormFieldProps) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={placeholder || "__.___.___-_"}
-      mask={{
-        mask: "__.___.___-_",
-        replacement: { _: /[0-9]/ },
-      }}
-      validation={{
-        validate: (value: string) => {
-          const isEmpty = value.replace(/[^\d]/g, "").length === 0;
-          if (!required && isEmpty) return true;
-          return isValidRG(value) || validationErrorMessage;
-        },
-      }}
-    />
-  );
-};
+import { TextFormField } from "./TextFormField";
+
+type IdentityDocumentNumberFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+};
+
+const isValidRG = (rg: string): boolean => {
+  const cleaned = rg.replace(/[^\d]/g, "");
+  return /^\d{9}$/.test(cleaned);
+};
+
+export const IdentityDocumentNumberFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+}: IdentityDocumentNumberFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "__.___.___-_"}
+      mask={{
+        mask: "__.___.___-_",
+        replacement: { _: /[0-9]/ },
+      }}
+      validation={{
+        validate: (value: string) => {
+          const isEmpty = value.replace(/[^\d]/g, "").length === 0;
+          if (!required && isEmpty) return true;
+          return isValidRG(value) || validationErrorMessage;
+        },
+      }}
+    />
+  );
+};