@lets-events/react 11.6.4 → 11.7.0

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,130 +1,40 @@
-import { useController, 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 { TextFormField } from "./TextFormField";
+import { minMaxLength } from "./utils/validation";
+
+export type PhoneFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const PhoneFormField = ({
+  name,
+  label,
+  required,
+}: PhoneFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      addon={"+ 55"}
+      mask={{
+        mask: "(__) _____-____}",
+        replacement: { _: /\d/ },
+      }}
+      placeholder="(00) 00000-0000"
+      type="tel"
+      validate={minMaxLength(12, 13, "Telefone inválido")}
+      valueFormatter={{
+        format(v) {
+          if (!v || v === "") return v;
+          return v.replace(/\b55/, "");
+        },
+        unformat(v) {
+          if (!v || v === "") return v;
+          return "55" + v;
+        },
+      }}
+    />
+  );
+};

package/src/components/FormFields/RadioGroupFormField.tsx

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

package/src/components/FormFields/SelectFormField.tsx

@@ -1,93 +1,93 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { DropdownMenu, DropdownMenuItem } from "../Dropdown";
-import { Flex } from "../Flex";
-import { FormLabel } from "./FormLabel";
-import { ErrorFormMessage } from "./ErrorFormMessage";
-import { getNestedValue } from "../../utils/getNestedValue";
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-export type SelectFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  options: Option[];
-  validation?: {
-    validate?: (value: string) => boolean | string;
-  };
-  validationErrorMessage?: string;
-  defaultValue?: string;
-};
-
-export const SelectFormField = ({
-  name,
-  label,
-  required,
-  placeholder = "Selecione",
-  options,
-  validation,
-  validationErrorMessage = "Este campo é obrigatório.",
-  defaultValue,
-}: SelectFormFieldProps) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-
-  const fieldError = getNestedValue(errors, name);
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-  const validationRules = {
-    required: required ? validationErrorMessage : false,
-    ...validation,
-  };
-
-  return (
-    <Flex direction="column">
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-
-      <Controller
-        control={control}
-        name={name}
-        rules={validationRules}
-        defaultValue={defaultValue || ""}
-        render={({ field: { value, onChange } }) => {
-          const selectedOption = options.find((opt) => opt.value === value);
-
-          return (
-            <DropdownMenu
-              placeholder={selectedOption?.label || placeholder}
-              fontWeight="regular"
-              typography="labelLarge"
-              color={haveError ? "error" : "default"}
-            >
-              {options.map((option, index) => (
-                <DropdownMenuItem
-                  key={`${option.value}${index}`}
-                  value={option.value}
-                  onSelect={() => onChange(option.value)}
-                  fontWeight="regular"
-                  typography="labelLarge"
-                >
-                  {option.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenu>
-          );
-        }}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useFormContext, Controller } from "react-hook-form";
+import { DropdownMenu, DropdownMenuItem } from "../Dropdown";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { getNestedValue } from "../../utils/getNestedValue";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+export type SelectFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  options: Option[];
+  validation?: {
+    validate?: (value: string) => boolean | string;
+  };
+  validationErrorMessage?: string;
+  defaultValue?: string;
+};
+
+export const SelectFormField = ({
+  name,
+  label,
+  required,
+  placeholder = "Selecione",
+  options,
+  validation,
+  validationErrorMessage = "Este campo é obrigatório.",
+  defaultValue,
+}: SelectFormFieldProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const fieldError = getNestedValue(errors, name);
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const validationRules = {
+    required: required ? validationErrorMessage : false,
+    ...validation,
+  };
+
+  return (
+    <Flex direction="column">
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+
+      <Controller
+        control={control}
+        name={name}
+        rules={validationRules}
+        defaultValue={defaultValue || ""}
+        render={({ field: { value, onChange } }) => {
+          const selectedOption = options.find((opt) => opt.value === value);
+
+          return (
+            <DropdownMenu
+              placeholder={selectedOption?.label || placeholder}
+              fontWeight="regular"
+              typography="labelLarge"
+              color={haveError ? "error" : "default"}
+            >
+              {options.map((option, index) => (
+                <DropdownMenuItem
+                  key={`${option.value}${index}`}
+                  value={option.value}
+                  onSelect={() => onChange(option.value)}
+                  fontWeight="regular"
+                  typography="labelLarge"
+                >
+                  {option.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenu>
+          );
+        }}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/TextAreaFormField.tsx

@@ -1,48 +1,48 @@
-import { useFormContext } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./FormLabel";
-import { ErrorFormMessage } from "./ErrorFormMessage";
-import { TextareaField, TextareaFieldProps } from "../TextareaField";
-
-export type TextAreaFormFieldProps = TextareaFieldProps & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  placeholder?: string;
-};
-
-export const TextAreaFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  ...props
-}: TextAreaFormFieldProps) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
-
-  const haveError = !!errors[name];
-
-  const errorMsg = errors[name]?.message;
-
-  return (
-    <Flex direction={"column"}>
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-      <TextareaField
-        {...props}
-        {...register(name, { required })}
-        placeholder={placeholder}
-        color={haveError ? "error" : "default"}
-        aria-labelledby={`${name}-label`}
-      />
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useFormContext } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { TextareaField, TextareaFieldProps } from "../TextareaField";
+
+export type TextAreaFormFieldProps = TextareaFieldProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+};
+
+export const TextAreaFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  ...props
+}: TextAreaFormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const haveError = !!errors[name];
+
+  const errorMsg = errors[name]?.message;
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <TextareaField
+        {...props}
+        {...register(name, { required })}
+        placeholder={placeholder}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};