@campxdev/react-blueprint 2.2.3 → 2.2.5

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

@@ -0,0 +1,475 @@
+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';
+import { Calendar } from '../../components/Navigation/Calendar/Calendar';
+import {
+  CalendarEvent,
+  CalendarEventClickInfo,
+} from '../../components/Navigation/Calendar/types';
+
+// Generate sample events
+const generateSampleEvents = (): CalendarEvent[] => {
+  const today = new Date();
+
+  return [
+    {
+      id: '1',
+      title: 'Team Meeting',
+      start: format(addDays(today, 1), "yyyy-MM-dd'T'09:00:00"),
+      end: format(addDays(today, 1), "yyyy-MM-dd'T'10:00:00"),
+      backgroundColor: '#1976d2',
+    },
+    {
+      id: '2',
+      title: 'Project Presentation',
+      start: format(addDays(today, 3), "yyyy-MM-dd'T'14:00:00"),
+      end: format(addDays(today, 3), "yyyy-MM-dd'T'16:00:00"),
+      backgroundColor: '#d32f2f',
+    },
+    {
+      id: '3',
+      title: 'Code Review',
+      start: format(addDays(today, 5), "yyyy-MM-dd'T'11:00:00"),
+      end: format(addDays(today, 5), "yyyy-MM-dd'T'12:00:00"),
+      backgroundColor: '#388e3c',
+    },
+    {
+      id: '4',
+      title: 'All Day Event',
+      start: format(addDays(today, 7), 'yyyy-MM-dd'),
+      allDay: true,
+      backgroundColor: '#f57c00',
+    },
+  ];
+};
+
+// Generate university class schedule
+const generateUniversitySchedule = (): CalendarEvent[] => {
+  const today = new Date();
+  const weekStart = startOfWeek(today, { weekStartsOn: 1 }); // Start on Monday
+
+  const classes = [
+    // Monday
+    {
+      id: 'cs101-mon',
+      title: 'Computer Science 101',
+      start: format(weekStart, "yyyy-MM-dd'T'09:00:00"),
+      end: format(weekStart, "yyyy-MM-dd'T'10:30:00"),
+      backgroundColor: '#1976d2',
+      extendedProps: {
+        instructor: 'Dr. Sarah Johnson',
+        room: 'Room 204, Computer Lab',
+        meetingLink: 'https://teams.microsoft.com/l/meetup-join/cs101-lecture',
+        courseCode: 'CS 101',
+        type: 'Lecture',
+        description: 'Introduction to Programming Concepts',
+      },
+    },
+    {
+      id: 'math201-mon',
+      title: 'Calculus II',
+      start: format(weekStart, "yyyy-MM-dd'T'11:00:00"),
+      end: format(weekStart, "yyyy-MM-dd'T'12:30:00"),
+      backgroundColor: '#388e3c',
+      extendedProps: {
+        instructor: 'Prof. Michael Chen',
+        room: 'Mathematics Building, Room 301',
+        meetingLink: 'https://zoom.us/j/123456789?pwd=calculus2',
+        courseCode: 'MATH 201',
+        type: 'Lecture',
+        description: 'Advanced Calculus and Integration Techniques',
+      },
+    },
+    {
+      id: 'eng102-mon',
+      title: 'English Literature',
+      start: format(weekStart, "yyyy-MM-dd'T'14:00:00"),
+      end: format(weekStart, "yyyy-MM-dd'T'15:30:00"),
+      backgroundColor: '#7b1fa2',
+      extendedProps: {
+        instructor: 'Dr. Emily Watson',
+        room: 'Humanities Building, Room 105',
+        meetingLink:
+          'https://teams.microsoft.com/l/meetup-join/eng102-discussion',
+        courseCode: 'ENG 102',
+        type: 'Seminar',
+        description: 'Modern American Literature Analysis',
+      },
+    },
+
+    // Tuesday
+    {
+      id: 'cs101-lab-tue',
+      title: 'CS 101 Lab',
+      start: format(addDays(weekStart, 1), "yyyy-MM-dd'T'10:00:00"),
+      end: format(addDays(weekStart, 1), "yyyy-MM-dd'T'12:00:00"),
+      backgroundColor: '#1565c0',
+      extendedProps: {
+        instructor: 'TA: Alex Rodriguez',
+        room: 'Computer Lab B, Room 210',
+        meetingLink:
+          'https://teams.microsoft.com/l/meetup-join/cs101-lab-session',
+        courseCode: 'CS 101',
+        type: 'Lab',
+        description: 'Hands-on Programming Practice',
+      },
+    },
+    {
+      id: 'phys151-tue',
+      title: 'Physics I',
+      start: format(addDays(weekStart, 1), "yyyy-MM-dd'T'13:00:00"),
+      end: format(addDays(weekStart, 1), "yyyy-MM-dd'T'14:30:00"),
+      backgroundColor: '#f57c00',
+      extendedProps: {
+        instructor: 'Dr. Robert Kim',
+        room: 'Science Building, Room 401',
+        meetingLink: 'https://zoom.us/j/987654321?pwd=physics1',
+        courseCode: 'PHYS 151',
+        type: 'Lecture',
+        description: 'Classical Mechanics and Thermodynamics',
+      },
+    },
+
+    // Wednesday
+    {
+      id: 'cs101-wed',
+      title: 'Computer Science 101',
+      start: format(addDays(weekStart, 2), "yyyy-MM-dd'T'09:00:00"),
+      end: format(addDays(weekStart, 2), "yyyy-MM-dd'T'10:30:00"),
+      backgroundColor: '#1976d2',
+      extendedProps: {
+        instructor: 'Dr. Sarah Johnson',
+        room: 'Room 204, Computer Lab',
+        meetingLink: 'https://teams.microsoft.com/l/meetup-join/cs101-lecture',
+        courseCode: 'CS 101',
+        type: 'Lecture',
+        description: 'Data Structures and Algorithms',
+      },
+    },
+    {
+      id: 'math201-wed',
+      title: 'Calculus II',
+      start: format(addDays(weekStart, 2), "yyyy-MM-dd'T'11:00:00"),
+      end: format(addDays(weekStart, 2), "yyyy-MM-dd'T'12:30:00"),
+      backgroundColor: '#388e3c',
+      extendedProps: {
+        instructor: 'Prof. Michael Chen',
+        room: 'Mathematics Building, Room 301',
+        meetingLink: 'https://zoom.us/j/123456789?pwd=calculus2',
+        courseCode: 'MATH 201',
+        type: 'Lecture',
+        description: 'Differential Equations',
+      },
+    },
+
+    // Thursday
+    {
+      id: 'phys151-lab-thu',
+      title: 'Physics I Lab',
+      start: format(addDays(weekStart, 3), "yyyy-MM-dd'T'14:00:00"),
+      end: format(addDays(weekStart, 3), "yyyy-MM-dd'T'17:00:00"),
+      backgroundColor: '#ef6c00',
+      extendedProps: {
+        instructor: 'TA: Maria Garcia',
+        room: 'Physics Lab, Room 502',
+        meetingLink: 'https://teams.microsoft.com/l/meetup-join/phys151-lab',
+        courseCode: 'PHYS 151',
+        type: 'Lab',
+        description: 'Experimental Physics and Data Analysis',
+      },
+    },
+    {
+      id: 'eng102-thu',
+      title: 'English Literature',
+      start: format(addDays(weekStart, 3), "yyyy-MM-dd'T'14:00:00"),
+      end: format(addDays(weekStart, 3), "yyyy-MM-dd'T'15:30:00"),
+      backgroundColor: '#7b1fa2',
+      extendedProps: {
+        instructor: 'Dr. Emily Watson',
+        room: 'Humanities Building, Room 105',
+        meetingLink:
+          'https://teams.microsoft.com/l/meetup-join/eng102-discussion',
+        courseCode: 'ENG 102',
+        type: 'Discussion',
+        description: 'Student Presentations and Group Analysis',
+      },
+    },
+
+    // Friday
+    {
+      id: 'cs101-fri',
+      title: 'Computer Science 101',
+      start: format(addDays(weekStart, 4), "yyyy-MM-dd'T'09:00:00"),
+      end: format(addDays(weekStart, 4), "yyyy-MM-dd'T'10:30:00"),
+      backgroundColor: '#1976d2',
+      extendedProps: {
+        instructor: 'Dr. Sarah Johnson',
+        room: 'Room 204, Computer Lab',
+        meetingLink: 'https://teams.microsoft.com/l/meetup-join/cs101-lecture',
+        courseCode: 'CS 101',
+        type: 'Lecture',
+        description: 'Project Work and Code Review',
+      },
+    },
+    {
+      id: 'math201-fri',
+      title: 'Calculus II',
+      start: format(addDays(weekStart, 4), "yyyy-MM-dd'T'11:00:00"),
+      end: format(addDays(weekStart, 4), "yyyy-MM-dd'T'12:30:00"),
+      backgroundColor: '#388e3c',
+      extendedProps: {
+        instructor: 'Prof. Michael Chen',
+        room: 'Mathematics Building, Room 301',
+        meetingLink: 'https://zoom.us/j/123456789?pwd=calculus2',
+        courseCode: 'MATH 201',
+        type: 'Lecture',
+        description: 'Problem Solving Session',
+      },
+    },
+  ];
+
+  return classes;
+};
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Navigation/Calendar',
+  component: Calendar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A feature-rich calendar component built on FullCalendar with theme integration.',
+      },
+    },
+  },
+  argTypes: {
+    initialView: {
+      control: 'select',
+      options: ['dayGridMonth', 'timeGridWeek', 'timeGridDay'],
+      description: 'The initial view to display when the calendar loads',
+    },
+    events: {
+      description: 'Array of calendar events to display',
+    },
+    headerToolbar: {
+      description: 'Configuration for the calendar header toolbar',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the calendar container',
+    },
+    onEventClick: {
+      description: 'Callback function when an event is clicked',
+    },
+    onDateSelect: {
+      description: 'Callback function when dates are selected',
+    },
+    onEventDrop: {
+      description:
+        'Callback function when an event is dragged to a new time/date',
+    },
+    onEventResize: {
+      description: 'Callback function when an event is resized',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+// Default calendar view
+export const Default: Story = {
+  args: {
+    events: generateUniversitySchedule(),
+    initialView: 'dayGridMonth',
+    height: 'auto',
+  },
+};
+
+// Month view with interactions
+export const MonthView: Story = {
+  args: {
+    events: generateUniversitySchedule(),
+    initialView: 'dayGridMonth',
+    height: 'auto',
+    selectable: true,
+    editable: true,
+    onEventClick: (info) => {
+      console.log('Event clicked:', info.event.title);
+    },
+    onDateSelect: (info) => {
+      console.log('Date selected:', info.start, info.end);
+    },
+  },
+};
+
+// Week view
+export const WeekView: Story = {
+  args: {
+    events: generateUniversitySchedule(),
+    initialView: 'timeGridWeek',
+    height: 'auto',
+    selectable: true,
+    editable: true,
+  },
+};
+
+// Day view
+export const DayView: Story = {
+  args: {
+    events: generateUniversitySchedule(),
+    initialView: 'timeGridDay',
+    height: 'auto',
+    selectable: true,
+    editable: true,
+  },
+};
+
+// Student Calendar with Class Details Modal
+export const StudentCalendar: Story = {
+  render: (args) => {
+    const [selectedClass, setSelectedClass] = useState<any>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleEventClick = (eventInfo: CalendarEventClickInfo) => {
+      // Prevent event bubbling and potential DOM issues
+      if (eventInfo.jsEvent) {
+        eventInfo.jsEvent.preventDefault();
+        eventInfo.jsEvent.stopPropagation();
+      }
+
+      setSelectedClass(eventInfo.event);
+      setIsModalOpen(true);
+    };
+
+    const handleCloseModal = () => {
+      setIsModalOpen(false);
+      setSelectedClass(null);
+    };
+
+    const handleJoinClass = () => {
+      const meetingLink = selectedClass?.extendedProps?.meetingLink;
+      if (meetingLink) {
+        window.open(meetingLink, '_blank');
+      }
+    };
+
+    return (
+      <>
+        <Calendar
+          {...args}
+          events={generateUniversitySchedule()}
+          onEventClick={handleEventClick}
+          initialView="timeGridWeek"
+          height="700px"
+          headerToolbar={{
+            left: 'prev,next today',
+            center: 'title',
+            right: 'timeGridWeek,timeGridDay',
+          }}
+        />
+
+        <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>
+
+          <DialogContent>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Typography variant="body1">
+                <strong>Description:</strong>{' '}
+                {selectedClass?.extendedProps?.description}
+              </Typography>
+
+              <Typography variant="body1">
+                <strong>Instructor:</strong>{' '}
+                {selectedClass?.extendedProps?.instructor}
+              </Typography>
+
+              <Typography variant="body1">
+                <strong>Location:</strong> {selectedClass?.extendedProps?.room}
+              </Typography>
+
+              <Typography variant="body1">
+                <strong>Time:</strong>{' '}
+                {selectedClass?.start &&
+                  format(new Date(selectedClass.start), 'h:mm a')}{' '}
+                -{' '}
+                {selectedClass?.end &&
+                  format(new Date(selectedClass.end), 'h:mm a')}
+              </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>
+                  </Typography>
+                  <Link
+                    href={selectedClass.extendedProps.meetingLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    color="primary"
+                  >
+                    {selectedClass.extendedProps.meetingLink}
+                  </Link>
+                </Box>
+              )}
+            </Box>
+          </DialogContent>
+
+          <DialogActions>
+            <Button onClick={handleCloseModal} color="secondary">
+              Close
+            </Button>
+            {selectedClass?.extendedProps?.meetingLink && (
+              <Button
+                onClick={handleJoinClass}
+                variant="contained"
+                color="primary"
+              >
+                Join Class
+              </Button>
+            )}
+          </DialogActions>
+        </Dialog>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A realistic student calendar showing university class schedule with interactive class details modal and meeting links.',
+      },
+    },
+  },
+};