@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/src/pages/UMS.tsx

@@ -1,103 +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 UMS: React.FC = () => {
-  const location = useLocation();
-  const isRootUMS =
-    location.pathname === '/ums' || location.pathname === '/ums/';
-
-  if (!isRootUMS) {
-    // For nested routes, render the child components
-    return <Outlet />;
-  }
-
-  // Show default UMS dashboard when on root UMS path
-  return (
-    <Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-          mb: 3,
-        }}
-      >
-        <Box>
-          <Typography variant="h4" component="h1" gutterBottom>
-            University Management System (UMS)
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Comprehensive university management system for academic
-            administration, student management, and educational operations.
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<Add />} sx={{ mt: 1 }}>
-          Quick Action
-        </Button>
-      </Box>
-
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Students
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Student enrollment, profiles, and academic records management.
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Teachers
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Faculty directory, qualifications, and performance tracking.
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Classrooms
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Classroom management, timetables, and room allocation.
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardContent>
-              <Typography variant="h6" gutterBottom>
-                Attendance
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Daily attendance tracking and monthly reports.
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

package/src/stories/DataDisplay/AccordionGroup.stories.tsx

@@ -1,130 +0,0 @@
-import { ImageList, ImageListItem } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react/*';
-import { AccordionGroup } from '../../components/export';
-
-const StandardImageList = () => {
-  return (
-    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
-      {itemData.map((item) => (
-        <ImageListItem key={item.img}>
-          <img
-            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-            alt={item.title}
-            loading="lazy"
-          />
-        </ImageListItem>
-      ))}
-    </ImageList>
-  );
-};
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-  },
-];
-
-const primaryData = [
-  {
-    title: 'Accordion 1',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 2',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 3',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 4',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-];
-
-const SecondaryData = [
-  {
-    title: 'Accordion 1',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 2',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 3',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 4',
-    content: <StandardImageList />,
-  },
-];
-
-const meta: Meta<typeof AccordionGroup> = {
-  title: 'DataDisplay/AccordionGroup',
-  component: AccordionGroup,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AccordionGroup>;
-
-export const Primary: Story = {
-  args: { data: primaryData },
-};
-
-export const Secondary: Story = {
-  args: { data: SecondaryData },
-};

package/src/stories/DataDisplay/DataTable.stories.tsx

@@ -1,81 +0,0 @@
-import { GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
-import { Meta, StoryObj } from '@storybook/react';
-import { DataTable } from '../../components/DataDisplay/DataTable/DataTable';
-// Make sure the path to your component is correct
-
-const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', flex: 1 },
-  { field: 'firstName', headerName: 'First name', flex: 3 },
-  { field: 'lastName', headerName: 'Last name', flex: 3 },
-  { field: 'age', headerName: 'Age', type: 'number', flex: 1 },
-];
-
-const rows = [
-  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
-  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
-  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
-  { id: 10, lastName: 'Baratheon', firstName: 'Robert', age: 40 },
-];
-
-const columnGroupingModel: GridColumnGroupingModel = [
-  {
-    groupId: 'full_name',
-    headerName: 'Full Name',
-    description: 'Full Name of Character',
-    children: [{ field: 'firstName' }, { field: 'lastName' }],
-  },
-];
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof DataTable> = {
-  title: 'DataDisplay/DataTable',
-  component: DataTable,
-  argTypes: {
-    totalCount: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    limit: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    offset: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    onPageChange: {
-      action: 'onPageChange', // This will log actions in the actions panel of Storybook
-      description: 'Callback function when the page changes',
-    },
-    onLimitChange: {
-      action: 'onLimitChange', // This will log actions in the actions panel of Storybook
-      description: 'Callback function when the limit changes',
-    },
-  },
-  args: {
-    limit: 10,
-    offset: 0,
-    totalCount: 100,
-    onPageChange: (page) => {},
-    onLimitChange: (limit) => {},
-    columnGroupingModel,
-    columns,
-    rows,
-  },
-};
-
-export default meta;
-const Template: StoryObj<typeof DataTable> = {
-  render: (args) => <DataTable {...args} />,
-  args: {},
-};
-
-export const Default: StoryObj<typeof DataTable> = {
-  ...Template,
-};

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -1,73 +0,0 @@
-import { Box } from '@mui/material';
-import { Meta } from '@storybook/react/*';
-import {
-  SidePanel,
-  SidePanelProps,
-} from '../../components/DataDisplay/SidePanel/SidePanel';
-
-export default {
-  title: 'DataDisplay/SidePanel',
-  component: SidePanel,
-} as Meta<typeof SidePanel>;
-
-export const WithText = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-  },
-};
-
-export const WithImage = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-  },
-};
-export const WithBottomComponent = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-    bottomChildren: <Box>here your component</Box>,
-  },
-};

package/src/stories/DataDisplay/SquareAvatar.stories.tsx

@@ -1,50 +0,0 @@
-// Import React and other necessary elements
-
-import { Meta } from '@storybook/react';
-import {
-  SquareAvatar,
-  SquareAvatarProps,
-} from '../../components/DataDisplay/Avatar/Avatar';
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'DataDisplay/SquareAvatar',
-  component: SquareAvatar,
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Content inside the SquareAvatar component',
-    },
-    src: {
-      control: 'text',
-      description: 'Image source for the SquareAvatar component',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circular', 'rounded', 'square'],
-      },
-      description: 'Variant of the SquareAvatar component',
-    },
-    sx: {
-      control: 'object',
-      description: 'Custom styling for the SquareAvatar component',
-    },
-  },
-} as Meta<typeof SquareAvatar>;
-
-// Define stories directly as objects with render function
-export const WithText = {
-  render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
-  args: {
-    text: 'SQC01',
-  },
-};
-
-export const WithImage = {
-  render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
-  args: {
-    src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',
-  },
-};

package/src/stories/Input/TimePicker.stories.tsx

@@ -1,160 +0,0 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { Meta, StoryObj } from '@storybook/react/*';
-import { add, isWithinInterval, startOfDay } from 'date-fns';
-import { TimePicker } from '../../components/Input/TimePicker/TimePicker';
-
-const meta: Meta<typeof TimePicker> = {
-  title: 'Input/TimePicker',
-  component: TimePicker,
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Story />
-      </LocalizationProvider>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TimePicker>;
-
-export const Primary: Story = {
-  args: {
-    label: 'Time Picker (Hours Minutes Meridian)',
-    name: 'time-picker',
-    required: true,
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Time Picker (Hours Minutes Seconds Meridian)',
-    format: 'HH:mm:ss a',
-    views: ['hours', 'minutes', 'seconds'],
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Time Picker (Hours Minutes - 24hr Format)',
-    format: 'HH:mm',
-    ampm: false,
-  },
-};
-
-export const Quaternary: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Time Picker (Hours Minutes Seconds - 24hr Format)',
-    format: 'HH:mm:ss',
-    ampm: false,
-    views: ['hours', 'minutes', 'seconds'],
-  },
-};
-
-export const WithDefaultValue: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Default Value',
-    required: false,
-    value: new Date('2024/9/15 15:30'),
-  },
-};
-
-export const WithPlaceHolderHelperText: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Placeholder & Helper Text',
-    required: false,
-    placeholder: 'Select Time',
-    helperText: 'Mandatory field',
-  },
-};
-
-export const WithDifferentTimeSteps: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Time Steps',
-    required: false,
-    timeSteps: { hours: 2, minutes: 15 },
-  },
-};
-
-export const DisablePast: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Past',
-    format: 'HH:mm',
-    ampm: false,
-    required: false,
-    disablePast: true,
-  },
-};
-
-export const DisableFuture: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Future',
-    format: 'HH:mm',
-    ampm: false,
-    required: false,
-    disableFuture: true,
-  },
-};
-
-export const MinimumTime: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Minimum Time (9AM)',
-    format: 'HH:mm',
-    ampm: false,
-    required: false,
-    minTime: new Date('2024/9/15 09:00'),
-  },
-};
-
-export const MaximumTime: Story = {
-  args: {
-    ...Primary.args,
-    label: 'With Maximum Time (5PM)',
-    format: 'HH:mm',
-    ampm: false,
-    required: false,
-    maxTime: new Date('2024/9/15 17:00'),
-  },
-};
-
-export const DisableSpecificTime: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Disable Specific Time (12AM - 9AM)',
-    ampm: false,
-    required: false,
-    shouldDisableTime: (
-      time: Date,
-      clockType: 'hours' | 'minutes' | 'seconds',
-    ) => {
-      if (clockType === 'hours') {
-        const today = startOfDay(new Date());
-        const startTime = today;
-        const endTime = add(today, { hours: 8 });
-        return isWithinInterval(time, { start: startTime, end: endTime });
-      }
-      return false;
-    },
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    ...Primary.args,
-    label: 'Read Only',
-    required: false,
-    disabled: true,
-    value: new Date('2024/9/15 15:30'),
-  },
-};

package/src/stories/Layout/AppHeader.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Box } from '@mui/material';
-import {
-  AppHeader,
-  AppHeaderProps,
-} from '../../components/Layout/AppHeader/AppHeader';
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof AppHeader> = {
-  title: 'Layout/AppHeader',
-  component: AppHeader,
-  tags: ['autodocs'],
-  argTypes: {
-    actions: {
-      control: 'object',
-      description: 'Custom actions to be displayed.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AppHeader>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: AppHeaderProps) => (
-    <Box
-      sx={{
-        width: '100%',
-        height: '300px',
-        alignContent: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <AppHeader {...args} />
-    </Box>
-  ),
-  args: {
-    clientName: 'Anurag University',
-    actions: [<p>asdjflsf</p>],
-    // appsMenu: <AppsMenu apps={["exams", "square", "admin"]} />,
-    userFullName: 'Srikanth Yellapragada',
-    collapsed: false,
-  },
-};