@campxdev/campx-web-utils 0.2.12 → 0.2.14

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.14",
   "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,15 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { FeeTypes } from './utils';
+
+export const FeeTypeSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      label="Fee Type"
+      options={FeeTypes?.map((item: { label: string; value: string }) => ({
+        label: item.label,
+        value: item.value,
+      }))}
+      {...props}
+    />
+  );
+};

package/src/selectors/HostelFloorSelector.tsx

@@ -0,0 +1,18 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { years } from './utils';
+
+export const HostelFloorSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      label="Hostel Room No."
+      dbValueProps={{
+        valueKey: 'floor',
+      }}
+      dbLabelProps={{
+        labelKey: 'floor',
+      }}
+      optionsApiEndPoint="dropdowns/floors"
+      {...props}
+    />
+  );
+};

package/src/selectors/HostelRoomSelector.tsx

@@ -0,0 +1,19 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { years } from './utils';
+
+export const HostelRoomSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      label="Hostel Room No."
+      dbValueProps={{
+        valueKey: 'id',
+      }}
+      dbLabelProps={{
+        labelKey: 'room_number',
+        subLabelKey: 'floor',
+      }}
+      optionsApiEndPoint="dropdowns/hostel-rooms"
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,26 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { years } from './utils';
+
+interface YearRangeSelectorProps extends SingleSelectProps {
+  suffix?: string | null;
+  valueKey?: 'yearRange' | 'year';
+}
+
+export const YearRangeSelector = ({
+  suffix = null,
+  valueKey = 'yearRange',
+  ...props
+}: YearRangeSelectorProps) => {
+  return (
+    <SingleSelect
+      label="Year Range"
+      options={years?.map((year: number) => ({
+        label: suffix
+          ? `${suffix} ${year} - ${year + 1}`
+          : `${year} - ${year + 1}`,
+        value: valueKey === 'yearRange' ? `${year} - ${year + 1}` : year,
+      }))}
+      {...props}
+    />
+  );
+};

package/src/selectors/export.ts

@@ -0,0 +1,7 @@
+export * from './CourseSelector';
+export * from './EmployeesSelector';
+export * from './SemesterSelector';
+export * from './FeeTypeSelector';
+export * from './HostelFloorSelector';
+export * from './HostelRoomSelector';
+export * from './YearRangeSelector';

package/src/selectors/utils.tsx

@@ -0,0 +1,34 @@
+export const FeeTypes: {
+  label: string;
+  value: string;
+}[] = [
+  {
+    label: 'Tuition Fee',
+    value: 'tuition_fee',
+  },
+
+  {
+    label: 'Admission Fee',
+    value: 'admission_fee',
+  },
+  {
+    label: 'Hostel Fee',
+    value: 'hostel_fee',
+  },
+  {
+    label: 'Transport Fee',
+    value: 'transport_fee',
+  },
+  {
+    label: 'Exam Fee',
+    value: 'exam_fee',
+  },
+  {
+    label: 'Other Fee',
+    value: 'other_fee',
+  },
+];
+
+export const years = Array.from({ length: 6 }, (_, i) => {
+  return new Date().getFullYear() - i;
+});

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 />,
-      },
-    ],
-  },
-];