@campxdev/campx-web-utils 0.2.12 → 0.2.13

package/export.ts

@@ -1,5 +1,6 @@
 export * from './src/config/axios';
 export * from './src/context/export';
 export * from './src/hooks/export';
+export * from './src/layout/AppLayout';
+export * from './src/selectors/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.12",
+  "version": "0.2.13",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.2.3",
+    "@campxdev/react-blueprint": "1.3.3",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "7.16.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -15,10 +15,10 @@
     "@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",
+    "framer-motion": "^11.3.21",
     "pullstate": "^1.25.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -26,7 +26,7 @@
     "react-query": "^3.39.3",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.1",
-    "typescript": "^4.4.2",
+    "typescript": "^5.5.2",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.0",
     "yup": "^1.4.0"

package/src/App.tsx

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

package/src/AppContent.tsx

@@ -1,26 +1,26 @@
-import { Button } from '@campxdev/react-blueprint';
-import useConfirm from './hooks/useConfirm';
+import { Button, TextField } from '@campxdev/react-blueprint';
+import { useState } from 'react';
+import { EmployeesSelector } from './selectors/EmployeesSelector';
 
 function AppContent() {
-  const isConfirm = useConfirm();
+  const [value, setValue] = useState('63b810ee995d6d64f4a248de');
+  return (
+    <>
+      <Button variant="contained" onClick={() => {}}>
+        Confirm
+      </Button>
+      <EmployeesSelector
+        fullWidth
+        value={value}
+        onChange={(value: any) => {
+          setValue(value);
+        }}
+      />
+      <div style={{ height: '300px' }}></div>
 
-  const handleConfirm = async () => {
-    const confirm = await isConfirm({
-      type: 'delete',
-      title: 'Are you sure?',
-      message: 'Please confirm before submission to action description',
-    });
-
-    // 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 <Button onClick={handleConfirm}>Confirm</Button>;
+      <TextField />
+    </>
+  );
 }
 
 export default AppContent;

package/src/routes/main.tsx

@@ -0,0 +1,33 @@
+import { Icons } from '@campxdev/react-blueprint';
+import { Navigate, Outlet } from 'react-router-dom';
+import AppContent from '../AppContent';
+import { AppLayout } from '../layout/AppLayout';
+
+export const mainRoutes = [
+  {
+    path: '/',
+    element: (
+      <AppLayout
+        menu={[
+          {
+            name: 'App Content',
+            path: '/app-content',
+            icon: <Icons.AdminIcon size={20} />,
+          },
+        ]}
+      >
+        <Outlet />
+      </AppLayout>
+    ),
+    children: [
+      {
+        index: true,
+        element: <Navigate to={'app-content'} />,
+      },
+      {
+        path: 'app-content',
+        element: <AppContent />,
+      },
+    ],
+  },
+];

package/src/selectors/CourseSelector.tsx

@@ -0,0 +1,14 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+
+export const CourseSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      dbLabelProps={{
+        labelKey: 'courseName',
+        subLabelKey: 'level',
+      }}
+      {...props}
+      optionsApiEndPoint="/dropdowns/courses"
+    />
+  );
+};

package/src/selectors/EmployeesSelector.tsx

@@ -0,0 +1,18 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+
+export const EmployeesSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      dbValueProps={{
+        valueKey: '_id',
+        isObjectId: true,
+      }}
+      dbLabelProps={{
+        labelKey: 'fullName',
+        subLabelKey: 'employeeId',
+      }}
+      {...props}
+      optionsApiEndPoint="/dropdowns/employees"
+    />
+  );
+};

package/src/selectors/FeeTypeSelector.tsx

@@ -0,0 +1,3 @@
+export const FeeSelector = () => {
+  return <></>;
+};

package/src/selectors/SemesterSelector.tsx

@@ -0,0 +1,14 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+
+export const SemesterSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      dbLabelProps={{
+        labelKey: 'name',
+        subLabelKey: 'year',
+      }}
+      {...props}
+      optionsApiEndPoint="/dropdowns/semesters"
+    />
+  );
+};

package/src/selectors/export.ts

@@ -0,0 +1,2 @@
+export * from './EmployeesSelector';
+export * from './SemesterSelector';

package/types/theme.d.ts

@@ -1,6 +1,6 @@
-import "@mui/material/styles";
+import '@mui/material/styles';
 
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface Theme {
     palette: {
       [x: string]: any;
@@ -21,6 +21,9 @@ declare module "@mui/material/styles" {
         primary: string;
         secondary: string;
         tertiary: string;
+        black: string;
+        white: string;
+        primaryContrast: string;
       };
       surface: {
         defaultBackground: string;
@@ -29,6 +32,7 @@ declare module "@mui/material/styles" {
       };
       border: {
         primary: string;
+        secondary: string;
       };
       highlight: {
         highlightGreen: string;
@@ -49,7 +53,7 @@ declare module "@mui/material/styles" {
   export function createTheme(options?: CustomThemeOptions): CustomTheme;
 }
 
-declare module "@mui/material/Typography" {
+declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
     label1: true;
     label2: true;

package/.env

@@ -1,2 +0,0 @@
-REACT_APP_API_HOST=https://api.campx.dev
-PORT=3082

package/src/Pages/main.tsx

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