@arkyn/components 3.0.1-beta.2 → 3.0.1-beta.21

package/src/hooks/useAutomation.ts

@@ -1,80 +0,0 @@
-import { ToastProps } from "@arkyn/types";
-import { useContext, useEffect } from "react";
-import {
-  useActionData,
-  useFetchers,
-  useLocation,
-  useNavigate,
-} from "react-router";
-import { animateScroll } from "react-scroll";
-
-import { ModalContext } from "../context/ModalContext";
-import { useScopedParams } from "./useScopedParams";
-import { useToast } from "./useToast";
-
-function isToastProps(obj: any): obj is ToastProps {
-  return (
-    obj &&
-    typeof obj.title === "string" &&
-    typeof obj.message === "string" &&
-    (obj.size === undefined || obj.size === "md" || obj.size === "lg") &&
-    (obj.type === "success" || obj.type === "danger")
-  );
-}
-
-function useAutomation() {
-  const actionData = useActionData<any>();
-  const { closeModal, closeAll, modalIsOpen } = useContext(ModalContext);
-  const { showToast } = useToast();
-
-  const { getParam } = useScopedParams();
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-
-  const closeAllModals = getParam("closeAllModals");
-
-  const fetchers = useFetchers();
-
-  useEffect(() => {
-    const modalKey = fetchers[0]?.data?.closeModalKey || "";
-    const isOpen = modalIsOpen(modalKey);
-
-    if (modalKey && isOpen) closeModal(modalKey);
-  }, [fetchers]);
-
-  useEffect(() => {
-    if (closeAllModals === "true") {
-      closeAll();
-      navigate(pathname);
-    }
-  }, [closeAllModals]);
-
-  useEffect(() => {
-    const closeModalKey = actionData?.closeModalKey;
-    if (closeModalKey) closeModal(closeModalKey);
-  }, [actionData]);
-
-  useEffect(() => {
-    const closeAllModals = actionData?.closeAllModals;
-    if (typeof closeAllModals === "boolean" && closeAllModals) closeAll();
-  }, [actionData]);
-
-  useEffect(() => {
-    const existsToast = actionData?.toast;
-    const existsMessage = actionData?.message;
-
-    if (isToastProps(existsToast)) showToast(existsToast);
-    if (!isToastProps(existsToast) && existsMessage) {
-      showToast({ message: existsMessage, type: "danger" });
-    }
-  }, [actionData]);
-
-  useEffect(() => {
-    if (typeof actionData?.data?.scrollTo === "string") {
-      const element = document.getElementById(actionData?.data?.scrollTo);
-      element && animateScroll.scrollTo(element.offsetTop - 200);
-    }
-  }, [actionData]);
-}
-
-export { useAutomation };

package/src/hooks/useDrawer.ts

@@ -1,45 +0,0 @@
-import { DrawerContextProps } from "@arkyn/types";
-import { useContext } from "react";
-
-import { DrawerContext } from "../context/DrawerContext";
-
-type OpenDrawerProps<T = any> = (data?: T) => void;
-
-function useDrawer<T = any>(): DrawerContextProps<T>;
-function useDrawer<T = any>(
-  key: string
-): {
-  drawerIsOpen: boolean;
-  drawerData: T;
-  openDrawer: OpenDrawerProps<T>;
-  closeDrawer: () => void;
-};
-
-function useDrawer(key?: string) {
-  const contextData = useContext(DrawerContext);
-
-  if (Object.entries(contextData).length === 0) {
-    throw new Error("useDrawer must be used within a Provider");
-  }
-
-  if (key) {
-    const {
-      drawerData: contextDrawerData,
-      drawerIsOpen: contextDrawerIsOpen,
-      openDrawer: contextOpenDrawer,
-      closeDrawer: contextCloseDrawer,
-    } = contextData;
-
-    const drawerIsOpen = contextDrawerIsOpen(key);
-    const drawerData = contextDrawerData(key);
-
-    const openDrawer: OpenDrawerProps = (data) => contextOpenDrawer(key, data);
-    const closeDrawer = () => contextCloseDrawer(key);
-
-    return { drawerIsOpen, drawerData, openDrawer, closeDrawer };
-  } else {
-    return contextData;
-  }
-}
-
-export { useDrawer };

package/src/hooks/useFieldErrors.ts

@@ -1,24 +0,0 @@
-import { useActionData, useFetcher } from "react-router";
-import { useFormKey } from "./useFormKey";
-
-function useFieldErrors() {
-  const actionData = useActionData<any>();
-
-  const formKey = useFormKey();
-  const fetcher = useFetcher({ key: formKey });
-
-  const responseFieldErrors =
-    actionData?.fieldErrors || fetcher?.data?.fieldErrors;
-
-  let mappedResponse: { [x: string]: string | undefined | null } = {};
-
-  Object.entries(responseFieldErrors || {}).forEach(([key, value]) => {
-    if (typeof value === "string" && typeof key === "string") {
-      mappedResponse[key] = value;
-    }
-  });
-
-  return mappedResponse;
-}
-
-export { useFieldErrors };

package/src/hooks/useFormKey.ts

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { FormKeyContext } from "../context/FormKeyContext";
-
-function useFormKey() {
-  const contextData = useContext(FormKeyContext);
-  return contextData;
-}
-
-export { useFormKey };

package/src/hooks/useHydrated.ts

@@ -1,15 +0,0 @@
-import { useSyncExternalStore } from "react";
-
-function subscribe() {
-  return () => {};
-}
-
-function useHydrated() {
-  return useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
-}
-
-export { useHydrated };

package/src/hooks/useModal.ts

@@ -1,45 +0,0 @@
-import { ModalContextProps } from "@arkyn/types";
-import { useContext } from "react";
-
-import { ModalContext } from "../context/ModalContext";
-
-type OpenModalProps<T = any> = (data?: T) => void;
-
-function useModal<T = any>(): ModalContextProps<T>;
-function useModal<T = any>(
-  key: string
-): {
-  modalIsOpen: boolean;
-  modalData: T;
-  openModal: OpenModalProps<T>;
-  closeModal: () => void;
-};
-
-function useModal(key?: string) {
-  const contextData = useContext(ModalContext);
-
-  if (Object.entries(contextData).length === 0) {
-    throw new Error("useModal must be used within a Provider");
-  }
-
-  if (key) {
-    const {
-      modalData: contextModalData,
-      modalIsOpen: contextModalIsOpen,
-      openModal: contextOpenModal,
-      closeModal: contextCloseModal,
-    } = contextData;
-
-    const modalIsOpen = contextModalIsOpen(key);
-    const modalData = contextModalData(key);
-
-    const openModal: OpenModalProps = (data) => contextOpenModal(key, data);
-    const closeModal = () => contextCloseModal(key);
-
-    return { modalIsOpen, modalData, openModal, closeModal };
-  } else {
-    return contextData;
-  }
-}
-
-export { useModal };

package/src/hooks/useToast.ts

@@ -1,14 +0,0 @@
-import { useContext } from "react";
-import { ToastContext } from "../context/ToastContext";
-
-function useToast() {
-  const contextData = useContext(ToastContext);
-
-  if (Object.entries(contextData).length === 0) {
-    throw new Error("useToast must be used within a Provider");
-  }
-
-  return contextData;
-}
-
-export { useToast };

package/src/provider/DrawerProvider.tsx

@@ -1,41 +0,0 @@
-import { DrawerProviderProps, OpenedDrawers } from "@arkyn/types";
-import { useState } from "react";
-
-import { DrawerContext } from "../context/DrawerContext";
-
-function DrawerProvider(args: DrawerProviderProps) {
-  const { children = false } = args;
-  const [openedDrawers, setOpenedDrawers] = useState<OpenedDrawers>([]);
-
-  function drawerIsOpen(key: string) {
-    return !!openedDrawers.some((drawer) => drawer.key === key);
-  }
-
-  function drawerData(key: string) {
-    return openedDrawers.find((drawer) => drawer.key === key)?.data;
-  }
-
-  function openDrawer(key: string, data?: any) {
-    const alreadyExist = drawerIsOpen(key);
-    if (alreadyExist) {
-      setOpenedDrawers((old) => {
-        const filtered = old.filter((drawer) => drawer.key !== key);
-        return [...filtered, { key, data }];
-      });
-    } else setOpenedDrawers([...openedDrawers, { key, data }]);
-  }
-
-  function closeDrawer(key: string) {
-    setOpenedDrawers(openedDrawers.filter((drawer) => drawer.key !== key));
-  }
-
-  return (
-    <DrawerContext.Provider
-      value={{ drawerIsOpen, drawerData, openDrawer, closeDrawer }}
-    >
-      {children}
-    </DrawerContext.Provider>
-  );
-}
-
-export { DrawerProvider };

package/src/provider/FormKeyProvider.tsx

@@ -1,11 +0,0 @@
-import { FormKeyContext } from "../context/FormKeyContext";
-
-function FormKeyProvider(args: { children: React.ReactNode; rawKey: string }) {
-  const { children, rawKey } = args;
-
-  return (
-    <FormKeyContext.Provider value={rawKey}>{children}</FormKeyContext.Provider>
-  );
-}
-
-export { FormKeyProvider };

package/src/provider/GoogleProvider.tsx

@@ -1,20 +0,0 @@
-import { GoogleProviderProps } from "@arkyn/types";
-import { LoadScript } from "@react-google-maps/api";
-
-function GoogleProvider({
-  googleMapsApiKey,
-  children,
-  ...props
-}: GoogleProviderProps) {
-  return (
-    <LoadScript
-      libraries={["places", "marker", "maps"]}
-      googleMapsApiKey={googleMapsApiKey}
-      {...props}
-    >
-      {children}
-    </LoadScript>
-  );
-}
-
-export { GoogleProvider };

package/src/provider/ModalProvider.tsx

@@ -1,45 +0,0 @@
-import { ModalProviderProps, OpenedModals } from "@arkyn/types";
-import { useState } from "react";
-
-import { ModalContext } from "../context/ModalContext";
-
-function ModalProvider(args: ModalProviderProps) {
-  const { children = false } = args;
-  const [openedModals, setOpenedModals] = useState<OpenedModals>([]);
-
-  function modalIsOpen(key: string) {
-    return !!openedModals.some((modal) => modal.key === key);
-  }
-
-  function modalData(key: string) {
-    return openedModals.find((modal) => modal.key === key)?.data;
-  }
-
-  function openModal(key: string, data?: any) {
-    const alreadyExist = modalIsOpen(key);
-    if (alreadyExist) {
-      setOpenedModals((old) => {
-        const filtered = old.filter((modal) => modal.key !== key);
-        return [...filtered, { key, data }];
-      });
-    } else setOpenedModals([...openedModals, { key, data }]);
-  }
-
-  function closeModal(key: string) {
-    setOpenedModals(openedModals.filter((modal) => modal.key !== key));
-  }
-
-  function closeAll() {
-    setOpenedModals([]);
-  }
-
-  return (
-    <ModalContext.Provider
-      value={{ modalIsOpen, modalData, openModal, closeModal, closeAll }}
-    >
-      {children}
-    </ModalContext.Provider>
-  );
-}
-
-export { ModalProvider };

package/src/provider/ToastProvider.tsx

@@ -1,51 +0,0 @@
-import { ToastProps, ToastProviderProps } from "@arkyn/types";
-import toast, { Toaster } from "react-hot-toast";
-
-import { ToastContext } from "../context/ToastContext";
-
-function ToastProvider({ children }: ToastProviderProps) {
-  function showToast(props: ToastProps) {
-    switch (props.type) {
-      case "success":
-        return toast.success(props.message, {
-          style: {
-            background: "#10B981",
-            color: "#ffffff",
-            padding: "12px 16px",
-            fontSize: "14px",
-            fontWeight: 600,
-          },
-          iconTheme: {
-            primary: "#059669",
-            secondary: "#ffffff",
-          },
-        });
-      case "danger":
-        return toast.error(props.message, {
-          style: {
-            background: "#E11D48",
-            color: "#ffffff",
-            padding: "12px 16px",
-            fontSize: "14px",
-            fontWeight: 600,
-          },
-          iconTheme: {
-            primary: "#BE123C",
-            secondary: "#ffffff",
-          },
-        });
-    }
-  }
-
-  return (
-    <ToastContext.Provider value={{ showToast }}>
-      <Toaster
-        position="top-right"
-        containerStyle={{ zIndex: 999999999999999 }}
-      />
-      {children}
-    </ToastContext.Provider>
-  );
-}
-
-export { ToastProvider };

package/src/services/clearNumber.ts

@@ -1,6 +0,0 @@
-const clearNumber = (number: any) => {
-  if (typeof number === "number") return number;
-  return Number(number.toString().replace(/[^0-9-]/g, ""));
-};
-
-export { clearNumber };

package/src/services/format.ts

@@ -1,21 +0,0 @@
-const SYMBOL_LENGTH = 3;
-
-const formatCurrency = (
-  locale: string = "pt-BR",
-  value: number,
-  currencyType = "BRL",
-  hideSymbol = true
-) => {
-  const formatter = new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: currencyType,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  });
-  const formattedValue = formatter.format(value);
-
-  return formattedValue.slice(hideSymbol ? SYMBOL_LENGTH : 0);
-};
-
-export { formatCurrency };

package/src/services/generateIcon.tsx

@@ -1,8 +0,0 @@
-import { LucideIcon } from "lucide-react";
-
-function GenerateIcon(iconSize: number, Icon?: LucideIcon) {
-  if (!Icon) return <></>;
-  return <Icon size={iconSize} strokeWidth={2.5} />;
-}
-
-export { GenerateIcon };

package/src/services/generatePagerArray.ts

@@ -1,9 +0,0 @@
-function generatePagesArray(from: number, to: number) {
-  return [...new Array(to - from)]
-    .map((_, index) => {
-      return from + index + 1;
-    })
-    .filter((page) => page > 0);
-}
-
-export { generatePagesArray };

package/src/services/getHtmlFromRichTextValue.ts

@@ -1,55 +0,0 @@
-import { Element as SlateElement, Text } from "slate";
-import { RichTextValue } from "@arkyn/types";
-
-const serialize = (node: any): string => {
-  if (Text.isText(node)) {
-    let text = node.text;
-    if (node.bold) {
-      text = `<strong>${text}</strong>`;
-    }
-    if (node.code) {
-      text = `<code>${text}</code>`;
-    }
-    if (node.italic) {
-      text = `<em>${text}</em>`;
-    }
-    if (node.underline) {
-      text = `<u>${text}</u>`;
-    }
-    return text;
-  }
-
-  if (SlateElement.isElement(node)) {
-    const children = node.children.map((n: any) => serialize(n)).join("");
-    const alignStyle = node.align || "left";
-
-    switch (node.type) {
-      case "image":
-        return `<img src="${node.src}" class="align_${alignStyle}" />`;
-      case "paragraph":
-        return `<p class="align_${alignStyle}">${children}</p>`;
-      case "blockQuote":
-        return `<blockquote class="align_${alignStyle}">${children}</blockquote>`;
-      case "bulletedList":
-        return `<ul class="align_${alignStyle}">${children}</ul>`;
-      case "headingOne":
-        return `<h1 class="align_${alignStyle}">${children}</h1>`;
-      case "headingTwo":
-        return `<h2 class="align_${alignStyle}">${children}</h2>`;
-      case "listItem":
-        return `<li class="align_${alignStyle}">${children}</li>`;
-      case "numberedList":
-        return `<ol class="align_${alignStyle}">${children}</ol>`;
-      default:
-        return children;
-    }
-  }
-
-  return "";
-};
-
-const getHtmlFromRichTextValue = (value: RichTextValue): string => {
-  return value.map((node) => serialize(node)).join("");
-};
-
-export { getHtmlFromRichTextValue };

package/src/services/getRichTextValueFromHtml.ts

@@ -1,82 +0,0 @@
-import { RichTextValue } from "@arkyn/types";
-import parse from "html-react-parser";
-
-type ParseElement = {
-  type: string;
-  props: {
-    src?: string;
-    children: ParseElement[] | string;
-    className?: string;
-  };
-};
-
-const deserialize = (el: ParseElement): any => {
-  if (typeof el === "string") {
-    return { text: el };
-  }
-
-  const children = Array.isArray(el.props.children)
-    ? el.props.children.map((child) => deserialize(child))
-    : [{ text: el.props.children || "" }];
-
-  const align = el.props.className?.replace("align_", "") as
-    | "left"
-    | "center"
-    | "right"
-    | "justify";
-
-  switch (el.type) {
-    case "img":
-      return {
-        type: "image",
-        align,
-        src: el.props.src,
-        children: [{ text: "" }],
-      };
-    case "p":
-      return { type: "paragraph", align, children };
-    case "blockquote":
-      return { type: "blockQuote", align, children };
-    case "ul":
-      return { type: "bulletedList", align, children };
-    case "ol":
-      return { type: "numberedList", align, children };
-    case "li":
-      return { type: "listItem", align, children };
-    case "h1":
-      return { type: "headingOne", align, children };
-    case "h2":
-      return { type: "headingTwo", align, children };
-    case "strong":
-      return { text: el.props.children, bold: true };
-    case "code":
-      return { text: el.props.children, code: true };
-    case "em":
-      return { text: el.props.children, italic: true };
-    case "u":
-      return { text: el.props.children, underline: true };
-    default:
-      return { text: el.props.children || "" };
-  }
-};
-
-const getRichTextValueFromHtml = (html: string): RichTextValue => {
-  const parsed = parse(html);
-
-  if (Array.isArray(parsed)) {
-    return parsed.map((node) => {
-      if (typeof node === "string") {
-        return { text: node };
-      }
-      return deserialize(node as ParseElement);
-    });
-  }
-
-  if (typeof parsed === "string") {
-    return [{ text: parsed }];
-  }
-
-  return [deserialize(parsed as ParseElement)];
-};
-
-export { getRichTextValueFromHtml };

package/src/services/index.ts

@@ -1,15 +0,0 @@
-import { GenerateIcon } from "./generateIcon";
-import { generatePagesArray } from "./generatePagerArray";
-import { getHtmlFromRichTextValue } from "./getHtmlFromRichTextValue";
-import { getRichTextValueFromHtml } from "./getRichTextValueFromHtml";
-import { isHtml } from "./isHtml";
-import { morpheme } from "./morpheme";
-
-export {
-  GenerateIcon,
-  generatePagesArray,
-  morpheme,
-  getHtmlFromRichTextValue,
-  isHtml,
-  getRichTextValueFromHtml,
-};

package/src/services/isHtml.ts

@@ -1,6 +0,0 @@
-const isHtml = (str: string): boolean => {
-  const htmlRegex = /<\/?[a-z][\s\S]*>/i;
-  return htmlRegex.test(str);
-};
-
-export { isHtml };

package/src/services/maskValues.ts

@@ -1,17 +0,0 @@
-import { formatCurrency } from "./format";
-import { normalizeValue } from "./normalizeValue";
-
-const maskValues = (
-  locale: string,
-  inputFieldValue: string | number | undefined,
-  currency: string
-): [number, string] => {
-  if (!inputFieldValue) return [0, ""];
-
-  const value = normalizeValue(inputFieldValue);
-  const maskedValue = formatCurrency(locale, value, currency);
-
-  return [value, maskedValue];
-};
-
-export { maskValues };

package/src/services/morpheme.tsx

@@ -1,19 +0,0 @@
-import { 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/services/normalizeValue.ts

@@ -1,21 +0,0 @@
-import { MAXIMUM_FRACTION_DIGITS } from "../constants/decimals";
-import { clearNumber } from "./clearNumber";
-
-const normalizeValue = (number: string | number) => {
-  let safeNumber = number;
-
-  if (typeof number === "string") {
-    safeNumber = clearNumber(number);
-    if (safeNumber % 1 !== 0) {
-      safeNumber = safeNumber.toFixed(MAXIMUM_FRACTION_DIGITS);
-    }
-  } else {
-    safeNumber = Number.isInteger(number)
-      ? Number(number) * 10 ** MAXIMUM_FRACTION_DIGITS
-      : number.toFixed(MAXIMUM_FRACTION_DIGITS);
-  }
-
-  return clearNumber(safeNumber) / 10 ** MAXIMUM_FRACTION_DIGITS;
-};
-
-export { normalizeValue };