@lets-events/react 12.10.17 → 12.11.1

package/src/components/FormFields/RichEditorFormField.tsx

@@ -1,128 +1,128 @@
-import { useController } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { RichEditor, RichEditorProps } from "../RichEditor";
-import { useEffect, useState } from "react";
-import { Badge } from "../Badge";
-import { RichEditorElement } from "../RichEditor/types";
-
-const getPlainTextLengthFromHtml = (html: string) => {
-  if (!html.trim()) return 0;
-
-  if (typeof document === "undefined") {
-    return html.replace(/<[^>]*>/g, "").trim().length;
-  }
-
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  return doc.body.textContent?.trim().length ?? 0;
-};
-
-const getRemainingCharacters = (maxLength: number | undefined, value?: string) => {
-  if (maxLength === undefined) return maxLength;
-  return Math.max(0, maxLength - getPlainTextLengthFromHtml(value ?? ""));
-};
-export type RichEditorFormFieldProps = Omit<
-  RichEditorProps,
-  "value" | "onChange"
-> & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  validate?: (value: string) => boolean | string;
-  maxLength?: number;
-  validationErrorMessage?: string;
-  simpleVersion?: boolean;
-  uploadConfig?: RichEditorProps["uploadConfig"];
-  disableVideo?: boolean
-  richEditorElements?: RichEditorElement[];
-};
-
-export const RichEditorFormField = ({
-  name,
-  label,
-  required,
-  validate,
-  validationErrorMessage = "Este campo é obrigatório.",
-  maxLength,
-  simpleVersion = false,
-  disableVideo = false,
-  richEditorElements,
-  ...props
-}: RichEditorFormFieldProps) => {
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required: required ? validationErrorMessage : false,
-      validate: (value?: string) => {
-        if (
-          value === undefined ||
-          value === null ||
-          (!required && value.trim() === "")
-        )
-          return true;
-        return validate?.(value) ?? true;
-      },
-    },
-  });
-  const [caracterQuantity, setCaracterQuantity] = useState(() =>
-    getRemainingCharacters(maxLength, field.value),
-  );
-
-  const handleCharacterCountChange = (count: number) => {
-    if (maxLength !== undefined) {
-      setCaracterQuantity(Math.max(0, maxLength - count));
-    }
-  };
-
-  useEffect(() => {
-    setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
-  }, [field.value, maxLength]);
-  const fieldError = fieldState.error;
-  const haveError = !!fieldError;
-  const errorMsg = fieldError?.message;
-
-
-  return (
-    <Flex direction="column">
-      {maxLength ? (
-        <Flex direction="row" justify="between">
-          {label && (
-            <FormLabel
-              name={name}
-              label={label}
-              required={required}
-              haveError={haveError}
-            />
-          )}
-          <Badge color="grey" size="xs">
-            {caracterQuantity}
-          </Badge>
-        </Flex>
-      ) : (
-        <>
-          {label && (
-            <FormLabel
-              name={name}
-              label={label}
-              required={required}
-              haveError={haveError}
-            />
-          )}
-        </>
-      )}
-      <RichEditor
-        {...props}
-        value={field.value}
-        onChange={field.onChange}
-        aria-labelledby={`${name}-label`}
-        onCharacterCountChange={handleCharacterCountChange}
-        maxLength={maxLength}
-        disableVideo={disableVideo}
-        simpleVersion={simpleVersion}
-        richEditorElements={richEditorElements}
-      />
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useController } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { RichEditor, RichEditorProps } from "../RichEditor";
+import { useEffect, useState } from "react";
+import { Badge } from "../Badge";
+import { RichEditorElement } from "../RichEditor/types";
+
+const getPlainTextLengthFromHtml = (html: string) => {
+  if (!html.trim()) return 0;
+
+  if (typeof document === "undefined") {
+    return html.replace(/<[^>]*>/g, "").trim().length;
+  }
+
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.body.textContent?.trim().length ?? 0;
+};
+
+const getRemainingCharacters = (maxLength: number | undefined, value?: string) => {
+  if (maxLength === undefined) return maxLength;
+  return Math.max(0, maxLength - getPlainTextLengthFromHtml(value ?? ""));
+};
+export type RichEditorFormFieldProps = Omit<
+  RichEditorProps,
+  "value" | "onChange"
+> & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  validate?: (value: string) => boolean | string;
+  maxLength?: number;
+  validationErrorMessage?: string;
+  simpleVersion?: boolean;
+  uploadConfig?: RichEditorProps["uploadConfig"];
+  disableVideo?: boolean
+  richEditorElements?: RichEditorElement[];
+};
+
+export const RichEditorFormField = ({
+  name,
+  label,
+  required,
+  validate,
+  validationErrorMessage = "Este campo é obrigatório.",
+  maxLength,
+  simpleVersion = false,
+  disableVideo = false,
+  richEditorElements,
+  ...props
+}: RichEditorFormFieldProps) => {
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required: required ? validationErrorMessage : false,
+      validate: (value?: string) => {
+        if (
+          value === undefined ||
+          value === null ||
+          (!required && value.trim() === "")
+        )
+          return true;
+        return validate?.(value) ?? true;
+      },
+    },
+  });
+  const [caracterQuantity, setCaracterQuantity] = useState(() =>
+    getRemainingCharacters(maxLength, field.value),
+  );
+
+  const handleCharacterCountChange = (count: number) => {
+    if (maxLength !== undefined) {
+      setCaracterQuantity(Math.max(0, maxLength - count));
+    }
+  };
+
+  useEffect(() => {
+    setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
+  }, [field.value, maxLength]);
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError?.message;
+
+
+  return (
+    <Flex direction="column">
+      {maxLength ? (
+        <Flex direction="row" justify="between">
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+          <Badge color="grey" size="xs">
+            {caracterQuantity}
+          </Badge>
+        </Flex>
+      ) : (
+        <>
+          {label && (
+            <FormLabel
+              name={name}
+              label={label}
+              required={required}
+              haveError={haveError}
+            />
+          )}
+        </>
+      )}
+      <RichEditor
+        {...props}
+        value={field.value}
+        onChange={field.onChange}
+        aria-labelledby={`${name}-label`}
+        onCharacterCountChange={handleCharacterCountChange}
+        maxLength={maxLength}
+        disableVideo={disableVideo}
+        simpleVersion={simpleVersion}
+        richEditorElements={richEditorElements}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/SelectFormField.tsx

@@ -1,113 +1,113 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { DropdownMenu, DropdownMenuItem } from "../Dropdown";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { getNestedValue } from "../../utils/getNestedValue";
-import { Button } from "../Button";
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-export type SelectFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  options: Option[];
-  showMoreButton?: boolean;
-  showMoreButtonLabel?: string;
-  showMoreButtonOnClick?: () => void;
-  validation?: {
-    validate?: (value: string) => boolean | string;
-  };
-  validationErrorMessage?: string;
-  defaultValue?: string;
-};
-
-export const SelectFormField = ({
-  name,
-  label,
-  required,
-  placeholder = "Selecione",
-  options,
-  showMoreButton = false,
-  showMoreButtonLabel = "Carregar mais",
-  showMoreButtonOnClick,
-  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>
-              ))}
-
-              {showMoreButton && showMoreButtonOnClick && (
-                <Button
-                  variant="menuDropdownItem"
-                  color="brand"
-                  onClick={showMoreButtonOnClick}
-                  fontWeight="semibold"
-                  type="button"
-                  css={{ justifyContent: "flex-start", color: "var(--colors-brand500)!important" }}
-                >
-                  {showMoreButtonLabel}
-                </Button>
-              )}
-            </DropdownMenu>
-          );
-        }}
-      />
-
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useFormContext, Controller } from "react-hook-form";
+import { DropdownMenu, DropdownMenuItem } from "../Dropdown";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { getNestedValue } from "../../utils/getNestedValue";
+import { Button } from "../Button";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+export type SelectFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  options: Option[];
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
+  validation?: {
+    validate?: (value: string) => boolean | string;
+  };
+  validationErrorMessage?: string;
+  defaultValue?: string;
+};
+
+export const SelectFormField = ({
+  name,
+  label,
+  required,
+  placeholder = "Selecione",
+  options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
+  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>
+              ))}
+
+              {showMoreButton && showMoreButtonOnClick && (
+                <Button
+                  variant="menuDropdownItem"
+                  color="brand"
+                  onClick={showMoreButtonOnClick}
+                  fontWeight="semibold"
+                  type="button"
+                  css={{ justifyContent: "flex-start", color: "var(--colors-brand500)!important" }}
+                >
+                  {showMoreButtonLabel}
+                </Button>
+              )}
+            </DropdownMenu>
+          );
+        }}
+      />
+
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/SwitchFormField.tsx

@@ -1,46 +1,46 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { Flex } from "../Flex";
-import { Switch } from "../Switch";
-import { Text } from "../Text";
-
-
-export type SwitchFormFieldProps = {
-    name: string;
-    label: string;
-    defaultValue?: boolean;
-    watch?: boolean;
-};
-
-export const SwitchFormField = ({
-    name,
-    label,
-    defaultValue = false,
-    watch = false,
-}: SwitchFormFieldProps) => {
-    const {
-        control,
-        watch: watchForm,
-    } = useFormContext();
-
-    if (watch) {
-        watchForm(name);
-    }
-    return (
-        <Flex justify="between" style={{ margin: '1rem 0' }}>
-            <Text typography="labelMedium" fontWeight="regular">
-                {label}
-            </Text>
-            <Controller
-                control={control}
-                name={name}
-                defaultValue={defaultValue}
-                render={({ field }) => (
-                    <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                    />
-                )}
-            />
-        </Flex>
-    );
-};
+import { useFormContext, Controller } from "react-hook-form";
+import { Flex } from "../Flex";
+import { Switch } from "../Switch";
+import { Text } from "../Text";
+
+
+export type SwitchFormFieldProps = {
+    name: string;
+    label: string;
+    defaultValue?: boolean;
+    watch?: boolean;
+};
+
+export const SwitchFormField = ({
+    name,
+    label,
+    defaultValue = false,
+    watch = false,
+}: SwitchFormFieldProps) => {
+    const {
+        control,
+        watch: watchForm,
+    } = useFormContext();
+
+    if (watch) {
+        watchForm(name);
+    }
+    return (
+        <Flex justify="between" style={{ margin: '1rem 0' }}>
+            <Text typography="labelMedium" fontWeight="regular">
+                {label}
+            </Text>
+            <Controller
+                control={control}
+                name={name}
+                defaultValue={defaultValue}
+                render={({ field }) => (
+                    <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                    />
+                )}
+            />
+        </Flex>
+    );
+};