@campxdev/react-blueprint 1.1.8 → 1.1.9

package/src/stories/Navigation/DropDownMenu.stories.tsx

@@ -1,33 +1,33 @@
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { IconButton } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../components/Assets/Icons/Icons";
-import { DropDownButton } from "../../components/Navigation/DropDownMenu/DropDownButton";
-import { DropDownIcon } from "../../components/Navigation/DropDownMenu/DropDownIcon";
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { IconButton } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icons } from '../../components/Assets/Icons/Icons';
+import { DropDownButton } from '../../components/Navigation/DropDownMenu/DropDownButton';
+import { DropDownIcon } from '../../components/Navigation/DropDownMenu/DropDownIcon';
 import {
   DropdownMenu,
   DropdownMenuProps,
-} from "../../components/Navigation/DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "../../components/Navigation/DropDownMenu/DropdownMenuItem";
+} from '../../components/Navigation/DropDownMenu/DropDownMenu';
+import { DropdownMenuItem } from '../../components/Navigation/DropDownMenu/DropdownMenuItem';
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DropdownMenu> = {
-  title: "Navigation/DropDownMenu",
+  title: 'Navigation/DropDownMenu',
   component: DropdownMenu,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     anchor: {
       description:
-        "A function that returns a React node used as the dropdown anchor. It provides a method to open the dropdown.",
-      control: "object",
+        'A function that returns a React node used as the dropdown anchor. It provides a method to open the dropdown.',
+      control: 'object',
     },
     menuProps: {
       description: 'Props to pass to the Menu component, except for "open".',
-      control: "object",
+      control: 'object',
     },
     menuListProps: {
-      description: "Props to pass to the MenuList component.",
-      control: "object",
+      description: 'Props to pass to the MenuList component.',
+      control: 'object',
     },
   },
 };
@@ -52,14 +52,14 @@ export const Primary: Story = {
     menu: [
       <DropdownMenuItem
         icon={<Icons.HelpIcon />}
-        label={"Register"}
+        label={'Register'}
         onClick={() => {}}
       />,
 
-      <DropdownMenuItem label={"Active Devices"} onClick={() => {}} />,
+      <DropdownMenuItem label={'Active Devices'} onClick={() => {}} />,
     ],
     menuListProps: {
-      sx: { width: "20px" },
+      sx: { width: '20px' },
     },
   },
 };
@@ -81,15 +81,15 @@ export const WithButtonLoading: Story = {
     menu: [
       <DropdownMenuItem
         icon={<Icons.HelpIcon />}
-        label={"Register"}
+        label={'Register'}
         onClick={() => {
-          window.open("/payment", "_blank");
+          window.open('/payment', '_blank');
         }}
       />,
 
       <DropdownMenuItem
         icon={<Icons.HelpIcon />}
-        label={"Register"}
+        label={'Register'}
         onClick={() => {}}
       />,
     ],
@@ -105,9 +105,9 @@ export const WithDefaultIcon: Story = {
     ),
     menu: [
       <DropdownMenuItem
-        label={"Student Payments"}
+        label={'Student Payments'}
         onClick={() => {
-          window.open("/payment", "_blank");
+          window.open('/payment', '_blank');
         }}
       />,
     ],
@@ -127,7 +127,7 @@ export const WithIcon: Story = {
               <MoreVertIcon />
             </IconButton>
           ),
-          iconProps: { color: "secondary" },
+          iconProps: { color: 'secondary' },
           outlined: false,
         }}
       />

package/src/stories/Navigation/FloatingSidebar.stories.tsx

@@ -1,29 +1,29 @@
-import { Box } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { Icons, Sidebar } from "../../components/export";
+import { Box } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icons, Sidebar } from '../../components/export';
 
 // Define the default export Sidebar Meta type including the component type
 const meta: Meta<typeof Sidebar> = {
-  title: "Navigation/FloatingSidebar",
+  title: 'Navigation/FloatingSidebar',
   component: Sidebar,
   decorators: [
     (Story) => (
       <Box
         sx={{
-          display: "flex",
-          width: "100vw",
-          height: "100vh",
-          overflow: "hidden",
-          position: "relative",
+          display: 'flex',
+          width: '100vw',
+          height: '100vh',
+          overflow: 'hidden',
+          position: 'relative',
         }}
       >
         <Story />
       </Box>
     ),
   ],
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
-    layout: "fullscreen", // Ensures that the story takes the full screen
+    layout: 'fullscreen', // Ensures that the story takes the full screen
   },
 };
 
@@ -31,28 +31,28 @@ export default meta;
 type Story = StoryObj<typeof Sidebar>;
 
 const mainMenu = [
-  { name: "Admin", path: "/admin", icon: <Icons.AdminIcon size={20} /> },
-  { name: "UMS", path: "/ums", icon: <Icons.UmsIcon size={20} /> },
+  { name: 'Admin', path: '/admin', icon: <Icons.AdminIcon size={20} /> },
+  { name: 'UMS', path: '/ums', icon: <Icons.UmsIcon size={20} /> },
   {
-    name: "Payments",
-    path: "/payments",
+    name: 'Payments',
+    path: '/payments',
     icon: <Icons.PayxIcon size={20} />,
   },
-  { name: "Exams", path: "/exams", icon: <Icons.ExamxIcon size={20} /> },
-  { name: "HRMS", path: "/hrms", icon: <Icons.PeoplexIcon size={20} /> },
+  { name: 'Exams', path: '/exams', icon: <Icons.ExamxIcon size={20} /> },
+  { name: 'HRMS', path: '/hrms', icon: <Icons.PeoplexIcon size={20} /> },
   {
-    name: "Enroll",
-    path: "/enroll",
+    name: 'Enroll',
+    path: '/enroll',
     icon: <Icons.EnrollxIcon size={20} />,
   },
   {
-    name: "Commute",
-    path: "/commute",
+    name: 'Commute',
+    path: '/commute',
     icon: <Icons.CommutexIcon size={20} />,
   },
   {
-    name: "Hostels",
-    path: "/hostels",
+    name: 'Hostels',
+    path: '/hostels',
     icon: <Icons.HostelxIcon size={20} />,
   },
 ];

package/src/stories/Navigation/ImportDialog.stories.tsx

@@ -0,0 +1,45 @@
+// UploadDialog.stories.js
+import { Button } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import { StoryFn } from '@storybook/react/*';
+import { UploadDialog, UploadDialogProps } from '../../components/export';
+
+export default {
+  title: 'Navigation/UploadDialog',
+  component: UploadDialog,
+  argTypes: {
+    anchor: { control: false },
+    onDialogOpen: { action: 'onDialogOpen' },
+    onDialogClose: { action: 'onDialogClose' },
+    onUpload: { action: 'onUpload' },
+    acceptFileType: { control: 'text' },
+    loading: { control: 'boolean' },
+  },
+};
+
+const Template: StoryFn<UploadDialogProps> = (args: any) => (
+  <UploadDialog
+    {...args}
+    anchor={({ open }: { open: () => void }) => (
+      <Button onClick={open}>Open Upload Dialog</Button>
+    )}
+  />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  sampleFileUrl: 'https://example.com/sample-file.pdf',
+  onUpload: action('onUpload'),
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+export const AcceptFileType = Template.bind({});
+AcceptFileType.args = {
+  ...Default.args,
+  acceptFileType: '.pdf',
+};

package/src/stories/Navigation/PreviewFiles.stories.tsx

@@ -0,0 +1,80 @@
+import { Box } from '@mui/material';
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+import { PreviewFiles, PreviewFilesProps } from '../../components/export';
+
+export default {
+  title: 'Navigation/PreviewFiles',
+  component: PreviewFiles,
+  argTypes: {
+    files: { control: 'object' },
+    label: { control: 'text' },
+  },
+} as Meta<PreviewFilesProps>;
+
+const createTestFile = (name: string, type: string, size: number): File => {
+  return new File(['dummy content'], name, {
+    type: type,
+    lastModified: Date.now(),
+  });
+};
+
+const imageFile = createTestFile('image.jpg', 'image/jpeg', 1024 * 1024);
+const pdfFile = createTestFile(
+  'document.pdf',
+  'application/pdf',
+  2 * 1024 * 1024,
+);
+const excelFile = createTestFile(
+  'spreadsheet.xlsx',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  512 * 1024,
+);
+const wordFile = createTestFile(
+  'report.docx',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  3 * 1024 * 1024,
+);
+const txtFile = createTestFile('notes.txt', 'text/plain', 10 * 1024);
+
+const Template: StoryFn<PreviewFilesProps> = (args) => {
+  const [files, setFiles] = useState<PreviewFilesProps['files']>(args.files);
+
+  const handleSetFiles: PreviewFilesProps['setFiles'] = (newFiles: any) => {
+    if (typeof newFiles === 'function') {
+      setFiles(newFiles(files));
+    } else {
+      setFiles(newFiles);
+    }
+  };
+
+  return (
+    <Box sx={{ width: '400px', padding: '20px' }}>
+      <PreviewFiles {...args} files={files} setFiles={handleSetFiles} />
+    </Box>
+  );
+};
+
+export const MultipleFiles = Template.bind({});
+MultipleFiles.args = {
+  files: [imageFile, pdfFile, excelFile, wordFile, txtFile],
+  label: 'Multiple Files',
+};
+
+export const SingleFile = Template.bind({});
+SingleFile.args = {
+  files: pdfFile,
+  label: 'Single File',
+};
+
+export const NoFile = Template.bind({});
+NoFile.args = {
+  files: null,
+  label: 'No File',
+};
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+  files: [imageFile, pdfFile],
+  label: 'Custom Label for Files',
+};

package/src/stories/Navigation/Stepper.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react/*";
-import { Stepper } from "../../components/Navigation/Stepper/Stepper";
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Stepper } from '../../components/Navigation/Stepper/Stepper';
 
 const meta: Meta<typeof Stepper> = {
-  title: "Navigation/Stepper",
+  title: 'Navigation/Stepper',
   component: Stepper,
   argTypes: {},
 };
@@ -13,33 +13,33 @@ type Story = StoryObj<typeof Stepper>;
 
 const steps = [
   {
-    label: "Semester Configuration",
+    label: 'Semester Configuration',
     description:
-      "Configure Credits, Tuition Fee Requirements, Registration Dates",
+      'Configure Credits, Tuition Fee Requirements, Registration Dates',
   },
   {
-    label: "Semester Calender",
+    label: 'Semester Calender',
     description:
-      "Manage the timeline of the semester. Add new or edit the following events as per the semester needs",
+      'Manage the timeline of the semester. Add new or edit the following events as per the semester needs',
   },
   {
-    label: "Students and Sections",
-    description: "Add or move students to their respective sections",
+    label: 'Students and Sections',
+    description: 'Add or move students to their respective sections',
   },
   {
-    label: "Courses",
+    label: 'Courses',
     description:
-      "Verify the courses that are going to be taught in this semester",
+      'Verify the courses that are going to be taught in this semester',
   },
   {
-    label: "Assign Faculty",
-    description: "Assign Faculty to the available subjects",
+    label: 'Assign Faculty',
+    description: 'Assign Faculty to the available subjects',
   },
 ];
 
 export const VerticalStepper: Story = {
   args: {
-    orientation: "vertical",
+    orientation: 'vertical',
     steps,
     activeStep: 2,
   },
@@ -57,7 +57,7 @@ export const VerticalStepperWithNoDescription: Story = {
 export const HorizontalStepper: Story = {
   args: {
     ...VerticalStepper.args,
-    orientation: "horizontal",
+    orientation: 'horizontal',
   },
 };
 

package/src/stories/Navigation/TabsContainer.stories.tsx

@@ -1,16 +1,16 @@
-import { Box } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
+import { Box } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react';
 
 import {
   TabsContainer,
   TabsContainerProps,
-} from "../../components/Navigation/TabsContainer/TabsContainer";
+} from '../../components/Navigation/TabsContainer/TabsContainer';
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof TabsContainer> = {
-  title: "Navigation/TabsContainer",
+  title: 'Navigation/TabsContainer',
   component: TabsContainer,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   // argTypes: {
   //   menu: {
   //     control: "object",
@@ -28,18 +28,18 @@ export const Primary: Story = {
   args: {
     tabs: [
       {
-        key: "1",
-        label: "Personal Details",
+        key: '1',
+        label: 'Personal Details',
         component: <Box>First Year</Box>,
       },
       {
-        key: "2",
-        label: "Overview",
+        key: '2',
+        label: 'Overview',
         component: <>Second Year</>,
       },
       {
-        key: "3",
-        label: "year 3",
+        key: '3',
+        label: 'year 3',
         component: <>Third Year</>,
       },
     ],

package/src/themes/MuiThemeProvider.tsx

@@ -1,6 +1,6 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { ReactNode } from "react";
-import { lightTheme } from "./lightTheme";
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { ReactNode } from 'react';
+import { lightTheme } from './lightTheme';
 
 export const MuiThemeProvider = ({
   children,

package/src/themes/colorTokens/colorPalette.tsx

@@ -1,48 +1,48 @@
 export const ColorPalette = {
   BrandColors: {
-    Violet100: "#F0F0F5",
-    Violet200: "#E0E0E7",
-    Violet250: "#D0D0E3",
-    Violet300: "#9E9DEB",
-    Violet400: "#9E9DEB",
-    Violet450: "#7B7ACC",
-    Violet500: "#656599",
-    Violet550: "#4D508A",
-    Violet600: "#323167",
-    Violet700: "#303259",
-    Violet800: "#1E1E45",
-    Violet900: "#1D1E3B",
-    Crimson: "#D4483E",
+    Violet100: '#F0F0F5',
+    Violet200: '#E0E0E7',
+    Violet250: '#D0D0E3',
+    Violet300: '#9E9DEB',
+    Violet400: '#9E9DEB',
+    Violet450: '#7B7ACC',
+    Violet500: '#656599',
+    Violet550: '#4D508A',
+    Violet600: '#323167',
+    Violet700: '#303259',
+    Violet800: '#1E1E45',
+    Violet900: '#1D1E3B',
+    Crimson: '#D4483E',
   },
   GreyColors: {
-    White50: "#FFFFFF80",
-    White70: "#FFFFFFB3",
-    White: "#FFFFFF",
-    Grey100: "#F2F2F2",
-    Grey200: "#CECECE",
-    Grey500: "#333333",
-    Black50: "#12121280",
-    Black70: "#121212B3",
-    Black: "#121212",
+    White50: '#FFFFFF80',
+    White70: '#FFFFFFB3',
+    White: '#FFFFFF',
+    Grey100: '#F2F2F2',
+    Grey200: '#CECECE',
+    Grey500: '#333333',
+    Black50: '#12121280',
+    Black70: '#121212B3',
+    Black: '#121212',
   },
   BlueGreyColors: {
-    BlueGrey100: "#F7F8FA",
-    BlueGrey400: "#293640",
-    BlueGrey600: "#1D2127",
-    BlueGrey800: "#161A1D",
+    BlueGrey100: '#F7F8FA',
+    BlueGrey400: '#293640',
+    BlueGrey600: '#1D2127',
+    BlueGrey800: '#161A1D',
   },
   UtilityColors: {
-    Green: "#88B053",
-    Blue: "#4BAABE",
-    Orange: "#ED9035",
-    Red: "#F2353C",
-    Pink: "#EA4A6B",
-    Yellow: "#F4C100",
-    Green20: "#88B05333",
-    Blue20: "#4BAABE33",
-    Orange20: "#ED903533",
-    Red20: "#F2353C33",
-    Pink20: "#EA4A6B33",
-    LightYellow: "#F4C10033",
+    Green: '#88B053',
+    Blue: '#4BAABE',
+    Orange: '#ED9035',
+    Red: '#F2353C',
+    Pink: '#EA4A6B',
+    Yellow: '#F4C100',
+    Green20: '#88B05333',
+    Blue20: '#4BAABE33',
+    Orange20: '#ED903533',
+    Red20: '#F2353C33',
+    Pink20: '#EA4A6B33',
+    LightYellow: '#F4C10033',
   },
 };

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -1,4 +1,4 @@
-import { ColorPalette } from "./colorPalette";
+import { ColorPalette } from './colorPalette';
 
 export const DarkColorTokens = {
   primary: {

package/src/themes/colorTokens/lightColorTokens.ts

@@ -1,4 +1,4 @@
-import { ColorPalette } from "./colorPalette";
+import { ColorPalette } from './colorPalette';
 
 export const LightColorTokens = {
   primary: {

package/src/themes/commonTheme.ts

@@ -124,9 +124,10 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             fontFamily: 'poppins',
-            fontWeight: 400,
+            fontWeight: 500,
             fontSize: '16px',
-            padding: 0,
+            padding: '12px 16px',
+            backgroundColor: ColorTokens.surface.grey,
           },
           paper: {
             elevation: 2,
@@ -134,6 +135,14 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            padding: '0px',
+            margin: '16px',
+          },
+        },
+      },
       MuiChip: {
         styleOverrides: {
           root: {
@@ -154,6 +163,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             boxShadow: 'none',
+
             border: `1px solid ${ColorTokens.border.primary}`,
             borderRadius: '8px',
           },
@@ -364,7 +374,7 @@ export const getCommonTheme = (mode: Theme) => {
           root: {
             '& .MuiOutlinedInput-root .MuiAutocomplete-input': {
               padding: 0,
-              maxHeight: '100px',
+              maxHeight: '40px',
             },
             overflowY: 'auto',
           },

package/src/themes/customCssBaseline.ts

@@ -1,9 +1,9 @@
-import { heeboMedium, heeboSemiBold } from "../assets/fonts/heebo";
+import { heeboMedium, heeboSemiBold } from '../assets/fonts/heebo';
 import {
   boldPoppins,
   mediumPoppins,
   semiboldPoppins,
-} from "../assets/fonts/poppins";
+} from '../assets/fonts/poppins';
 
 export const customCssBaseline = `
     @font-face {

package/src/themes/darkTheme.ts

@@ -1,11 +1,11 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from '@mui/material/styles';
 
-import { DarkColorTokens } from "./colorTokens/darkColorTokens";
-import { Theme, getCommonTheme } from "./commonTheme";
+import { DarkColorTokens } from './colorTokens/darkColorTokens';
+import { Theme, getCommonTheme } from './commonTheme';
 
 export const darkTheme = createTheme({
   palette: {
-    mode: "dark",
+    mode: 'dark',
     ...DarkColorTokens,
   },
   ...getCommonTheme(Theme.DARK),

package/src/themes/export.ts

@@ -1,5 +1,5 @@
-import { darkTheme } from "./darkTheme";
-import { lightTheme } from "./lightTheme";
+import { darkTheme } from './darkTheme';
+import { lightTheme } from './lightTheme';
 
-export * from "./MuiThemeProvider";
+export * from './MuiThemeProvider';
 export { darkTheme, lightTheme };

package/src/themes/lightTheme.ts

@@ -1,10 +1,10 @@
-import { createTheme } from "@mui/material/styles";
-import { LightColorTokens } from "./colorTokens/lightColorTokens";
-import { Theme, getCommonTheme } from "./commonTheme";
+import { createTheme } from '@mui/material/styles';
+import { LightColorTokens } from './colorTokens/lightColorTokens';
+import { Theme, getCommonTheme } from './commonTheme';
 
 export const lightTheme = createTheme({
   palette: {
-    mode: "light",
+    mode: 'light',
     ...LightColorTokens,
   },
   ...getCommonTheme(Theme.LIGHT),

package/src/utils/constants.ts

@@ -1,6 +1,6 @@
-import Cookies from "js-cookie";
+import Cookies from 'js-cookie';
 
-export const isDevelopment: boolean = process.env.NODE_ENV === "development";
-export const urlTenantKey = window.location.pathname.split("/")[1];
-export const institutionKey = window.location.pathname.split("/")[2];
-export const sessionKey = Cookies.get("campx_session_key");
+export const isDevelopment: boolean = process.env.NODE_ENV === 'development';
+export const urlTenantKey = window.location.pathname.split('/')[1];
+export const institutionKey = window.location.pathname.split('/')[2];
+export const sessionKey = Cookies.get('campx_session_key');