@arkyn/components 1.3.0 → 1.3.1

package/dist/context/ModalContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const ModalContext = createContext({});
+export { ModalContext };

package/dist/context/ToastContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ToastContextProps } from "@arkyn/types";
+declare const ToastContext: import("react").Context<ToastContextProps>;
+export { ToastContext };
+//# sourceMappingURL=ToastContext.d.ts.map

package/dist/context/ToastContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../src/context/ToastContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD,QAAA,MAAM,YAAY,4CAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/context/ToastContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const ToastContext = createContext({});
+export { ToastContext };

package/dist/hooks/useAutomation.d.ts

@@ -0,0 +1,3 @@
+declare function useAutomation(): void;
+export { useAutomation };
+//# sourceMappingURL=useAutomation.d.ts.map

package/dist/hooks/useAutomation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutomation.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutomation.ts"],"names":[],"mappings":"AAKA,iBAAS,aAAa,SAQrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/hooks/useAutomation.js

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

package/dist/hooks/useModal.d.ts

@@ -0,0 +1,11 @@
+type OpenModalProps = (e?: {
+    data: any;
+}) => void;
+declare function useModal(key: string): {
+    modalIsOpen: boolean;
+    modalData: any;
+    openModal: OpenModalProps;
+    closeModal: () => void;
+};
+export { useModal };
+//# sourceMappingURL=useModal.d.ts.map

package/dist/hooks/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.ts"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG,CAAC,CAAC,CAAC,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,KAAK,IAAI,CAAC;AAElD,iBAAS,QAAQ,CAAC,GAAG,EAAE,MAAM;;;;;EAqB5B;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/hooks/useModal.js

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

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,3 @@
+declare function useToast(): import("@arkyn/types").ToastContextProps;
+export { useToast };
+//# sourceMappingURL=useToast.d.ts.map

package/dist/hooks/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAGA,iBAAS,QAAQ,6CAQhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/hooks/useToast.js

@@ -0,0 +1,10 @@
+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/dist/index.d.ts

@@ -10,5 +10,10 @@ export { Select } from "./components/Select";
 export { Breadcrumb, BreadcrumbLink } from "./components/Breadcrumb";
 export { Modal } from "./components/Modal";
 export { Tooltip } from "./components/Tooltip";
+export { useAutomation } from "./hooks/useAutomation";
+export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
+export { useToast } from "./hooks/useToast";
+export { ModalProvider } from "./provider/ModalProvider";
+export { ToastProvider } from "./provider/ToastProvider";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -15,4 +15,10 @@ export { Breadcrumb, BreadcrumbLink } from "./components/Breadcrumb";
 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/dist/provider/ModalProvider.d.ts

@@ -0,0 +1,4 @@
+import { ModalProviderProps } from "@arkyn/types";
+declare function ModalProvider(args: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
+export { ModalProvider };
+//# sourceMappingURL=ModalProvider.d.ts.map

package/dist/provider/ModalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalProvider.d.ts","sourceRoot":"","sources":["../../src/provider/ModalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,cAAc,CAAC;AAKhE,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,2CA2B9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/provider/ModalProvider.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ModalContext } from "../context/ModalContext";
+function ModalProvider(args) {
+    const { children = false } = args;
+    const [openedModals, setOpenedModals] = useState([]);
+    function modalIsOpen(key) {
+        return !!openedModals.some((modal) => modal.key === key);
+    }
+    function modalData(key) {
+        return openedModals.find((modal) => modal.key === key)?.data;
+    }
+    function openModal(key, data) {
+        setOpenedModals([...openedModals, { key, data }]);
+    }
+    function closeModal(key) {
+        setOpenedModals(openedModals.filter((modal) => modal.key !== key));
+    }
+    return (_jsx(ModalContext.Provider, { value: { modalIsOpen, modalData, openModal, closeModal }, children: children }));
+}
+export { ModalProvider };

package/dist/provider/ToastProvider.d.ts

@@ -0,0 +1,4 @@
+import { ToastProviderProps } from "@arkyn/types";
+declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export { ToastProvider };
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/provider/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../src/provider/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAKlD,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAyBtD;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/provider/ToastProvider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toaster, toast } from "sonner";
+import { ToastContext } from "../context/ToastContext";
+function ToastProvider({ children }) {
+    function successToast(message) {
+        toast.success(message);
+    }
+    function infoToast(message) {
+        toast.info(message);
+    }
+    function errorToast(message) {
+        toast.error(message);
+    }
+    function warningToast(message) {
+        toast.warning(message);
+    }
+    return (_jsxs(ToastContext.Provider, { value: { errorToast, warningToast, successToast, infoToast }, children: [_jsx(Toaster, { richColors: true }), children] }));
+}
+export { ToastProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",
@@ -13,7 +13,8 @@
   "dependencies": {
     "@react-input/mask": ">=1.2.4",
     "framer-motion": ">=11.2.4",
-    "lucide-react": ">=0.378.0"
+    "lucide-react": ">=0.378.0",
+    "sonner": ">=1.4.41"
   },
   "peerDependencies": {
     "@remix-run/react": ">=2.0.1",

package/src/components/Checkbox/index.tsx

@@ -36,11 +36,10 @@ function Checkbox(props: CheckboxProps) {
   }
 
   return (
-    <div className={className} onClick={handleCheck} {...rest}>
+    <div id={id} className={className} onClick={handleCheck} {...rest}>
       <input
         type="hidden"
         name={name}
-        id={id}
         ref={inputRef}
         value={currentChecked ? value || "checked" : ""}
       />

package/src/components/Toast/index.tsx

@@ -0,0 +1,19 @@
+type ToastProps = {
+  title?: string;
+  message: string;
+  type: "success" | "warning" | "error" | "info";
+};
+
+import "./styles.css";
+
+function Toast({ message, type, title }: ToastProps) {
+  return (
+    <div className={"arkyn_toast " + type}>
+      {title && <strong>{title}</strong>}
+      <strong>Sucesso</strong>
+      <p>{message}</p>
+    </div>
+  );
+}
+
+export { Toast };

package/src/components/Toast/styles.css

@@ -0,0 +1,30 @@
+.arkyn_toast {
+  display: flex;
+  flex-direction: column;
+
+  padding: 8px 16px;
+  min-width: 200px;
+
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+
+.arkyn_toast strong {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.arkyn_toast p {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* SCHEME */
+.arkyn_toast.success {
+  background-color: var(--success-200);
+}
+
+.arkyn_toast strong,
+.arkyn_toast p {
+  color: var(--success-600);
+}

package/src/context/ModalContext.ts

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

package/src/context/ToastContext.ts

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

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