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

package/src/components/Navigation/Sidebar/styles.tsx

@@ -1,180 +0,0 @@
-import {
-  Box,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  Stack,
-  StackProps,
-  styled,
-} from '@mui/material';
-import { Link } from 'react-router-dom';
-
-interface StyledSidebarContainerProps extends StackProps {
-  collapsed?: boolean;
-}
-
-// Move these interfaces outside the function
-export interface StyledLinkButtonProps {
-  match: any;
-}
-
-export interface StyledListItemButtonProps {
-  collapsed: boolean;
-}
-
-export const createSidebarStyles = (collapsed: boolean) => {
-  const StyledSidebarContainer = styled(Stack, {
-    shouldForwardProp: (prop) => prop !== 'collapsed',
-  })<StyledSidebarContainerProps>(({ theme, collapsed }) => ({
-    backgroundColor: theme.palette.surface.defaultBackground,
-    height: '100%',
-    justifyContent: collapsed ? 'space-between' : 'flex-start',
-    overflow: 'hidden',
-  }));
-
-  const StyledLogoArea = styled(Box)(
-    ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: collapsed ? '0px' : '19px 16px',
-      backgroundColor: theme.palette.surface.paperBackground,
-      height: '60px',
-      borderRadius: '8px',
-
-      [theme.breakpoints.down('md')]: {
-        height: '50px',
-        width: '50px',
-        minWidth: '0px',
-      },
-    }),
-  );
-
-  const StyledMenuBar = styled(Box)(({ theme }) => ({
-    height: '100%',
-    borderRadius: '8px',
-    backgroundColor: theme.palette.surface.paperBackground,
-    overflowY: 'auto',
-    overflowX: 'hidden',
-
-    [theme.breakpoints.down('md')]: {
-      margin: '12px 0px',
-      width: '250px',
-    },
-    '&::-webkit-scrollbar': {
-      width: '0.3em',
-      height: '0.2em',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: theme.palette.border.primary,
-      borderRadius: '3px',
-
-      // "&:hover": {
-      //   backgroundColor: theme.palette.border.secondary,
-      // },
-    },
-  }));
-
-  const StyledCollapsibleSection = styled(Box)<StyledListItemButtonProps>(
-    ({ theme, collapsed }) => ({
-      cursor: 'pointer',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: '16px 8px',
-      borderRadius: '8px',
-      backgroundColor: theme.palette.surface.paperBackground,
-    }),
-  );
-
-  const StyledListItem = styled(ListItem)(({ theme }) => ({
-    // width: collapsed ? "min-content" : "auto",
-    // backgroundColor: match ? theme.palette.secondary.main : "none",
-    display: 'flex',
-    justifyContent: 'center',
-    borderRadius: '4px',
-  }));
-
-  const StyledLinkButton = styled(Link)<StyledLinkButtonProps>(
-    ({ theme, match }) => ({
-      width: collapsed ? 'auto' : '100%',
-      textDecoration: 'none',
-      display: 'flex',
-      margin: collapsed ? '5px 0px 0px 0px' : '5px 8px',
-      backgroundColor: match ? theme.palette.secondary.main : 'none',
-      justifyContent: 'center',
-      '&:hover': {
-        color: 'unset',
-      },
-      borderRadius: '4px',
-    }),
-  );
-
-  const StyledListItemIcon = styled(ListItemIcon)(
-    ({ collapsed }: { collapsed: boolean }) => ({
-      display: 'flex',
-      justifyContent: 'center',
-      minWidth: '0px',
-      marginRight: '10px',
-    }),
-  );
-
-  const StyledListItemButton = styled(
-    ListItemButton,
-  )<StyledListItemButtonProps>(({ collapsed }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: collapsed ? 'center' : 'flex-start',
-    whiteSpace: 'nowrap',
-    padding: '5px 8px',
-    width: '100%',
-    borderRadius: '5px',
-    '&:hover .hoverIcon': {
-      display: 'flex',
-    },
-  }));
-
-  const HoverIcon = styled(Box)(({ theme }) => ({
-    display: 'none',
-  }));
-
-  const StyledSubMenuBox = styled(Box)<StyledLinkButtonProps>(
-    ({ theme, match }) => ({
-      width: collapsed ? 'auto' : '100%',
-      textDecoration: 'none',
-      display: 'flex',
-      margin: collapsed ? '5px 0px 0px 0px' : '5px 8px',
-      backgroundColor: match ? theme.palette.secondary.main : 'none',
-      justifyContent: 'center',
-      '&:hover': {
-        color: 'unset',
-      },
-      borderRadius: '4px',
-    }),
-  );
-
-  const StyledMenuHeaderButton = styled(Stack)(({ theme }) => ({
-    alignItems: 'center',
-    height: '50px',
-    width: '100%',
-    padding: '12px 16px',
-    backgroundColor: theme.palette.surface.grey,
-    cursor: 'pointer',
-    borderRadius: '8px 8px 0px 0px',
-  }));
-
-  return {
-    StyledSidebarContainer,
-    StyledLogoArea,
-    StyledMenuBar,
-    StyledCollapsibleSection,
-    StyledListItem,
-    StyledLinkButton,
-    StyledListItemButton,
-    StyledListItemIcon,
-    StyledSubMenuBox,
-    StyledMenuHeaderButton,
-    HoverIcon,
-  };
-};

package/src/components/Navigation/Stepper/StepperComponents.tsx

@@ -1,99 +0,0 @@
-import {
-  StepConnector,
-  stepConnectorClasses,
-  StepContent,
-  StepIconProps,
-  styled,
-} from '@mui/material';
-import { CheckedRadioIcon } from '../../Assets/Icons/IconComponents/CheckedRadioIcon';
-import { CompletedStateIcon } from '../../Assets/Icons/IconComponents/CompletedStateIcon';
-import { UnCheckedRadioIcon } from '../../Assets/Icons/IconComponents/UncheckedRadioIcon';
-
-interface StepContentProps {
-  isVertical: boolean;
-  activeStep: boolean;
-  isLastStep: boolean;
-}
-
-export const StyledStepContent = styled(StepContent)<StepContentProps>(
-  ({ theme, isVertical, activeStep, isLastStep }) => ({
-    ...(isVertical && {
-      marginLeft: '11px',
-    }),
-    ...(isVertical &&
-      activeStep &&
-      !isLastStep && {
-        borderLeft: `1px solid ${theme.palette.primary.light}`,
-      }),
-    ...(!isVertical && {
-      borderLeft: 'none',
-      marginLeft: '20px',
-    }),
-  }),
-);
-
-interface ConnectorProps {
-  isVertical: boolean;
-}
-
-export const Connector = styled(StepConnector)<ConnectorProps>(
-  ({ theme, isVertical }) => ({
-    [`&.${stepConnectorClasses.active}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        [isVertical
-          ? 'borderLeft'
-          : 'border']: `1px solid ${theme.palette.primary.light}`,
-      },
-    },
-    [`&.${stepConnectorClasses.completed}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        [isVertical
-          ? 'borderLeft'
-          : 'border']: `1px solid ${theme.palette.primary.light}`,
-      },
-    },
-    ...(isVertical
-      ? {
-          top: '0px',
-          marginLeft: '11px',
-          [`& .${stepConnectorClasses.line}`]: {
-            minHeight: '28px',
-          },
-        }
-      : {
-          left: 'calc(-50% + 8px)',
-          right: 'calc(50% + 7px)',
-          top: '7.5px',
-        }),
-  }),
-);
-
-export function StepIcon(props: StepIconProps & { onClick?: () => void }) {
-  const { active, completed, className, onClick } = props;
-
-  const getIcon = () => {
-    if (completed) return <CompletedStateIcon />;
-    if (active) return <CheckedRadioIcon />;
-    return <UnCheckedRadioIcon />;
-  };
-
-  return (
-    <StepIconRoot
-      className={className}
-      onClick={onClick}
-      sx={{
-        cursor: onClick ? 'pointer' : 'default',
-      }}
-    >
-      {getIcon()}
-    </StepIconRoot>
-  );
-}
-
-const StepIconRoot = styled('div')<{ sx?: any }>(({ theme, sx }) => ({
-  width: 20,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  ...sx,
-}));

package/src/components/Navigation/UploadDialog/Styles.tsx

@@ -1,35 +0,0 @@
-import { Box, styled } from '@mui/material';
-import React from 'react';
-
-interface StyledBoxProps {
-  dragging: boolean;
-}
-
-export const UploadDialogBox = styled(Box)<StyledBoxProps>(
-  ({ theme, dragging }) => {
-    const strokeColor = dragging
-      ? encodeURIComponent(theme.palette.primary.dark)
-      : encodeURIComponent(theme.palette.primary.main);
-
-    return {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: '250px',
-      borderRadius: '7px',
-      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' strokeWidth='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' strokeLinecap='round'/%3e%3c/svg%3e")`,
-      backgroundColor: theme.palette.surface.defaultBackground,
-      justifyContent: 'center',
-      alignItems: 'center',
-      transition: 'background-color 0.3s, border-color 0.3s',
-    };
-  },
-);
-
-export const ImageContainer = React.memo(
-  styled('img')<{ size?: number }>(({ size }) => ({
-    height: size ? `${size}px` : '110px',
-    width: size ? `${size}px` : '120px',
-    objectFit: 'contain',
-  })),
-);

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/pages/Admin/AcademicStructure/AcademicStructure.tsx

@@ -1,104 +0,0 @@
-import { Add } from '@mui/icons-material';
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from '@mui/material';
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-
-export const AcademicStructure: React.FC = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/admin/academic-structure';
-
-  if (!isRootPath) {
-    return <Outlet />;
-  }
-
-  return (
-    <Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-          mb: 3,
-        }}
-      >
-        <Box>
-          <Typography variant="h4" component="h1" gutterBottom>
-            Academic Structure
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Manage courses, departments, programs, and academic hierarchies.
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<Add />} sx={{ mt: 1 }}>
-          Add Structure
-        </Button>
-      </Box>
-
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Departments
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Academic departments and their organization.
-              </Typography>
-              <Typography variant="h4" color="primary">
-                8
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Active departments
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Programs & Courses
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Academic programs and course curriculum.
-              </Typography>
-              <Typography variant="h4" color="success.main">
-                45
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Active courses
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Academic Calendar
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Semester schedules and academic events.
-              </Typography>
-              <Typography variant="h4" color="info.main">
-                2
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Active semesters
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

package/src/pages/Admin/SystemSettings/SystemSettings.tsx

@@ -1,105 +0,0 @@
-import { Add } from '@mui/icons-material';
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from '@mui/material';
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-
-export const SystemSettings: React.FC = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/admin/system-settings';
-
-  if (!isRootPath) {
-    return <Outlet />;
-  }
-
-  return (
-    <Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-          mb: 3,
-        }}
-      >
-        <Box>
-          <Typography variant="h4" component="h1" gutterBottom>
-            System Settings
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Configure system parameters, institutional settings, and global
-            preferences.
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<Add />} sx={{ mt: 1 }}>
-          Add Setting
-        </Button>
-      </Box>
-
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                General Settings
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Basic system configuration and preferences.
-              </Typography>
-              <Typography variant="h4" color="primary">
-                24
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Configuration items
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Security Settings
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Authentication, authorization, and security policies.
-              </Typography>
-              <Typography variant="h4" color="success.main">
-                High
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Security level
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Backup & Recovery
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Data backup schedules and recovery procedures.
-              </Typography>
-              <Typography variant="h4" color="info.main">
-                Daily
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Backup frequency
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

package/src/pages/Admin/UserManagement/UserManagement.tsx

@@ -1,105 +0,0 @@
-import { Add } from '@mui/icons-material';
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from '@mui/material';
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-
-export const UserManagement: React.FC = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/admin/user-management';
-
-  if (!isRootPath) {
-    return <Outlet />;
-  }
-
-  return (
-    <Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-          mb: 3,
-        }}
-      >
-        <Box>
-          <Typography variant="h4" component="h1" gutterBottom>
-            User Management
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Manage user accounts, roles, and access permissions across the
-            system.
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<Add />} sx={{ mt: 1 }}>
-          Add User
-        </Button>
-      </Box>
-
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Active Users
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Currently active user accounts in the system.
-              </Typography>
-              <Typography variant="h4" color="success.main">
-                245
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Total active users
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Role Management
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Define and manage user roles and permissions.
-              </Typography>
-              <Typography variant="h4" color="primary">
-                12
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Defined roles
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Access Control
-              </Typography>
-              <Typography variant="body2" color="text.secondary" paragraph>
-                Monitor and control user access patterns.
-              </Typography>
-              <Typography variant="h4" color="info.main">
-                98%
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                Security compliance
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};