@lets-events/react 11.0.6 → 11.1.0

package/dist/index.mjs

@@ -2537,14 +2537,14 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
     color: {
       default: {
         color: "$dark400",
-        border: "1px solid $dark200",
+        border: "1px solid $dark300",
         "&:has(input:focus)": {
           border: "2px solid $brand300"
         },
         "&:has(input:disabled)": {
           backgroundColor: "$dark100",
           color: "$dark400",
-          border: "1px solid $dark200",
+          border: "1px solid $dark300",
           cursor: "not-allowed"
         }
       },
@@ -8696,7 +8696,6 @@ var TextareaContainer = styled("div", {
   overflow: "hidden",
   width: "100%",
   border: "1px solid",
-  borderColor: "$dark300",
   borderRadius: "$sm",
   "&:has(textarea:focus)": {
     border: "1px solid $brand300"
@@ -8706,6 +8705,19 @@ var TextareaContainer = styled("div", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300"
+      },
+      error: {
+        borderColor: "$error400"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default"
   }
 });
 var TextareaLimitIndicator = styled("div", {
@@ -8723,7 +8735,7 @@ var TextareaLimitIndicator = styled("div", {
   }
 });
 var TextareaField = React6.forwardRef((_a, fowardedRef) => {
-  var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
+  var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
   const inputRef = useRef3(null);
   const badgeRef = useRef3(null);
   const updateCharCountBadge = () => {
@@ -8737,7 +8749,7 @@ var TextareaField = React6.forwardRef((_a, fowardedRef) => {
     updateCharCountBadge();
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ jsxs8(TextareaContainer, { children: [
+  return /* @__PURE__ */ jsxs8(TextareaContainer, { color, children: [
     /* @__PURE__ */ jsx20(
       TextareaFieldStyle,
       __spreadValues({
@@ -9211,6 +9223,121 @@ function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx26(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
+
+// src/components/FormFields/ErrorFormMessage.tsx
+import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+var ErrorFormMessage = ({ message: message2 }) => {
+  if (!message2) return;
+  if (typeof message2 !== "string") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs12(Flex2, { justify: "start", align: "center", gap: 6, children: [
+    /* @__PURE__ */ jsx27(FontAwesomeIcon2, { icon: faXmarkCircle, color: colors.error600, size: "1x" }),
+    /* @__PURE__ */ jsx27(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
+  ] });
+};
+
+// src/components/FormFields/FormLabel.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+var FormLabel = ({
+  name,
+  label,
+  haveError,
+  required
+}) => {
+  if (!label) return null;
+  return /* @__PURE__ */ jsxs13(
+    Text,
+    {
+      typography: "labelMedium",
+      fontWeight: "medium",
+      color: haveError ? "error600" : "dark700",
+      id: `${name}-label`,
+      children: [
+        label,
+        !required && /* @__PURE__ */ jsx28(Text, { color: "dark500", children: " (opcional)" })
+      ]
+    }
+  );
+};
+
+// src/components/FormFields/TextAreaFormField.tsx
+import { useFormContext } from "react-hook-form";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+var TextAreaFormField = ({
+  name,
+  label,
+  required,
+  placeholder
+}) => {
+  var _a;
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext();
+  const haveError = !!errors[name];
+  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  return /* @__PURE__ */ jsxs14(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx29(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      TextareaField,
+      __spreadProps(__spreadValues({}, register(name, { required })), {
+        placeholder,
+        color: haveError ? "error" : "default",
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ jsx29(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
+
+// src/components/FormFields/TextFormField.tsx
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+var TextFormField = ({
+  name,
+  label,
+  required,
+  placeholder
+}) => {
+  var _a;
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext2();
+  const haveError = !!errors[name];
+  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  return /* @__PURE__ */ jsxs15(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx30(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ jsx30(
+      TextField,
+      __spreadProps(__spreadValues({}, register(name, { required })), {
+        placeholder,
+        color: haveError ? "error" : "default",
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ jsx30(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
 export {
   Alert,
   AlertDialogCompleteStyled,
@@ -9240,10 +9367,12 @@ export {
   ContainerStyled,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,
+  ErrorFormMessage,
   Filter,
   FilterItem,
   Flex2 as Flex,
   FlexStyled,
+  FormLabel,
   Grid,
   GridStyled,
   Icon,
@@ -9263,10 +9392,12 @@ export {
   Switch,
   SwitchStyled,
   Text,
+  TextAreaFormField,
   TextField,
   TextFieldSlot,
   TextFieldSlotStyled,
   TextFieldStyled,
+  TextFormField,
   TextStyle,
   TextareaField,
   TextareaFieldStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.0.6",
+  "version": "11.1.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -36,7 +36,10 @@
     "@radix-ui/themes": "^3.2.1",
     "@react-input/mask": "^2.0.4",
     "@stitches/react": "^1.2.8",
+    "install": "^0.13.0",
+    "npm": "^11.4.2",
     "radix-ui": "^1.4.2",
-    "react-day-picker": "^9.6.7"
+    "react-day-picker": "^9.6.7",
+    "react-hook-form": "^7.57.0"
   }
 }

package/src/components/FormFields/ErrorFormMessage.tsx

@@ -0,0 +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;
+
+  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/FormLabel.tsx

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

package/src/components/FormFields/TextAreaFormField.tsx

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

package/src/components/FormFields/TextFormField.tsx

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

package/src/components/TextField.tsx

@@ -45,14 +45,14 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     color: {
       default: {
         color: "$dark400",
-        border: "1px solid $dark200",
+        border: "1px solid $dark300",
         "&:has(input:focus)": {
           border: "2px solid $brand300",
         },
         "&:has(input:disabled)": {
           backgroundColor: "$dark100",
           color: "$dark400",
-          border: "1px solid $dark200",
+          border: "1px solid $dark300",
           cursor: "not-allowed",
         },
       },

package/src/components/TextareaField.tsx

@@ -25,17 +25,12 @@ export const TextareaFieldStyle = styled(TextAreaRadix, {
   },
 });
 
-export type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
-  limit: number;
-};
-
 const TextareaContainer = styled("div", {
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
   width: "100%",
   border: "1px solid",
-  borderColor: "$dark300",
   borderRadius: "$sm",
 
   "&:has(textarea:focus)": {
@@ -47,8 +42,29 @@ const TextareaContainer = styled("div", {
     border: "1px solid $dark200",
     cursor: "not-allowed",
   },
+
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300",
+      },
+      error: {
+        borderColor: "$error400",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "default",
+  },
 });
 
+export type TextareaFieldProps = Omit<
+  ComponentProps<typeof TextareaFieldStyle>,
+  "color"
+> &
+  ComponentProps<typeof TextareaContainer>;
+
 const TextareaLimitIndicator = styled("div", {
   padding: "$12 $16",
   borderTop: "1px solid $neutral300",
@@ -67,7 +83,7 @@ const TextareaLimitIndicator = styled("div", {
 export const TextareaField = React.forwardRef<
   HTMLTextAreaElement,
   TextareaFieldProps
->(({ maxLength, ...props }, fowardedRef) => {
+>(({ maxLength, color, ...props }, fowardedRef) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const badgeRef = useRef<HTMLSpanElement>(null);
 
@@ -83,7 +99,7 @@ export const TextareaField = React.forwardRef<
   };
 
   return (
-    <TextareaContainer>
+    <TextareaContainer color={color}>
       <TextareaFieldStyle
         rows={4}
         ref={(r) => {

package/src/index.tsx

@@ -31,3 +31,10 @@ export * from './components/Box'
 export * from './components/Grid'
 export * from './components/Container'
 export * from './components/Section'
+
+
+//Form
+export * from './components/FormFields/ErrorFormMessage'
+export * from './components/FormFields/FormLabel'
+export * from './components/FormFields/TextAreaFormField'
+export * from './components/FormFields/TextFormField'