@lets-events/react 11.4.1 → 11.5.0

package/src/components/Flex.tsx

@@ -1,119 +1,119 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles'
-import { Flex as FlexRadix } from "@radix-ui/themes";
-export const FlexStyled = styled(FlexRadix, {
-  variants: {
-    display: {
-      'flex': { display: 'flex' },
-      'inline-flex': { display: 'inline-flex' }
-    },
-    align: {
-      start: { alignItems: 'flex-start' },
-      center: { alignItems: 'center' },
-      end: { alignItems: 'flex-end' },
-      stretch: { alignItems: 'stretch' },
-      baseline: { alignItems: 'baseline' },
-    },
-    justify: {
-      start: { justifyContent: 'flex-start' },
-      center: { justifyContent: 'center' },
-      end: { justifyContent: 'flex-end' },
-      between: { justifyContent: 'space-between' },
-      around: { justifyContent: 'space-around' },
-      evenly: { justifyContent: 'space-evenly' },
-    },
-    direction: {
-      row: { flexDirection: 'row' },
-      column: { flexDirection: 'column' },
-      'row-reverse': { flexDirection: 'row-reverse' },
-      'column-reverse': { flexDirection: 'column-reverse' },
-    },
-    gap: {
-      0: { gap: '0px' },
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapY: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapX: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    }
-  },
-  defaultVariants: {
-    display: 'flex',
-    direction: 'row',
-    gap: 10,
-  }
-
-})
-
-export type FlexProps = ComponentProps<typeof FlexStyled> & {
-  as?: ElementType,
-  children: React.ReactNode
-}
-
-
-export function Flex({ children, ...props }: FlexProps) {
-  return (
-    <FlexStyled {...props}>
-      {children}
-    </FlexStyled>
-  )
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles'
+import { Flex as FlexRadix } from "@radix-ui/themes";
+export const FlexStyled = styled(FlexRadix, {
+  variants: {
+    display: {
+      'flex': { display: 'flex' },
+      'inline-flex': { display: 'inline-flex' }
+    },
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+      evenly: { justifyContent: 'space-evenly' },
+    },
+    direction: {
+      row: { flexDirection: 'row' },
+      column: { flexDirection: 'column' },
+      'row-reverse': { flexDirection: 'row-reverse' },
+      'column-reverse': { flexDirection: 'column-reverse' },
+    },
+    gap: {
+      0: { gap: '0px' },
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    }
+  },
+  defaultVariants: {
+    display: 'flex',
+    direction: 'row',
+    gap: 10,
+  }
+
+})
+
+export type FlexProps = ComponentProps<typeof FlexStyled> & {
+  as?: ElementType,
+  children: React.ReactNode
+}
+
+
+export function Flex({ children, ...props }: FlexProps) {
+  return (
+    <FlexStyled {...props}>
+      {children}
+    </FlexStyled>
+  )
 }

package/src/components/FormFields/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/Form.tsx

@@ -1,25 +1,25 @@
-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 = 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>
+  );
+};

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/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

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