@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/DataDisplay/Calendar/MonthlyDayCell.tsx

@@ -0,0 +1,23 @@
+import styles from "./calendar.module.scss";
+import MonthlyDayCellProps from "./MonthlyDayCellProps.tsx";
+
+const MonthlyDayCell = (props: MonthlyDayCellProps) => {
+
+  const
+    {
+    children,
+    id,
+    className,
+      ...args
+  } = props;
+
+  return <div
+    className={`${styles.col} ${styles.cell} ${className}`}
+    id={id}
+    {...args}
+  >
+    {children}
+  </div>;
+};
+
+export default MonthlyDayCell;

package/src/Components/DataDisplay/Calendar/MonthlyDayCellProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface MonthlyDayCellProps {
+  children?:ReactNode;
+  className?:string;
+  id?:any;
+  onClick?: () => void;
+}
+
+export default MonthlyDayCellProps ;

package/src/Components/DataDisplay/Calendar/Views/DayView/DayView.tsx

@@ -0,0 +1,304 @@
+import styles from "./dayView.module.scss";
+import {
+  addDays,
+  addMinutes,
+  differenceInMinutes,
+  format,
+  isBefore,
+  isEqual,
+  startOfDay,
+} from "date-fns";
+import DayViewProps from "./DayViewProps.tsx";
+import { useContext } from "react";
+import BetterUIContext from "../../../../BetterUIProvider/BetterUIContext.tsx";
+import EventModal from "../../EventModal/EventModal.tsx";
+import CalendarEvent from "../../Events/CalendarEvent.tsx";
+
+const DayView = ({ date, events, showPrepTime, holidays }: DayViewProps) => {
+  const context = useContext(BetterUIContext);
+  const intervalDuration = 30;
+  const intervals = generateIntervals(date);
+
+  const filteredEvents = filterEventsByDay(events, date);
+  const groupedEvents = groupEvents(filteredEvents);
+
+  const filterHolidaysByDay = (holidays: any[], day: Date) => {
+    const dayStart = startOfDay(day);
+    const nextDayStart = addDays(dayStart, 1);
+
+    return holidays.filter((holiday) => {
+      const holidayStart = new Date(holiday.startDay);
+      const holidayEnd = holiday.endDay
+        ? new Date(holiday.endDay)
+        : holidayStart;
+
+      return (
+        (holidayStart < nextDayStart && holidayEnd >= dayStart) ||
+        isEqual(holidayStart, dayStart)
+      );
+    });
+  };
+
+  const holidaysForDay = filterHolidaysByDay(holidays, date);
+
+  const handleEventClick = (event: any) => {
+    const eventStart = new Date(event?.startTime);
+
+    context.openModal(
+      <EventModal title={event.label}>
+        <CalendarEvent
+          type={event.type}
+          label={event.label}
+          dayContent={event.dayContent}
+          timeDuration={formatEventTime(eventStart, event.timeDuration)}
+          color={event.color}
+          onClick={event?.onClick}
+        />
+      </EventModal>,
+    );
+  };
+
+  return (
+    <div className={`${styles.dayView} calendarDayView`}>
+      {/*public holiday*/}
+      {holidaysForDay.length > 0 && (
+        <div className={styles.publicHolidayHolder}>
+          <div className={styles.emptyCol}></div>
+          <div className={styles.publicHolidayWrapper}>
+            {/*public holiday loop*/}
+            {holidaysForDay.map((holiday: any, index: any) => (
+              <div key={index} className={styles.publicHoliday}>
+                <h5>{holiday.label}</h5>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {/*events*/}
+      <div className={styles.intervalGrid}>
+        {intervals.map(({ start, end, key }) => (
+          <div
+            key={key}
+            className={styles.intervalRow}
+            data-time={`${format(start, "hh:mm a")}`}
+          >
+            <div className={styles.intervalLabel}>
+              {format(start, "hh:mm a")}
+            </div>
+            <div className={styles.intervalEvents}>
+              {groupedEvents.map((group) => {
+                const hasOverlap = group.some((event: any) => {
+                  const eventStart = new Date(event?.startTime);
+                  const eventEnd = calculateEndTime(
+                    eventStart,
+                    event.timeDuration,
+                  );
+                  return eventStart < end && eventEnd > start;
+                });
+
+                if (hasOverlap) {
+                  return group.map((event: any, index: number) =>
+                    renderEvent(event, group.length, index, start),
+                  );
+                }
+                return null;
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  function renderEvent(
+    event: any,
+    groupSize: number,
+    index: number,
+    intervalStart: Date,
+  ) {
+    const eventStart = new Date(event?.startTime);
+    const eventEnd = calculateEndTime(eventStart, event.timeDuration);
+    const topOffset = differenceInMinutes(eventStart, intervalStart);
+    const eventHeight = differenceInMinutes(eventEnd, eventStart);
+    const eventWidth = 100 / groupSize;
+    const leftOffset = index * eventWidth;
+
+    const preBufferHeight = (event.bufferTime?.preBuffer ?? 0) / 60;
+    const postBufferHeight = (event.bufferTime?.postBuffer ?? 0) / 60;
+
+    return (
+      <div
+        key={index}
+        className={styles.eventWrapper}
+        onClick={() => handleEventClick(event)}
+      >
+        {preBufferHeight > 0 && showPrepTime && event.showPreBuffer && (
+          <div
+            className={styles.bufferTime}
+            style={{
+              position: "absolute",
+              left: `${leftOffset}%`,
+              top: `${((topOffset - preBufferHeight) / intervalDuration) * 100}%`,
+              height: `${(preBufferHeight / intervalDuration) * 100}%`,
+              backgroundColor: event.color,
+              width: `${eventWidth}%`,
+            }}
+          />
+        )}
+        <div
+          className={styles.event}
+          onClick={(e: any) => {
+            if (event?.onClick) {
+              event.onClick(e);
+            }
+          }}
+          style={{
+            position: "absolute",
+            left: `${leftOffset}%`,
+            top: `${(topOffset / intervalDuration) * 100}%`,
+            height: `${(eventHeight / intervalDuration) * 100}%`,
+            width: `${eventWidth}%`,
+            backgroundColor: event.color,
+          }}
+        >
+          <div className={styles.eventDetails}>
+            <div className={styles.eventTitle}>{event.label}</div>
+            {event.dayContent && (
+              <>
+                {event.dayContent?.__html ? (
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: event.dayContent.__html,
+                    }}
+                  />
+                ) : event.dayContent?.__jsx || event.dayContent?.__tsx ? (
+                  <div>{event.dayContent.__jsx || event.dayContent.__tsx}</div>
+                ) : null}
+              </>
+            )}
+            <div className={styles.eventTime}>
+              {formatEventTime(eventStart, event.timeDuration)}
+            </div>
+          </div>
+        </div>
+        {postBufferHeight > 0 && showPrepTime && event.showPostBuffer && (
+          <div
+            className={styles.bufferTime}
+            style={{
+              position: "absolute",
+              left: `${leftOffset}%`,
+              top: `${((topOffset + eventHeight) / intervalDuration) * 100}%`,
+              height: `${(postBufferHeight / intervalDuration) * 100}%`,
+              backgroundColor: event.color,
+              width: `${eventWidth}%`,
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+};
+
+const isOverlap = (event1: any, event2: any) => {
+  const start1 = new Date(event1?.startTime);
+  const end1 = calculateEndTime(start1, event1.timeDuration);
+  const start2 = new Date(event2?.startTime);
+  const end2 = calculateEndTime(start2, event2.timeDuration);
+
+  return start1 < end2 && start2 < end1;
+};
+
+const groupEvents = (events: any[]) => {
+  const groups: any[] = [];
+  events.forEach((event) => {
+    let placed = false;
+    for (const group of groups) {
+      if (group.some((e: any) => isOverlap(e, event))) {
+        group.push(event);
+        placed = true;
+        break;
+      }
+    }
+    if (!placed) {
+      groups.push([event]);
+    }
+  });
+  return groups;
+};
+
+const splitEventIfNeeded = (event: any) => {
+  const eventStart = new Date(event?.startTime);
+  const eventEnd = calculateEndTime(eventStart, event?.timeDuration);
+
+  const preBufferDuration = event.bufferTime?.preBuffer ?? 0;
+  const postBufferDuration = event.bufferTime?.postBuffer ?? 0;
+
+  const splitEvents = [];
+  let currentStart = eventStart;
+
+  while (isBefore(currentStart, eventEnd)) {
+    const nextDayStart = startOfDay(addDays(currentStart, 1));
+    const segmentEnd = isBefore(eventEnd, nextDayStart)
+      ? eventEnd
+      : nextDayStart;
+
+    const segmentDuration = differenceInMinutes(segmentEnd, currentStart) * 60;
+
+    const isFirstSegment = currentStart.getTime() === eventStart.getTime();
+    const isLastSegment = isEqual(segmentEnd, eventEnd);
+
+    splitEvents.push({
+      ...event,
+      startTime: currentStart.toISOString(),
+      timeDuration: segmentDuration,
+      bufferTime: {
+        preBuffer: isFirstSegment ? preBufferDuration : 0,
+        postBuffer: isLastSegment ? postBufferDuration : 0,
+      },
+      showPreBuffer: isFirstSegment && preBufferDuration > 0,
+      showPostBuffer: isLastSegment && postBufferDuration > 0,
+    });
+
+    currentStart = nextDayStart;
+  }
+
+  return splitEvents;
+};
+
+const filterEventsByDay = (events: any[], day: Date) => {
+  const dayStart = startOfDay(day);
+  const nextDayStart = addDays(dayStart, 1);
+
+  const filteredEvents: any[] = [];
+
+  events.forEach((event) => {
+    const splitEvents = splitEventIfNeeded(event);
+    splitEvents.forEach((splitEvent) => {
+      const eventStart = new Date(splitEvent?.startTime);
+      if (eventStart >= dayStart && eventStart < nextDayStart) {
+        filteredEvents.push(splitEvent);
+      }
+    });
+  });
+
+  return filteredEvents;
+};
+
+const calculateEndTime = (startTime: Date, durationInSeconds: number) =>
+  addMinutes(startTime, durationInSeconds / 60);
+
+const formatEventTime = (startTime: Date, durationInSeconds: number) => {
+  const endTime = calculateEndTime(startTime, durationInSeconds);
+  return `${format(startTime, "hh:mm a")} - ${format(endTime, "hh:mm a")}`;
+};
+
+const generateIntervals = (day: Date) => {
+  const startOfDayDate = startOfDay(day);
+  return Array.from({ length: 48 }, (_, i) => {
+    const start = addMinutes(startOfDayDate, i * 30);
+    const end = addMinutes(start, 30);
+    return { start, end, key: i };
+  });
+};
+
+export default DayView;

package/src/Components/DataDisplay/Calendar/Views/DayView/DayViewProps.tsx

@@ -0,0 +1,8 @@
+import CalendarProps from "../../CalendarProps.tsx";
+
+
+interface DayViewProps extends Omit<CalendarProps, 'calendarActionOnclick' | 'listActionOnclick' | 'showPublicHolidayDayToggle' | 'showPrepTimeToggle'> {
+  date:Date
+}
+
+export default DayViewProps;

package/src/Components/DataDisplay/Calendar/Views/DayView/dayView.module.scss

@@ -0,0 +1,126 @@
+
+.dayView {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 8px;
+  overflow-x: hidden;
+}
+
+.intervalGrid {
+  display: flex;
+  flex-direction: column;
+}
+
+.intervalRow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 40px;
+
+  &:nth-child(even) {
+    border-bottom: 1px solid #e0e0e0;
+
+    .intervalLabel {
+      opacity: 0;
+    }
+  }
+}
+
+.intervalLabel {
+  background: white;
+  width: 73px;
+  font-size: 12px;
+  color: #666;
+  text-align: right;
+  padding-right: 10px;
+  flex-shrink: 0;
+  position: relative;
+  top: -13px;
+}
+
+.intervalEvents {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  height: 40px;
+  border-left: 1px solid var(--color-gray-300);
+}
+
+.event {
+  cursor: pointer;
+  padding: 2px 8px;
+  position: absolute;
+  background-color: #2196f310;
+  color: white;
+  font-size: 12px;
+  max-width: 100%;
+  right: 0px;
+  overflow-y: hidden;
+}
+
+.eventDetails {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.eventTitle {
+  font-weight: bold;
+  margin-bottom: 1px;
+  font-size: 11px;
+}
+
+.eventTime {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.dayView .intervalRow:first-child {
+  border-top: 1px solid #e0e0e0;
+}
+
+.bufferTime{
+ opacity: 0.1;
+}
+
+.publicHolidayHolder {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-unit);
+
+  .emptyCol{
+    background: white;
+    width: 73px;
+    font-size: 12px;
+    color: #666;
+    text-align: right;
+    padding-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .publicHolidayWrapper{
+    flex: 1;
+  }
+
+  .publicHoliday{
+    margin-bottom: var(--space-unit);
+    width: 100%;
+    background-color: var(--color-secondary-50);
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-unit);
+    height: 24px;
+
+    h5 {
+      color: var(--color-secondary-800);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.33;
+    }
+  }
+
+}

package/src/Components/DataDisplay/Calendar/Views/MonthView/MonthView.tsx

@@ -0,0 +1,198 @@
+import { useContext, useEffect, useState } from "react";
+import {
+  addDays,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  isWithinInterval,
+  parseISO,
+  startOfMonth,
+  startOfWeek
+} from "date-fns";
+import styles from "../../calendar.module.scss";
+import MonthlyDayCell from "../../MonthlyDayCell.tsx";
+import CalendarEvent from "../../Events/CalendarEvent.tsx";
+import CalendarProps from "../../CalendarProps.tsx";
+import BetterUIContext from "../../../../BetterUIProvider/BetterUIContext.tsx";
+import EventModal from "../../EventModal/EventModal.tsx";
+import MoreEvent from "../../Events/MoreEvent/MoreEvent.tsx";
+
+const MonthView = (props: CalendarProps) => {
+  const { events, holidays, currentDate, startOfWeekOn } = props;
+
+  const [dayFormat, setDayFormat] = useState("eee");
+
+  const context = useContext(BetterUIContext);
+
+  const [, setSelectedEvents] = useState<any[]>([]);
+  const [, setSelectedDayTitle] = useState<string>("");
+
+  const monthStart = startOfMonth(currentDate);
+  const monthEnd = endOfMonth(monthStart);
+  const startDate = startOfWeek(monthStart, {
+    weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+  });
+  const endDate = endOfWeek(monthEnd, {
+    weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+  });
+
+  const dateFormat = "dd";
+  const rows = [];
+  let date = [];
+  let day = startDate;
+
+
+  useEffect(() => {
+    const updateDayFormat = () => {
+      if (window.innerWidth <= 990) {
+        setDayFormat("EEEEE");
+      } else {
+        setDayFormat("eee");
+      }
+    };
+
+    updateDayFormat();
+
+    window.addEventListener("resize", updateDayFormat);
+
+    return () => window.removeEventListener("resize", updateDayFormat);
+  }, []);
+
+  const dayNames = [];
+  for (let i = 0; i < 7; i++) {
+    const dayName = format(addDays(startDate, i),  dayFormat);
+    dayNames.push(
+      <div className={`${styles.dayName}`} key={i}>
+        <h6>{dayName}</h6>
+      </div>
+    );
+  }
+  rows.push(
+    <div className={`${styles.dayNames} monthDayNames`} key="dayNames">
+      {dayNames}
+    </div>
+  );
+
+  const handleDayClick = (dayTitle: string, events: any[]) => {
+
+    if (events.length === 0) return;
+
+    const formattedDayTitle = format(parseISO(dayTitle), "dd MMM yyyy");
+
+    setSelectedDayTitle(formattedDayTitle);
+    setSelectedEvents(events);
+
+
+    context.openModal(
+      <EventModal title={formattedDayTitle}>
+        {events.map((event, index) => (
+          <CalendarEvent
+            key={index}
+            type={event.type}
+            label={event.label}
+            color={event.color}
+            monthContent={event.monthContent}
+            onClick={event.onClick}
+            eventFor={'modal'}
+          />
+        ))}
+      </EventModal>
+    );
+  };
+
+  while (day <= endDate) {
+    for (let i = 0; i < 7; i++) {
+      const formattedDate = format(day, dateFormat);
+      const dayString = format(day, "yyyy-MM-dd");
+
+      const eventList = events.filter(
+        (event: { startDay: string }) => event.startDay === dayString
+      );
+
+      const holidayList =
+        holidays?.filter((holiday: { startDay: string; endDay: string }) => {
+          try {
+            const holidayStart = parseISO(holiday.startDay);
+            const holidayEnd = holiday.endDay
+              ? parseISO(holiday.endDay)
+              : holidayStart;
+            return isWithinInterval(day, { start: holidayStart, end: holidayEnd });
+          } catch (error) {
+            console.error("Error parsing holiday dates:", error, holiday);
+            return false;
+          }
+        }) || [];
+
+      const holidayClass = holidayList
+        .map((holiday: any) => {
+          const holidayStart = parseISO(holiday.startDay);
+          const holidayEnd = holiday.endDay ? parseISO(holiday.endDay) : holidayStart;
+
+          if (!holiday.endDay) {
+            return styles.dayHoliday;
+          } else if (isSameDay(day, holidayStart))
+          {
+            return styles.startDayHoliday;
+          } else if (isSameDay(day, holidayEnd)) {
+            return styles.endDayHoliday;
+          } else {
+            return "";
+          }
+        })
+        .filter(Boolean)
+        .join(" ");
+
+      const maxEventsToShow = 4;
+      const displayedEvents = eventList.slice(0, maxEventsToShow);
+      const remainingEventCount = eventList.length - maxEventsToShow;
+
+      date.push(
+        <MonthlyDayCell
+          key={day.toString()}
+          className={`${styles.col}  ${
+            !isSameMonth(day, monthStart) ? styles.disabled : ""
+          } `}
+          id={day.toString()}
+          onClick={() => handleDayClick(dayString, eventList)}
+        >
+          <span className={styles.number}>{formattedDate}</span>
+
+          {holidayList.map((holiday: any, index: any) => (
+            <div
+              key={index}
+              className={`${holidayClass} ${styles.holidayBar}`}
+            >
+              <h5>{holiday.label}</h5>
+            </div>
+          ))}
+
+          {displayedEvents.map((event: any, index: number) => (
+            <CalendarEvent
+              key={index}
+              type={event.type}
+              label={event.label}
+              color={event.color}
+              monthContent={event.monthContent}
+              onClick={event.onClick}
+            />
+          ))}
+
+          {remainingEventCount > 0 && <MoreEvent count={remainingEventCount} />}
+        </MonthlyDayCell>
+      );
+      day = addDays(day, 1);
+    }
+    rows.push(
+      <div className={`${styles.dateRow} monthViewDateRow`} key={day.toString()}>
+        {date}
+      </div>
+    );
+    date = [];
+  }
+
+  return <div className={`${styles.body} monthBody`}>{rows}</div>;
+};
+
+export default MonthView;