@lets-events/react 12.2.1 → 12.2.3

package/src/components/FormFields/IdentityDocumentNumberFormField.tsx

@@ -1,32 +1,32 @@
-import { TextFormField } from "./TextFormField";
-
-type IdentityDocumentNumberFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  validationErrorMessage: string;
-};
-
-export const IdentityDocumentNumberFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  validationErrorMessage,
-}: IdentityDocumentNumberFormFieldProps) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={placeholder || "__.___.___-_"}
-      validate={(value: string) => {
-        const isEmpty = value.length === 0;
-        if (!required && isEmpty) return true;
-        if (value.length >= 3) return true;
-        return false || validationErrorMessage;
-      }}
-    />
-  );
-};
+import { TextFormField } from "./TextFormField";
+
+type IdentityDocumentNumberFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+};
+
+export const IdentityDocumentNumberFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+}: IdentityDocumentNumberFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "__.___.___-_"}
+      validate={(value: string) => {
+        const isEmpty = value.length === 0;
+        if (!required && isEmpty) return true;
+        if (value.length >= 3) return true;
+        return false || validationErrorMessage;
+      }}
+    />
+  );
+};

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -1,64 +1,64 @@
-import { useController } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { MultiSelect, MultiSelectProps } from "../MultiSelect";
-
-export type MultiSelectFormFieldProps = MultiSelectProps & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  selectedOrientation?: "row" | "column";
-  zIndex?: string;
-  maxHeight?: string;
-};
-
-export const MultiSelectFormField = ({
-  name,
-  label,
-  required,
-  selectedOrientation = "column",
-  zIndex,
-  maxHeight,
-  ...rest
-}: MultiSelectFormFieldProps) => {
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required,
-    },
-    defaultValue: [],
-  });
-
-  const { value, onChange, ref, onBlur, disabled } = field;
-
-  const haveError = !!fieldState.error;
-
-  const errorMsg = fieldState.error?.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"}
-        selectedOrientation={selectedOrientation}
-        zIndex={zIndex}
-        maxHeight={maxHeight}
-        {...rest}
-      />
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useController } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { MultiSelect, MultiSelectProps } from "../MultiSelect";
+
+export type MultiSelectFormFieldProps = MultiSelectProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  selectedOrientation?: "row" | "column";
+  zIndex?: string;
+  maxHeight?: string;
+};
+
+export const MultiSelectFormField = ({
+  name,
+  label,
+  required,
+  selectedOrientation = "column",
+  zIndex,
+  maxHeight,
+  ...rest
+}: MultiSelectFormFieldProps) => {
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required,
+    },
+    defaultValue: [],
+  });
+
+  const { value, onChange, ref, onBlur, disabled } = field;
+
+  const haveError = !!fieldState.error;
+
+  const errorMsg = fieldState.error?.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"}
+        selectedOrientation={selectedOrientation}
+        zIndex={zIndex}
+        maxHeight={maxHeight}
+        {...rest}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,40 +1,40 @@
-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(13, 14, "Telefone inválido")}
-      valueFormatter={{
-        format(v) {
-          if (!v || v === "") return v;
-          return v.replace(/^\+55/, "");
-        },
-        unformat(v) {
-          if (!v || v === "") return v;
-          return "+55" + v;
-        },
-      }}
-    />
-  );
-};
+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(13, 14, "Telefone inválido")}
+      valueFormatter={{
+        format(v) {
+          if (!v || v === "") return v;
+          return v.replace(/^\+55/, "");
+        },
+        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 "./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>
-  );
-};
+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/RichEditorFormField.tsx

@@ -1,98 +1,98 @@
-import { useController } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { RichEditor, RichEditorProps } from "../RichEditor";
-import { useState } from "react";
-import { Badge } from "../Badge";
-
-export type RichEditorFormFieldProps = Omit<
-  RichEditorProps,
-  "value" | "onChange"
-> & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  validate?: (value: string) => boolean | string;
-  maxLength?: number;
-  validationErrorMessage?: string;
-  uploadConfig: RichEditorProps["uploadConfig"];
-};
-
-export const RichEditorFormField = ({
-  name,
-  label,
-  required,
-  validate,
-  validationErrorMessage = "Este campo é obrigatório.",
-  maxLength,
-  ...props
-}: RichEditorFormFieldProps) => {
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required: required ? validationErrorMessage : false,
-      validate: (value?: string) => {
-        if (
-          value === undefined ||
-          value === null ||
-          (!required && value.trim() === "")
-        )
-          return true;
-        return validate?.(value) ?? true;
-      },
-    },
-    defaultValue: "",
-  });
-  const [caracterQuantity, setCaracterQuantity] = useState(maxLength)
-  const handleCharacterCountChange = (count: number) => {
-    if (maxLength !== undefined) {
-      setCaracterQuantity(Math.max(0, maxLength - count));
-    }
-  };
-  const fieldError = fieldState.error;
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-
-  return (
-    <Flex direction="column">
-      {maxLength ? (
-        <Flex direction="row" justify="between">
-          {label && (
-            <FormLabel
-              name={name}
-              label={label}
-              required={required}
-              haveError={haveError}
-            />
-          )}
-          <Badge color="grey" size="xs">
-            {caracterQuantity}
-          </Badge>
-        </Flex>
-      ) : (
-        <>
-          {label && (
-            <FormLabel
-              name={name}
-              label={label}
-              required={required}
-              haveError={haveError}
-            />
-          )}
-        </>
-      )}
-      <RichEditor
-        {...props}
-        value={field.value}
-        onChange={field.onChange}
-        aria-labelledby={`${name}-label`}
-        onCharacterCountChange={handleCharacterCountChange}
-        maxLength={maxLength}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useController } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { RichEditor, RichEditorProps } from "../RichEditor";
+import { useState } from "react";
+import { Badge } from "../Badge";
+
+export type RichEditorFormFieldProps = Omit<
+  RichEditorProps,
+  "value" | "onChange"
+> & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  validate?: (value: string) => boolean | string;
+  maxLength?: number;
+  validationErrorMessage?: string;
+  uploadConfig: RichEditorProps["uploadConfig"];
+};
+
+export const RichEditorFormField = ({
+  name,
+  label,
+  required,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  maxLength,
+  ...props
+}: RichEditorFormFieldProps) => {
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: (value?: string) => {
+        if (
+          value === undefined ||
+          value === null ||
+          (!required && value.trim() === "")
+        )
+          return true;
+        return validate?.(value) ?? true;
+      },
+    },
+    defaultValue: "",
+  });
+  const [caracterQuantity, setCaracterQuantity] = useState(maxLength)
+  const handleCharacterCountChange = (count: number) => {
+    if (maxLength !== undefined) {
+      setCaracterQuantity(Math.max(0, maxLength - count));
+    }
+  };
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+
+  return (
+    <Flex direction="column">
+      {maxLength ? (
+        <Flex direction="row" justify="between">
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+          <Badge color="grey" size="xs">
+            {caracterQuantity}
+          </Badge>
+        </Flex>
+      ) : (
+        <>
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+        </>
+      )}
+      <RichEditor
+        {...props}
+        value={field.value}
+        onChange={field.onChange}
+        aria-labelledby={`${name}-label`}
+        onCharacterCountChange={handleCharacterCountChange}
+        maxLength={maxLength}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};