@campxdev/campx-web-utils 0.2.7 → 0.2.9

package/export.ts

@@ -2,3 +2,4 @@ export * from './src/config/axios';
 export * from './src/context/export';
 export * from './src/hooks/export';
 export * from './src/utils/export';
+export * from './src/Layout/AppLayout';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.2.0",
+    "@campxdev/react-blueprint": "^1.2.3",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.12.1",
     "@testing-library/jest-dom": "^5.14.1",
@@ -26,6 +26,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.1",
     "typescript": "^4.4.2",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.0",
     "yup": "^1.4.0"
   },

package/src/Layout/AppLayout.tsx

@@ -1,11 +1,56 @@
-import { Outlet } from 'react-router-dom';
+import { AppHeader, Sidebar, Spinner } from '@campxdev/react-blueprint';
+import { SideMenuItemProps } from '@campxdev/react-blueprint/src/components/Navigation/Sidebar/Sidebar';
+import { Box, Stack, useTheme } from '@mui/material';
+import { Suspense, useState } from 'react';
+import { ErrorBoundary } from '../context/export';
+
+interface Props {
+  children?: React.ReactNode;
+  menu: SideMenuItemProps[];
+  mainContainerSx?: any;
+}
+
+export const AppLayout: React.FC<Props> = ({
+  children,
+  menu,
+  mainContainerSx,
+}) => {
+  const [collapsed, setCollapsed] = useState(true);
+  const theme = useTheme();
 
-const AppLayout = () => {
   return (
-    <>
-      <Outlet />
-    </>
+    <Stack
+      sx={{ backgroundColor: theme.palette.surface.defaultBackground }}
+      direction={'row'}
+    >
+      <Sidebar menu={menu} collapsed={collapsed} setCollapsed={setCollapsed} />
+      <Stack
+        margin="12px 12px 12px 0px"
+        gap="12px"
+        width={collapsed ? 'calc(100% - 84px)' : 'calc(100% - 278px)'}
+      >
+        <AppHeader
+          actions={[]}
+          collapsed={collapsed}
+          showActiveDevices={false}
+          clientName={''}
+          userFullName={''}
+        />
+        <Box
+          sx={{
+            borderRadius: '8px',
+            height: '-webkit-fill-available',
+            ...mainContainerSx,
+          }}
+          onClick={() => {
+            setCollapsed(true);
+          }}
+        >
+          <Suspense fallback={<Spinner />}>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </Suspense>
+        </Box>
+      </Stack>
+    </Stack>
   );
 };
-
-export default AppLayout;

package/src/Pages/main.tsx

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

package/src/context/ConfirmDialogProvider.tsx

@@ -9,6 +9,8 @@ interface ConfirmStateProps {
     onConfirm: () => void,
     onCancel: () => void,
     type?: ConfirmDialogType,
+    confirmButtonText?: string,
+    cancelButtonText?: string,
   ) => void;
 }
 
@@ -29,6 +31,8 @@ export const ConfirmDialogProvider = ({
     onConfirm: () => void,
     onCancel: () => void,
     type: ConfirmDialogType = 'confirm',
+    confirmButtonText?: string,
+    cancelButtonText?: string,
   ) => {
     ApplicationStore.update((s) => {
       s.confirmDialog = {
@@ -38,6 +42,8 @@ export const ConfirmDialogProvider = ({
         onConfirm,
         onCancel,
         type,
+        confirmButtonText,
+        cancelButtonText,
       };
     });
   };
@@ -56,6 +62,8 @@ export const ConfirmDialogProvider = ({
         title={confirmDialog.title}
         message={confirmDialog.message}
         type={confirmDialog.type}
+        confirmButtonText={confirmDialog.confirmButtonText}
+        cancelButtonText={confirmDialog.cancelButtonText}
         onConfirm={() => {
           confirmDialog.onConfirm();
           handleCloseDialog();

package/src/context/ErrorBoundary/Login.tsx

@@ -109,8 +109,8 @@ export const Login = ({ close }: { close: () => void }) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<LoginDetails>({
-    resolver: yupResolver<LoginDetails>(validationSchema),
+  } = useForm({
+    resolver: yupResolver(validationSchema),
   });
 
   const { mutate, isLoading } = useMutation(performLogin, {

package/src/context/application-store.ts

@@ -15,6 +15,8 @@ export type ApplicationStoreType = {
     onConfirm: () => void;
     onCancel: () => void;
     type: ConfirmDialogType;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
   };
 };
 

package/src/hooks/useConfirm.ts

@@ -5,6 +5,8 @@ const defaultConfirmDialogState = {
   isOpen: false,
   title: '',
   message: '',
+  confirmButtonText: '',
+  cancelButtonText: '',
   type: 'confirm' as ConfirmDialogType,
   onConfirm: () => {},
   onCancel: () => {},
@@ -14,10 +16,14 @@ const useConfirm = () => {
   const isConfirmed = ({
     title,
     message,
+    confirmButtonText,
+    cancelButtonText,
     type = 'confirm',
   }: {
     title: string;
     message: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
     type?: ConfirmDialogType;
   }): Promise<boolean> =>
     new Promise((resolve) => {
@@ -26,6 +32,8 @@ const useConfirm = () => {
           isOpen: true,
           title,
           message,
+          confirmButtonText,
+          cancelButtonText,
           type,
           onConfirm: () => {
             resolve(true);

package/tsconfig.json

@@ -18,5 +18,5 @@
     "types": ["node"]
   },
   "include": ["src", "./types"],
-  "exclude": ["node_modules", ".yalc"]
+  "exclude": [".yalc"]
 }