@campxdev/campx-web-utils 0.2.6 → 0.2.8

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.6",
+  "version": "0.2.8",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.2.0",
+    "@campxdev/react-blueprint": "^1.2.1",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.12.1",
     "@testing-library/jest-dom": "^5.14.1",

package/src/Layout/AppLayout.tsx

@@ -1,11 +1,65 @@
-import { Outlet } from 'react-router-dom';
+import {
+  AppHeader,
+  Icons,
+  MuiThemeProvider,
+  Sidebar,
+  Spinner,
+} from '@campxdev/react-blueprint';
+import { Box, Stack, useTheme } from '@mui/material';
+import { Suspense, useState } from 'react';
+import { ErrorBoundary } from '../context/export';
+import {
+  SideMenuItemProps,
+  SubMenuItemProps,
+} from '@campxdev/react-blueprint/src/components/Navigation/Sidebar/Sidebar';
+
+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={{
+            backgroundColor: theme.palette.surface.paperBackground,
+            borderRadius: '8px',
+            ...mainContainerSx,
+          }}
+          onClick={() => {
+            setCollapsed(true);
+          }}
+        >
+          <Suspense fallback={<Spinner />}>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </Suspense>
+        </Box>
+      </Stack>
+    </Stack>
   );
 };
-
-export default AppLayout;

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/Providers.tsx

@@ -1,4 +1,6 @@
 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';
@@ -46,9 +48,11 @@ export const Providers = ({
       <QueryClientProvider client={queryClient}>
         <MuiThemeProvider theme={theme}>
           <SnackbarProvider>
-            <ConfirmDialogProvider>
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </ConfirmDialogProvider>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <ConfirmDialogProvider>
+                <ErrorBoundary>{children}</ErrorBoundary>
+              </ConfirmDialogProvider>
+            </LocalizationProvider>
           </SnackbarProvider>
         </MuiThemeProvider>
       </QueryClientProvider>