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

package/src/components/PhoneInput/components/PhoneInputCountrySelector/styles.css

@@ -1,26 +0,0 @@
-.phoneInputSelectCountry {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  min-width: 58px;
-}
-
-.phoneInputSelectCountry .flag {
-  max-height: 20px;
-  max-width: 30px;
-  border-radius: 4px;
-}
-
-.phoneInputSelectCountry .chevronDown {
-  min-height: 12px;
-  max-height: 12px;
-  min-width: 12px;
-  max-width: 12px;
-  color: var(--text-muted);
-}
-
-.phoneInputSelectCountry > .arkynDivider {
-  min-width: 1px;
-  min-height: 20px;
-}

package/src/components/PhoneInput/components/PhoneInputMask/index.tsx

@@ -1,86 +0,0 @@
-import { PhoneInputMaskProps } from "@arkyn/types";
-import { InputMask } from "@react-input/mask";
-import {
-  ChangeEvent,
-  forwardRef,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-} from "react";
-
-import {
-  applyMask,
-  clear,
-  getMask,
-  MAX_LENGTH,
-  TYPES,
-} from "../../services/utils";
-import "./style.css";
-
-const BaseInput = forwardRef<
-  HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
->((props, ref) => {
-  return <input ref={ref} {...props} />;
-});
-
-const PhoneInputMask = forwardRef<HTMLInputElement, PhoneInputMaskProps>(
-  (props, ref) => {
-    const { onFocus, onBlur, size, onChange, value, currentCountry, disabled } =
-      props;
-
-    const [isMounted, setIsMounted] = useState(false);
-
-    useEffect(() => {
-      if (isMounted) onChange(currentCountry.mask);
-      else setIsMounted(true);
-    }, [currentCountry]);
-
-    const className = `phoneInputMask ${size}`;
-
-    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 "EIGTH" | "NINE");
-      event.target.value = value;
-
-      onChange(value);
-    }
-
-    if (currentCountry.code === "+55") {
-      return (
-        <input
-          value={value}
-          onChange={handleChange}
-          className={className}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          ref={ref}
-        />
-      );
-    }
-
-    return (
-      <InputMask
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className={className}
-        component={BaseInput}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        disabled={disabled}
-        mask={currentCountry.mask}
-        showMask
-        replacement={{ _: /\d/ }}
-        ref={ref}
-      />
-    );
-  }
-);
-
-export { PhoneInputMask };

package/src/components/PhoneInput/components/PhoneInputMask/style.css

@@ -1,36 +0,0 @@
-.phoneInputMask {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  margin-left: 8px;
-}
-
-/* SIZE */
-.phoneInputMask.md {
-  min-height: 40px;
-  max-height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.phoneInputMask.md::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.phoneInputMask.lg {
-  min-height: 44px;
-  max-height: 44px;
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.phoneInputMask.lg::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}

package/src/components/PhoneInput/index.tsx

@@ -1,177 +0,0 @@
-import { countries } from "@arkyn/templates";
-import { CountryType, PhoneInputProps } from "@arkyn/types";
-import { useRef, useState } from "react";
-
-import { useFormController } from "../Form/FormController";
-import { PhoneInputContainer } from "./components/PhoneInputContainer";
-import { PhoneInputCountriesOverlay } from "./components/PhoneInputCountriesOverlay";
-import { PhoneInputCountryOption } from "./components/PhoneInputCountryOption";
-import { PhoneInputCountryOptionsContainer } from "./components/PhoneInputCountryOptionsContainer";
-import { PhoneInputCountrySelector } from "./components/PhoneInputCountrySelector";
-import { PhoneInputMask } from "./components/PhoneInputMask";
-import { getDefaultFormatPhoneNumber } from "./services/getDefaultFormatPhoneNumber";
-
-function PhoneInput(props: PhoneInputProps) {
-  const {
-    defaultCountry,
-    className = "",
-    disabled = false,
-    isError: baseIsError = false,
-    isLoading = false,
-    readOnly = false,
-    size = "md",
-    defaultValue = "",
-    variant = "solid",
-    name,
-    onChange,
-    searchCountryPlaceholder = "Pesquisar país",
-    notFoundCountryText = "Nenhum país encontrado",
-    ...rest
-  } = props;
-
-  const defaultData = getDefaultFormatPhoneNumber(defaultValue);
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [search, setSearch] = useState("");
-  const [showCountryOptions, setShowCountryOptions] = useState(false);
-  const [value, setValue] = useState(defaultData.formattedNumber || "");
-
-  const [currentCountry, setCurrentCountry] = useState<CountryType>(() => {
-    if (defaultData.country) return defaultData.country;
-
-    const country = countries.find((country) => country.iso === defaultCountry);
-    if (country) return country;
-
-    return countries[30];
-  });
-
-  const { id, inputRef, error } = useFormController();
-  const isError = baseIsError || !!error;
-
-  const inputPhoneMaskRef = useRef<HTMLInputElement>(null);
-
-  function handleContainerFocus() {
-    if (isFocused || showCountryOptions) return;
-    setIsFocused(true);
-    if (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();
-  }
-
-  function handleOpenCountryOptions() {
-    setShowCountryOptions(true);
-    setIsFocused(true);
-  }
-
-  function handleCloseCountryOptions() {
-    setShowCountryOptions(false);
-    setIsFocused(false);
-  }
-
-  function handleInputFocus() {
-    setIsFocused(true);
-  }
-
-  function handleInputBlur() {
-    setIsFocused(false);
-  }
-
-  function filterCountryFunction(country: CountryType) {
-    return country.name.toLowerCase().includes(search.toLowerCase());
-  }
-
-  function removeNumberMasks(number: string) {
-    if (currentCountry.prefix) {
-      return number
-        .replace(currentCountry.prefix, "")
-        .replaceAll(" ", "")
-        .replaceAll("-", "")
-        .replaceAll("(", "")
-        .replaceAll(")", "")
-        .trim();
-    }
-
-    return number
-      .replaceAll(" ", "")
-      .replaceAll("-", "")
-      .replaceAll("(", "")
-      .replaceAll(")", "")
-      .trim();
-  }
-
-  function inputValue(props?: string) {
-    let returnValue = currentCountry.code;
-    if (currentCountry.prefix) returnValue += `-${currentCountry.prefix}`;
-    returnValue += " ";
-    returnValue += removeNumberMasks(props || value);
-    return returnValue;
-  }
-
-  return (
-    <PhoneInputContainer
-      id={id}
-      disabled={disabled}
-      isError={isError}
-      isLoading={isLoading}
-      isFocused={isFocused}
-      readOnly={readOnly}
-      size={size}
-      variant={variant}
-      className={className}
-      onFocus={handleContainerFocus}
-    >
-      <PhoneInputCountrySelector
-        currentCountry={currentCountry}
-        onClick={handleOpenCountryOptions}
-        size={size}
-      />
-
-      <PhoneInputCountryOptionsContainer
-        isOpen={showCountryOptions}
-        search={search}
-        placeholder={searchCountryPlaceholder}
-        onSearch={setSearch}
-      >
-        {countries
-          .filter((country) => filterCountryFunction(country))
-          .map((country) => (
-            <PhoneInputCountryOption
-              key={country.iso}
-              country={country}
-              handleChangeValue={() => {
-                setCurrentCountry(country);
-                setShowCountryOptions(false);
-                setValue(country.mask);
-              }}
-              isActive={country.iso === currentCountry.iso}
-              size={size}
-            />
-          ))}
-
-        {countries.filter((country) => filterCountryFunction(country))
-          .length === 0 && <p>{notFoundCountryText}</p>}
-      </PhoneInputCountryOptionsContainer>
-
-      <PhoneInputCountriesOverlay
-        isOpen={showCountryOptions}
-        onClick={handleCloseCountryOptions}
-      />
-
-      <PhoneInputMask
-        ref={inputPhoneMaskRef}
-        currentCountry={currentCountry}
-        value={value}
-        onChange={(e) => {
-          setValue(e);
-          onChange && onChange(inputValue(e));
-        }}
-        disabled={disabled}
-        onBlur={handleInputBlur}
-        onFocus={handleInputFocus}
-        size={size}
-      />
-
-      <input ref={inputRef} type="hidden" name={name} value={inputValue()} />
-    </PhoneInputContainer>
-  );
-}
-
-export { PhoneInput };

package/src/components/PhoneInput/services/getDefaultFormatPhoneNumber.ts

@@ -1,85 +0,0 @@
-import { countries } from "@arkyn/templates";
-import { CountryType } from "@arkyn/types";
-import { applyMask, clear, getMask, MAX_LENGTH, TYPES } from "./utils";
-
-function formatPhoneNumber(phoneNumber: string, country: CountryType) {
-  if (country.code === "+55") {
-    let value = clear(phoneNumber);
-    const mask = getMask(value);
-
-    let nextLength = value.length;
-    if (nextLength > MAX_LENGTH) return;
-
-    value = applyMask(value, TYPES[mask] as "EIGTH" | "NINE");
-    return value;
-  }
-
-  const mask = country.mask;
-  let formattedNumber = mask;
-
-  if (country.prefix) {
-    const prefixRegex = /\$+/g;
-    formattedNumber = formattedNumber.replace(prefixRegex, country.prefix);
-  }
-
-  for (
-    let i = 0, j = 0;
-    i < formattedNumber.length && j < phoneNumber.length;
-    i++
-  ) {
-    if (formattedNumber[i] === "_") {
-      formattedNumber =
-        formattedNumber.substring(0, i) +
-        phoneNumber[j] +
-        formattedNumber.substring(i + 1);
-      j++;
-    }
-  }
-
-  return formattedNumber;
-}
-
-function getCountryWithPrefixCode(countryCode: string, prefix: string) {
-  const country = countries.find(
-    (country) => country.code === countryCode && country.prefix === prefix
-  );
-  if (!country) return null;
-  return country;
-}
-
-function getCountryWithoutPrefixCode(countryCode: string) {
-  const country = countries.find((country) => country.code === countryCode);
-  if (!country) return null;
-  return country;
-}
-
-function getDefaultFormatPhoneNumber(defaultValue: string) {
-  // default value format is +COUNTRY_CODE-PREFIX_PHONE_NUMBER_OPTIONAL PHONE_NUMBER
-  const countryCode = defaultValue.split(" ")[0].split("-")[0];
-  const prefixCode = defaultValue.split(" ")[0].split("-")[1];
-  const phoneNumber = defaultValue.split(" ")[1];
-
-  if (!countryCode || !phoneNumber) {
-    return { country: null, formattedNumber: "" };
-  }
-
-  if (prefixCode) {
-    const country = getCountryWithPrefixCode(countryCode, prefixCode);
-    if (!country) return { country: null, formattedNumber: "" };
-
-    const formattedNumber = formatPhoneNumber(phoneNumber, country);
-    const response = { country, formattedNumber };
-
-    return response;
-  }
-
-  const country = getCountryWithoutPrefixCode(countryCode);
-  if (!country) return { country: null, formattedNumber: "" };
-
-  const formattedNumber = formatPhoneNumber(phoneNumber, country);
-  const response = { country, formattedNumber };
-
-  return response;
-}
-
-export { getDefaultFormatPhoneNumber };

package/src/components/PhoneInput/services/utils.ts

@@ -1,41 +0,0 @@
-function clear(value: string) {
-  return value && value.replace(/[^0-9]/g, "");
-}
-
-const TYPES = {
-  EIGTH: "(99) 9999-9999",
-  NINE: "(99) 99999-9999",
-};
-
-function applyMask(value: string, maskPattern: string) {
-  let result = "";
-  let digitIndex = 0;
-
-  for (let i = 0; i < maskPattern.length; i++) {
-    if (maskPattern[i] === "9") {
-      if (digitIndex < value.length) {
-        result += value[digitIndex];
-        digitIndex++;
-      } else {
-        break;
-      }
-    } else {
-      if (digitIndex < value.length) {
-        result += maskPattern[i];
-      } else {
-        break;
-      }
-    }
-  }
-
-  return result;
-}
-
-function getMask(value: string): "NINE" | "EIGTH" {
-  const mask = value.length > 10 ? "NINE" : "EIGTH";
-  return mask;
-}
-
-const MAX_LENGTH = clear(TYPES.NINE).length;
-
-export { applyMask, clear, getMask, MAX_LENGTH, TYPES };

package/src/components/Popover/index.tsx

@@ -1,47 +0,0 @@
-import { PopoverProps } from "@arkyn/types";
-import { motion } from "framer-motion";
-import { useState } from "react";
-
-import "./styles.css";
-
-function Popover(props: PopoverProps) {
-  const {
-    children,
-    button,
-    closeOnClick,
-    className: baseClassName = "",
-    orientation = "bottomLeft",
-  } = props;
-  const [isOpen, setIsOpen] = useState(false);
-
-  const visible = isOpen ? "visibleTrue" : "visibleFalse";
-  const className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;
-
-  function handleOpenPopover() {
-    if (!isOpen) setIsOpen(true);
-  }
-
-  return (
-    <div className={className} onClick={handleOpenPopover}>
-      {button}
-
-      <motion.div
-        style={{ visibility: isOpen ? "visible" : "hidden" }}
-        transition={{ ease: "easeOut", duration: 0 }}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: isOpen ? 1 : 0 }}
-        exit={{ opacity: 0 }}
-        onClick={() => closeOnClick && setIsOpen(false)}
-        className="arkynPopoverContent"
-      >
-        {children}
-      </motion.div>
-
-      {isOpen && (
-        <div onClick={() => setIsOpen(false)} className="arkynPopoverOverlay" />
-      )}
-    </div>
-  );
-}
-
-export { Popover };

package/src/components/Popover/styles.css

@@ -1,77 +0,0 @@
-.arkynPopover {
-  position: relative;
-}
-
-.arkynPopover .arkynPopoverContent {
-  display: none;
-}
-
-.arkynPopover.visibleTrue .arkynPopoverContent {
-  display: unset;
-}
-
-.arkynPopoverContent {
-  position: absolute;
-  z-index: 3;
-
-  background-color: var(--card);
-  border-radius: var(--rounded-cards);
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
-}
-
-.arkynPopover.bottomLeft .arkynPopoverContent {
-  bottom: -5px;
-  right: 0;
-  transform: translateY(100%);
-}
-
-.arkynPopover.bottomRight .arkynPopoverContent {
-  bottom: -5px;
-  left: 0;
-  transform: translateY(100%);
-}
-
-.arkynPopover.topLeft .arkynPopoverContent {
-  top: -5px;
-  right: 0;
-  transform: translateY(-100%);
-}
-
-.arkynPopover.topRight .arkynPopoverContent {
-  top: -5px;
-  left: 0;
-  transform: translateY(-100%);
-}
-
-.arkynPopover.bottom .arkynPopoverContent {
-  top: calc(100% + 5px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynPopover.top .arkynPopoverContent {
-  bottom: calc(100% + 5px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynPopover.left .arkynPopoverContent {
-  bottom: 50%;
-  right: calc(100% + 5px);
-  transform: translateY(50%);
-}
-
-.arkynPopover.right .arkynPopoverContent {
-  bottom: 50%;
-  left: calc(100% + 5px);
-  transform: translateY(50%);
-}
-
-.arkynPopoverOverlay {
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}

package/src/components/Radio/RadioBox/index.tsx

@@ -1,44 +0,0 @@
-import { RadioBoxProps } from "@arkyn/types";
-
-import { useFormController } from "../../Form/FormController";
-import { useRadioGroup } from "../RadioGroup";
-
-import "./styles.css";
-
-function RadioBox(props: RadioBoxProps) {
-  const {
-    value: componentValue,
-    size: componentSize,
-    disabled,
-    children,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const { onChange, size: groupSize, value: selectedValue } = useRadioGroup();
-  const { error } = useFormController();
-
-  const size = componentSize || groupSize;
-  const checkedClass =
-    selectedValue === componentValue ? "checkedTrue" : "checkedFalse";
-  const errorClass = !!error ? "errorTrue" : "errorFalse";
-  const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
-
-  const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
-
-  return (
-    <label className={className.trim()}>
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => onChange(componentValue)}
-        onFocus={() => onChange(componentValue)}
-        {...rest}
-      />
-
-      {children}
-    </label>
-  );
-}
-
-export { RadioBox };