@lets-events/react 11.5.0 → 11.5.2

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 = PhoneInputProps & {
-  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 = PhoneInputProps & {
+  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/TextAreaFormField.tsx

@@ -1,46 +1,49 @@
-import { useFormContext } from 'react-hook-form'
-import { Flex } from '../Flex'
-import { FormLabel } from './FormLabel'
-import { ErrorFormMessage } from './ErrorFormMessage'
-import { TextareaField } from '../TextareaField'
-
-export type TextAreaFormFieldProps = {
-  name: string
-  label?: string
-  required?: boolean
-  placeholder?: string
-}
-
-export const TextAreaFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-}: 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
-        {...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 "./FormLabel";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+import { TextareaField, TextareaFieldProps } from "../TextareaField";
+
+export type TextAreaFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  fieldProps?: TextareaFieldProps;
+};
+
+export const TextAreaFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  fieldProps,
+}: 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
+        {...fieldProps}
+        {...register(name, { required })}
+        placeholder={placeholder}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/TextFormField.tsx

@@ -1,46 +1,46 @@
-import { useFormContext } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./FormLabel";
-import { TextField } from "../TextField";
-import { ErrorFormMessage } from "./ErrorFormMessage";
-
-export type TextFormFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  placeholder?: string;
-};
-
-export const TextFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-}: TextFormFieldProps) => {
-  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}
-      />
-      <TextField
-        {...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 "./FormLabel";
+import { TextField } from "../TextField";
+import { ErrorFormMessage } from "./ErrorFormMessage";
+
+export type TextFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+};
+
+export const TextFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+}: TextFormFieldProps) => {
+  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}
+      />
+      <TextField
+        {...register(name, { required })}
+        placeholder={placeholder}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};