@campxdev/react-blueprint 2.2.2 → 2.2.4

package/src/components/Navigation/Calendar/utils.ts

@@ -0,0 +1,265 @@
+import {
+  addDays,
+  eachDayOfInterval,
+  endOfWeek,
+  format,
+  startOfWeek,
+} from 'date-fns';
+import { CalendarEvent } from './types';
+
+/**
+ * Generate recurring events based on a pattern
+ */
+export interface RecurringEventConfig {
+  title: string;
+  startTime: string; // HH:mm format
+  endTime: string; // HH:mm format
+  startDate: Date;
+  endDate?: Date;
+  daysOfWeek?: number[]; // 0 = Sunday, 1 = Monday, etc.
+  interval?: number; // For weekly/monthly recurring
+  backgroundColor?: string;
+  extendedProps?: { [key: string]: any };
+}
+
+export const generateRecurringEvents = (
+  config: RecurringEventConfig,
+  maxEvents: number = 50,
+): CalendarEvent[] => {
+  const events: CalendarEvent[] = [];
+  const {
+    title,
+    startTime,
+    endTime,
+    startDate,
+    endDate = addDays(startDate, 365), // Default to 1 year
+    daysOfWeek = [1, 2, 3, 4, 5], // Default to weekdays
+    backgroundColor,
+    extendedProps,
+  } = config;
+
+  let currentDate = new Date(startDate);
+  let eventCount = 0;
+
+  while (currentDate <= endDate && eventCount < maxEvents) {
+    if (daysOfWeek.includes(currentDate.getDay())) {
+      const eventId = `recurring-${title
+        .toLowerCase()
+        .replace(/\s+/g, '-')}-${eventCount}`;
+      const startDateTime = format(currentDate, `yyyy-MM-dd'T'${startTime}:00`);
+      const endDateTime = format(currentDate, `yyyy-MM-dd'T'${endTime}:00`);
+
+      events.push({
+        id: eventId,
+        title,
+        start: startDateTime,
+        end: endDateTime,
+        backgroundColor,
+        extendedProps,
+      });
+
+      eventCount++;
+    }
+    currentDate = addDays(currentDate, 1);
+  }
+
+  return events;
+};
+
+/**
+ * Generate sample business events for demonstration
+ */
+export const generateBusinessEvents = (
+  startDate: Date = new Date(),
+): CalendarEvent[] => {
+  const weekStart = startOfWeek(startDate);
+  const weekEnd = endOfWeek(startDate);
+  const weekDays = eachDayOfInterval({ start: weekStart, end: weekEnd });
+
+  const eventTemplates = [
+    { title: 'Daily Standup', time: '09:00-09:30', color: '#1976d2' },
+    { title: 'Team Meeting', time: '14:00-15:00', color: '#388e3c' },
+    { title: 'Code Review', time: '10:30-11:30', color: '#f57c00' },
+    { title: 'Sprint Planning', time: '13:00-16:00', color: '#d32f2f' },
+    { title: 'Client Call', time: '11:00-12:00', color: '#7b1fa2' },
+  ];
+
+  const events: CalendarEvent[] = [];
+
+  weekDays.forEach((day, dayIndex) => {
+    // Skip weekends for business events
+    if (day.getDay() === 0 || day.getDay() === 6) return;
+
+    // Add 1-2 random events per day
+    const numEvents = Math.floor(Math.random() * 2) + 1;
+    const shuffledTemplates = [...eventTemplates].sort(
+      () => Math.random() - 0.5,
+    );
+
+    for (let i = 0; i < numEvents && i < shuffledTemplates.length; i++) {
+      const template = shuffledTemplates[i];
+      const [startTime, endTime] = template.time.split('-');
+
+      events.push({
+        id: `business-${dayIndex}-${i}`,
+        title: template.title,
+        start: format(day, `yyyy-MM-dd'T'${startTime}:00`),
+        end: format(day, `yyyy-MM-dd'T'${endTime}:00`),
+        backgroundColor: template.color,
+        extendedProps: {
+          type: 'business',
+          department: ['Engineering', 'Sales', 'Marketing'][
+            Math.floor(Math.random() * 3)
+          ],
+        },
+      });
+    }
+  });
+
+  return events;
+};
+
+/**
+ * Filter events by date range
+ */
+export const filterEventsByDateRange = (
+  events: CalendarEvent[],
+  startDate: Date,
+  endDate: Date,
+): CalendarEvent[] => {
+  return events.filter((event) => {
+    const eventStart = new Date(event.start);
+    return eventStart >= startDate && eventStart <= endDate;
+  });
+};
+
+/**
+ * Group events by date
+ */
+export const groupEventsByDate = (
+  events: CalendarEvent[],
+): { [date: string]: CalendarEvent[] } => {
+  return events.reduce((groups: { [date: string]: CalendarEvent[] }, event) => {
+    const date = format(new Date(event.start), 'yyyy-MM-dd');
+    if (!groups[date]) {
+      groups[date] = [];
+    }
+    groups[date].push(event);
+    return groups;
+  }, {});
+};
+
+/**
+ * Calculate event statistics
+ */
+export interface EventStats {
+  totalEvents: number;
+  eventsThisWeek: number;
+  eventsThisMonth: number;
+  averageEventsPerDay: number;
+  mostBusyDay: string;
+  leastBusyDay: string;
+}
+
+export const calculateEventStats = (events: CalendarEvent[]): EventStats => {
+  const now = new Date();
+  const weekStart = startOfWeek(now);
+  const weekEnd = endOfWeek(now);
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  const eventsThisWeek = filterEventsByDateRange(events, weekStart, weekEnd);
+  const eventsThisMonth = filterEventsByDateRange(events, monthStart, monthEnd);
+  const eventsByDate = groupEventsByDate(events);
+
+  const dailyCounts = Object.values(eventsByDate).map(
+    (dayEvents) => dayEvents.length,
+  );
+  const averageEventsPerDay =
+    dailyCounts.length > 0
+      ? dailyCounts.reduce((sum, count) => sum + count, 0) / dailyCounts.length
+      : 0;
+
+  const sortedDates = Object.keys(eventsByDate).sort();
+  const mostBusyDate = sortedDates.reduce(
+    (max, date) =>
+      eventsByDate[date].length > eventsByDate[max]?.length ? date : max,
+    sortedDates[0],
+  );
+  const leastBusyDate = sortedDates.reduce(
+    (min, date) =>
+      eventsByDate[date].length < eventsByDate[min]?.length ? date : min,
+    sortedDates[0],
+  );
+
+  return {
+    totalEvents: events.length,
+    eventsThisWeek: eventsThisWeek.length,
+    eventsThisMonth: eventsThisMonth.length,
+    averageEventsPerDay: Math.round(averageEventsPerDay * 100) / 100,
+    mostBusyDay: mostBusyDate
+      ? format(new Date(mostBusyDate), 'EEEE, MMMM do')
+      : 'N/A',
+    leastBusyDay: leastBusyDate
+      ? format(new Date(leastBusyDate), 'EEEE, MMMM do')
+      : 'N/A',
+  };
+};
+
+/**
+ * Convert events to different formats
+ */
+export const exportEventsToCSV = (events: CalendarEvent[]): string => {
+  const headers = [
+    'Title',
+    'Start Date',
+    'Start Time',
+    'End Date',
+    'End Time',
+    'All Day',
+  ];
+  const rows = events.map((event) => [
+    event.title,
+    format(new Date(event.start), 'yyyy-MM-dd'),
+    event.allDay ? '' : format(new Date(event.start), 'HH:mm'),
+    event.end ? format(new Date(event.end), 'yyyy-MM-dd') : '',
+    event.end && !event.allDay ? format(new Date(event.end), 'HH:mm') : '',
+    event.allDay ? 'Yes' : 'No',
+  ]);
+
+  return [headers, ...rows].map((row) => row.join(',')).join('\n');
+};
+
+/**
+ * Validate event data
+ */
+export const validateEvent = (
+  event: Partial<CalendarEvent>,
+): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+
+  if (!event.title || event.title.trim() === '') {
+    errors.push('Event title is required');
+  }
+
+  if (!event.start) {
+    errors.push('Event start date is required');
+  }
+
+  if (event.start && event.end) {
+    const start = new Date(event.start);
+    const end = new Date(event.end);
+    if (start >= end) {
+      errors.push('Event end time must be after start time');
+    }
+  }
+
+  if (event.title && event.title.length > 100) {
+    errors.push('Event title must be less than 100 characters');
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+};

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -17,15 +17,15 @@ export interface TabsContainerProps {
 
 const TabContent = styled(Box)(({ theme }) => ({
   width: '100%',
-  height: 'calc(100vh - 200px)',
+  // height: 'calc(100vh - 200px)',
   overflowY: 'auto',
   backgroundColor: theme.palette.surface.paperBackground,
 
   '&::-webkit-scrollbar': { display: 'none' },
 
-  '@media (max-width:959px)': {
-    height: 'calc(100vh - 224px)',
-  },
+  // '@media (max-width:959px)': {
+  //   height: 'calc(100vh - 224px)',
+  // },
 }));
 
 const DynamicContent = styled(Box)(({ theme }) => ({

package/src/components/Navigation/export.ts

@@ -1,5 +1,7 @@
 export * from '../Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector';
 export * from './Breadcrumbs/Breadcrumbs';
+export * from './Calendar';
+export * from './Calendar/Calendar';
 export * from './ConfirmDialog/ConfirmDialog';
 export * from './Dialog/Dialog';
 export * from './DialogButton/DialogButton';