@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/export.ts

@@ -1,6 +1,6 @@
 export * from './src/assets/export';
 export * from './src/components/export';
 export * from './src/hooks/export';
+export * from './src/lib/export';
 export * from './src/redux/export';
-export * from './src/themes/export';
 export * from './src/utils/export';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.3.11",
+  "version": "3.0.0-alpha.2",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",
@@ -18,6 +18,15 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "style": "dist/styles.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
   "files": [
     "dist",
     "src",
@@ -35,46 +44,54 @@
     "prepare": "npm run build"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/lab": "^7.0.0-beta.11",
-    "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^8.1.0",
-    "@mui/x-date-pickers": "^8.1.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-router-dom": "^6.24.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@fullcalendar/core": "^6.1.18",
     "@fullcalendar/daygrid": "^6.1.18",
     "@fullcalendar/interaction": "^6.1.18",
     "@fullcalendar/react": "^6.1.18",
     "@fullcalendar/timegrid": "^6.1.18",
     "@hookform/resolvers": "^2.9.10",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/lab": "^7.0.0-beta.11",
-    "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^8.1.0",
-    "@mui/x-date-pickers": "^8.1.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@reduxjs/toolkit": "^2.2.7",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@tanstack/react-table": "^8.21.3",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.2.9",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.552.0",
     "pullstate": "^1.24.0",
+    "react-day-picker": "^9.11.1",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.52.0",
     "react-joyride": "^2.8.2",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
-    "recharts": "^2.12.7",
+    "recharts": "2.15.4",
     "redux": "^5.0.1",
+    "tailwind-merge": "^3.3.1",
     "uuid": "^10.0.0",
     "yup": "^1.4.0"
   },
@@ -115,7 +132,10 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint-plugin-storybook": "^0.8.0",
+    "postcss-import": "^16.1.1",
+    "postcss-loader": "^8.2.0",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
     "rollup": "^4.10.0",
@@ -124,10 +144,13 @@
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.71.1",
     "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.1",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.5.2",
     "web-vitals": "^2.1.0",
     "webpack": "^5.91.0"

package/src/App.tsx

@@ -1,263 +1,8 @@
-import {
-  Navigate,
-  Route,
-  BrowserRouter as Router,
-  Routes,
-} from 'react-router-dom';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import './App.css';
 
-import { Icons } from './components/export';
 import { AppLayout } from './components/Layout/AppLayout';
 
-// Sample Pages
-import { Dashboard } from './pages/Dashboard';
-
-// New main section pages
-import { Admin } from './pages/Admin';
-import { Communications } from './pages/Communications';
-import { Exams } from './pages/Exams';
-import { HRMS } from './pages/HRMS';
-import { Payments } from './pages/Payments';
-import { Reports } from './pages/Reports';
-import { StudentCentral } from './pages/StudentCentral';
-import { UMS } from './pages/UMS';
-
-// UMS nested components
-import { ClassroomManagement } from './pages/UMS/Classrooms/ClassroomManagement';
-import { Classrooms as UMSClassrooms } from './pages/UMS/Classrooms/Classrooms';
-import { RoomAllocation } from './pages/UMS/Classrooms/RoomAllocation';
-import { Timetables } from './pages/UMS/Classrooms/Timetables';
-import { Courses } from './pages/UMS/Courses/Courses';
-import { Enrollment } from './pages/UMS/Students/Enrollment';
-import { StudentList } from './pages/UMS/Students/StudentList';
-import { StudentProfiles } from './pages/UMS/Students/StudentProfiles';
-import { Students as UMSStudents } from './pages/UMS/Students/Students';
-import { Performance as TeacherPerformance } from './pages/UMS/Teachers/Performance';
-import { Qualifications } from './pages/UMS/Teachers/Qualifications';
-import { TeacherDirectory } from './pages/UMS/Teachers/TeacherDirectory';
-import { Teachers as UMSTeachers } from './pages/UMS/Teachers/Teachers';
-
-// Payments nested components
-import { Expenses } from './pages/Payments/Expenses/Expenses';
-import { FeeCollection } from './pages/Payments/FeeCollection/FeeCollection';
-import { FinancialReports } from './pages/Payments/FinancialReports/FinancialReports';
-
-// Exams nested components
-import { Management as ExamManagement } from './pages/Exams/Management/Management';
-import { Results as ExamResults } from './pages/Exams/Results/Results';
-
-// Admin nested components
-import { AcademicStructure } from './pages/Admin/AcademicStructure/AcademicStructure';
-import { SystemSettings as AdminSystemSettings } from './pages/Admin/SystemSettings/SystemSettings';
-import { UserManagement as AdminUserManagement } from './pages/Admin/UserManagement/UserManagement';
-
-// HRMS nested components
-import { Attendance as HRMSAttendance } from './pages/HRMS/Attendance/Attendance';
-import { EmployeeManagement } from './pages/HRMS/EmployeeManagement/EmployeeManagement';
-import { Performance as HRMSPerformance } from './pages/HRMS/Performance/Performance';
-
-// StudentCentral nested components
-import { Academic } from './pages/StudentCentral/Academic/Academic';
-import { Services } from './pages/StudentCentral/Services/Services';
-
-// Communications nested components
-import { Announcements } from './pages/Communications/Announcements/Announcements';
-
-// Sample menu data based on common-workspace structure
-const sampleMenu = [
-  {
-    name: 'Dashboard',
-    path: '/dashboard',
-    icon: <Icons.HomeIcon size={20} />,
-  },
-  {
-    name: 'UMS',
-    path: '/ums',
-    icon: <Icons.UmsIcon size={20} />,
-    menu: [
-      {
-        name: 'My Courses',
-        path: '/my-courses',
-        icon: <Icons.AcademicsIcon size={18} />,
-      },
-      {
-        name: 'Students',
-        path: '/students',
-        icon: <Icons.StudentsIcon size={18} />,
-        subMenu: [
-          {
-            name: 'Student List',
-            path: '/student-list',
-          },
-          {
-            name: 'Student Profiles',
-            path: '/student-profiles',
-          },
-          {
-            name: 'Enrollment',
-            path: '/enrollment',
-          },
-        ],
-      },
-      {
-        name: 'Teachers',
-        path: '/teachers',
-        icon: <Icons.ProfileIcon size={18} />,
-        subMenu: [
-          {
-            name: 'Teacher Directory',
-            path: '/teacher-directory',
-          },
-          {
-            name: 'Qualifications',
-            path: '/qualifications',
-          },
-          {
-            name: 'Performance',
-            path: '/performance',
-          },
-        ],
-      },
-      {
-        name: 'Classrooms',
-        path: '/classrooms',
-        icon: <Icons.ClassroomsIcon size={18} />,
-        subMenu: [
-          {
-            name: 'Classroom Management',
-            path: '/classroom-management',
-          },
-          {
-            name: 'Timetables',
-            path: '/timetables',
-          },
-          {
-            name: 'Room Allocation',
-            path: '/room-allocation',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    name: 'Student Central',
-    path: '/student-central',
-    icon: <Icons.StudentsIcon size={20} />,
-    menu: [
-      {
-        name: 'Academic',
-        path: '/academic',
-        icon: <Icons.AcademicsIcon size={18} />,
-      },
-      {
-        name: 'Services',
-        path: '/services',
-        icon: <Icons.HelpDocsIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'Payments',
-    path: '/payments',
-    icon: <Icons.PayxIcon size={20} />,
-    menu: [
-      {
-        name: 'Fee Collection',
-        path: '/fee-collection',
-        icon: <Icons.FeePaymentIcon size={18} />,
-      },
-      {
-        name: 'Financial Reports',
-        path: '/financial-reports',
-        icon: <Icons.ReportIcon size={18} />,
-      },
-      {
-        name: 'Expenses',
-        path: '/expenses',
-        icon: <Icons.ExpensesIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'Exams',
-    path: '/exams',
-    icon: <Icons.ExamxIcon size={20} />,
-    menu: [
-      {
-        name: 'Management',
-        path: '/management',
-        icon: <Icons.MarksIcon size={18} />,
-      },
-      {
-        name: 'Results',
-        path: '/results',
-        icon: <Icons.ReportIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'HRMS',
-    path: '/hrms',
-    icon: <Icons.PeoplexIcon size={20} />,
-    menu: [
-      {
-        name: 'Employee Management',
-        path: '/employee-management',
-        icon: <Icons.ProfileIcon size={18} />,
-      },
-      {
-        name: 'Attendance',
-        path: '/attendance',
-        icon: <Icons.AttendanceIcon size={18} />,
-      },
-      {
-        name: 'Performance',
-        path: '/performance',
-        icon: <Icons.MarksIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'Communications',
-    path: '/communications',
-    icon: <Icons.CommutexIcon size={20} />,
-    menu: [
-      {
-        name: 'Announcements',
-        path: '/announcements',
-        icon: <Icons.NoticeBoardIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'Admin',
-    path: '/admin',
-    icon: <Icons.AdminIcon size={20} />,
-    menu: [
-      {
-        name: 'User Management',
-        path: '/user-management',
-        icon: <Icons.UmsIcon size={18} />,
-      },
-      {
-        name: 'System Settings',
-        path: '/system-settings',
-        icon: <Icons.ClogWheelIcon size={18} />,
-      },
-      {
-        name: 'Academic Structure',
-        path: '/academic-structure',
-        icon: <Icons.AcademicsIcon size={18} />,
-      },
-    ],
-  },
-  {
-    name: 'Reports',
-    path: '/reports',
-    icon: <Icons.ReportIcon size={20} />,
-  },
-];
-
 function App() {
   const handleLogout = () => {
     console.log('Logout clicked');
@@ -273,77 +18,9 @@ function App() {
   };
   return (
     <Router>
-      <AppLayout menu={sampleMenu} userProfileParams={userProfileParams}>
+      <AppLayout menu={[]} userProfileParams={userProfileParams}>
         <Routes>
-          <Route path="/" element={<Navigate to="/dashboard" replace />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-
-          {/* UMS Routes with Nested Routing */}
-          <Route path="/ums/*" element={<UMS />}>
-            <Route path="my-courses" element={<Courses />} />
-            <Route path="students/*" element={<UMSStudents />}>
-              <Route path="student-list" element={<StudentList />} />
-              <Route path="student-profiles" element={<StudentProfiles />} />
-              <Route path="enrollment" element={<Enrollment />} />
-            </Route>
-            <Route path="teachers/*" element={<UMSTeachers />}>
-              <Route path="teacher-directory" element={<TeacherDirectory />} />
-              <Route path="qualifications" element={<Qualifications />} />
-              <Route path="performance" element={<TeacherPerformance />} />
-            </Route>
-            <Route path="classrooms/*" element={<UMSClassrooms />}>
-              <Route
-                path="classroom-management"
-                element={<ClassroomManagement />}
-              />
-              <Route path="timetables" element={<Timetables />} />
-              <Route path="room-allocation" element={<RoomAllocation />} />
-            </Route>
-          </Route>
-
-          {/* Student Central Routes with Nested Routing */}
-          <Route path="/student-central/*" element={<StudentCentral />}>
-            <Route path="academic" element={<Academic />} />
-            <Route path="services" element={<Services />} />
-          </Route>
-
-          {/* Payments Routes with Nested Routing */}
-          <Route path="/payments/*" element={<Payments />}>
-            <Route path="fee-collection" element={<FeeCollection />} />
-            <Route path="financial-reports" element={<FinancialReports />} />
-            <Route path="expenses" element={<Expenses />} />
-          </Route>
-
-          {/* Exams Routes with Nested Routing */}
-          <Route path="/exams/*" element={<Exams />}>
-            <Route path="management" element={<ExamManagement />} />
-            <Route path="results" element={<ExamResults />} />
-          </Route>
-
-          {/* HRMS Routes with Nested Routing */}
-          <Route path="/hrms/*" element={<HRMS />}>
-            <Route
-              path="employee-management"
-              element={<EmployeeManagement />}
-            />
-            <Route path="attendance" element={<HRMSAttendance />} />
-            <Route path="performance" element={<HRMSPerformance />} />
-          </Route>
-
-          {/* Communications Routes with Nested Routing */}
-          <Route path="/communications/*" element={<Communications />}>
-            <Route path="announcements" element={<Announcements />} />
-          </Route>
-
-          {/* Admin Routes with Nested Routing */}
-          <Route path="/admin/*" element={<Admin />}>
-            <Route path="user-management" element={<AdminUserManagement />} />
-            <Route path="system-settings" element={<AdminSystemSettings />} />
-            <Route path="academic-structure" element={<AcademicStructure />} />
-          </Route>
-
-          {/* Reports Route */}
-          <Route path="/reports" element={<Reports />} />
+          <Route path="/" element={<>Home</>} />
         </Routes>
       </AppLayout>
     </Router>

package/src/components/Assets/ErrorPages/ComingSoon.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { CenterBox } from './styles';
 
 interface NoItemFoundProps {
   title?: string;
@@ -14,10 +13,10 @@ export const ComingSoon = ({
   description,
 }: NoItemFoundProps) => {
   return (
-    <CenterBox>
+    <div className="flex w-full flex-col items-center justify-center">
       <Svgs.ComingSoon />
-      <Typography variant="subtitle1">{title}</Typography>
-      <Typography variant="body2">{description}</Typography>
-    </CenterBox>
+      <Typography variant="h4">{title}</Typography>
+      <Typography variant="muted">{description}</Typography>
+    </div>
   );
 };

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -1,26 +1,23 @@
-import { Svgs } from '../../../assets/export';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Button } from '../../export';
-import { CenterBox } from './styles';
+import { Button } from '../../Input/Button/Button';
 
 export const InternalServerError = ({ resetBoundary }: any) => {
   return (
-    <>
-      <CenterBox>
-        <Svgs.ServerError />
-        <Typography variant="subtitle1">Internal Server Error</Typography>
-        <Typography variant="body2">
-          An unexpected error occurred on our server.
-        </Typography>
-        <Typography variant="body2">Please try again later.</Typography>
-        <Button
-          sx={{ marginTop: '20px' }}
-          variant="contained"
-          onClick={() => resetBoundary()}
-        >
-          Try Again
-        </Button>
-      </CenterBox>
-    </>
+    <div className="flex w-full flex-col items-center justify-center">
+      <Svgs.ServerError />
+      <Typography variant="h4">Internal Server Error</Typography>
+      <Typography variant="muted">
+        An unexpected error occurred on our server.
+      </Typography>
+      <Typography variant="muted">Please try again later.</Typography>
+      <Button
+        className="mt-5"
+        variant="default"
+        onClick={() => resetBoundary()}
+      >
+        Try Again
+      </Button>
+    </div>
   );
 };

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -1,28 +1,25 @@
 import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Button } from '../../export';
-import { CenterBox } from './styles';
+import { Button } from '../../Input/Button/Button';
 
 export const NoInterneConnection = ({ resetBoundary }: any) => {
   return (
-    <>
-      <CenterBox>
-        <Svgs.NoConnection />
-        <Typography variant="subtitle1">No Internet Connection</Typography>
-        <Typography variant="body2">
-          It seems you're offline. Please check your
-        </Typography>
-        <Typography variant="body2">
-          internet connection and try again.
-        </Typography>
-        <Button
-          sx={{ marginTop: '20px' }}
-          variant="contained"
-          onClick={() => resetBoundary()}
-        >
-          Try Again
-        </Button>
-      </CenterBox>
-    </>
+    <div className="flex w-full flex-col items-center justify-center">
+      <Svgs.NoConnection />
+      <Typography variant="h4">No Internet Connection</Typography>
+      <Typography variant="muted">
+        It seems you're offline. Please check your
+      </Typography>
+      <Typography variant="muted">
+        internet connection and try again.
+      </Typography>
+      <Button
+        className="mt-5"
+        variant="default"
+        onClick={() => resetBoundary()}
+      >
+        Try Again
+      </Button>
+    </div>
   );
 };

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { CenterBox } from './styles';
 
 interface NoItemFoundProps {
   title?: string;
@@ -18,10 +17,10 @@ export const NoItemFound = ({
   width,
 }: NoItemFoundProps) => {
   return (
-    <CenterBox>
+    <div className="flex w-full flex-col items-center justify-center">
       <Svgs.Empty height={height} width={width} />
-      <Typography variant="subtitle1">{title}</Typography>
-      <Typography variant="body2">{description}</Typography>
-    </CenterBox>
+      <Typography variant="h4">{title}</Typography>
+      <Typography variant="muted">{description}</Typography>
+    </div>
   );
 };

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -1,20 +1,17 @@
 import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { CenterBox } from './styles';
 
 export const PageNotFound = () => {
   return (
-    <>
-      <CenterBox>
-        <Svgs.Empty />
-        <Typography variant="subtitle1">Page Not Found.</Typography>
-        <Typography variant="body2">
-          Oops! The page you are looking for doesn't exist.
-        </Typography>
-        <Typography variant="body2">
-          Please check the URL or return to the homepage.
-        </Typography>
-      </CenterBox>
-    </>
+    <div className="flex w-full flex-col items-center justify-center">
+      <Svgs.Empty />
+      <Typography variant="h4">Page Not Found.</Typography>
+      <Typography variant="muted">
+        Oops! The page you are looking for doesn't exist.
+      </Typography>
+      <Typography variant="muted">
+        Please check the URL or return to the homepage.
+      </Typography>
+    </div>
   );
 };

package/src/components/Assets/ErrorPages/ResourceNotFound.tsx

@@ -1,15 +1,12 @@
-import { Svgs } from '../../../assets/export';
+import { Svgs } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { CenterBox } from './styles';
 
 export const ResourceNotFound = (message: any) => {
   return (
-    <>
-      <CenterBox>
-        <Svgs.ResourceNotFound />
-        <Typography variant="subtitle1">Resource Not Found</Typography>
-        <Typography variant="body1">{message}</Typography>
-      </CenterBox>
-    </>
+    <div className="flex w-full flex-col items-center justify-center">
+      <Svgs.ResourceNotFound />
+      <Typography variant="h4">Resource Not Found</Typography>
+      <Typography variant="p">{message}</Typography>
+    </div>
   );
 };