@arkyn/components 1.2.5 → 1.3.1

package/src/hooks/useAutomation.ts

@@ -0,0 +1,16 @@
+import { useActionData } from "@remix-run/react";
+import { useContext, useEffect } from "react";
+
+import { ModalContext } from "../context/ModalContext";
+
+function useAutomation() {
+  const actionData = useActionData<any>();
+  const { closeModal } = useContext(ModalContext);
+
+  useEffect(() => {
+    const closeModalKey = actionData?.closeModalKey;
+    if (closeModalKey) closeModal(closeModalKey);
+  }, [actionData]);
+}
+
+export { useAutomation };

package/src/hooks/useModal.ts

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { ModalContext } from "../context/ModalContext";
+
+type OpenModalProps = (e?: { data: any }) => 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");
+  }
+
+  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?.data);
+  const closeModal = () => contextCloseModal(key);
+
+  return { modalIsOpen, modalData, openModal, closeModal };
+}
+
+export { useModal };

package/src/hooks/useToast.ts

@@ -0,0 +1,14 @@
+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

@@ -19,4 +19,11 @@ export { Modal } from "./components/Modal";
 export { Tooltip } from "./components/Tooltip";
 
 // Hooks
+export { useAutomation } from "./hooks/useAutomation";
+export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
+export { useToast } from "./hooks/useToast";
+
+// Providers
+export { ModalProvider } from "./provider/ModalProvider";
+export { ToastProvider } from "./provider/ToastProvider";

package/src/provider/ModalProvider.tsx

@@ -0,0 +1,35 @@
+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) {
+    setOpenedModals([...openedModals, { key, data }]);
+  }
+
+  function closeModal(key: string) {
+    setOpenedModals(openedModals.filter((modal) => modal.key !== key));
+  }
+
+  return (
+    <ModalContext.Provider
+      value={{ modalIsOpen, modalData, openModal, closeModal }}
+    >
+      {children}
+    </ModalContext.Provider>
+  );
+}
+
+export { ModalProvider };

package/src/provider/ToastProvider.tsx

@@ -0,0 +1,33 @@
+import { ToastProviderProps } from "@arkyn/types";
+import { Toaster, toast } from "sonner";
+
+import { ToastContext } from "../context/ToastContext";
+
+function ToastProvider({ children }: ToastProviderProps) {
+  function successToast(message: string) {
+    toast.success(message);
+  }
+
+  function infoToast(message: string) {
+    toast.info(message);
+  }
+
+  function errorToast(message: string) {
+    toast.error(message);
+  }
+
+  function warningToast(message: string) {
+    toast.warning(message);
+  }
+
+  return (
+    <ToastContext.Provider
+      value={{ errorToast, warningToast, successToast, infoToast }}
+    >
+      <Toaster richColors />
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export { ToastProvider };