@lets-events/react 11.8.0 → 12.0.0

package/src/components/FormFields/TextAreaFormField.tsx

@@ -1,48 +1,57 @@
-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>
-  );
-};
+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;
+  validate?: (value: string) => boolean | string;
+  validationErrorMessage?: string;
+};
+
+export const TextAreaFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  ...props
+}: TextAreaFormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const haveError = !!errors[name];
+
+  const errorMsg = errors[name]?.message;
+
+  const validationRules = {
+    required: required ? validationErrorMessage : false,
+    validate: validate,
+  };
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <TextareaField
+        {...props}
+        {...register(name, validationRules)}
+        placeholder={placeholder}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/TextFormField.tsx

@@ -1,112 +1,112 @@
-import {
-  FieldValues,
-  RegisterOptions,
-  useFormContext,
-  Validate,
-  useController,
-} from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { TextField, TextFieldProps } from "../TextField";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { MaskOptions } from "@react-input/mask";
-import { getNestedValue } from "../../utils/getNestedValue";
-import { useCallback, useMemo } from "react";
-import { format, unformat } from "@react-input/mask";
-
-export type TextFormFieldProps = TextFieldProps & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  mask?: MaskOptions;
-  validate?: (value: string) => boolean | string;
-  validationErrorMessage?: string;
-  valueFormatter?: {
-    format: (v: string) => string;
-    unformat: (v: string) => string;
-  };
-};
-
-export const TextFormField = ({
-  name,
-  label,
-  required,
-  mask,
-  validate,
-  validationErrorMessage = "Este campo é obrigatório.",
-  onChange,
-  valueFormatter,
-  ...inputProps
-}: TextFormFieldProps) => {
-  const handleValidate = useCallback(
-    (value?: string) => {
-      if (
-        value === undefined ||
-        value === null ||
-        (!required && value.trim() === "")
-      )
-        return true;
-      return validate?.(value) ?? true;
-    },
-    [validate, required]
-  );
-
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required: required ? validationErrorMessage : false,
-      validate: handleValidate,
-      onChange,
-    },
-    defaultValue: "",
-  });
-
-  const fieldError = fieldState.error;
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-  const { value: formValue, onChange: formChange } = field;
-
-  const formattedValue = useMemo(() => {
-    let value = formValue;
-
-    if (valueFormatter) value = valueFormatter.format(value);
-    if (mask) value = format(value ?? "", mask as any);
-
-    return value;
-  }, [formValue, valueFormatter, mask]);
-
-  const handleChange = (e: any) => {
-    let value = e.target.value;
-
-    if (mask) value = unformat(value, mask as any);
-    if (valueFormatter) value = valueFormatter.unformat(value);
-
-    formChange(value);
-  };
-
-  return (
-    <Flex direction="column">
-      {label && (
-        <FormLabel
-          name={name}
-          label={label}
-          required={required}
-          haveError={haveError}
-        />
-      )}
-
-      <TextField
-        mask={mask}
-        color={haveError ? "error" : "default"}
-        aria-labelledby={`${name}-label`}
-        {...inputProps}
-        {...field}
-        onChange={handleChange}
-        value={formattedValue}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import {
+  FieldValues,
+  RegisterOptions,
+  useFormContext,
+  Validate,
+  useController,
+} from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { TextField, TextFieldProps } from "../TextField";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { MaskOptions } from "@react-input/mask";
+import { getNestedValue } from "../../utils/getNestedValue";
+import { useCallback, useMemo } from "react";
+import { format, unformat } from "@react-input/mask";
+
+export type TextFormFieldProps = TextFieldProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  mask?: MaskOptions;
+  validate?: (value: string) => boolean | string;
+  validationErrorMessage?: string;
+  valueFormatter?: {
+    format: (v: string) => string;
+    unformat: (v: string) => string;
+  };
+};
+
+export const TextFormField = ({
+  name,
+  label,
+  required,
+  mask,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  onChange,
+  valueFormatter,
+  ...inputProps
+}: TextFormFieldProps) => {
+  const handleValidate = useCallback(
+    (value?: string) => {
+      if (
+        value === undefined ||
+        value === null ||
+        (!required && value.trim() === "")
+      )
+        return true;
+      return validate?.(value) ?? true;
+    },
+    [validate, required]
+  );
+
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate,
+      onChange,
+    },
+    defaultValue: "",
+  });
+
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const { value: formValue, onChange: formChange } = field;
+
+  const formattedValue = useMemo(() => {
+    let value = formValue;
+
+    if (valueFormatter) value = valueFormatter.format(value);
+    if (mask) value = format(value ?? "", mask as any);
+
+    return value;
+  }, [formValue, valueFormatter, mask]);
+
+  const handleChange = (e: any) => {
+    let value = e.target.value;
+
+    if (mask) value = unformat(value, mask as any);
+    if (valueFormatter) value = valueFormatter.unformat(value);
+
+    formChange(value);
+  };
+
+  return (
+    <Flex direction="column">
+      {label && (
+        <FormLabel
+          name={name}
+          label={label}
+          required={required}
+          haveError={haveError}
+        />
+      )}
+
+      <TextField
+        mask={mask}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+        {...inputProps}
+        {...field}
+        onChange={handleChange}
+        value={formattedValue}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/TimePickerFormField.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { TimePicker, TimePickerProps } from "../TimePicker";
+import { useCallback } from "react";
+
+export type TimePickerFormFieldProps = Omit<
+  TimePickerProps,
+  "selected" | "setSelected"
+> & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  validate?: (value: string | undefined) => boolean | string;
+  validationErrorMessage?: string;
+  rules?: Omit<
+    RegisterOptions<FieldValues, string>,
+    "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+  >;
+};
+
+export const TimePickerFormField = ({
+  name,
+  label,
+  required,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  rules,
+  ...timePickerProps
+}: TimePickerFormFieldProps) => {
+  const handleValidate = useCallback(
+    (value?: string) => {
+      if (value === undefined || value === null || value === "") {
+        if (required) return validationErrorMessage;
+        return true;
+      }
+      return validate?.(value) ?? true;
+    },
+    [validate, required, validationErrorMessage]
+  );
+
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate,
+      ...rules,
+    },
+    defaultValue: undefined,
+  });
+
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+  const { value: selected, onChange: setSelected } = field;
+
+  const handleTimePickerChange = (time: string | undefined) => {
+    setSelected(time);
+  };
+
+  return (
+    <Flex direction="column">
+      {label && (
+        <FormLabel
+          name={name}
+          label={label}
+          required={required}
+          haveError={haveError}
+        />
+      )}
+
+      <TimePicker
+        selected={selected}
+        setSelected={(value) => {
+          const time = typeof value === "function" ? value(selected) : value;
+          handleTimePickerChange(time);
+        }}
+        hasError={haveError}
+        {...timePickerProps}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/subComponents/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/subComponents/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/utils/validation.ts

@@ -1,23 +1,23 @@
-const isValidEmail = (email: string) => {
-  const emailRexep =
-    /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
-  return emailRexep.test(email);
-};
-
-export const validateEmail = (errorMsg: string) => (value: string) => {
-  return !isValidEmail(value) ? errorMsg : true;
-};
-
-export const maxLength = (max: number, errorMsg: string) => (value: string) => {
-  return value.length > max ? errorMsg : true;
-};
-
-export const minLength = (min: number, errorMsg: string) => (value: string) => {
-  return value.length < min ? errorMsg : true;
-};
-
-export const minMaxLength =
-  (min: number, max: number, errorMsg: string) => (value: string) => {
-    var length = value.length;
-    return length > max || length < min ? errorMsg : true;
-  };
+const isValidEmail = (email: string) => {
+  const emailRexep =
+    /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+  return emailRexep.test(email);
+};
+
+export const validateEmail = (errorMsg: string) => (value: string) => {
+  return !isValidEmail(value) ? errorMsg : true;
+};
+
+export const maxLength = (max: number, errorMsg: string) => (value: string) => {
+  return value.length > max ? errorMsg : true;
+};
+
+export const minLength = (min: number, errorMsg: string) => (value: string) => {
+  return value.length < min ? errorMsg : true;
+};
+
+export const minMaxLength =
+  (min: number, max: number, errorMsg: string) => (value: string) => {
+    var length = value.length;
+    return length > max || length < min ? errorMsg : true;
+  };