@arkyn/components 3.0.1-beta.7 → 3.0.1-beta.70

package/src/components/Input/CpfCpnjInput/index.tsx

@@ -1,111 +0,0 @@
-import type { CpfCnpjInputProps } from "@arkyn/types";
-import type { ChangeEvent, FocusEvent } from "react";
-
-import { useRef, useState } from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { getConfig } from "./getConfig";
-import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
-
-function CpfCnpjInput(props: CpfCnpjInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    Spinner,
-    onChange,
-    value,
-    defaultValue,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const [inputValue, setInputValue] = useState(defaultValue);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    let value = clear(event.target.value);
-    const mask = getMask(value);
-
-    let nextLength = value.length;
-
-    if (nextLength > MAX_LENGTH) return;
-
-    value = applyMask(value, TYPES[mask] as "CPF" | "CNPJ");
-
-    event.target.value = value;
-
-    setInputValue(value);
-    onChange && onChange(event);
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <input
-        disabled={disabled || isLoading}
-        readOnly={readOnly}
-        ref={ref}
-        value={value || inputValue}
-        onFocus={handleFocus}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        {...rest}
-      />
-
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {showRightSpinner && Spinner}
-      {sufix}
-    </section>
-  );
-}
-
-export { CpfCnpjInput };

package/src/components/Input/CpfCpnjInput/utils.ts

@@ -1,30 +0,0 @@
-function clear(value: string) {
-  return value && value.replace(/[^0-9]/g, "");
-}
-
-function applyMask(value: string, mask: "CPF" | "CNPJ") {
-  let result = "";
-
-  let inc = 0;
-  Array.from(value).forEach((letter, index) => {
-    if (!mask[index + inc].match(/[0-9]/)) {
-      result += mask[index + inc];
-      inc++;
-    }
-    result += letter;
-  });
-  return result;
-}
-
-function getMask(value: string): "CNPJ" | "CPF" {
-  return value.length > 11 ? "CNPJ" : "CPF";
-}
-
-const TYPES = {
-  CPF: "999.999.999-999",
-  CNPJ: "99.999.999/9999-99",
-};
-
-const MAX_LENGTH = clear(TYPES.CNPJ).length;
-
-export { clear, applyMask, MAX_LENGTH, TYPES, getMask };

package/src/components/Input/CurrencyInput/getConfig.tsx

@@ -1,66 +0,0 @@
-import type { CurrencyInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-
-function getConfig(props: CurrencyInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    // showCents = false,
-    max = 1000000000,
-    locale = "pt-BR",
-    currency = "BRL",
-    ...rest
-  } = props;
-
-  const loadingPosition = RightIcon ? "right" : "left";
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const hasSufix = !!baseSufix ? "hasSufix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    sufix: morpheme(baseSufix, iconSize, "sufix"),
-    LeftIcon,
-    RightIcon,
-    disabled,
-    locale,
-    currency,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    max,
-    // showCents,
-    loadingPosition,
-    iconSize: iconSize,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Input/CurrencyInput/index.tsx

@@ -1,140 +0,0 @@
-import type { CurrencyInputProps } from "@arkyn/types";
-import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
-import { useEffect, useRef, useState } from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { maskValues } from "../../../services/maskValues";
-import { normalizeValue } from "../../../services/normalizeValue";
-
-import { getConfig } from "./getConfig";
-
-function CurrencyInput(props: CurrencyInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-  const [maskedValue, setMaskedValue] = useState("0");
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    Spinner,
-    value,
-    max,
-    onChangeValue,
-    onKeyPress,
-    currency,
-    locale,
-    name,
-    defaultValue,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(event: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  const updateValues = (originalValue: string | number) => {
-    const [calculatedValue, calculatedMaskedValue] = maskValues(
-      locale,
-      originalValue,
-      currency
-    );
-
-    if (!max || calculatedValue <= max) {
-      setMaskedValue(calculatedMaskedValue);
-      return [calculatedValue, calculatedMaskedValue];
-    }
-
-    return [normalizeValue(maskedValue), maskedValue];
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const [originalValue, maskedValue] = updateValues(event.target.value);
-
-    onChangeValue &&
-      onChangeValue(event, String(originalValue), String(maskedValue));
-  };
-
-  const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) =>
-    onKeyPress && onKeyPress(event, event.key, event.key);
-
-  useEffect(() => {
-    const currentValue = value || +defaultValue || undefined;
-    const [, maskedValue] = maskValues(locale, currentValue, currency);
-
-    setMaskedValue(maskedValue);
-  }, [currency, defaultValue, value]);
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <input
-        value={maskedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        onKeyUp={handleKeyUp}
-        disabled={disabled || isLoading}
-        readOnly={readOnly}
-        {...rest}
-      />
-
-      <input
-        type="hidden"
-        ref={ref}
-        name={name}
-        value={normalizeValue(maskedValue)}
-      />
-
-      {showRightSpinner && Spinner}
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {sufix}
-    </section>
-  );
-}
-
-export { CurrencyInput };

package/src/components/Input/MaskInput/getConfig.tsx

@@ -1,63 +0,0 @@
-import type { MaskedInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-
-function getConfig(props: MaskedInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    showMask = false,
-    type,
-    ...rest
-  } = props;
-
-  const loadingPosition = RightIcon ? "right" : "left";
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const hasSufix = !!baseSufix ? "hasSufix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    sufix: morpheme(baseSufix, iconSize, "sufix"),
-    LeftIcon,
-    RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    loadingPosition,
-    iconSize: iconSize,
-    showMask,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Input/MaskInput/index.tsx

@@ -1,99 +0,0 @@
-import { MaskedInputProps } from "@arkyn/types";
-import { InputMask } from "@react-input/mask";
-import {
-  FocusEvent,
-  forwardRef,
-  InputHTMLAttributes,
-  useRef,
-  useState,
-} from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { getConfig } from "./getConfig";
-
-const BaseInput = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return <input ref={ref} {...props} />;
-});
-
-function MaskedInput(props: MaskedInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const baseRef = useRef<any>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    Spinner,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <InputMask
-        component={BaseInput}
-        ref={ref}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        disabled={disabled}
-        {...rest}
-      />
-
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {showRightSpinner && Spinner}
-      {sufix}
-    </section>
-  );
-}
-
-export { MaskedInput };

package/src/components/Input/SimpleInput/getConfig.tsx

@@ -1,60 +0,0 @@
-import type { SimpleInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-
-function getConfig(props: SimpleInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    ...rest
-  } = props;
-
-  const loadingPosition = RightIcon ? "right" : "left";
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const hasSufix = !!baseSufix ? "hasSufix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    sufix: morpheme(baseSufix, iconSize, "sufix"),
-    LeftIcon,
-    RightIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    loadingPosition,
-    iconSize: iconSize,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Input/SimpleInput/index.tsx

@@ -1,101 +0,0 @@
-import type { SimpleInputProps } from "@arkyn/types";
-import type { FocusEvent } from "react";
-
-import { useRef, useState } from "react";
-
-import { useFormController } from "../../../components/Form/FormController";
-import { getConfig } from "./getConfig";
-
-function SimpleInput(props: SimpleInputProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const { inputRef, id, error } = useFormController();
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    sufix,
-    iconSize,
-    loadingPosition,
-    isLoading,
-    LeftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    RightIcon,
-    type,
-    Spinner,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const showLeftIcon = LeftIcon && !isLoading;
-  const showRightIcon = RightIcon && !isLoading;
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  if (type === "hidden") {
-    return (
-      <input
-        style={{ display: "none" }}
-        readOnly
-        type="text"
-        ref={ref}
-        {...rest}
-      />
-    );
-  }
-
-  return (
-    <section
-      title={title}
-      style={style}
-      onClick={handleSectionClick}
-      className={className}
-    >
-      {prefix}
-      {showLeftSpinner && Spinner}
-      {showLeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-      <input
-        disabled={disabled || isLoading}
-        readOnly={readOnly}
-        ref={ref}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        type={type}
-        {...rest}
-      />
-
-      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-      {showRightSpinner && Spinner}
-      {sufix}
-    </section>
-  );
-}
-
-export { SimpleInput };

package/src/components/Input/index.tsx

@@ -1,17 +0,0 @@
-import { InputProps } from "@arkyn/types";
-
-import { CpfCnpjInput } from "./CpfCpnjInput";
-import { CurrencyInput } from "./CurrencyInput";
-import { MaskedInput } from "./MaskInput";
-import { SimpleInput } from "./SimpleInput";
-
-import "./styles.css";
-
-function Input(props: InputProps) {
-  if (props.type === "currency") return <CurrencyInput {...props} />;
-  if (props.type === "masked") return <MaskedInput {...props} />;
-  if (props.type === "cpf-cnpj") return <CpfCnpjInput {...props} />;
-  return <SimpleInput {...props} />;
-}
-
-export { Input };