@campxdev/campx-web-utils 0.1.18 → 0.1.20

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "bracketSameLine": false
+}

package/craco.config.js

@@ -1,18 +1,14 @@
-const path = require("path");
-const { getLoader, loaderByName } = require("@craco/craco");
+const path = require('path');
+const { getLoader, loaderByName } = require('@craco/craco');
 const packages = [];
-packages.push(path.dirname(require.resolve("@campxdev/react-blueprint")));
+packages.push(path.dirname(require.resolve('@campxdev/react-blueprint')));
+packages.push(path.dirname(require.resolve('@campxdev/campx-web-utils')));
 module.exports = {
   webpack: {
     configure: (webpackConfig) => {
-      const { isFound, match } = getLoader(
-        webpackConfig,
-        loaderByName("babel-loader")
-      );
+      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
       if (isFound) {
-        const include = Array.isArray(match.loader.include)
-          ? match.loader.include
-          : [match.loader.include];
+        const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
         match.loader.include = include.concat(packages);
       }
 

package/export.ts

@@ -0,0 +1,3 @@
+export * from './src/config/axios';
+export * from './src/context/export';
+export * from './src/hooks/export';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.18",
-  "main": "./exports.ts",
+  "version": "0.1.20",
+  "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.1.6",
+    "@campxdev/react-blueprint": "1.1.8",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.12.1",
     "@testing-library/jest-dom": "^5.14.1",

package/src/App.tsx

@@ -1,7 +1,7 @@
-import { useRoutes } from "react-router-dom";
+import { useRoutes } from 'react-router-dom';
 
-import { mainRoutes } from "./Pages/main";
-import { Providers } from "./context/export";
+import { mainRoutes } from './Pages/main';
+import { Providers } from './context/export';
 
 export default function App() {
   return (

package/src/AppContent.tsx

@@ -1,37 +1,26 @@
-import { useQuery } from "react-query";
-import { axios } from "./config/axios";
-
-const fetchClubRequests = () => {
-  return axios
-    .get(`/hrms/departments`, {
-      headers: {
-        "x-tenant-id": "aupulse",
-        "X-Institution-Code": "aupulse",
-        campx_session_key: "66a36c752e28b1200876b034",
-      },
-    })
-    .then((res) => res.data);
-};
+import { Button } from '@campxdev/react-blueprint';
+import useConfirm from './hooks/useConfirm';
 
 function AppContent() {
-  const {
-    data: requests,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery("club-requests", () => fetchClubRequests());
+  const isConfirm = useConfirm();
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  const handleConfirm = async () => {
+    const confirm = await isConfirm({
+      type: 'delete',
+      title: 'Are you sure?',
+      message: 'Please confirm before submission to action description',
+    });
 
-  // if (error) {
-  //   // No need to handle the error locally, it will be caught by ErrorBoundary
-  //   console.error("Error fetching club requests:", error);
-  //   throw error; // Re-throw the error to be caught by the ErrorBoundary
-  // }
+    // If user cancel the action
+    if (!confirm) {
+      console.log('User cancelled the action');
+      return;
+    }
+    // If user confirm the action
+    console.log('User confirmed the action');
+  };
 
-  return <></>;
+  return <Button onClick={handleConfirm}>Confirm</Button>;
 }
 
 export default AppContent;

package/src/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
 
 const AppLayout = () => {
   return (

package/src/Pages/main.tsx

@@ -1,18 +1,18 @@
-import { Navigate } from "react-router-dom";
-import AppContent from "../AppContent";
-import AppLayout from "../Layout/AppLayout";
+import { Navigate } from 'react-router-dom';
+import AppContent from '../AppContent';
+import AppLayout from '../Layout/AppLayout';
 
 export const mainRoutes = [
   {
-    path: "/",
+    path: '/',
     element: <AppLayout />,
     children: [
       {
         index: true,
-        element: <Navigate to={"app-content"} />,
+        element: <Navigate to={'app-content'} />,
       },
       {
-        path: "app-content",
+        path: 'app-content',
         element: <AppContent />,
       },
     ],

package/src/config/axios.ts

@@ -1,37 +1,46 @@
-import Axios, { InternalAxiosRequestConfig } from "axios";
-import Cookies from "js-cookie";
-import { SnackbarStore } from "../context/SnackbarProvider";
+import Axios, { InternalAxiosRequestConfig } from 'axios';
+import Cookies from 'js-cookie';
+import { ApplicationStore } from '../context/application-store';
 
-const isDevelopment = process.env.NODE_ENV == "development";
+const isDevelopment = process.env.NODE_ENV == 'development';
 
 const tenantCode =
-  window.location.hostname === "localhost"
-    ? Cookies.get("campx_tenant")
-    : window.location.hostname.split(".")[0];
-const institutionCode = window.location.pathname.split("/")[1];
+  window.location.hostname === 'localhost'
+    ? Cookies.get('campx_tenant')
+    : window.location.hostname.split('.')[0];
+const institutionCode = window.location.pathname.split('/')[1];
+
+export const formatParams = (params: any) => {
+  return Object.fromEntries(
+    Object.entries(params ?? {})?.map((i) => [
+      i[0],
+      i[1] === '__empty__' ? '' : i[1],
+    ]),
+  );
+};
 
 export const axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    "x-tenant-id": tenantCode,
-    "x-institution-code": institutionCode,
+    'x-tenant-id': tenantCode,
+    'x-institution-code': institutionCode,
   },
 });
 
 axios.interceptors.request.use(
   function (config: InternalAxiosRequestConfig) {
-    const params = config?.params;
+    const params = formatParams(config?.params);
 
-    const sessionKey = Cookies.get("campx_session_key");
-    const openPaymentsKey = Cookies.get("campx_open_payments_key");
+    const sessionKey = Cookies.get('campx_session_key');
+    const openPaymentsKey = Cookies.get('campx_open_payments_key');
 
     if (isDevelopment && sessionKey) {
-      config.headers.set("campx_session_key", sessionKey);
+      config.headers.set('campx_session_key', sessionKey);
     }
 
     if (openPaymentsKey) {
-      config.headers.set("campx_open_payments_key", openPaymentsKey);
+      config.headers.set('campx_open_payments_key', openPaymentsKey);
     }
 
     return {
@@ -41,7 +50,7 @@ axios.interceptors.request.use(
   },
   function (error) {
     return Promise.reject(error);
-  }
+  },
 );
 
 axios.interceptors.response.use(
@@ -49,13 +58,13 @@ axios.interceptors.response.use(
     console.log(response);
     if (
       response.config.method &&
-      ["put", "post", "delete", "patch"].includes(response.config.method) &&
+      ['put', 'post', 'delete', 'patch'].includes(response.config.method) &&
       [200, 201, 202].includes(response.status)
     ) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = response.data.message;
-        s.severity = "success";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = response.data.message;
+        s.snackbar.severity = 'success';
       });
     }
 
@@ -63,24 +72,24 @@ axios.interceptors.response.use(
   },
   function (err) {
     if ([400, 422].includes(err.response.status)) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = err.response.data.message || "Bad Request";
-        s.severity = "error";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Bad Request';
+        s.snackbar.severity = 'error';
       });
     }
     if (
       err.response.config.method &&
-      ["put", "post", "delete", "patch"].includes(err.response.config.method) &&
+      ['put', 'post', 'delete', 'patch'].includes(err.response.config.method) &&
       [404].includes(err.response.status)
     ) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = err.response.data.message;
-        s.severity = "error";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message;
+        s.snackbar.severity = 'error';
       });
     }
 
     return Promise.reject(err);
-  }
+  },
 );

package/src/context/ConfirmDialogProvider.tsx

@@ -0,0 +1,70 @@
+import { ConfirmDialog, ConfirmDialogType } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface ConfirmStateProps {
+  showConfirmDialog: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type?: ConfirmDialogType,
+  ) => void;
+}
+
+const ConfirmContext = createContext<ConfirmStateProps>({
+  showConfirmDialog: () => {},
+});
+
+export const ConfirmDialogProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const confirmDialog = ApplicationStore.useState((s) => s.confirmDialog);
+
+  const showConfirmDialog = (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type: ConfirmDialogType = 'confirm',
+  ) => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = {
+        isOpen: true,
+        title,
+        message,
+        onConfirm,
+        onCancel,
+        type,
+      };
+    });
+  };
+
+  const handleCloseDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog.isOpen = false;
+    });
+  };
+
+  return (
+    <ConfirmContext.Provider value={{ showConfirmDialog }}>
+      {children}
+      <ConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        title={confirmDialog.title}
+        message={confirmDialog.message}
+        type={confirmDialog.type}
+        onConfirm={() => {
+          confirmDialog.onConfirm();
+          handleCloseDialog();
+        }}
+        onCancel={() => {
+          confirmDialog.onCancel();
+          handleCloseDialog();
+        }}
+      />
+    </ConfirmContext.Provider>
+  );
+};

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -5,34 +5,34 @@ import {
   NoInterneConnection,
   PageNotFound,
   UnAuthorized,
-} from "@campxdev/react-blueprint";
-import { Alert, Box, styled } from "@mui/material";
-import Cookies from "js-cookie";
-import { ReactNode, useState } from "react";
-import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
-import { QueryErrorResetBoundary } from "react-query";
-import { useLocation, useNavigate } from "react-router-dom";
-import { Login } from "./Login";
+} from '@campxdev/react-blueprint';
+import { Alert, Box, styled } from '@mui/material';
+import Cookies from 'js-cookie';
+import { ReactNode, useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { QueryErrorResetBoundary } from 'react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Login } from './Login';
 
 export type ErrorBoundaryProps = {
   children: ReactNode;
 };
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
-  height: "60px",
+  height: '60px',
   border: `1px solid ${theme.palette.error.main}`,
-  display: "flex",
-  alignItems: "center",
-  "& .MuiAlert-message": {
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiAlert-message': {
     padding: 0,
   },
-  "& .MuiTypography-root": {
+  '& .MuiTypography-root': {
     margin: 0,
   },
-  position: "relative",
-  "& .retryBtn": {
-    color: "#661B2A",
-    position: "absolute",
+  position: 'relative',
+  '& .retryBtn': {
+    color: '#661B2A',
+    position: 'absolute',
     right: 8,
     top: 8,
   },
@@ -68,12 +68,12 @@ const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
     }
   }
 
-  if (error?.code === "ERR_NETWORK") {
+  if (error?.code === 'ERR_NETWORK') {
     return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
   }
 
   return (
-    <Box sx={{ marginTop: "16px", padding: "20px" }}>
+    <Box sx={{ marginTop: '16px', padding: '20px' }}>
       <StyledAlert severity="error">
         {error?.response?.data?.message ?? error?.message}
         <Button
@@ -94,14 +94,14 @@ const UnAuth = () => {
   const navigate = useNavigate();
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const sessionCookie = Cookies.get("campx_session_key");
+  const sessionCookie = Cookies.get('campx_session_key');
 
   const handleLoginClick = () => {
-    if (window.location.hostname == "localhost") {
+    if (window.location.hostname === 'localhost') {
       setModalOpen(true);
     } else {
       if (!sessionCookie) {
-        navigate("/auth/login");
+        navigate('/auth/login');
       }
     }
   };
@@ -112,7 +112,7 @@ const UnAuth = () => {
         <>
           <Button
             sx={{
-              marginTop: "20px",
+              marginTop: '20px',
             }}
             variant="contained"
             onClick={handleLoginClick}

package/src/context/ErrorBoundary/Login.tsx

@@ -1,14 +1,14 @@
-import { axios } from "@campxdev/campx-web-utils";
-import { Button, Icons, TextField } from "@campxdev/react-blueprint";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { Box, Stack } from "@mui/material";
-import DeviceDetector from "device-detector-js";
-import Cookies from "js-cookie";
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useMutation } from "react-query";
+import { axios } from '@campxdev/campx-web-utils';
+import { Button, Icons, TextField } from '@campxdev/react-blueprint';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Stack } from '@mui/material';
+import DeviceDetector from 'device-detector-js';
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
 
-import * as Yup from "yup";
+import * as Yup from 'yup';
 
 type DeviceInformation = {
   deviceType: string;
@@ -33,16 +33,16 @@ type LoginDetails = {
 const performLogin = async (body: any) => {
   if (!body.latitude || !body.longitude) {
     const response = await fetch(
-      "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY",
+      'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          considerIp: "true",
+          considerIp: 'true',
         }),
-      }
+      },
     );
     const data = await response.json();
     body.latitude = data.location.lat;
@@ -52,20 +52,20 @@ const performLogin = async (body: any) => {
 };
 
 const validationSchema = Yup.object().shape({
-  username: Yup.string().required("Username is required"),
-  password: Yup.string().required("Password is required"),
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required'),
 });
 
 export const Login = ({ close }: { close: () => void }) => {
   const [deviceState, setDeviceState] = useState<DeviceState>({
     deviceInformation: {
-      deviceType: "browser",
-      clientName: "unknown",
-      os: "unknown",
-      osVersion: "unknown",
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
       latitude: null,
       longitude: null,
-      tokenType: "WEB",
+      tokenType: 'WEB',
     },
     isLocationAllowed: true,
   });
@@ -82,9 +82,9 @@ export const Login = ({ close }: { close: () => void }) => {
       }));
     });
     navigator.permissions
-      .query({ name: "geolocation" })
+      .query({ name: 'geolocation' })
       .then((permissionStatus) => {
-        if (permissionStatus.state === "denied") {
+        if (permissionStatus.state === 'denied') {
           setDeviceState((s) => ({
             ...s,
             isLocationAllowed: false,
@@ -109,17 +109,19 @@ export const Login = ({ close }: { close: () => void }) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<LoginDetails>({ resolver: yupResolver(validationSchema) });
+  } = useForm<LoginDetails>({
+    resolver: yupResolver<LoginDetails>(validationSchema),
+  });
 
   const { mutate, isLoading } = useMutation(performLogin, {
     onSuccess(data) {
       if (data.loginSuccessful) {
-        Cookies.remove("campx_session_key");
-        Cookies.remove("campx_tenant");
-        Cookies.remove("campx_institution");
-        Cookies.set("campx_session_key", data?.token);
-        Cookies.set("campx_tenant", data?.subDomain);
-        Cookies.set("campx_institution", data?.institutionCode);
+        Cookies.remove('campx_session_key');
+        Cookies.remove('campx_tenant');
+        Cookies.remove('campx_institution');
+        Cookies.set('campx_session_key', data?.token);
+        Cookies.set('campx_tenant', data?.subDomain);
+        Cookies.set('campx_institution', data?.institutionCode);
         close();
         window.location.reload();
       }
@@ -145,10 +147,10 @@ export const Login = ({ close }: { close: () => void }) => {
                   size="medium"
                   name="username"
                   sx={{
-                    width: "400px",
+                    width: '400px',
                   }}
                   placeholder="Enter Username or Email"
-                  containerProps={{ my: "0" }}
+                  containerProps={{ my: '0' }}
                   onChange={field.onChange}
                   label="Username or Email"
                   error={!!errors.username}
@@ -166,11 +168,11 @@ export const Login = ({ close }: { close: () => void }) => {
                   size="medium"
                   name="password"
                   sx={{
-                    width: "400px",
+                    width: '400px',
                   }}
                   placeholder="Enter password"
                   onChange={field.onChange}
-                  containerProps={{ my: "0" }}
+                  containerProps={{ my: '0' }}
                   label="Password"
                   type="password"
                   error={!!errors.password}
@@ -185,7 +187,7 @@ export const Login = ({ close }: { close: () => void }) => {
             color="primary"
             variant="contained"
             sx={{
-              width: "400px",
+              width: '400px',
             }}
             onClick={handleSubmit(onSubmit)}
             disabled={isLoading}

package/src/context/Providers.tsx

@@ -1,12 +1,11 @@
-import { lightTheme, MuiThemeProvider } from "@campxdev/react-blueprint";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import Cookies from "js-cookie";
-import { ReactNode, useEffect } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { BrowserRouter } from "react-router-dom";
-import { ErrorBoundary } from "./export";
-import { SnackbarProvider } from "./SnackbarProvider";
+import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
+import Cookies from 'js-cookie';
+import { ReactNode, useEffect } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfirmDialogProvider } from './ConfirmDialogProvider';
+import { ErrorBoundary } from './export';
+import { SnackbarProvider } from './SnackbarProvider';
 
 export const Providers = ({
   children,
@@ -28,28 +27,28 @@ export const Providers = ({
   });
 
   var tenantCode =
-    window.location.hostname === "localhost"
-      ? Cookies.get("campx_tenant")
-      : window.location.hostname.split(".")[0];
+    window.location.hostname === 'localhost'
+      ? Cookies.get('campx_tenant')
+      : window.location.hostname.split('.')[0];
   var institutionCode =
-    window.location.pathname.split("/")[1] !== ""
-      ? window.location.pathname.split("/")[1]
-      : Cookies.get("campx_institution");
-  var baseName = tenantCode && institutionCode ? `/${institutionCode}` : "/";
+    window.location.pathname.split('/')[1] !== ''
+      ? window.location.pathname.split('/')[1]
+      : Cookies.get('campx_institution');
+  var baseName = tenantCode && institutionCode ? `/${institutionCode}` : '/';
   useEffect(() => {
-    if (window.location.pathname === "/" && institutionCode && tenantCode) {
+    if (window.location.pathname === '/' && institutionCode && tenantCode) {
       window.location.replace(window.location.origin + `/${institutionCode}`);
     }
-  }, []);
+  }, [institutionCode, tenantCode]);
 
   return (
     <BrowserRouter basename={basename ?? baseName}>
       <QueryClientProvider client={queryClient}>
         <MuiThemeProvider theme={theme}>
           <SnackbarProvider>
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <ConfirmDialogProvider>
               <ErrorBoundary>{children}</ErrorBoundary>
-            </LocalizationProvider>
+            </ConfirmDialogProvider>
           </SnackbarProvider>
         </MuiThemeProvider>
       </QueryClientProvider>

package/src/context/SnackbarProvider.tsx

@@ -1,31 +1,26 @@
-import { Severity, Snackbar } from "@campxdev/react-blueprint";
-import { Store } from "pullstate";
-import { createContext, ReactNode } from "react";
+import { Severity, Snackbar } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
 
 interface SnackbarContextProps {
   showSnackbar: (message: string, severity?: Severity) => void;
 }
 
 const SnackbarContext = createContext<SnackbarContextProps | undefined>(
-  undefined
+  undefined,
 );
 
 interface SnackbarProviderProps {
   children: ReactNode;
 }
-export const SnackbarStore = new Store({
-  open: false,
-  message: "",
-  severity: "success" as Severity,
-});
 
 export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
-  const snackbar = SnackbarStore.useState((s) => s);
-  const showSnackbar = (message: string, severity: Severity = "info") => {
-    SnackbarStore.update((s) => {
-      s.open = true;
-      s.message = message;
-      s.severity = severity;
+  const snackbar = ApplicationStore.useState((s) => s.snackbar);
+  const showSnackbar = (message: string, severity: Severity = 'info') => {
+    ApplicationStore.update((s) => {
+      s.snackbar.open = true;
+      s.snackbar.message = message;
+      s.snackbar.severity = severity;
     });
   };
   return (
@@ -37,8 +32,8 @@ export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
         severity={snackbar.severity}
         autoHideDuration={1500}
         onClose={() => {
-          SnackbarStore.update((s) => {
-            s.open = false;
+          ApplicationStore.update((s) => {
+            s.snackbar.open = false;
           });
         }}
       />

package/src/context/application-store.ts

@@ -1,12 +1,39 @@
-import { Store } from "pullstate";
+import { ConfirmDialogType, Severity } from '@campxdev/react-blueprint';
+import { Store } from 'pullstate';
 
 export type ApplicationStoreType = {
   isLoginDialogOpen: boolean;
+  snackbar: {
+    open: boolean;
+    message: string;
+    severity: Severity;
+  };
+  confirmDialog: {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    type: ConfirmDialogType;
+  };
 };
 
 export const initialApplicationState: ApplicationStoreType = {
   isLoginDialogOpen: false,
+  snackbar: {
+    open: false,
+    message: '',
+    severity: 'success',
+  },
+  confirmDialog: {
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: () => {},
+    onCancel: () => {},
+    type: 'confirm',
+  },
 };
 export const ApplicationStore = new Store<ApplicationStoreType>(
-  initialApplicationState
+  initialApplicationState,
 );

package/src/context/export.ts

@@ -1,4 +1,4 @@
-export * from "./application-store";
-export * from "./ErrorBoundary/ErrorBoundary";
-export * from "./Providers";
-export * from "./SnackbarProvider";
+export * from './application-store';
+export * from './ErrorBoundary/ErrorBoundary';
+export * from './Providers';
+export * from './SnackbarProvider';

package/src/hooks/export.ts

@@ -0,0 +1 @@
+export * from './useConfirm';

package/src/hooks/useConfirm.ts

@@ -0,0 +1,51 @@
+import { ConfirmDialogType } from '@campxdev/react-blueprint';
+import { ApplicationStore } from '../context/application-store';
+
+const defaultConfirmDialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'confirm' as ConfirmDialogType,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
+
+const useConfirm = () => {
+  const isConfirmed = ({
+    title,
+    message,
+    type = 'confirm',
+  }: {
+    title: string;
+    message: string;
+    type?: ConfirmDialogType;
+  }): Promise<boolean> =>
+    new Promise((resolve) => {
+      ApplicationStore.update((s) => {
+        s.confirmDialog = {
+          isOpen: true,
+          title,
+          message,
+          type,
+          onConfirm: () => {
+            resolve(true);
+            resetDialog();
+          },
+          onCancel: () => {
+            resolve(false);
+            resetDialog();
+          },
+        };
+      });
+    });
+
+  const resetDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = defaultConfirmDialogState;
+    });
+  };
+
+  return isConfirmed;
+};
+
+export default useConfirm;

package/src/index.tsx

@@ -5,12 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

package/src/utils/breadcrumbs.ts

@@ -0,0 +1,23 @@
+export const getBreadcrumbsCharacter = () => {
+  const unicodeChar = String.fromCharCode(0x21e5);
+  const testElement = document.createElement('span');
+  testElement.innerHTML = unicodeChar;
+  document.body.appendChild(testElement);
+  const isRendered = testElement.offsetWidth > 0;
+  document.body.removeChild(testElement);
+
+  console.log(isRendered);
+
+  const fallbackChar = '~~';
+  const s = isRendered ? unicodeChar : fallbackChar;
+
+  return s;
+};
+
+interface GetUrlSegment {
+  name: string;
+  id: string | number;
+}
+export const getUrlSegment = ({ name, id }: GetUrlSegment) => {
+  return `${name}${getBreadcrumbsCharacter()}${id}`;
+};

package/src/utils/export.ts

@@ -0,0 +1 @@
+export * from './breadcrumbs';

package/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,13 +14,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node"]
   },
-  "include": [
-    "src",
-    "./types"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "./types"],
+  "exclude": ["node_modules", ".yalc"]
 }

package/exports.ts

@@ -1,2 +0,0 @@
-export * from "./src/config/axios";
-export * from "./src/context/export";