@mui-toolpad-extended-tuni/calendar 3.0.0

package/README.md

@@ -0,0 +1,237 @@
+# @mui-toolpad-extended-tuni/calendar
+
+Calendar microservice extension for MUI Toolpad Extended TUNI. This package provides calendar functionality, event management, and calendar-related components using FullCalendar.
+
+## Installation
+
+```bash
+npm install @mui-toolpad-extended-tuni/calendar
+```
+
+**Note**: This package requires `mui-toolpad-extended-tuni@^3.0.0` as a peer dependency.
+
+## Peer Dependencies
+
+- `mui-toolpad-extended-tuni@^3.0.0`
+- `react@^19.0.0`
+- `react-dom@^19.0.0`
+- `react-router-dom@^7.0.0`
+- `@mui/material@^7.0.0`
+- `@mui/icons-material@^7.0.0`
+- `@mui/x-date-pickers@^7.0.0`
+- `@fullcalendar/core@^6.0.0`
+- `@fullcalendar/daygrid@^6.0.0`
+- `@fullcalendar/interaction@^6.0.0`
+- `@fullcalendar/react@^6.0.0`
+- `@fullcalendar/timegrid@^6.0.0`
+- `@emotion/react@^11.0.0`
+- `@emotion/styled@^11.0.0`
+- `luxon@^3.0.0`
+
+## Usage
+
+### Basic Setup
+
+The calendar microservice automatically registers itself when imported:
+
+```tsx
+import { BrowserRouter } from 'react-router-dom';
+import { LMSProvider, Microservices } from 'mui-toolpad-extended-tuni';
+import { CalendarMicroservice } from '@mui-toolpad-extended-tuni/calendar';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <LMSProvider>
+        <Microservices>
+          <CalendarMicroservice />
+          {/* Other microservices */}
+        </Microservices>
+      </LMSProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+### Using Calendar Store
+
+```tsx
+import { useCalendarStore } from '@mui-toolpad-extended-tuni/calendar';
+
+function MyComponent() {
+  const { events, getEvents, addEvent } = useCalendarStore();
+  
+  useEffect(() => {
+    getEvents();
+  }, [getEvents]);
+  
+  return (
+    <div>
+      {events.map(event => (
+        <div key={event.id}>{event.title}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Calendar Components
+
+```tsx
+import { Calendar, CalendarManager } from '@mui-toolpad-extended-tuni/calendar';
+
+function CalendarPage() {
+  return (
+    <>
+      <CalendarManager />
+      <Calendar />
+    </>
+  );
+}
+```
+
+### Calendar Event Aggregator
+
+The `CalendarEventAggregator` component (included in `CalendarMicroservice`) automatically subscribes to events from the EventBus and displays them in the calendar.
+
+```tsx
+import { CalendarEventAggregator } from '@mui-toolpad-extended-tuni/calendar';
+
+function App() {
+  return (
+    <>
+      <CalendarEventAggregator />
+      {/* Rest of your app */}
+    </>
+  );
+}
+```
+
+## EventBus Integration with Courses Package
+
+The calendar package automatically integrates with the courses package through the EventBus system. **This integration is automatic** - when both packages are installed, course events are automatically displayed in the calendar!
+
+### How It Works
+
+1. **Courses Package** (`CourseMicroservice` includes `CourseEventPublisher`):
+   - Automatically monitors course data from the course store
+   - Converts course events (lectures, exercises, exams, deadlines) to generic EventBus events
+   - Publishes them via `eventBus.publish('courses', events)`
+
+2. **Calendar Package** (`CalendarMicroservice` includes `CalendarEventAggregator`):
+   - Automatically subscribes to EventBus events
+   - Converts generic events to calendar events with proper colors based on course subject and level
+   - Updates the calendar display in real-time
+
+3. **Event Color Coding**:
+   - Events are automatically color-coded by course subject (COMP.CS = blue, MATH = green, etc.)
+   - Different shades for course levels (basic = light, intermediate = medium, advanced = dark)
+   - Distinct styling for different event types
+
+### Setup for EventBus Integration
+
+Simply include both microservices - the integration happens automatically:
+
+```tsx
+import { BrowserRouter } from 'react-router-dom';
+import { LMSProvider, Microservices } from 'mui-toolpad-extended-tuni';
+import { CourseMicroservice } from '@mui-toolpad-extended-tuni/courses';
+import { CalendarMicroservice } from '@mui-toolpad-extended-tuni/calendar';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <LMSProvider>
+        <Microservices>
+          {/* CourseEventPublisher automatically publishes course events */}
+          <CourseMicroservice />
+          
+          {/* CalendarEventAggregator automatically subscribes and displays events */}
+          <CalendarMicroservice />
+        </Microservices>
+      </LMSProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+**That's it!** No additional configuration needed. Course events will automatically appear in the calendar with proper colors and styling.
+
+### Event Sources
+
+The calendar aggregates events from multiple sources:
+- **Courses** (`'courses'` source) - Automatically from `@mui-toolpad-extended-tuni/courses`
+- **Custom events** - You can publish your own events to the EventBus
+
+### Publishing Custom Events
+
+You can also publish custom events that will appear in the calendar:
+
+```tsx
+import { eventBus, Event } from 'mui-toolpad-extended-tuni';
+
+function publishCustomEvent() {
+  const customEvent: Event = {
+    id: 'custom-1',
+    title: 'Custom Event',
+    start: '2024-01-15T10:00:00Z',
+    end: '2024-01-15T11:00:00Z',
+    metadata: {
+      source: 'custom',
+      type: 'meeting',
+      description: 'Custom meeting event',
+    },
+  };
+
+  eventBus.publish('custom', [customEvent]);
+}
+```
+
+### Event Color Coding
+
+Events from courses are automatically color-coded:
+- **By Subject**: Each subject (COMP.CS, MATH, PHYS, etc.) has a base color
+- **By Level**: Basic (light), Intermediate (medium), Advanced (dark) shades
+- **By Type**: Different event types (lecture, exercise, exam, etc.) have distinct styling
+
+## Exports
+
+### Components
+- `CalendarMicroservice` - Main microservice component
+- `Calendar` - Main calendar component (FullCalendar wrapper)
+- `CalendarManager` - Manages calendar registration and grid layout
+- `CalendarEventAggregator` - Aggregates and publishes calendar events
+- `CalendarHeader` - Calendar header with view controls
+
+### Store
+- `useCalendarStore` - Zustand store for calendar management
+
+### Types
+- `CalendarEventType` - Calendar event type (lecture, exercise, exam, deadline, other, meeting, maintenance)
+
+## Features
+
+- FullCalendar integration
+- Multiple calendar views (month, week, day)
+- Event management and CRUD operations
+- Event aggregation from course events
+- EventBus integration for event publishing
+- Grid layout integration
+- Responsive calendar design
+- Event type customization
+- Course color integration
+
+## Event Types
+
+The calendar supports the following event types:
+- `lecture` - Lecture events
+- `exercise` - Exercise sessions
+- `exam` - Examinations
+- `deadline` - Assignment deadlines
+- `other` - Other events
+- `meeting` - Meetings
+- `maintenance` - Maintenance windows
+
+## License
+
+MIT

package/dist/Calendar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const Calendar: React.FC;
+export default Calendar;

package/dist/CalendarBody.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface CalendarBodyProps {
+    calendarRef: React.RefObject<any>;
+    calendarView: string;
+    events: any[];
+    onDatesSet: (arg: any) => void;
+    eventDidMount: (info: any) => void;
+    showAllDaySlot: boolean;
+    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+    density?: "compact" | "comfortable" | "spacious";
+}
+declare const CalendarBody: React.FC<CalendarBodyProps>;
+export default CalendarBody;

package/dist/CalendarEventAggregator.d.ts

@@ -0,0 +1,9 @@
+/** @format */
+/**
+ * CalendarEventAggregator coordinates between the EventBus and the Calendar store.
+ * This component subscribes to generic events from the EventBus and converts them
+ * to CalendarEvent format for the calendar display.
+ * It's placed at the application level to maintain proper separation of concerns.
+ */
+declare const CalendarEventAggregator: React.FC;
+export default CalendarEventAggregator;

package/dist/CalendarEventItem.d.ts

@@ -0,0 +1,9 @@
+import { EventContentArg } from '@fullcalendar/core';
+type ExtendedEventContentArg = EventContentArg & {
+    el?: HTMLElement;
+};
+interface CalendarEventItemProps {
+    eventInfo: ExtendedEventContentArg;
+}
+declare const CalendarEventItem: ({ eventInfo }: CalendarEventItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarEventItem;

package/dist/CalendarHeader.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface CalendarHeaderProps {
+    onPrev: () => void;
+    onToday: () => void;
+    onNext: () => void;
+    onDatePickerOpen: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    calendarView: string;
+    onViewChange: (view: string) => void;
+    currentTitle: string;
+}
+declare const CalendarHeader: React.FC<CalendarHeaderProps>;
+export default CalendarHeader;

package/dist/CalendarManager.d.ts

@@ -0,0 +1,3 @@
+/** @format */
+declare const CalendarManager: () => null;
+export default CalendarManager;

package/dist/CalendarMicroservice.d.ts

@@ -0,0 +1,32 @@
+import { default as React, ReactNode } from 'react';
+interface CalendarMicroserviceProps {
+    children?: ReactNode;
+}
+/**
+ * CalendarMicroservice Component
+ *
+ * @version 1.0.0
+ *
+ * Self-contained microservice that handles all calendar-related functionality:
+ * - Calendar grid item registration (via CalendarManager)
+ * - Calendar microservice registration with NavigationRegistry
+ * - Event aggregation from EventBus (via CalendarEventAggregator)
+ *
+ * Calendar receives events from EventBus, not directly from Courses.
+ * Courses publishes events via CourseEventPublisher, Calendar subscribes via CalendarEventAggregator.
+ *
+ * This component should be used in App.tsx, not LMSProvider.tsx, to maintain
+ * proper separation of concerns and avoid tight coupling.
+ *
+ * @example
+ * ```tsx
+ * <Microservices>
+ *   <CalendarMicroservice />
+ *   <CourseMicroservice>
+ *     <EduTest />
+ *   </CourseMicroservice>
+ * </Microservices>
+ * ```
+ */
+declare const CalendarMicroservice: React.FC<CalendarMicroserviceProps>;
+export default CalendarMicroservice;

package/dist/DatePickerPopover.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface DatePickerPopoverProps {
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    onDateSelect: (date: any) => void;
+}
+declare const DatePickerPopover: React.FC<DatePickerPopoverProps>;
+export default DatePickerPopover;

package/dist/components/EventDetails.d.ts

@@ -0,0 +1,3 @@
+import { EventDetailsProps } from '../types';
+declare const EventDetails: ({ description, location, courseColor, maxParticipants, requiresRegistration, teachers, type, recurring, onAddToCalendar, onRegister, theme, }: EventDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default EventDetails;

package/dist/components/EventMenu.d.ts

@@ -0,0 +1,3 @@
+import { EventMenuProps } from '../types';
+declare const EventMenu: ({ open, anchorEl, onClose, eventInfo, courseColor, type, eventTypeIcons, courseTitle, courseCode, description, location, maxParticipants, requiresRegistration, teachers, recurring, theme, }: EventMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default EventMenu;

package/dist/components/EventViews.d.ts

@@ -0,0 +1,3 @@
+import { EventViewProps } from '../types';
+export declare const CompactEventView: ({ eventInfo, courseCode, type, courseColor, requiresRegistration, recurring, eventTypeIcons, theme, }: EventViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RegularView: ({ eventInfo, courseCode, type, courseColor, location, requiresRegistration, recurring, eventTypeIcons, theme, }: EventViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { CompactEventView, RegularView } from './EventViews';
+export { default as EventMenu } from './EventMenu';
+export { default as EventDetails } from './EventDetails';