@arkyn/components 1.2.0

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

@@ -0,0 +1,56 @@
+import type { KeyboardEvent } from "react";
+
+const VALID_FIRST = /^[1-9]{1}$/;
+const VALID_NEXT = /^[0-9]{1}$/;
+const DELETE_KEY_CODE = 8;
+
+type OnKeyDownProps = {
+  event: KeyboardEvent<HTMLDivElement>;
+  currencyValue: number;
+  setCurrencyValue: (value: number) => void;
+  max: number;
+};
+
+function valueDisplay(inputValue: number, showBRL: boolean) {
+  if (inputValue === 0) return "";
+
+  const value = (inputValue / 100).toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  });
+
+  if (showBRL) return value;
+  return value.replace("R$", "").trim();
+}
+
+function currencyInputKeyDown(args: OnKeyDownProps) {
+  const { currencyValue, event, max, setCurrencyValue } = args;
+  const { key, keyCode } = event;
+
+  if (
+    (currencyValue === 0 && !VALID_FIRST.test(key)) ||
+    (currencyValue !== 0 &&
+      !VALID_NEXT.test(key) &&
+      keyCode !== DELETE_KEY_CODE)
+  ) {
+    return;
+  }
+
+  const valueString = currencyValue.toString();
+
+  let nextValue: number;
+
+  if (keyCode !== DELETE_KEY_CODE) {
+    const nextValueString = currencyValue === 0 ? key : `${valueString}${key}`;
+    nextValue = Number.parseInt(nextValueString, 10);
+  } else {
+    const nextValueString = valueString.slice(0, -1);
+    nextValue =
+      nextValueString === "" ? 0 : Number.parseInt(nextValueString, 10);
+  }
+
+  if (nextValue > Number(max)) return;
+  setCurrencyValue(nextValue);
+}
+
+export { valueDisplay, currencyInputKeyDown };

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

@@ -0,0 +1,62 @@
+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 = true,
+    ...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: 14, lg: 16 };
+  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

@@ -0,0 +1,89 @@
+import type { MaskedInputProps } from "@arkyn/types";
+import type { FocusEvent } from "react";
+
+import { InputMask } from "@react-input/mask";
+import { useRef, useState } from "react";
+
+import { useFormController } from "../../Form/FormController";
+import { getConfig } from "./getConfig";
+
+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
+
+      // disabled={disabled || isLoading}
+      // readOnly={readOnly}
+      // ref={ref}
+      // onFocus={handleFocus}
+      // onBlur={handleBlur}
+      // {...rest}
+      />
+
+      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
+      {showRightSpinner && Spinner}
+      {sufix}
+    </section>
+  );
+}
+
+export { MaskedInput };

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

@@ -0,0 +1,60 @@
+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: 14, lg: 16 };
+  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

@@ -0,0 +1,87 @@
+import type { SimpleInputProps } from "@arkyn/types";
+import type { FocusEvent } from "react";
+
+import { useRef, useState } from "react";
+
+import { useFormController } from "../../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,
+    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} />}
+
+      <input
+        disabled={disabled || isLoading}
+        readOnly={readOnly}
+        ref={ref}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...rest}
+      />
+
+      {showRightIcon && <RightIcon size={iconSize} strokeWidth={2.5} />}
+      {showRightSpinner && Spinner}
+      {sufix}
+    </section>
+  );
+}
+
+export { SimpleInput };

package/src/components/Input/index.tsx

@@ -0,0 +1,17 @@
+import type { 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-cpnj") return <CpfCnpjInput {...props} />;
+  return <SimpleInput {...props} />;
+}
+
+export { Input };

package/src/components/Input/styles.css

@@ -0,0 +1,223 @@
+/* BASE */
+.arkyn_input {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: 6px;
+
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+}
+
+.arkyn_input:hover {
+  cursor: text;
+}
+
+.arkyn_input input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+}
+
+.arkyn_input input {
+  color: var(--secondary-900);
+}
+
+.arkyn_input .prefix,
+.arkyn_input .sufix {
+  color: var(--secondary-600);
+  background: var(--secondary-200);
+  font-weight: 400;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+}
+
+.arkyn_input .prefix {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 5px 0 0 5px;
+  border-right: 1px solid var(--secondary-300);
+}
+
+.arkyn_input .sufix {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 0 5px 5px 0;
+  border-left: 1px solid var(--secondary-300);
+}
+
+.arkyn_input input::placeholder {
+  color: var(--secondary-400);
+}
+
+.arkyn_input svg {
+  color: var(--secondary-400);
+}
+
+.arkyn_input.errored svg {
+  color: var(--danger-600);
+}
+
+.arkyn_input:not(.opacity).focused svg {
+  color: var(--primary-500);
+}
+
+.arkyn_input.opacity {
+  opacity: 0.5;
+}
+
+/* VARIANTS */
+.arkyn_input.solid {
+  border-color: var(--secondary-300);
+  background-color: var(--secondary-50);
+}
+
+.arkyn_input.solid.errored {
+  border-color: var(--danger-600);
+  outline-color: var(--danger-600);
+}
+
+.arkyn_input:not(.opacity).solid.focused {
+  border-color: var(--primary-500);
+  outline-color: var(--primary-500);
+}
+
+.arkyn_input.outline {
+  border-color: var(--secondary-300);
+}
+
+.arkyn_input.outline.errored {
+  border-color: var(--danger-600);
+  outline-color: var(--danger-600);
+}
+
+.arkyn_input:not(.opacity).outline.focused {
+  border-color: var(--primary-500);
+  outline-color: var(--primary-500);
+}
+
+.arkyn_input.underline {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  outline: none;
+  border-color: var(--secondary-300);
+}
+
+.arkyn_input.underline .sufix,
+.arkyn_input.underline .prefix {
+  display: none;
+}
+
+.arkyn_input.underline::before {
+  content: " ";
+  position: absolute;
+  height: 1px;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  background: transparent;
+}
+
+.arkyn_input.underline.errored {
+  border-color: var(--danger-600);
+}
+
+.arkyn_input.underline.errored::before {
+  background: var(--danger-600);
+}
+
+.arkyn_input:not(.opacity).underline.focused {
+  border-color: var(--primary-500);
+}
+
+.arkyn_input:not(.opacity).underline.focused::before {
+  background: var(--primary-500);
+}
+
+/* SIZE */
+
+.arkyn_input.md input {
+  min-height: 40px;
+  max-height: 40px;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
+.arkyn_input.md input::placeholder {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.arkyn_input.md.hasPrefix {
+  padding-left: 60px;
+}
+
+.arkyn_input.md.hasSufix {
+  padding-right: 60px;
+}
+
+.arkyn_input.md .prefix,
+.arkyn_input.md .sufix {
+  height: 40px;
+  width: 44px;
+  font-size: 14px;
+}
+
+.arkyn_input.lg input {
+  min-height: 44px;
+  max-height: 44px;
+  line-height: 16px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.arkyn_input.lg input::placeholder {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.arkyn_input.lg .prefix,
+.arkyn_input.lg .sufix {
+  height: 44px;
+  width: 48px;
+  font-size: 16px;
+}
+
+.arkyn_input.lg.hasPrefix {
+  padding-left: 64px;
+}
+
+.arkyn_input.lg.hasSufix {
+  padding-right: 64px;
+}
+
+/* SPIN */
+
+.arkyn_input .spinner {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Input/utils/morpheme.tsx

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+
+function morpheme(
+  data: LucideIcon | string | undefined,
+  iconSize: number,
+  type?: "prefix" | "sufix"
+) {
+  if (!data) return <></>;
+  if (typeof data === "string") return <p className={type}>{data}</p>;
+
+  const Data = data;
+  return (
+    <p className={type}>
+      <Data color="var(--secondary-600)" size={iconSize} strokeWidth={2.5} />
+    </p>
+  );
+}
+
+export { morpheme };

package/src/components/Modal/Container/index.tsx

@@ -0,0 +1,53 @@
+import type { ModalContainerProps } from "@arkyn/types";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { createContext } from "react";
+
+import "./styles.css";
+
+type ModalContext = { makeInvisible: () => void };
+const modalContext = createContext({} as ModalContext);
+
+function Container(args: ModalContainerProps) {
+  const {
+    isVisibled,
+    makeInvisible,
+    children,
+    className: baseClassName = "",
+    ...rest
+  } = args;
+
+  const visibled = isVisibled ? "visible" : "";
+  const className = `arkyn_modal_container ${visibled} ${baseClassName}`;
+
+  return (
+    <modalContext.Provider value={{ makeInvisible }}>
+      <AnimatePresence>
+        {isVisibled && (
+          <aside className={className.trim()} {...rest}>
+            <motion.div
+              className="overlay"
+              transition={{ duration: 0.15, ease: "easeOut" }}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={makeInvisible}
+            />
+
+            <motion.div
+              className="content"
+              transition={{ duration: 0.15, ease: "easeOut" }}
+              initial={{ opacity: 0, scale: 0.75 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0 }}
+            >
+              {children}
+            </motion.div>
+          </aside>
+        )}
+      </AnimatePresence>
+    </modalContext.Provider>
+  );
+}
+
+export { Container, modalContext };

package/src/components/Modal/Container/styles.css

@@ -0,0 +1,35 @@
+.arkyn_modal_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: start;
+  justify-content: center;
+
+  padding: 10vh 0;
+  padding-bottom: 2rem;
+  overflow: auto;
+}
+
+.arkyn_modal_container > .overlay {
+  position: fixed;
+  z-index: 9997;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.arkyn_modal_container > .overlay:hover {
+  cursor: pointer;
+}
+
+.arkyn_modal_container > .content {
+  z-index: 9999;
+  border-radius: 6px;
+  background: var(--secondary-50);
+}