@arkyn/components 3.0.1-beta.5 → 3.0.1-beta.51

package/src/components/Tooltip/index.tsx

@@ -1,24 +0,0 @@
-import { TooltipProps } from "@arkyn/types";
-import "./styles.css";
-
-function Tooltip(props: TooltipProps) {
-  const {
-    text,
-    size = "lg",
-    children,
-    orientation = "top",
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const className = `arkynTooltip ${size} ${orientation} ${baseClassName}`;
-
-  return (
-    <div className={className.trim()} {...rest}>
-      {children}
-      <div className="arkynTooltipText">{text}</div>
-    </div>
-  );
-}
-
-export { Tooltip };

package/src/components/Tooltip/styles.css

@@ -1,112 +0,0 @@
-.arkynTooltip {
-  position: relative;
-  display: block;
-}
-
-.arkynTooltipText {
-  visibility: hidden;
-
-  opacity: 0;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  transition: 0.15s all ease-out;
-
-  border-radius: 4px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-weight: 400;
-  color: var(--tooltip-text);
-  background-color: var(--tooltip-background);
-
-  z-index: 9999;
-}
-
-.arkynTooltip.lg .arkynTooltipText {
-  font-size: 14px;
-  line-height: 14px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip.md .arkynTooltipText {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip:hover .arkynTooltipText {
-  opacity: 1;
-  visibility: visible;
-}
-
-.arkynTooltip.top .arkynTooltipText {
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.top .arkynTooltipText::before {
-  content: "";
-  top: 100%;
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 6px 6px 0 6px;
-  bottom: 20px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText {
-  top: 50%;
-  right: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText::before {
-  content: "";
-  top: 50%;
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 0 6px 6px;
-  left: 100%;
-  position: absolute;
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText {
-  top: 50%;
-  left: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 6px 6px 0;
-  top: 50%;
-  left: 0;
-  transform: translate(-100%, -50%);
-  position: absolute;
-}
-
-.arkynTooltip.bottom .arkynTooltipText {
-  top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.bottom .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 0 6px 6px 6px;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  position: absolute;
-}

package/src/constants/decimals.ts

@@ -1,3 +0,0 @@
-const MAXIMUM_FRACTION_DIGITS = 2;
-
-export { MAXIMUM_FRACTION_DIGITS };

package/src/context/DrawerContext.ts

@@ -1,6 +0,0 @@
-import { DrawerContextProps } from "@arkyn/types";
-import { createContext } from "react";
-
-const DrawerContext = createContext({} as DrawerContextProps);
-
-export { DrawerContext };

package/src/context/FormKeyContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-
-const FormKeyContext = createContext("" as string | undefined);
-
-export { FormKeyContext };

package/src/context/ModalContext.ts

@@ -1,6 +0,0 @@
-import { ModalContextProps } from "@arkyn/types";
-import { createContext } from "react";
-
-const ModalContext = createContext({} as ModalContextProps);
-
-export { ModalContext };

package/src/context/ToastContext.ts

@@ -1,6 +0,0 @@
-import { ToastContextProps } from "@arkyn/types";
-import * as React from "react";
-
-const ToastContext = React.createContext({} as ToastContextProps);
-
-export { ToastContext };

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/useScopedParams.ts

@@ -1,31 +0,0 @@
-import { useLocation } from "react-router";
-
-type ParamsType = Record<string, string | number | boolean | undefined>;
-
-function useScopedParams(scope: string = "") {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const prefix = scope ? `${scope}:` : "";
-
-  const updateSearchParams = (params: ParamsType) => {
-    Object.entries(params).forEach(([key, value]) => {
-      if (value === undefined) {
-        searchParams.delete(`${prefix}${key}`);
-      } else {
-        searchParams.set(`${prefix}${key}`, String(value));
-      }
-    });
-  };
-
-  return {
-    getParam: (key: string) => searchParams.get(`${prefix}${key}`),
-    getScopedSearch: (params: ParamsType) => {
-      updateSearchParams(params);
-      let search = searchParams.toString();
-      if (search) search = "?" + search;
-      return search;
-    },
-  };
-}
-
-export { useScopedParams };

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/index.ts

@@ -1,80 +0,0 @@
-// Data Display
-export {
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "./components/Alert";
-export { Badge } from "./components/Badge";
-export { Card } from "./components/Card";
-export { Divider } from "./components/Divider";
-export { Skeleton } from "./components/Skeleton";
-export {
-  TableBody,
-  TableCaption,
-  TableContainer,
-  TableFooter,
-  TableHeader,
-} from "./components/Table";
-
-// Form
-export { AudioUpload } from "./components/AudioUpload";
-export { Button } from "./components/Button";
-export { Checkbox } from "./components/Checkbox";
-export { FileUpload } from "./components/FileUpload";
-export { FormController, FormError, FormLabel } from "./components/Form";
-export { IconButton } from "./components/IconButton";
-export { ImageUpload } from "./components/ImageUpload";
-export { Input } from "./components/Input";
-export { MultiSelect } from "./components/MultiSelect";
-export { PhoneInput } from "./components/PhoneInput";
-export { RadioBox, RadioGroup } from "./components/Radio";
-export { RichText } from "./components/RichText";
-export { Select } from "./components/Select";
-export { Slider } from "./components/Slider";
-export { Switch } from "./components/Switch";
-export { Textarea } from "./components/Textarea";
-
-// Navigation
-export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
-export { Pagination } from "./components/Pagination";
-export { TabButton, TabContainer } from "./components/Tabs";
-
-// Overlay
-export { DrawerContainer, DrawerHeader } from "./components/Drawer";
-export { ModalContainer, ModalFooter, ModalHeader } from "./components/Modal";
-export { Popover } from "./components/Popover";
-export { Toast } from "./components/Toast";
-export { Tooltip } from "./components/Tooltip";
-
-// Hooks
-export { useFormController } from "./components/Form/FormController";
-export { useAutomation } from "./hooks/useAutomation";
-export { useDrawer } from "./hooks/useDrawer";
-export { useFieldErrors } from "./hooks/useFieldErrors";
-export { useFormKey } from "./hooks/useFormKey";
-export { useHydrated } from "./hooks/useHydrated";
-export { useModal } from "./hooks/useModal";
-export { useScopedParams } from "./hooks/useScopedParams";
-export { useToast } from "./hooks/useToast";
-
-// Providers
-export { DrawerProvider } from "./provider/DrawerProvider";
-export { FormKeyProvider } from "./provider/FormKeyProvider";
-export { GoogleProvider } from "./provider/GoogleProvider";
-export { ModalProvider } from "./provider/ModalProvider";
-export { ToastProvider } from "./provider/ToastProvider";
-
-// Others
-export { ClientOnly } from "./components/ClientOnly";
-export { FacebookPixel } from "./components/FacebookPixel";
-export { GoogleMap } from "./components/GoogleMap";
-export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
-export { GoogleTagManager } from "./components/GoogleTagManager";
-
-// Services
-export { getHtmlFromRichTextValue } from "./services/getHtmlFromRichTextValue";
-export { getRichTextValueFromHtml } from "./services/getRichTextValueFromHtml";
-export { isHtml } from "./services/isHtml";
-export { morpheme } from "./services/morpheme";

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 };