@lets-events/react 11.5.3 → 11.6.0

package/src/components/FormFields/SelectFormField.tsx

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

package/src/components/FormFields/TextAreaFormField.tsx

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

package/src/components/FormFields/TextFormField.tsx

@@ -1,46 +1,76 @@
-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";
+import { MaskOptions } from "@react-input/mask";
+import { getNestedValue } from "../../utils/getNestedValue";
+
+export type TextFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  mask?: MaskOptions;
+  validation?: {
+    validate?: (value: string) => boolean | string;
+  };
+  validationErrorMessage?: string;
+  disabled?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+};
+
+export const TextFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  mask,
+  validation,
+  validationErrorMessage = "Este campo é obrigatório.",
+  disabled = false,
+  value,
+  onChange,
+}: TextFormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const validationRules = {
+    required: required ? validationErrorMessage : false,
+    ...validation,
+  };
+
+  const { ref, ...restFieldProps } = register(name, validationRules);
+  const fieldError = getNestedValue(errors, name);
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+  return (
+    <Flex direction="column">
+      {label && (
+        <FormLabel
+          name={name}
+          label={label}
+          required={required}
+          haveError={haveError}
+        />
+      )}
+
+      <TextField
+        mask={mask}
+        placeholder={placeholder}
+        disabled={disabled}
+        color={haveError ? "error" : "default"}
+        aria-labelledby={`${name}-label`}
+        {...restFieldProps}
+        ref={ref}
+        onChange={onChange}
+        value={value}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/Grid.tsx

@@ -1,138 +1,138 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles'
-import { Grid as GridRadix } from "@radix-ui/themes";
-export const GridStyled = styled(GridRadix, {
-  display: 'grid',
-  variants: {
-    display: {
-      'grid': { display: 'grid' },
-      'inline-grid': { display: 'inline-grid' },
-    },
-    align: {
-      start: { alignItems: 'start' },
-      center: { alignItems: 'center' },
-      end: { alignItems: 'end' },
-      stretch: { alignItems: 'stretch' },
-    },
-    justify: {
-      start: { justifyContent: 'start' },
-      center: { justifyContent: 'center' },
-      end: { justifyContent: 'end' },
-      between: { justifyContent: 'space-between' },
-    },
-    flow: {
-      row: { gridAutoFlow: 'row' },
-      column: { gridAutoFlow: 'column' },
-      'row-dense': { gridAutoFlow: 'row dense' },
-      'column-dense': { gridAutoFlow: 'column dense' },
-    },
-    columns: {
-      1: { gridTemplateColumns: 'repeat(1, 1fr)' },
-      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
-      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
-      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
-      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
-      12: { gridTemplateColumns: 'repeat(12, 1fr)' },
-    },
-    rows: {
-      1: { gridTemplateRows: 'repeat(1, 1fr)' },
-      2: { gridTemplateRows: 'repeat(2, 1fr)' },
-      3: { gridTemplateRows: 'repeat(3, 1fr)' },
-      4: { gridTemplateRows: 'repeat(4, 1fr)' },
-      5: { gridTemplateRows: 'repeat(5, 1fr)' },
-      6: { gridTemplateRows: 'repeat(6, 1fr)' },
-      7: { gridTemplateRows: 'repeat(7, 1fr)' },
-      8: { gridTemplateRows: 'repeat(8, 1fr)' },
-      9: { gridTemplateRows: 'repeat(9, 1fr)' },
-      10: { gridTemplateRows: 'repeat(10, 1fr)' },
-      11: { gridTemplateRows: 'repeat(11, 1fr)' },
-      12: { gridTemplateRows: 'repeat(12, 1fr)' },
-      auto: { gridTemplateRows: 'auto' },
-    },
-    gap: {
-      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' },
-    },
-    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' },
-    },
-  },
-  defaultVariants: {
-    gap: 10,
-  }
-
-})
-
-export type GridProps = ComponentProps<typeof GridStyled> & {
-  as?: ElementType
-  children: React.ReactNode,
-  areas?: string
-}
-
-
-export function Grid({ children, ...props }: GridProps) {
-  return (
-    <GridStyled {...props}>
-      {children}
-    </GridStyled>
-  )
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles'
+import { Grid as GridRadix } from "@radix-ui/themes";
+export const GridStyled = styled(GridRadix, {
+  display: 'grid',
+  variants: {
+    display: {
+      'grid': { display: 'grid' },
+      'inline-grid': { display: 'inline-grid' },
+    },
+    align: {
+      start: { alignItems: 'start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'end' },
+      stretch: { alignItems: 'stretch' },
+    },
+    justify: {
+      start: { justifyContent: 'start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'end' },
+      between: { justifyContent: 'space-between' },
+    },
+    flow: {
+      row: { gridAutoFlow: 'row' },
+      column: { gridAutoFlow: 'column' },
+      'row-dense': { gridAutoFlow: 'row dense' },
+      'column-dense': { gridAutoFlow: 'column dense' },
+    },
+    columns: {
+      1: { gridTemplateColumns: 'repeat(1, 1fr)' },
+      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
+      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
+      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
+      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
+      12: { gridTemplateColumns: 'repeat(12, 1fr)' },
+    },
+    rows: {
+      1: { gridTemplateRows: 'repeat(1, 1fr)' },
+      2: { gridTemplateRows: 'repeat(2, 1fr)' },
+      3: { gridTemplateRows: 'repeat(3, 1fr)' },
+      4: { gridTemplateRows: 'repeat(4, 1fr)' },
+      5: { gridTemplateRows: 'repeat(5, 1fr)' },
+      6: { gridTemplateRows: 'repeat(6, 1fr)' },
+      7: { gridTemplateRows: 'repeat(7, 1fr)' },
+      8: { gridTemplateRows: 'repeat(8, 1fr)' },
+      9: { gridTemplateRows: 'repeat(9, 1fr)' },
+      10: { gridTemplateRows: 'repeat(10, 1fr)' },
+      11: { gridTemplateRows: 'repeat(11, 1fr)' },
+      12: { gridTemplateRows: 'repeat(12, 1fr)' },
+      auto: { gridTemplateRows: 'auto' },
+    },
+    gap: {
+      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' },
+    },
+    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' },
+    },
+  },
+  defaultVariants: {
+    gap: 10,
+  }
+
+})
+
+export type GridProps = ComponentProps<typeof GridStyled> & {
+  as?: ElementType
+  children: React.ReactNode,
+  areas?: string
+}
+
+
+export function Grid({ children, ...props }: GridProps) {
+  return (
+    <GridStyled {...props}>
+      {children}
+    </GridStyled>
+  )
 }