@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/stories/Navigation/ColumnFilters.stories.tsx

@@ -1,72 +0,0 @@
-import { GridColumnVisibilityModel } from '@mui/x-data-grid';
-import { Meta, StoryFn } from '@storybook/react';
-import { useState } from 'react';
-import {
-  TableColumnsSelector,
-  TableColumnsSelectorProps,
-} from '../../components/export';
-
-const meta: Meta<typeof TableColumnsSelector> = {
-  title: 'Navigation/ColumnFilters',
-  component: TableColumnsSelector,
-  argTypes: {
-    columns: {
-      control: { type: 'object' },
-      description: 'Array of filter options with labels and values.',
-    },
-    menuProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI Menu component.',
-    },
-    menuListProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI MenuList component.',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: StoryFn<TableColumnsSelectorProps> = (args) => {
-  const [selectedValues, setSelectedValues] =
-    useState<GridColumnVisibilityModel>();
-
-  const handleOnChange = (values: GridColumnVisibilityModel) => {
-    setSelectedValues(values);
-  };
-
-  return (
-    <>
-      <TableColumnsSelector {...args} />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  columns: [
-    { field: 'id', headerName: 'ID', width: 90 },
-    {
-      field: 'firstName',
-      headerName: 'First name',
-      width: 150,
-      editable: true,
-    },
-    {
-      field: 'lastName',
-      headerName: 'Last name',
-      width: 150,
-      editable: true,
-    },
-    {
-      field: 'age',
-      headerName: 'Age',
-      type: 'number',
-      width: 110,
-      editable: true,
-    },
-  ],
-};

package/src/stories/Navigation/ConfirmDialog.stories.tsx

@@ -1,98 +0,0 @@
-import { Button } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { ConfirmDialog, ConfirmDialogProps } from '../../components/export';
-
-const meta: Meta<typeof ConfirmDialog> = {
-  title: 'Navigation/ConfirmDialog',
-  component: ConfirmDialog,
-  tags: ['autodocs'],
-  argTypes: {
-    isOpen: {
-      description: 'Controls the visibility of the dialog',
-    },
-    title: {
-      description: 'Title text of the dialog',
-      control: 'text',
-    },
-    message: {
-      description: 'Message text displayed in the dialog',
-      control: 'text',
-    },
-    cancelButtonText: {
-      description: 'Text displayed on the cancel button',
-      control: 'text',
-    },
-    confirmButtonText: {
-      description: 'Text displayed on the confirm button',
-      control: 'text',
-    },
-    type: {
-      description: "Type of confirmation dialog ('confirm' or 'delete')",
-      control: {
-        type: 'select',
-        options: ['confirm', 'delete'],
-      },
-    },
-    onConfirm: {
-      description: 'Function to execute on confirm',
-      action: 'confirmed',
-    },
-    onCancel: {
-      description: 'Function to execute on cancel',
-      action: 'canceled',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConfirmDialog>;
-
-export const Default: Story = {
-  render: (args: ConfirmDialogProps) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <Button variant="contained" onClick={() => setOpen(true)}>
-          Show Confirm Dialog
-        </Button>
-        <ConfirmDialog
-          {...args}
-          isOpen={open}
-          onCancel={() => setOpen(false)}
-          onConfirm={() => setOpen(false)}
-        />
-      </>
-    );
-  },
-  args: {
-    title: 'Are you sure?',
-    message: 'Do you really want to perform this action?',
-    type: 'confirm',
-  },
-};
-
-export const DeleteConfirmation: Story = {
-  render: (args: ConfirmDialogProps) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <Button variant="contained" onClick={() => setOpen(true)}>
-          Show Delete Confirm Dialog
-        </Button>
-        <ConfirmDialog
-          {...args}
-          isOpen={open}
-          onCancel={() => setOpen(false)}
-          onConfirm={() => setOpen(false)}
-        />
-      </>
-    );
-  },
-  args: {
-    title: 'Confirm Delete',
-    message: 'Are you sure you want to delete this item?',
-    type: 'delete',
-  },
-};

package/src/stories/Navigation/DensitySelector.stories.tsx

@@ -1,36 +0,0 @@
-import { GridDensity } from '@mui/x-data-grid';
-import { Meta, StoryFn } from '@storybook/react';
-import { DensitySelector, DensitySelectorProps } from '../../components/export';
-
-const meta: Meta<typeof DensitySelector> = {
-  title: 'Layout/TableDensityFilter',
-  component: DensitySelector,
-  argTypes: {
-    menuProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI Menu component.',
-    },
-    menuListProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI MenuList component.',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: StoryFn<DensitySelectorProps> = (args) => {
-  const handleOnChange = (value: GridDensity) => {};
-
-  return (
-    <>
-      <DensitySelector {...args} />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {};

package/src/stories/Navigation/DialogButton.stories.tsx

@@ -1,151 +0,0 @@
-import { Box, Button, Typography } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react/*';
-import {
-  DialogButton,
-  DialogButtonProps,
-} from '../../components/Navigation/DialogButton/DialogButton';
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof DialogButton> = {
-  title: 'Navigation/DialogButton',
-  component: DialogButton,
-  tags: ['autodocs'],
-  argTypes: {
-    anchor: {
-      description:
-        'A function that returns a React node used as the dropdown anchor. It provides a method to open the dialog.',
-      control: 'object',
-    },
-    content: {
-      description:
-        'A function that returns a React node used as the dialog content. It provides a method to close the dialog.',
-      control: 'object',
-    },
-    title: {
-      description:
-        'The title of the dialog. This can be a string or a React node.',
-      control: 'text',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DialogButton>;
-
-export const WithMaxWidthXs: Story = {
-  render: (args: DialogButtonProps) => <DialogButton {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <Button color="primary" variant="contained" onClick={open}>
-        DialogButton
-      </Button>
-    ),
-    content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '100px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
-    ),
-
-    maxWidth: 'xs',
-
-    title: 'Add Title Name',
-  },
-};
-
-export const WithMaxWidthSm: Story = {
-  render: (args: DialogButtonProps) => <DialogButton {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <Button color="primary" variant="contained" onClick={open}>
-        DialogButton
-      </Button>
-    ),
-    content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
-    ),
-
-    maxWidth: 'sm',
-
-    title: 'Add Title Name',
-  },
-};
-
-export const WithMaxWidthMd: Story = {
-  render: (args: DialogButtonProps) => <DialogButton {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <Button color="primary" variant="contained" onClick={open}>
-        DialogButton
-      </Button>
-    ),
-    content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Typography>Hello</Typography>
-      </>
-    ),
-
-    maxWidth: 'md',
-
-    title: 'Add Title Name',
-  },
-};
-
-export const WithMaxWidthLg: Story = {
-  render: (args: DialogButtonProps) => <DialogButton {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <Button color="primary" variant="contained" onClick={open}>
-        DialogButton
-      </Button>
-    ),
-    content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
-    ),
-
-    maxWidth: 'lg',
-
-    title: 'Add Title Name',
-  },
-};
-
-export const WithMaxWidthXl: Story = {
-  render: (args: DialogButtonProps) => <DialogButton {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <Button color="primary" variant="contained" onClick={open}>
-        DialogButton
-      </Button>
-    ),
-    content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
-    ),
-    maxWidth: 'xl',
-    title: 'Add Title Name',
-  },
-};

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

@@ -1,136 +0,0 @@
-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';
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof DropdownMenu> = {
-  title: 'Navigation/DropDownMenu',
-  component: DropdownMenu,
-  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',
-    },
-    menuProps: {
-      description: 'Props to pass to the Menu component, except for "open".',
-      control: 'object',
-    },
-    menuListProps: {
-      description: 'Props to pass to the MenuList component.',
-      control: 'object',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DropdownMenu>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownButton
-        variant="contained"
-        color="primary"
-        onClick={open}
-        loading={false}
-      >
-        Dropdown Button
-      </DropDownButton>
-    ),
-    menu: [
-      <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
-        label={'Register'}
-        onClick={() => {}}
-      />,
-
-      <DropdownMenuItem label={'Active Devices'} onClick={() => {}} />,
-    ],
-    menuListProps: {
-      sx: { width: '20px' },
-    },
-  },
-};
-
-// Story with Button Loading
-export const WithButtonLoading: Story = {
-  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownButton
-        variant="contained"
-        color="primary"
-        onClick={open}
-        loading={false}
-      >
-        Dropdown Button
-      </DropDownButton>
-    ),
-    menu: [
-      <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
-        label={'Register'}
-        onClick={() => {
-          window.open('/payment', '_blank');
-        }}
-      />,
-
-      <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
-        label={'Register'}
-        onClick={() => {}}
-      />,
-    ],
-  },
-};
-
-// Story with Default Icon
-export const WithDefaultIcon: Story = {
-  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownIcon handleClick={open} />
-    ),
-    menu: [
-      <DropdownMenuItem
-        label={'Student Payments'}
-        onClick={() => {
-          window.open('/payment', '_blank');
-        }}
-      />,
-    ],
-  },
-};
-
-// Story with Icon
-export const WithIcon: Story = {
-  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
-  args: {
-    anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownIcon
-        handleClick={open}
-        icon={{
-          icon: (
-            <IconButton>
-              <MoreVertIcon />
-            </IconButton>
-          ),
-          iconProps: { color: 'secondary' },
-          outlined: false,
-        }}
-      />
-    ),
-  },
-};

package/src/stories/Navigation/FileUpload.stories.tsx

@@ -1,43 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { StoryFn } from '@storybook/react/*';
-import { FileUpload, FileUploadProps } from '../../components/export';
-
-export default {
-  title: 'Navigation/FileUpload',
-  component: FileUpload,
-  argTypes: {
-    onChange: { action: 'onChange' },
-    handleRemove: { action: 'handleRemove' },
-    onInvalidFile: { action: 'onInvalidFile' },
-    label: { control: 'text' },
-    accept: { control: 'text' },
-    disabled: { control: 'boolean' },
-    multiple: { control: 'boolean' },
-    hideDeleteButton: { control: 'boolean' },
-    showImage: { control: 'boolean' },
-    errorText: { control: 'text' },
-  },
-};
-
-const Template: StoryFn<FileUploadProps> = (args: any) => (
-  <FileUpload {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Upload File',
-  files: [],
-  onChange: action('onChange'),
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-export const AcceptOnlyPDF = Template.bind({});
-AcceptOnlyPDF.args = {
-  ...Default.args,
-  accept: '.pdf',
-};

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

@@ -1,75 +0,0 @@
-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',
-  component: Sidebar,
-  decorators: [
-    (Story) => (
-      <Box
-        sx={{
-          display: 'flex',
-          width: '100vw',
-          height: '100vh',
-          overflow: 'hidden',
-          position: 'relative',
-        }}
-      >
-        <Story />
-      </Box>
-    ),
-  ],
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen', // Ensures that the story takes the full screen
-  },
-};
-
-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: '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: 'Enroll',
-    path: '/enroll',
-    icon: <Icons.EnrollxIcon size={20} />,
-  },
-  {
-    name: 'Commute',
-    path: '/commute',
-    icon: <Icons.CommutexIcon size={20} />,
-  },
-  {
-    name: 'Hostels',
-    path: '/hostels',
-    icon: <Icons.HostelxIcon size={20} />,
-  },
-];
-
-// Primary story
-export const Primary: Story = {
-  render: (args) => <Sidebar {...args} />,
-  args: {
-    menu: mainMenu,
-  },
-};
-
-// Collapsed story
-export const Collapsed: Story = {
-  render: (args) => <Sidebar {...args} />,
-  args: {
-    ...Primary.args,
-    collapsed: true,
-  },
-};

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

@@ -1,45 +0,0 @@
-// 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',
-};