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

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

@@ -2,11 +2,7 @@
 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 { TextField, TextFieldProps, Tooltip } from '../../components/export';
-import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
+import { TextField, TextFieldProps } from '../../components/export';
 
 // Define the default export with Meta type including the component type
 export default {
@@ -38,14 +34,19 @@ export default {
       control: 'boolean',
       description: 'Controls whether the TextField is disabled or not.',
     },
-    helperText: {
+    description: {
       control: 'text',
       description:
         'Helper text that appears below the text field to provide additional guidance.',
     },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Controls whether the TextField takes full width or not.',
+    },
     error: {
       control: 'boolean',
-      description: 'Shows how the error message is shown',
+      description:
+        'Controls whether the TextField is in error state. When true, the description text will be displayed in red.',
     },
   },
 } as Meta<typeof TextField>;
@@ -58,7 +59,7 @@ export const Primary = {
     name: 'firstName',
     value: '',
     required: true,
-    helperText: '',
+    description: '',
   },
 };
 
@@ -92,62 +93,36 @@ export const InputWithPlaceholder = {
   },
 };
 
-export const ErrorInput = {
+export const WithDescription = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: 'First Name',
-    required: true,
+    label: 'Email',
+    name: 'email',
+    type: 'email',
     value: '',
-    error: true,
-    helperText: "Name can't be empty",
+    placeholder: 'Enter your email',
+    description: 'We will never share your email with anyone else.',
   },
 };
 
-export const SuccessInput = {
+export const FullWidth = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: 'Pan Card',
-    required: true,
-    value: 'KAHPS9888B',
-    color: 'success',
-    helperText: 'Pan Card Successfully Verified',
-    focused: true,
-  },
-};
-
-export const WarningInput = {
-  render: (args: TextFieldProps) => <TextField {...args} />,
-  args: {
-    label: 'Pan Card',
-    required: true,
-    value: 'KAHPS9888B',
-    color: 'warning',
-    helperText: `Pan Card doesn't match with the provided name`,
-    focused: true,
+    label: 'Full Width Input',
+    name: 'fullWidthInput',
+    value: '',
+    fullWidth: true,
+    description: 'This input takes the full width of its container.',
   },
 };
 
-export const InfoInput = {
+export const WithError = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
-    label: 'Info',
+    label: 'First Name',
     required: true,
-    InputProps: {
-      endAdornment: (
-        <MuiInputAdornment position="end">
-          <Tooltip
-            title={
-              <ToolTipContent
-                message={
-                  'This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!'
-                }
-              />
-            }
-          >
-            <Icons.InfoIcon />
-          </Tooltip>
-        </MuiInputAdornment>
-      ),
-    },
+    value: '',
+    error: true,
+    description: "Name can't be empty",
   },
 };

package/src/stories/Navigation/Calendar.stories.tsx

@@ -1,13 +1,3 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Link,
-  Typography,
-} from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react/*';
 import { addDays, format, startOfWeek } from 'date-fns';
 import { useState } from 'react';
@@ -16,6 +6,15 @@ import {
   CalendarEvent,
   CalendarEventClickInfo,
 } from '../../components/Navigation/Calendar/types';
+import { Button } from '../../components/Input/Button/Button';
+import { Typography } from '../../components/DataDisplay/Typography/Typography';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shadcn-components/DataDisplay/Dialog/Dialog';
 
 // Generate sample events
 const generateSampleEvents = (): CalendarEvent[] => {
@@ -380,40 +379,42 @@ export const StudentCalendar: Story = {
           }}
         />
 
-        <Dialog
-          open={isModalOpen}
-          onClose={handleCloseModal}
-          maxWidth="md"
-          fullWidth
-        >
-          <DialogTitle>
-            <Typography variant="h5" component="div">
-              {selectedClass?.title}
-            </Typography>
-            <Typography variant="subtitle1" color="textSecondary">
-              {selectedClass?.extendedProps?.courseCode} -{' '}
-              {selectedClass?.extendedProps?.type}
-            </Typography>
-          </DialogTitle>
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>{selectedClass?.title}</DialogTitle>
+              <Typography variant="muted">
+                {selectedClass?.extendedProps?.courseCode} -{' '}
+                {selectedClass?.extendedProps?.type}
+              </Typography>
+            </DialogHeader>
 
-          <DialogContent>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Typography variant="body1">
-                <strong>Description:</strong>{' '}
+            <div className="flex flex-col gap-4 py-4">
+              <Typography variant="small">
+                <Typography as="span" variant="small" className="font-semibold">
+                  Description:
+                </Typography>{' '}
                 {selectedClass?.extendedProps?.description}
               </Typography>
 
-              <Typography variant="body1">
-                <strong>Instructor:</strong>{' '}
+              <Typography variant="small">
+                <Typography as="span" variant="small" className="font-semibold">
+                  Instructor:
+                </Typography>{' '}
                 {selectedClass?.extendedProps?.instructor}
               </Typography>
 
-              <Typography variant="body1">
-                <strong>Location:</strong> {selectedClass?.extendedProps?.room}
+              <Typography variant="small">
+                <Typography as="span" variant="small" className="font-semibold">
+                  Location:
+                </Typography>{' '}
+                {selectedClass?.extendedProps?.room}
               </Typography>
 
-              <Typography variant="body1">
-                <strong>Time:</strong>{' '}
+              <Typography variant="small">
+                <Typography as="span" variant="small" className="font-semibold">
+                  Time:
+                </Typography>{' '}
                 {selectedClass?.start &&
                   format(new Date(selectedClass.start), 'h:mm a')}{' '}
                 -{' '}
@@ -422,44 +423,37 @@ export const StudentCalendar: Story = {
               </Typography>
 
               {selectedClass?.extendedProps?.meetingLink && (
-                <Box
-                  sx={{
-                    mt: 2,
-                    p: 2,
-                    backgroundColor: 'action.hover',
-                    borderRadius: 1,
-                  }}
-                >
-                  <Typography variant="body1" sx={{ mb: 1 }}>
-                    <strong>Online Meeting:</strong>
+                <div className="mt-2 p-4 bg-muted rounded-md">
+                  <Typography variant="small" className="font-semibold mb-2">
+                    Online Meeting:
                   </Typography>
-                  <Link
-                    href={selectedClass.extendedProps.meetingLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    color="primary"
+                  <Typography
+                    as="a"
+                    variant="small"
+                    className="text-primary hover:underline break-all"
+                    {...({
+                      href: selectedClass.extendedProps.meetingLink,
+                      target: '_blank',
+                      rel: 'noopener noreferrer',
+                    } as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
                   >
                     {selectedClass.extendedProps.meetingLink}
-                  </Link>
-                </Box>
+                  </Typography>
+                </div>
               )}
-            </Box>
-          </DialogContent>
+            </div>
 
-          <DialogActions>
-            <Button onClick={handleCloseModal} color="secondary">
-              Close
-            </Button>
-            {selectedClass?.extendedProps?.meetingLink && (
-              <Button
-                onClick={handleJoinClass}
-                variant="contained"
-                color="primary"
-              >
-                Join Class
+            <DialogFooter>
+              <Button onClick={handleCloseModal} variant="outline">
+                Close
               </Button>
-            )}
-          </DialogActions>
+              {selectedClass?.extendedProps?.meetingLink && (
+                <Button onClick={handleJoinClass} variant="default">
+                  Join Class
+                </Button>
+              )}
+            </DialogFooter>
+          </DialogContent>
         </Dialog>
       </>
     );

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

@@ -1,7 +1,6 @@
-import { Button } from '@mui/material';
+import { Button, ConfirmDialog, ConfirmDialogProps } from '@/components/export';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { ConfirmDialog, ConfirmDialogProps } from '../../components/export';
 
 const meta: Meta<typeof ConfirmDialog> = {
   title: 'Navigation/ConfirmDialog',
@@ -34,6 +33,13 @@ const meta: Meta<typeof ConfirmDialog> = {
         options: ['confirm', 'delete'],
       },
     },
+    maxWidth: {
+      description: 'Maximum width of the dialog',
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      },
+    },
     onConfirm: {
       description: 'Function to execute on confirm',
       action: 'confirmed',
@@ -54,7 +60,7 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button variant="contained" onClick={() => setOpen(true)}>
+        <Button variant="default" onClick={() => setOpen(true)}>
           Show Confirm Dialog
         </Button>
         <ConfirmDialog
@@ -70,6 +76,7 @@ export const Default: Story = {
     title: 'Are you sure?',
     message: 'Do you really want to perform this action?',
     type: 'confirm',
+    maxWidth: 'xl',
   },
 };
 
@@ -78,7 +85,7 @@ export const DeleteConfirmation: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button variant="contained" onClick={() => setOpen(true)}>
+        <Button variant="destructive" onClick={() => setOpen(true)}>
           Show Delete Confirm Dialog
         </Button>
         <ConfirmDialog
@@ -94,5 +101,83 @@ export const DeleteConfirmation: Story = {
     title: 'Confirm Delete',
     message: 'Are you sure you want to delete this item?',
     type: 'delete',
+    maxWidth: 'xl',
+  },
+};
+
+export const SmallDialog: Story = {
+  render: (args: ConfirmDialogProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Show Small Dialog
+        </Button>
+        <ConfirmDialog
+          {...args}
+          isOpen={open}
+          onCancel={() => setOpen(false)}
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Small Confirm Dialog',
+    message: 'This is a smaller dialog.',
+    type: 'confirm',
+    maxWidth: 'sm',
+  },
+};
+
+export const LargeDialog: Story = {
+  render: (args: ConfirmDialogProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Show Large Dialog
+        </Button>
+        <ConfirmDialog
+          {...args}
+          isOpen={open}
+          onCancel={() => setOpen(false)}
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Large Confirm Dialog',
+    message: 'This is a larger dialog with more space for content.',
+    type: 'confirm',
+    maxWidth: '2xl',
+  },
+};
+
+export const CustomButtonText: Story = {
+  render: (args: ConfirmDialogProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          Show Custom Dialog
+        </Button>
+        <ConfirmDialog
+          {...args}
+          isOpen={open}
+          onCancel={() => setOpen(false)}
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Save Changes?',
+    message: 'You have unsaved changes. Would you like to save them?',
+    type: 'confirm',
+    confirmButtonText: 'Save',
+    cancelButtonText: 'Discard',
+    maxWidth: 'md',
   },
 };

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

@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@mui/material';
+import { Button, Typography } from '@/components/export';
 import { Meta, StoryObj } from '@storybook/react/*';
 import {
   DialogButton,
@@ -26,6 +26,12 @@ const meta: Meta<typeof DialogButton> = {
         'The title of the dialog. This can be a string or a React node.',
       control: 'text',
     },
+    maxWidth: {
+      description:
+        'The maximum width of the dialog. Options: xs, sm, md, lg, xl, 2xl',
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+    },
   },
 };
 
@@ -36,24 +42,17 @@ 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 variant="default" onClick={open}>
+        Open Dialog (XS)
       </Button>
     ),
     content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '100px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
+      <div className="h-[100px] w-[100px] bg-muted rounded-md flex items-center justify-center">
+        <Typography variant="muted">XS Dialog Content</Typography>
+      </div>
     ),
-
     maxWidth: 'xs',
-
-    title: 'Add Title Name',
+    title: 'Extra Small Dialog',
   },
 };
 
@@ -61,24 +60,17 @@ 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 variant="default" onClick={open}>
+        Open Dialog (SM)
       </Button>
     ),
     content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
+      <div className="h-[500px] w-full bg-muted rounded-md flex items-center justify-center">
+        <Typography variant="muted">Small Dialog Content</Typography>
+      </div>
     ),
-
     maxWidth: 'sm',
-
-    title: 'Add Title Name',
+    title: 'Small Dialog',
   },
 };
 
@@ -86,19 +78,19 @@ 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 variant="default" onClick={open}>
+        Open Dialog (MD)
       </Button>
     ),
     content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Typography>Hello</Typography>
-      </>
+      <div className="p-4">
+        <Typography variant="p">
+          This is a medium-sized dialog with some text content.
+        </Typography>
+      </div>
     ),
-
     maxWidth: 'md',
-
-    title: 'Add Title Name',
+    title: 'Medium Dialog',
   },
 };
 
@@ -106,24 +98,17 @@ 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 variant="default" onClick={open}>
+        Open Dialog (LG)
       </Button>
     ),
     content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
+      <div className="h-[500px] w-full bg-muted rounded-md flex items-center justify-center">
+        <Typography variant="large">Large Dialog Content</Typography>
+      </div>
     ),
-
     maxWidth: 'lg',
-
-    title: 'Add Title Name',
+    title: 'Large Dialog',
   },
 };
 
@@ -131,21 +116,34 @@ 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 variant="default" onClick={open}>
+        Open Dialog (XL)
       </Button>
     ),
     content: ({ close }: { close: (e: any) => void }) => (
-      <>
-        <Box
-          sx={{
-            height: '500px',
-            width: '100px',
-          }}
-        ></Box>
-      </>
+      <div className="h-[500px] w-full bg-muted rounded-md flex items-center justify-center">
+        <Typography variant="large">Extra Large Dialog Content</Typography>
+      </div>
     ),
     maxWidth: 'xl',
-    title: 'Add Title Name',
+    title: 'Extra Large Dialog',
+  },
+};
+
+export const WithMaxWidth2Xl: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button variant="default" onClick={open}>
+        Open Dialog (2XL)
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <div className="h-[500px] w-full bg-muted rounded-md flex items-center justify-center">
+        <Typography variant="large">2X Large Dialog Content</Typography>
+      </div>
+    ),
+    maxWidth: '2xl',
+    title: '2X Large Dialog',
   },
 };