@campxdev/campx-web-utils 0.2.8 → 0.2.10

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.2.1",
+    "@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",
@@ -15,6 +15,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
+    "framer-motion": "^11.3.21",
     "cookie-js": "^0.0.1",
     "date-fns": "^3.6.0",
     "device-detector-js": "^3.0.3",
@@ -26,6 +27,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,17 +1,9 @@
-import {
-  AppHeader,
-  Icons,
-  MuiThemeProvider,
-  Sidebar,
-  Spinner,
-} from '@campxdev/react-blueprint';
+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 { motion } from 'framer-motion';
 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;
@@ -33,33 +25,56 @@ export const AppLayout: React.FC<Props> = ({
       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)'}
+      <motion.div
+        animate={{
+          width: collapsed ? 'calc(100% - 84px)' : 'calc(100% - 278px)',
+        }}
+        transition={{ duration: 0.3, ease: 'circOut' }}
+        style={{
+          margin: '12px 12px 12px 0px',
+          width: 'calc(100% - 84px)',
+        }}
       >
-        <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 gap="12px">
+          <AppHeader
+            actions={[]}
+            collapsed={collapsed}
+            showActiveDevices={false}
+            clientName={''}
+            userFullName={''}
+          />
+          <Box
+            sx={{
+              // backgroundColor: theme.palette.surface.paperBackground,
+              borderRadius: '8px',
+              height: 'calc(100vh - 96px)',
+              overflowY: 'scroll',
+              paddingRight: '8px',
+              '&::-webkit-scrollbar': {
+                width: '0.5em',
+                height: '0.2em',
+              },
+
+              '&::-webkit-scrollbar-thumb': {
+                backgroundColor: theme.palette.primary.light,
+                borderRadius: '3px',
+
+                '&:hover': {
+                  backgroundColor: theme.palette.primary.main,
+                },
+              },
+              ...mainContainerSx,
+            }}
+            onClick={() => {
+              setCollapsed(true);
+            }}
+          >
+            <Suspense fallback={<Spinner />}>
+              <ErrorBoundary>{children}</ErrorBoundary>
+            </Suspense>
+          </Box>
+        </Stack>
+      </motion.div>
     </Stack>
   );
 };

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/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"]
 }