@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.40

package/src/components/ImageUpload/ImageUploadError/index.tsx

@@ -1,12 +0,0 @@
-import { ImageUploadErrorProps } from "@arkyn/types";
-import "./styles.css";
-
-function ImageUploadError(props: ImageUploadErrorProps) {
-  const { error } = props;
-  const className = `arkynImageUploadError`;
-
-  if (error) return <strong className={className}>{error}</strong>;
-  return <></>;
-}
-
-export { ImageUploadError };

package/src/components/ImageUpload/ImageUploadError/styles.css

@@ -1,6 +0,0 @@
-.arkynImageUploadError {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 600;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ImageUpload/ImageUploadLabel/index.tsx

@@ -1,13 +0,0 @@
-import { ImageUploadLabelProps } from "@arkyn/types";
-import "./styles.css";
-
-function ImageUploadLabel(props: ImageUploadLabelProps) {
-  const { label, showAsterisk } = props;
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynImageUploadLabel ${show}`;
-
-  return <strong className={className.trim()}>{label}</strong>;
-}
-
-export { ImageUploadLabel };

package/src/components/ImageUpload/ImageUploadLabel/styles.css

@@ -1,15 +0,0 @@
-.arkynImageUploadLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynImageUploadLabel.asteriskTrue::before {
-  content: "* ";
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16.34px;
-  text-align: left;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ImageUpload/NoFileContent/index.tsx

@@ -1,60 +0,0 @@
-import { ImageUploadNoFileContentProps } from "@arkyn/types";
-import { DragEvent } from "react";
-
-import { Button } from "../../Button";
-
-import "./styles.css";
-
-function NoFileContent(props: ImageUploadNoFileContentProps) {
-  const {
-    dropImageText,
-    isLoading,
-    acceptImage,
-    handleSelectFile,
-    selectImageButtonText,
-    disabled,
-  } = props;
-
-  function handleDrop(event: DragEvent<HTMLDivElement>) {
-    if (disabled) return;
-
-    event.preventDefault();
-    const file = event.dataTransfer.files[0];
-    if (file) handleSelectFile(file);
-  }
-
-  function handleClick() {
-    if (disabled) return;
-
-    const input = document.createElement("input");
-
-    input.type = "file";
-    input.accept = acceptImage;
-
-    input.onchange = (event) => {
-      const file = (event.target as HTMLInputElement).files?.[0];
-      if (file) handleSelectFile(file);
-    };
-
-    input.click();
-  }
-
-  return (
-    <div onDrop={handleDrop} className="arkynImageUploadNoFileContent">
-      <Button
-        isLoading={isLoading}
-        onClick={handleClick}
-        variant="ghost"
-        size="sm"
-        type="button"
-        disabled={disabled}
-      >
-        {selectImageButtonText}
-      </Button>
-
-      <p>{dropImageText}</p>
-    </div>
-  );
-}
-
-export { NoFileContent };

package/src/components/ImageUpload/NoFileContent/styles.css

@@ -1,19 +0,0 @@
-.arkynImageUploadNoFileContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-
-  height: 100%;
-  width: 100%;
-}
-
-.arkynImageUploadNoFileContent > p {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 12px;
-  text-align: center;
-  white-space: nowrap;
-  color: var(--text-body);
-}

package/src/components/ImageUpload/index.tsx

@@ -1,115 +0,0 @@
-import { ImageUploadProps } from "@arkyn/types";
-import { useState } from "react";
-
-import { useFieldErrors } from "../../hooks/useFieldErrors";
-
-import { HasFileContent } from "./HasFileContent";
-import { ImageUploadError } from "./ImageUploadError";
-import { ImageUploadLabel } from "./ImageUploadLabel";
-import { NoFileContent } from "./NoFileContent";
-
-import "./styles.css";
-
-function ImageUpload(props: ImageUploadProps) {
-  const {
-    name,
-    defaultValue = "",
-    label,
-    showAsterisk = false,
-    action,
-    fileName = "file",
-    method = "POST",
-    acceptImage = "image/*",
-    fileResponseName = "url",
-    changeImageButtonText = "Alterar imagem",
-    selectImageButtonText = "Selecionar imagem",
-    dropImageText = "Ou arraste e solte a imagem aqui",
-    onUpload,
-    disabled = false,
-  } = props;
-
-  const fieldErrors = useFieldErrors();
-  const fieldError = fieldErrors[name];
-
-  const [value, setValue] = useState(defaultValue);
-  const [error, setError] = useState("");
-  const [file, setFile] = useState<File | null>(null);
-  const [filePath, setFilePath] = useState(defaultValue);
-  const [isLoading, setIsLoading] = useState(false);
-
-  async function handleUploadImage(file: File) {
-    if (disabled) return;
-
-    setIsLoading(true);
-    setFile(file);
-    setError("");
-
-    const formData = new FormData();
-    formData.append(fileName, file);
-
-    await fetch(action, { method: method, body: formData })
-      .then(async (response) => await response.json())
-      .then((response) => {
-        if (!!response?.error) setError(response.error);
-        else setValue(response?.[fileResponseName]);
-        onUpload && onUpload(response?.[fileResponseName]);
-      })
-      .catch((error) => {
-        console.error(error);
-        setError("Erro ao enviar imagem");
-      })
-      .finally(() => setIsLoading(false));
-  }
-
-  function handleSelectFile(file: File) {
-    if (disabled) return;
-
-    setFilePath(URL.createObjectURL(file));
-    handleUploadImage(file);
-  }
-
-  const errorMessage = fieldError || error;
-
-  const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
-  const hasImageClassName = filePath ? "hasImage" : "noHasImage";
-  const className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;
-
-  return (
-    <div className="arkynImageUploadContainer">
-      {label && <ImageUploadLabel label={label} showAsterisk={showAsterisk} />}
-
-      <div className={className}>
-        <input type="hidden" name={name} value={value || ""} />
-
-        {!filePath && (
-          <NoFileContent
-            disabled={disabled}
-            isLoading={isLoading}
-            acceptImage={acceptImage}
-            dropImageText={dropImageText}
-            handleSelectFile={handleSelectFile}
-            selectImageButtonText={selectImageButtonText}
-          />
-        )}
-
-        {filePath && (
-          <HasFileContent
-            disabled={disabled}
-            isLoading={isLoading}
-            acceptImage={acceptImage}
-            filePath={filePath}
-            handleSelectFile={handleSelectFile}
-            changeImageButtonText={changeImageButtonText}
-            reSendImage={
-              !!errorMessage && file ? () => handleUploadImage(file) : undefined
-            }
-          />
-        )}
-      </div>
-
-      {errorMessage && <ImageUploadError error={errorMessage} />}
-    </div>
-  );
-}
-
-export { ImageUpload };

package/src/components/ImageUpload/styles.css

@@ -1,32 +0,0 @@
-.arkynImageUploadContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.arkynImageUpload {
-  outline: 1px solid transparent;
-
-  border-width: 1px;
-  border-color: var(--border);
-  border-radius: var(--rounded-inputs);
-
-  width: 100%;
-  height: 174px;
-  max-width: 475px;
-
-  background: rgba(var(--input-background), 1);
-}
-
-.arkynImageUpload.hasImage {
-  border-style: solid;
-}
-
-.arkynImageUpload.noHasImage {
-  border-style: dashed;
-}
-
-.arkynImageUpload.hasError {
-  border-color: rgb(var(--spotlight-danger));
-  outline-color: Ørgb(var(--spotlight-danger));
-}

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

@@ -1,75 +0,0 @@
-import type { CpfCnpjInputProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../utils/morpheme";
-import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
-
-function getConfig(props: CpfCnpjInputProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    sufix: baseSufix,
-    leftIcon: LeftIcon,
-    rightIcon: RightIcon,
-    disabled,
-    defaultValue,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    onChange,
-    ...rest
-  } = props;
-
-  function parseDefault(event: string) {
-    let value = clear(event);
-    const mask = getMask(value);
-
-    let nextLength = value.length;
-
-    if (nextLength > MAX_LENGTH) return;
-    value = applyMask(value, TYPES[mask] as "CPF" | "CNPJ");
-
-    return value;
-  }
-
-  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,
-    defaultValue: parseDefault(defaultValue || ""),
-    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/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 };