@arkyn/components 1.2.4 → 1.3.0

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,52 @@
+import { CheckboxProps } from "@arkyn/types";
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import { useFormController } from "../Form/FormController";
+import "./styles.css";
+
+function Checkbox(props: CheckboxProps) {
+  const {
+    name,
+    className: baseClassName = "",
+    size = "md",
+    isError: defaultIsError,
+    defaultChecked = false,
+    checked: baseChecked = null,
+    onCheck,
+    value,
+    ...rest
+  } = props;
+
+  const { id, inputRef, error } = useFormController();
+  const isError = defaultIsError || !!error;
+
+  const [isChecked, setIsChecked] = useState(defaultChecked || false);
+  const currentChecked =
+    typeof baseChecked === "boolean" ? baseChecked : isChecked;
+
+  const className = `arkyn_checkbox ${size} ${isError ? "error" : ""} ${
+    currentChecked ? "checked" : ""
+  } ${baseClassName}`;
+
+  function handleCheck() {
+    const defaultChecked = isChecked;
+    setIsChecked(!defaultChecked);
+    onCheck && onCheck(!defaultChecked ? value || "checked" : "");
+  }
+
+  return (
+    <div className={className} onClick={handleCheck} {...rest}>
+      <input
+        type="hidden"
+        name={name}
+        id={id}
+        ref={inputRef}
+        value={currentChecked ? value || "checked" : ""}
+      />
+      <Check />
+    </div>
+  );
+}
+
+export { Checkbox };

package/src/components/Checkbox/styles.css

@@ -0,0 +1,66 @@
+.arkyn_checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid var(--secondary-400);
+  background-color: var(--secondary-100);
+}
+
+.arkyn_checkbox:hover {
+  cursor: pointer;
+}
+
+.arkyn_checkbox svg {
+  display: none;
+  stroke-width: 3px;
+}
+
+/* SIZE */
+.arkyn_checkbox.sm {
+  height: 16px;
+  width: 16px;
+  border-radius: 2px;
+}
+
+.arkyn_checkbox.sm svg {
+  min-height: 12px;
+  min-width: 12px;
+}
+
+.arkyn_checkbox.md {
+  height: 20px;
+  width: 20px;
+  border-radius: 4px;
+}
+
+.arkyn_checkbox.md svg {
+  min-height: 14px;
+  min-width: 14px;
+}
+
+.arkyn_checkbox.lg {
+  height: 24px;
+  width: 24px;
+  border-radius: 6px;
+}
+
+.arkyn_checkbox.lg svg {
+  min-height: 14px;
+  min-width: 14px;
+}
+
+/* CHECKED */
+.arkyn_checkbox.checked {
+  background-color: var(--primary-500);
+  border-color: var(--primary-500);
+}
+
+.arkyn_checkbox.checked svg {
+  display: unset;
+  color: #fff;
+}
+
+.arkyn_checkbox.error {
+  border-color: var(--danger-500);
+}

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

@@ -2,6 +2,7 @@ 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 {
@@ -15,6 +16,7 @@ function getConfig(props: CpfCnpjInputProps, isFocused: boolean) {
     leftIcon: LeftIcon,
     rightIcon: RightIcon,
     disabled,
+    defaultValue,
     readOnly,
     onFocus,
     onBlur,
@@ -24,6 +26,18 @@ function getConfig(props: CpfCnpjInputProps, isFocused: boolean) {
     ...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" : "";
@@ -43,6 +57,7 @@ function getConfig(props: CpfCnpjInputProps, isFocused: boolean) {
     sufix: morpheme(baseSufix, iconSize, "sufix"),
     LeftIcon,
     RightIcon,
+    defaultValue: parseDefault(defaultValue || ""),
     disabled,
     readOnly,
     onFocus,

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

@@ -9,9 +9,6 @@ import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
 
 function CpfCnpjInput(props: CpfCnpjInputProps) {
   const [isFocused, setIsFocused] = useState(false);
-  const [inputValue, setInputValue] = useState(
-    clear(props?.defaultValue || "")
-  );
 
   const baseRef = useRef<HTMLInputElement>(null);
 
@@ -38,10 +35,12 @@ function CpfCnpjInput(props: CpfCnpjInputProps) {
     Spinner,
     onChange,
     value,
-    defaultValue = "",
+    defaultValue,
     ...rest
   } = getConfig({ ...props, id, isError }, isFocused);
 
+  const [inputValue, setInputValue] = useState(defaultValue);
+
   const showLeftIcon = LeftIcon && !isLoading;
   const showRightIcon = RightIcon && !isLoading;
 

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

@@ -88,8 +88,8 @@ function CurrencyInput(props: CurrencyInputProps) {
         readOnly={readOnly}
         ref={ref}
         onFocus={handleFocus}
-        onChange={() => {}}
         onBlur={handleBlur}
+        onChange={() => {}}
         {...rest}
       />
 

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

@@ -21,7 +21,7 @@ function getConfig(props: MaskedInputProps, isFocused: boolean) {
     title,
     style,
     onChange,
-    showMask = true,
+    showMask = false,
     type,
     ...rest
   } = props;

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

@@ -1,80 +1,93 @@
 import type { MaskedInputProps } from "@arkyn/types";
-import type { FocusEvent } from "react";
+import type { FocusEvent, InputHTMLAttributes } from "react";
 
 import { InputMask } from "@react-input/mask";
-import { useRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 
 import { useFormController } from "../../Form/FormController";
-import { SimpleInput } from "../SimpleInput";
+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);
-  // }
+  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={SimpleInput} {...props} type="text" />
-
-    //   {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
-    //   {showRightSpinner && Spinner}
-    //   {sufix}
-    // </section>
+    <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}
+        {...rest}
+      />
+
+      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
+      {showRightSpinner && Spinner}
+      {sufix}
+    </section>
   );
 }
 

package/src/components/Select/getConfig.tsx

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

package/src/components/Select/index.tsx

@@ -0,0 +1,161 @@
+import type { SelectProps } from "@arkyn/types";
+import type { FocusEvent } from "react";
+
+import { ArrowUp, Check, ChevronDown } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { useFormController } from "../Form/FormController";
+import { getConfig } from "./getConfig";
+
+import "./styles.css";
+
+function Select(props: SelectProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const { inputRef, id, error } = useFormController();
+
+  const baseRef = useRef<HTMLInputElement>(null);
+
+  const ref = inputRef || baseRef;
+  const isError = props.isError || !!error;
+
+  const {
+    disabled,
+    title,
+    style,
+    className,
+    prefix,
+    iconSize,
+    isLoading,
+    LeftIcon,
+    value: baseValue = null,
+    defaultValue = "",
+    readOnly,
+    onFocus,
+    onBlur,
+    Spinner,
+    name,
+    isSearchable,
+    placeholder,
+    onSelect,
+    options,
+    optionMaxHeight,
+    ...rest
+  } = getConfig({ ...props, id, isError }, isFocused);
+
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [searchValue, setSearchValue] = useState("");
+
+  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() {
+    setIsFocused(false);
+
+    if (onBlur && ref.current) {
+      ref.current.blur();
+    }
+  }
+
+  const currentValue =
+    typeof baseValue === "string" ? baseValue : selectedValue;
+
+  const currentLabel =
+    options.find((option) => option.value === currentValue)?.label || "";
+
+  const placeholderDark = () => {
+    if (isSearchable) {
+      if (!isFocused && !!currentLabel) return true;
+      if (!isFocused && !currentLabel) return false;
+      if (isFocused) return false;
+    }
+
+    if (!isSearchable) {
+      if (!isFocused && !!currentLabel) return true;
+      if (!isFocused && !currentLabel) return false;
+      if (isFocused && !!currentLabel) return true;
+      if (isFocused && !currentLabel) return false;
+    }
+  };
+
+  const filteredOptions = options.filter((option) => {
+    if (isSearchable) {
+      return option.label.toLowerCase().includes(searchValue.toLowerCase());
+    } else {
+      return true;
+    }
+  });
+
+  return (
+    <>
+      <section
+        title={title}
+        style={style}
+        onClick={handleSectionClick}
+        className={`${className} placeholder_dark_${placeholderDark()}`}
+      >
+        {prefix}
+        {LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
+
+        <input
+          disabled={disabled || isLoading}
+          readOnly={!isSearchable}
+          value={searchValue || ""}
+          placeholder={currentLabel || placeholder}
+          ref={ref}
+          onFocus={handleFocus}
+          onBlur={() => setSearchValue("")}
+          {...rest}
+          onChange={(e) => setSearchValue(e.target.value)}
+        />
+
+        <input type="hidden" name={name} value={currentValue || ""} readOnly />
+
+        {isFocused && (
+          <ul
+            className="arkyn_select_content"
+            style={{ overflow: "auto", maxHeight: optionMaxHeight }}
+          >
+            {filteredOptions.map(({ label, value }) => (
+              <li
+                key={value}
+                className={currentValue === value ? "active" : ""}
+                onClick={() => {
+                  if (selectedValue !== value) setSelectedValue(value);
+                  else setSelectedValue("");
+                  onSelect && onSelect({ label, value });
+                }}
+              >
+                {label} <Check />
+              </li>
+            ))}
+
+            {filteredOptions.length <= 0 && <p>Sem opções disponíveis</p>}
+          </ul>
+        )}
+
+        {!isLoading && (
+          <ChevronDown
+            className="arkyn_select_arrow"
+            size={iconSize}
+            strokeWidth={2.5}
+          />
+        )}
+        {isLoading && Spinner}
+      </section>
+
+      {isFocused && (
+        <aside className="arkyn_select_overlay" onClick={handleBlur} />
+      )}
+    </>
+  );
+}
+
+export { Select };