@campxdev/react-blueprint 1.1.7 → 1.1.9

package/src/stories/Input/TextField.stories.tsx

@@ -1,56 +1,56 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
 // Make sure your TextField import is correct
-import { InputAdornment as MuiInputAdornment } from "@mui/material";
-import { Icons } from "../../components/Assets/Icons/Icons";
+import { InputAdornment as MuiInputAdornment } from '@mui/material';
+import { Icons } from '../../components/Assets/Icons/Icons';
 import {
   ToolTipContent,
   Tooltip,
-} from "../../components/Feedback/Tooltip/Tooltip";
+} from '../../components/Feedback/Tooltip/Tooltip';
 import {
   TextField,
   TextFieldProps,
-} from "../../components/Input/TextField/TextField";
+} from '../../components/Input/TextField/TextField';
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/TextField",
+  title: 'Input/TextField',
   component: TextField,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     name: {
-      control: "text",
-      description: "The name of the input field, used in form submissions.",
+      control: 'text',
+      description: 'The name of the input field, used in form submissions.',
     },
     label: {
-      control: "text",
-      description: "The label text displayed above the input field.",
+      control: 'text',
+      description: 'The label text displayed above the input field.',
     },
     value: {
-      control: "text",
-      description: "The input value of the TextField.",
+      control: 'text',
+      description: 'The input value of the TextField.',
     },
     required: {
-      control: "boolean",
-      description: "Specifies if the field is required for form submission.",
+      control: 'boolean',
+      description: 'Specifies if the field is required for form submission.',
     },
     placeholder: {
-      control: "text",
-      description: "The placeholder value of the TextField.",
+      control: 'text',
+      description: 'The placeholder value of the TextField.',
     },
     disabled: {
-      control: "boolean",
-      description: "Controls whether the TextField is disabled or not.",
+      control: 'boolean',
+      description: 'Controls whether the TextField is disabled or not.',
     },
     helperText: {
-      control: "text",
+      control: 'text',
       description:
-        "Helper text that appears below the text field to provide additional guidance.",
+        'Helper text that appears below the text field to provide additional guidance.',
     },
     error: {
-      control: "boolean",
-      description: "Shows how the error message is shown",
+      control: 'boolean',
+      description: 'Shows how the error message is shown',
     },
   },
 } as Meta<typeof TextField>;
@@ -59,20 +59,20 @@ export default {
 export const Primary = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "First Name",
-    name: "firstName",
-    value: "",
+    label: 'First Name',
+    name: 'firstName',
+    value: '',
     required: true,
-    helperText: "",
+    helperText: '',
   },
 };
 
 export const Disabled = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Disabled Input",
-    name: "disabledInput",
-    value: "Disabled",
+    label: 'Disabled Input',
+    name: 'disabledInput',
+    value: 'Disabled',
     required: false,
     disabled: true,
   },
@@ -81,9 +81,9 @@ export const Disabled = {
 export const WithValue = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Last Name",
-    name: "lastName",
-    value: "Doe",
+    label: 'Last Name',
+    name: 'lastName',
+    value: 'Doe',
     required: false,
   },
 };
@@ -91,18 +91,18 @@ export const WithValue = {
 export const InputWithPlaceholder = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Mobile",
-    value: "",
-    placeholder: "10 digit phone number",
+    label: 'Mobile',
+    value: '',
+    placeholder: '10 digit phone number',
   },
 };
 
 export const ErrorInput = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "First Name",
+    label: 'First Name',
     required: true,
-    value: "",
+    value: '',
     error: true,
     helperText: "Name can't be empty",
   },
@@ -111,11 +111,11 @@ export const ErrorInput = {
 export const SuccessInput = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Pan Card",
+    label: 'Pan Card',
     required: true,
-    value: "KAHPS9888B",
-    color: "success",
-    helperText: "Pan Card Successfully Verified",
+    value: 'KAHPS9888B',
+    color: 'success',
+    helperText: 'Pan Card Successfully Verified',
     focused: true,
   },
 };
@@ -123,10 +123,10 @@ export const SuccessInput = {
 export const WarningInput = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Pan Card",
+    label: 'Pan Card',
     required: true,
-    value: "KAHPS9888B",
-    color: "warning",
+    value: 'KAHPS9888B',
+    color: 'warning',
     helperText: `Pan Card doesn't match with the provided name`,
     focused: true,
   },
@@ -135,7 +135,7 @@ export const WarningInput = {
 export const InfoInput = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: "Info",
+    label: 'Info',
     required: true,
     InputProps: {
       endAdornment: (
@@ -144,7 +144,7 @@ export const InfoInput = {
             title={
               <ToolTipContent
                 message={
-                  "This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!"
+                  'This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!'
                 }
               />
             }

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

@@ -21,7 +21,11 @@ export default meta;
 type Story = StoryObj<typeof TimePicker>;
 
 export const Primary: Story = {
-  args: { label: 'Time Picker (Hours Minutes Meridian)', name: 'time-picker', required: true },
+  args: {
+    label: 'Time Picker (Hours Minutes Meridian)',
+    name: 'time-picker',
+    required: true,
+  },
 };
 
 export const Secondary: Story = {
@@ -53,7 +57,12 @@ export const Quaternary: Story = {
 };
 
 export const WithDefaultValue: Story = {
-  args: { ...Primary.args, label: 'With Default Value', required: false, value: new Date('2024/9/15 15:30') },
+  args: {
+    ...Primary.args,
+    label: 'With Default Value',
+    required: false,
+    value: new Date('2024/9/15 15:30'),
+  },
 };
 
 export const WithPlaceHolderHelperText: Story = {
@@ -67,15 +76,34 @@ export const WithPlaceHolderHelperText: Story = {
 };
 
 export const WithDifferentTimeSteps: Story = {
-  args: { ...Primary.args, label: 'With Time Steps', required: false, timeSteps: { hours: 2, minutes: 15 } },
+  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 },
+  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 },
+  args: {
+    ...Primary.args,
+    label: 'Disable Future',
+    format: 'HH:mm',
+    ampm: false,
+    required: false,
+    disableFuture: true,
+  },
 };
 
 export const MinimumTime: Story = {
@@ -106,7 +134,10 @@ export const DisableSpecificTime: Story = {
     label: 'Disable Specific Time (12AM - 9AM)',
     ampm: false,
     required: false,
-    shouldDisableTime: (time: Date, clockType: 'hours' | 'minutes' | 'seconds') => {
+    shouldDisableTime: (
+      time: Date,
+      clockType: 'hours' | 'minutes' | 'seconds',
+    ) => {
       if (clockType === 'hours') {
         const today = startOfDay(new Date());
         const startTime = today;
@@ -119,5 +150,11 @@ export const DisableSpecificTime: Story = {
 };
 
 export const ReadOnly: Story = {
-  args: { ...Primary.args, label: 'Read Only', required: false, disabled: true, value: new Date('2024/9/15 15:30') },
+  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,20 +1,20 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react';
 
-import { Box } from "@mui/material";
+import { Box } from '@mui/material';
 import {
   AppHeader,
   AppHeaderProps,
-} from "../../components/Layout/AppHeader/AppHeader";
+} from '../../components/Layout/AppHeader/AppHeader';
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof AppHeader> = {
-  title: "Layout/AppHeader",
+  title: 'Layout/AppHeader',
   component: AppHeader,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     actions: {
-      control: "object",
-      description: "Custom actions to be displayed.",
+      control: 'object',
+      description: 'Custom actions to be displayed.',
     },
   },
 };
@@ -27,20 +27,20 @@ export const Primary: Story = {
   render: (args: AppHeaderProps) => (
     <Box
       sx={{
-        width: "100%",
-        height: "300px",
-        alignContent: "center",
-        justifyContent: "center",
+        width: '100%',
+        height: '300px',
+        alignContent: 'center',
+        justifyContent: 'center',
       }}
     >
       <AppHeader {...args} />
     </Box>
   ),
   args: {
-    clientName: "Anurag University",
+    clientName: 'Anurag University',
     actions: [<p>asdjflsf</p>],
     // appsMenu: <AppsMenu apps={["exams", "square", "admin"]} />,
-    userFullName: "Srikanth Yellapragada",
+    userFullName: 'Srikanth Yellapragada',
     collapsed: false,
   },
 };

package/src/stories/Layout/TabsLayout.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react/*";
-import { TabsLayout } from "../../components/export";
+import { Meta, StoryObj } from '@storybook/react/*';
+import { TabsLayout } from '../../components/export';
 
 const meta: Meta<typeof TabsLayout> = {
-  title: "Layout/TabsLayout",
+  title: 'Layout/TabsLayout',
   component: TabsLayout,
   argTypes: {},
 };
@@ -14,39 +14,39 @@ export const Primary: Story = {
   args: {
     menu: [
       {
-        path: "degrees",
-        title: "Degrees",
-        permissionKey: "degreesPermission",
+        path: 'degrees',
+        title: 'Degrees',
+        permissionKey: 'degreesPermission',
       },
       {
-        path: "calendar",
-        title: "Academic Calendar",
-        permissionKey: "calendarPermission",
+        path: 'calendar',
+        title: 'Academic Calendar',
+        permissionKey: 'calendarPermission',
       },
       {
-        path: "programs",
-        title: "Programs",
-        permissionKey: "programsPermission",
+        path: 'programs',
+        title: 'Programs',
+        permissionKey: 'programsPermission',
       },
       {
-        path: "semester",
-        title: "Semester",
-        permissionKey: "semesterPermission",
+        path: 'semester',
+        title: 'Semester',
+        permissionKey: 'semesterPermission',
       },
       {
-        path: "courses",
-        title: "Courses",
-        permissionKey: "coursesPermission",
+        path: 'courses',
+        title: 'Courses',
+        permissionKey: 'coursesPermission',
       },
       {
-        path: "professors",
-        title: "Professors",
-        permissionKey: "professorsPermission",
+        path: 'professors',
+        title: 'Professors',
+        permissionKey: 'professorsPermission',
       },
       {
-        path: "Faculties",
-        title: "Faculties",
-        permissionKey: "facultiesPermission",
+        path: 'Faculties',
+        title: 'Faculties',
+        permissionKey: 'facultiesPermission',
       },
     ],
   },

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

@@ -0,0 +1,90 @@
+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',
+    },
+    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/DialogButton.stories.tsx

@@ -1,34 +1,29 @@
-import { Box, Button, Typography } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react/*";
+import { Box, Button, Typography } from '@mui/material';
+import { Meta, StoryObj } from '@storybook/react/*';
 import DialogButton, {
   DialogButtonProps,
-} from "../../components/Navigation/DialogButton/DialogButton";
+} from '../../components/Navigation/DialogButton/DialogButton';
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DialogButton> = {
-  title: "Navigation/DialogButton",
+  title: 'Navigation/DialogButton',
   component: DialogButton,
-  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 dialog.",
-      control: "object",
+        '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",
-    },
-    dialogProps: {
-      description:
-        "Props to pass to the MUI Dialog component. Allows customization of the dialog's appearance and behavior.",
-      control: "object",
+        '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",
+        'The title of the dialog. This can be a string or a React node.',
+      control: 'text',
     },
   },
 };
@@ -48,16 +43,16 @@ export const WithMaxWidthXs: Story = {
       <>
         <Box
           sx={{
-            height: "100px",
-            width: "100px",
+            height: '100px',
+            width: '100px',
           }}
         ></Box>
       </>
     ),
-    dialogProps: {
-      maxWidth: "xs",
-    },
-    title: "Add Title Name",
+
+    maxWidth: 'xs',
+
+    title: 'Add Title Name',
   },
 };
 
@@ -73,16 +68,16 @@ export const WithMaxWidthSm: Story = {
       <>
         <Box
           sx={{
-            height: "500px",
-            width: "100px",
+            height: '500px',
+            width: '100px',
           }}
         ></Box>
       </>
     ),
-    dialogProps: {
-      maxWidth: "sm",
-    },
-    title: "Add Title Name",
+
+    maxWidth: 'sm',
+
+    title: 'Add Title Name',
   },
 };
 
@@ -96,13 +91,13 @@ export const WithMaxWidthMd: Story = {
     ),
     content: ({ close }: { close: (e: any) => void }) => (
       <>
-        <Typography> Hello</Typography>
+        <Typography>Hello</Typography>
       </>
     ),
-    dialogProps: {
-      maxWidth: "md",
-    },
-    title: "Add Title Name",
+
+    maxWidth: 'md',
+
+    title: 'Add Title Name',
   },
 };
 
@@ -118,16 +113,16 @@ export const WithMaxWidthLg: Story = {
       <>
         <Box
           sx={{
-            height: "500px",
-            width: "100px",
+            height: '500px',
+            width: '100px',
           }}
         ></Box>
       </>
     ),
-    dialogProps: {
-      maxWidth: "lg",
-    },
-    title: "Add Title Name",
+
+    maxWidth: 'lg',
+
+    title: 'Add Title Name',
   },
 };
 
@@ -143,15 +138,13 @@ export const WithMaxWidthXl: Story = {
       <>
         <Box
           sx={{
-            height: "500px",
-            width: "100px",
+            height: '500px',
+            width: '100px',
           }}
         ></Box>
       </>
     ),
-    dialogProps: {
-      maxWidth: "xl",
-    },
-    title: "Add Title Name",
+    maxWidth: 'xl',
+    title: 'Add Title Name',
   },
 };