@lets-events/react 12.2.10 → 12.2.11

package/src/components/FormFields/TimePickerFormField.tsx

@@ -1,88 +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" style={{ flex: "1" }}>
-      {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>
-  );
-};
+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" style={{ flex: "1" }}>
+      {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;
+  };

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>
+  )
 }