@lets-events/react 11.5.4 → 11.6.1

package/src/components/FormFields/Form.tsx

@@ -1,25 +1,29 @@
-import { JSX } from "react";
-import {
-  FormProvider,
-  useForm,
-  SubmitHandler,
-  FieldValues,
-  UseFormProps,
-} from "react-hook-form";
-
-export type FormProps = UseFormProps & {
-  onSubmit: SubmitHandler<FieldValues>;
-  children: JSX.Element;
-};
-
-export const Form = ({ onSubmit, children, ...props }: FormProps) => {
-  const methods = useForm(props);
-
-  const { handleSubmit } = methods;
-
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={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

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

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -1,59 +1,59 @@
-import { useController, useFormContext } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./FormLabel";
-import { ErrorFormMessage } from "./ErrorFormMessage";
-import { MultiSelect, MultiSelectProps } from "../MultiSelect";
-
-export type MultiSelectFormFieldProps = MultiSelectProps & {
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-export const MultiSelectFormField = ({
-  name,
-  label,
-  required,
-  ...rest
-}: MultiSelectFormFieldProps) => {
-  const {
-    formState: { errors },
-  } = useFormContext();
-
-  const { field } = useController({
-    name,
-    rules: {
-      required
-    },
-    defaultValue: [],
-  });
-
-  const { value, onChange, ref, onBlur, disabled } = field;
-
-  const haveError = !!errors[name];
-
-  const errorMsg = errors[name]?.message;
-
-  const handleChange = (v: any) => {
-    onChange(v);
-  };
-
-  return (
-    <Flex direction={"column"}>
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-      <MultiSelect
-        value={value}
-        onValueChange={handleChange}
-        ref={ref}
-        color={haveError ? "error" : "default"}
-        {...rest}
-      />
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useController, useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./FormLabel";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+import { MultiSelect, MultiSelectProps } from "../MultiSelect";
+
+export type MultiSelectFormFieldProps = MultiSelectProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const MultiSelectFormField = ({
+  name,
+  label,
+  required,
+  ...rest
+}: MultiSelectFormFieldProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext();
+
+  const { field } = useController({
+    name,
+    rules: {
+      required
+    },
+    defaultValue: [],
+  });
+
+  const { value, onChange, ref, onBlur, disabled } = field;
+
+  const haveError = !!errors[name];
+
+  const errorMsg = errors[name]?.message;
+
+  const handleChange = (v: any) => {
+    onChange(v);
+  };
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <MultiSelect
+        value={value}
+        onValueChange={handleChange}
+        ref={ref}
+        color={haveError ? "error" : "default"}
+        {...rest}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,130 +1,130 @@
-import { useFormContext } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./FormLabel";
-import { ErrorFormMessage } from "./ErrorFormMessage";
-// import { PhoneInput, PhoneInputProps } from 'react-international-phone'
-import { styled } from "../../styles";
-import { typographyValues } from "../../types/typographyValues";
-// import 'react-international-phone/style.css'
-
-export type PhoneFormFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  defaultCountry?: string;
-};
-// const PhoneFormInput = styled(PhoneInput, {
-//   $$borderColor: '$colors$neutral300',
-//   boxSizing: 'border-box',
-//   borderRadius: '$sm',
-//   display: 'flex',
-//   flex: 1,
-//   fontFamily: '$default',
-//   color: '$dark500',
-
-//   img: {
-//     width: '$18',
-//     height: '$18',
-//     marginLeft: '$8',
-//   },
-//   ul: {
-//     border: 'none',
-//   },
-//   input: {
-//     height: '$40 !important',
-//     flex: 1,
-//     borderColor: '$$borderColor  !important',
-//     borderTopRightRadius: '$sm !important',
-//     borderBottomRightRadius: '$sm !important',
-//     fontSize: 'inherit !important',
-//     '&:focus': {
-//       $$borderColor: '$colors$brand300',
-//     },
-//   },
-//   button: {
-//     height: '$40 !important',
-//     borderRight: 'none',
-//     borderTopLeftRadius: '$sm !important',
-//     borderBottomLeftRadius: '$sm !important',
-//     borderColor: '$$borderColor  !important',
-//     marginRight: '0 !important',
-//     '&:active': {
-//       $$borderColor: '$colors$brand300',
-//     },
-//     div: {
-//       padding: 'auto $12',
-//       gap: ' $8px',
-//     },
-//   },
-
-//   '&:has(input:disabled)': {
-//     backgroundColor: '$dark100',
-//     color: '$dark400',
-//     $$borderColor: '$colors$dark200',
-//     cursor: 'not-allowed',
-//     img: {
-//       opacity: 0.6,
-//     },
-//     button: {
-//       $$borderColor: '$colors$dark200',
-//     },
-//   },
-//   variants: {
-//     typography: typographyValues,
-//     color: {
-//       default: {
-//         $$borderColor: '$colors$neutral300',
-//       },
-//       error: {
-//         $$borderColor: '$colors$error600',
-//       },
-//     },
-//   },
-//   defaultVariants: {
-//     typography: 'labelSmall',
-//     color: 'default',
-//   },
-// })
-
-export const PhoneFormField = ({
-  name,
-  label,
-  required,
-  defaultCountry = "br",
-  ...props
-}: PhoneFormFieldProps) => {
-  const {
-    register,
-    formState: { errors },
-    setValue,
-    watch,
-  } = useFormContext();
-
-  const haveError = !!errors[name];
-  const errorMsg = errors[name]?.message;
-
-  const handlePhoneChange = (phone: string) => {
-    setValue(name, phone);
-  };
-
-  return (
-    <Flex direction={"column"}>
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-      {/* <PhoneFormInput
-        {...register(name, { required })}
-        defaultCountry={defaultCountry}
-        value={watch(name)}
-        color={haveError ? 'error' : 'default'}
-        onChange={handlePhoneChange}
-        {...props}
-        aria-labelledby={`${name}-label`}
-      /> */}
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./FormLabel";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+// import { PhoneInput, PhoneInputProps } from 'react-international-phone'
+import { styled } from "../../styles";
+import { typographyValues } from "../../types/typographyValues";
+// import 'react-international-phone/style.css'
+
+export type PhoneFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  defaultCountry?: string;
+};
+// const PhoneFormInput = styled(PhoneInput, {
+//   $$borderColor: '$colors$neutral300',
+//   boxSizing: 'border-box',
+//   borderRadius: '$sm',
+//   display: 'flex',
+//   flex: 1,
+//   fontFamily: '$default',
+//   color: '$dark500',
+
+//   img: {
+//     width: '$18',
+//     height: '$18',
+//     marginLeft: '$8',
+//   },
+//   ul: {
+//     border: 'none',
+//   },
+//   input: {
+//     height: '$40 !important',
+//     flex: 1,
+//     borderColor: '$$borderColor  !important',
+//     borderTopRightRadius: '$sm !important',
+//     borderBottomRightRadius: '$sm !important',
+//     fontSize: 'inherit !important',
+//     '&:focus': {
+//       $$borderColor: '$colors$brand300',
+//     },
+//   },
+//   button: {
+//     height: '$40 !important',
+//     borderRight: 'none',
+//     borderTopLeftRadius: '$sm !important',
+//     borderBottomLeftRadius: '$sm !important',
+//     borderColor: '$$borderColor  !important',
+//     marginRight: '0 !important',
+//     '&:active': {
+//       $$borderColor: '$colors$brand300',
+//     },
+//     div: {
+//       padding: 'auto $12',
+//       gap: ' $8px',
+//     },
+//   },
+
+//   '&:has(input:disabled)': {
+//     backgroundColor: '$dark100',
+//     color: '$dark400',
+//     $$borderColor: '$colors$dark200',
+//     cursor: 'not-allowed',
+//     img: {
+//       opacity: 0.6,
+//     },
+//     button: {
+//       $$borderColor: '$colors$dark200',
+//     },
+//   },
+//   variants: {
+//     typography: typographyValues,
+//     color: {
+//       default: {
+//         $$borderColor: '$colors$neutral300',
+//       },
+//       error: {
+//         $$borderColor: '$colors$error600',
+//       },
+//     },
+//   },
+//   defaultVariants: {
+//     typography: 'labelSmall',
+//     color: 'default',
+//   },
+// })
+
+export const PhoneFormField = ({
+  name,
+  label,
+  required,
+  defaultCountry = "br",
+  ...props
+}: PhoneFormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useFormContext();
+
+  const haveError = !!errors[name];
+  const errorMsg = errors[name]?.message;
+
+  const handlePhoneChange = (phone: string) => {
+    setValue(name, phone);
+  };
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      {/* <PhoneFormInput
+        {...register(name, { required })}
+        defaultCountry={defaultCountry}
+        value={watch(name)}
+        color={haveError ? 'error' : 'default'}
+        onChange={handlePhoneChange}
+        {...props}
+        aria-labelledby={`${name}-label`}
+      /> */}
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/RadioGroupFormField.tsx

@@ -0,0 +1,84 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./FormLabel";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+import { RadioGroup, RadioItem } from "../RadioGroup";
+import { getNestedValue } from "../../utils/getNestedValue";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+export type RadioGroupFormFieldProps = {
+  name: string;
+  label: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: string;
+  validationErrorMessage?: string;
+  color?: "blue" | "success" | "error";
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  disabled?: boolean;
+};
+
+export const RadioGroupFormField = ({
+  name,
+  label,
+  options,
+  required,
+  defaultValue,
+  validationErrorMessage = "Este campo é obrigatório.",
+  color = "blue",
+  fontWeight = "regular",
+  disabled = false,
+}: RadioGroupFormFieldProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const fieldError = getNestedValue(errors, name);
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const validationRules = {
+    required: required ? validationErrorMessage : false,
+  };
+
+  return (
+    <Flex direction="column">
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+
+      <Controller
+        name={name}
+        control={control}
+        defaultValue={defaultValue || ""}
+        rules={validationRules}
+        render={({ field: { value, onChange } }) => (
+          <RadioGroup
+            value={value}
+            onValueChange={onChange}
+            color={haveError ? "error" : color}
+            fontWeight={fontWeight}
+            disabled={disabled}
+          >
+            {options.map((option) => (
+              <label key={option.value}>
+                <RadioItem value={option.value} />
+                {option.label}
+              </label>
+            ))}
+          </RadioGroup>
+        )}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};