@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Calendar from "./Calendar";
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Data Display/Calendar',
+  component: Calendar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  args: {
+    events: [
+      {
+        label: "Meeting",
+        type: "primary", 
+        color: "#fcba03",
+        startDay: "2025-01-10",
+        startTime: "2025-01-10T05:00:00",
+        timeDuration: 10000,
+        bufferTime: {
+          preBuffer: 4000,
+          postBuffer: 1000,
+        },
+      },
+      {
+        label: "Workshop",
+        type: "secondary",
+        color: "#90e1f8", 
+        startDay: "2025-01-10",
+        startTime: "2025-01-10T07:00:00",
+        timeDuration: 5000,
+        bufferTime: {
+          preBuffer: 4000,
+          postBuffer: 1000,
+        },
+      },
+      {
+        label: "Nisitha",
+        type: "secondary",
+        color: "#4fff13",
+        startDay: "2025-01-10",
+        startTime: "2025-03-12T19:00:00",
+        timeDuration: 40000,
+        weekContent: {
+          __tsx: <p>Hello</p>
+        },
+        dayContent: {
+          __tsx: <p>Hello</p>
+        },
+        bufferTime: {
+          preBuffer: 4000,
+          postBuffer: 1000,
+        },
+      }
+    ]
+  }
+};

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

@@ -0,0 +1,330 @@
+import styles from "./calendar.module.scss";
+import { useEffect, useRef, useState } from "react";
+import { addDays, addMonths, endOfWeek, format, startOfWeek, subDays, subMonths } from "date-fns";
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft.tsx";
+import CaretRight from "../../Icons/Arrows/CaretRight/CaretRight.tsx";
+import CalendarProps from "./CalendarProps.tsx";
+import MonthView from "./Views/MonthView/MonthView.tsx";
+import DayView from "./Views/DayView/DayView.tsx";
+import WeekView from "./Views/WeekView/WeekView.tsx";
+import DropdownField from "../../Form/DropdownField/DropdownField.tsx";
+import { ToggleSwitch } from "../../Form";
+import { CalendarBlank, CaretDown, CaretUp, ListDashes } from "../../Icons";
+
+const Calendar = (props: CalendarProps) => {
+  const {
+    startOfWeekOn,
+    events,
+    holidays,
+    viewChangeAction = true,
+    calendarViewActive,
+    listViewActive,
+    calendarActionOnclick,
+    listActionOnclick,
+    showPublicHolidayDayToggle = true,
+    showPrepTimeToggle = true,
+    onDateChange
+  } = props;
+
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [dropdownToggle, setDropdownToggle] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const switchesRef = useRef<HTMLDivElement>(null);
+  const effectRan = useRef(false);
+
+  const [view, setView] = useState<"day" | "week" | "month">(() => {
+    const savedView = localStorage.getItem("calendarView");
+    return (savedView as "day" | "week" | "month") || "month";
+  });
+
+  const [isHoliday, setIsHoliday] = useState<boolean>(() => {
+    const savedHoliday = localStorage.getItem("holiday");
+    return savedHoliday ? JSON.parse(savedHoliday) : false;
+  });
+
+  const [showPrepTime, setShowPrepTime] = useState<boolean>(() => {
+    const savedPrepTime = localStorage.getItem("prepTime");
+    return savedPrepTime ? JSON.parse(savedPrepTime) : false;
+  });
+
+
+  useEffect(() => {
+    localStorage.setItem("holiday", JSON.stringify(isHoliday));
+  }, [isHoliday]);
+
+
+  useEffect(() => {
+    localStorage.setItem("calendarView", view);
+  }, [view]);
+
+  useEffect(() => {
+    localStorage.setItem("prepTime", JSON.stringify(showPrepTime));
+  }, [showPrepTime]);
+
+
+  useEffect(() => {
+    if (effectRan.current) {
+      const { startDate, endDate } = getStartAndEndDates(currentDate);
+      onDateChange?.(currentDate, view, startDate, endDate);
+    } else {
+      effectRan.current = true;
+    }
+  }, [view]);
+
+  const dropdownToggleHandler = () => {
+    setDropdownToggle((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as Node;
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(target) &&
+      switchesRef.current &&
+      !switchesRef.current.contains(target)
+    ) {
+      setDropdownToggle(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+
+  const header = () => {
+    const dateFormat = "MMM yyyy";
+    const dateFormatDay = "eee dd MMM, yyyy";
+    const startOfWeekDate = startOfWeek(currentDate, {
+      weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+    });
+    const endOfWeekDate = endOfWeek(currentDate, {
+      weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+    });
+
+    return (
+      <div className={`${styles.header} calendarHeader`}>
+        <div className={`${styles.headerWrapper} calendarHeaderWrapper`}>
+          <div className={`${styles.headerLeft} calendarHeaderLeft`}>
+            <div className={styles.iconWrapper}>
+              <div className={styles.icon} onClick={prevMonth}>
+                <CaretLeft />
+              </div>
+              <div className={styles.icon} onClick={nextMonth}>
+                <CaretRight />
+              </div>
+            </div>
+            <div className={`${styles.title} typography`}>
+              {view === "month" && <h2>{format(currentDate, dateFormat)}</h2>}
+              {view === "day" && <h2>{format(currentDate, dateFormatDay)}</h2>}
+              {view === "week" && (
+                <h2>
+                  {startOfWeekDate.getMonth() === endOfWeekDate.getMonth()
+                    ? format(startOfWeekDate, "MMM yyyy")
+                    : `${format(startOfWeekDate, "MMM yyyy")} - ${format(
+                      endOfWeekDate,
+                      "MMM yyyy"
+                    )}`}
+                </h2>
+              )}
+            </div>
+          </div>
+          <div className={`${styles.headerRight} calendarHeaderRight`}>
+            <div
+              ref={switchesRef}
+              className={`${styles.switches}
+              ${dropdownToggle ? styles.active : ""}`}
+            >
+              <div className={styles.actionsWrapper}>
+                {showPublicHolidayDayToggle && (
+                  <div className={styles.toggle}>
+                    <ToggleSwitch id={"publicHoliday"} checked={isHoliday} onChange={() => {
+                      setIsHoliday((prev) => !prev);
+                    }} />
+                    <label htmlFor={"publicHoliday"}>Public holidays</label>
+                  </div>
+                )}
+                {showPrepTimeToggle && view !== "month" && (
+                  <div className={styles.toggle}>
+                    <ToggleSwitch id={"prep-time"} checked={showPrepTime} onChange={() => {
+                      setShowPrepTime((prev) => !prev);
+                    }} />
+                    <label htmlFor={"prep-time"}>Prep time</label>
+                  </div>
+                )}
+                <div className={styles.viewDropdown}>
+                  {viewSelector()}
+                </div>
+              </div>
+            </div>
+            <div className={styles.actions}>
+              {viewChangeAction && (<>
+                  <div className={styles.action}>
+                    <button
+                      className={`${listViewActive ? styles.active : ""}`}
+                      onClick={listActionOnclick}
+                    >
+                      <ListDashes />
+                    </button>
+                  </div>
+                  <div className={styles.action}>
+                    <button
+                      className={`${calendarViewActive ? styles.active : ""}`}
+                      onClick={calendarActionOnclick}
+                    >
+                      <CalendarBlank/>
+                    </button>
+                  </div>
+                </>
+              )}
+              <div
+                className={`${styles.action} ${styles.mobileDropdown}`}
+                ref={dropdownRef}
+                onClick={dropdownToggleHandler}
+              >
+                <button
+                  className={`${dropdownToggle ? styles.active : ""}`}
+                >
+                  {dropdownToggle ? <CaretUp />  : <CaretDown />}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const viewSelector = () => (
+    <div>
+      <DropdownField
+        value={view}
+        options={[
+          {
+            label: "Month",
+            value: "month"
+          },
+          {
+            label: "Day",
+            value: "day"
+          },
+          {
+            label: "Week",
+            value: "week"
+          }
+        ]}
+        onChange={(_e: any, value) => {
+          setView(value as "day" | "week" | "month");
+        }}
+      />
+    </div>
+  );
+
+
+  const getStartAndEndDates = (date: Date) => {
+    switch (view) {
+      case "day":
+        return { startDate: date, endDate: date };
+      case "week":
+        const startOfWeekDate = startOfWeek(date, {
+          weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+        });
+        const endOfWeekDate = endOfWeek(date, {
+          weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+        });
+        return { startDate: startOfWeekDate, endDate: endOfWeekDate };
+      case "month":
+        const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+        const endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+        return { startDate: startOfMonth, endDate: endOfMonth };
+      default:
+        return { startDate: date, endDate: date };
+    }
+  };
+
+  const nextMonth = () => {
+    let newDate;
+    switch (view) {
+      case "day":
+        newDate = addDays(currentDate, 1);
+        break;
+      case "week":
+        newDate = addDays(currentDate, 7);
+        break;
+      case "month":
+        newDate = addMonths(currentDate, 1);
+        break;
+      default:
+        return null;
+    }
+    setCurrentDate(newDate);
+    const { startDate, endDate } = getStartAndEndDates(newDate);
+    onDateChange?.(newDate, view, startDate, endDate);
+  };
+
+  const prevMonth = () => {
+    let newDate;
+    switch (view) {
+      case "day":
+        newDate = subDays(currentDate, 1);
+        break;
+      case "week":
+        newDate = subDays(currentDate, 7);
+        break;
+      case "month":
+        newDate = subMonths(currentDate, 1);
+        break;
+      default:
+        return null;
+    }
+    setCurrentDate(newDate);
+    const { startDate, endDate } = getStartAndEndDates(newDate);
+    onDateChange?.(newDate, view, startDate, endDate);
+  };
+
+  const renderCalendar = () => {
+    switch (view) {
+      case "day":
+        return (
+          <DayView
+            holidays={isHoliday ? holidays : []}
+            date={currentDate}
+            events={events}
+            showPrepTime={showPrepTime}
+          />
+        );
+      case "week":
+        return (
+          <WeekView
+            holidays={isHoliday ? holidays : []}
+            date={currentDate}
+            events={events}
+            startOfWeekOn={startOfWeekOn}
+            showPrepTime={showPrepTime}
+          />
+        );
+      case "month":
+        return (
+          <MonthView
+            holidays={isHoliday ? holidays : []}
+            events={events}
+            currentDate={currentDate}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={`${styles.calendar} calendar`}>
+      {header()}
+      {renderCalendar()}
+    </div>
+  );
+};
+
+export default Calendar;

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

@@ -0,0 +1,50 @@
+interface NameValueInterface {
+  label?: string;
+  type?: "primary" | "secondary" | undefined;
+  color?:string;
+  startDay?:any;
+  startTime?:any;
+  timeDuration?: number ,
+  monthContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  dayContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  weekContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  bufferTime?: {
+    preBuffer: number,
+    postBuffer:  number,
+  }
+  onClick?:(e:any)=>{},
+}
+
+interface NameValueHolidayInterface {
+  label: string;
+  startDay?:any;
+  endDay?:any;
+}
+
+
+
+interface CalendarProps {
+  startOfWeekOn?: "Monday" | "Sunday";
+  events: NameValueInterface[] | any;
+  holidays?: NameValueHolidayInterface[] | any;
+  currentDate?: any;
+  showPublicHolidayDayToggle?:boolean;
+  showPrepTimeToggle?:boolean;
+  showPrepTime?:boolean;
+  viewChangeAction?: boolean;
+  calendarViewActive?: boolean;
+  listViewActive?: boolean;
+  calendarActionOnclick?: () => void;
+  listActionOnclick?: () => void;
+  onDateChange?: (
+    newDate: Date,
+    view: "day" | "week" | "month",
+    startDate: Date,
+    endDate: Date
+  ) => void;
+}
+
+export type { NameValueInterface };
+export type { NameValueHolidayInterface };
+
+export default CalendarProps;

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

@@ -0,0 +1,26 @@
+import Modal from "../../Modal/Modal.tsx";
+import ModalHeader from "../../Modal/ModalHeader.tsx";
+import { ReactNode } from "react";
+import ModalBody from "../../Modal/ModalBody.tsx";
+import './eventModal.scss'
+
+interface EventModalProps{
+  title?:string;
+  children?:ReactNode;
+}
+const EventModal = (props:EventModalProps) =>{
+
+  const {
+    children,
+    title
+  }= props
+
+  return <Modal extraClass={'modalSmall'}>
+    <ModalHeader title={title} canClose={true} />
+    <ModalBody>
+      {children}
+    </ModalBody>
+  </Modal>
+}
+
+export default EventModal

package/src/Components/DataDisplay/Calendar/EventModal/eventModal.scss

@@ -0,0 +1,8 @@
+.modalSmall{
+  .modal {
+    max-width: 360px;
+  }
+  .modalBody {
+    padding: 24px;
+  }
+}

package/src/Components/DataDisplay/Calendar/Events/CalendarEvent.tsx

@@ -0,0 +1,61 @@
+import CalendarEventProps from "./CalendarEventProps.tsx";
+import styles from "./events.module.scss";
+import PrimaryIcon from "./PrimaryIcon.tsx";
+import SecondaryIcon from "./SecondaryIcon.tsx";
+
+const CalendarEvent = (props: CalendarEventProps) => {
+  const { type = 'primary', label, key, color, timeDuration, monthContent,dayContent,weekContent,onClick, eventFor } = props;
+
+  return (
+    <div className={`calendar-event-container ${eventFor === 'modal' ? 'calendar-event-container' : '' }`}>
+      {label && (
+        <div
+          key={key}
+          className={`${styles.calendarEvent} ${eventFor === 'modal' ? styles.calendarModalEvent : ''}`}
+          onClick={onClick}
+        >
+          <div className={styles.calendarEventWrapper}>
+            {type && (
+              <div style={{ color: `${color}` }} className={styles.calendarEventType}>
+                {type === 'primary' && <PrimaryIcon />}
+                {type === 'secondary' && <SecondaryIcon />}
+              </div>
+            )}
+            <div className={styles.calendarEventLabel}>
+              <p>{label}</p>
+              {timeDuration && <small>{timeDuration}</small>}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {monthContent ? (
+        <>
+          {monthContent.__html ? (
+            <div dangerouslySetInnerHTML={{ __html: monthContent.__html }} />
+          ) : monthContent.__jsx || monthContent.__tsx ? (
+            <div>{monthContent.__jsx || monthContent.__tsx}</div>
+          ) : null}
+        </>
+      ) : weekContent ? (
+        <>
+          {weekContent.__html ? (
+            <div dangerouslySetInnerHTML={{ __html: weekContent.__html }} />
+          ) : weekContent.__jsx || weekContent.__tsx ? (
+            <div>{weekContent.__jsx || weekContent.__tsx}</div>
+          ) : null}
+        </>
+      ) : dayContent ? (
+        <>
+          {dayContent.__html ? (
+            <div dangerouslySetInnerHTML={{ __html: dayContent.__html }} />
+          ) : dayContent.__jsx || dayContent.__tsx ? (
+            <div>{dayContent.__jsx || dayContent.__tsx}</div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default CalendarEvent;

package/src/Components/DataDisplay/Calendar/Events/CalendarEventProps.tsx

@@ -0,0 +1,14 @@
+interface CalendarEventProps {
+  key?:any;
+  type?: "primary" | "secondary";
+  label?: string;
+  monthContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  dayContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  weekContent?: { __html?: any, __jsx?: any, __tsx?: any };
+  timeDuration?: string;
+  color?:string;
+  onClick?:(e:any)=>{};
+  eventFor?: 'calendar' | 'modal';
+}
+
+export default CalendarEventProps

package/src/Components/DataDisplay/Calendar/Events/MoreEvent/MoreEvent.tsx

@@ -0,0 +1,12 @@
+import styles from './moreEvent.module.scss'
+import MoreEventProps from "./MoreEventProps.tsx";
+const MoreEvent = (props: MoreEventProps) =>{
+
+  const {count} = props
+
+  return <div className={styles.moreEvent}>
+    <span>+ {count} more</span>
+  </div>
+}
+
+export default MoreEvent

package/src/Components/DataDisplay/Calendar/Events/MoreEvent/MoreEventProps.tsx

@@ -0,0 +1,5 @@
+interface MoreEventProps {
+  count? : number;
+}
+
+export default MoreEventProps

package/src/Components/DataDisplay/Calendar/Events/MoreEvent/moreEvent.module.scss

@@ -0,0 +1,21 @@
+.moreEvent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: var(--color-gray-100);
+  margin-bottom: var(--space-unit);
+  min-height: 24px;
+  padding: 0 var(--space-unit);
+
+  span {
+    font-size: var(--font-size-body-xsm);
+    font-weight: var(--font-weight-body-xsm);
+    line-height: var(--line-height-body-xsm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+}

package/src/Components/DataDisplay/Calendar/Events/PrimaryIcon.tsx

@@ -0,0 +1,7 @@
+const PrimaryIcon = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <rect x="0.571289" width="16" height="16" rx="8" fill="currentColor" />
+  </svg>
+};
+
+export default PrimaryIcon;

package/src/Components/DataDisplay/Calendar/Events/SecondaryIcon.tsx

@@ -0,0 +1,8 @@
+const SecondaryIcon = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
+    <path
+      d="M96.26,37.05A8,8,0,0,1,102,27.29a104.11,104.11,0,0,1,52,0,8,8,0,0,1-2,15.75,8.15,8.15,0,0,1-2-.26,88.09,88.09,0,0,0-44,0A8,8,0,0,1,96.26,37.05ZM53.79,55.14a104.05,104.05,0,0,0-26,45,8,8,0,0,0,15.42,4.27,88,88,0,0,1,22-38.09A8,8,0,0,0,53.79,55.14ZM43.21,151.55a8,8,0,1,0-15.42,4.28,104.12,104.12,0,0,0,26,45,8,8,0,0,0,11.41-11.22A88.14,88.14,0,0,1,43.21,151.55ZM150,213.22a88,88,0,0,1-44,0,8,8,0,1,0-4,15.49,104.11,104.11,0,0,0,52,0,8,8,0,0,0-4-15.49ZM222.65,146a8,8,0,0,0-9.85,5.58,87.91,87.91,0,0,1-22,38.08,8,8,0,1,0,11.42,11.21,104,104,0,0,0,26-45A8,8,0,0,0,222.65,146Zm-9.86-41.54a8,8,0,0,0,15.42-4.28,104,104,0,0,0-26-45,8,8,0,1,0-11.41,11.22A88,88,0,0,1,212.79,104.45Z" />
+  </svg>;
+};
+
+export default SecondaryIcon;

package/src/Components/DataDisplay/Calendar/Events/events.module.scss

@@ -0,0 +1,64 @@
+.calendarEvent {
+  margin-bottom: 8px;
+  cursor: pointer;
+
+  &Wrapper {
+    display: flex;
+    align-items: center;
+    padding: 6px 4px;
+    transition: all 300ms ease-in-out;
+    border-radius: 2px;
+
+    &:hover{
+      background: var(--calendaEvent-color);
+    }
+  }
+
+  &Type {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 8px;
+
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  &.calendarModalEvent{
+    .calendarEventLabel{
+      p {
+        color: var(--color-gray-900);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5;
+        overflow: unset;
+        text-overflow: unset;
+        display: unset;
+        -webkit-line-clamp: unset;
+        -webkit-box-orient: unset;
+        max-width: unset;
+      }
+    }
+  }
+
+  &Label {
+    p {
+      color: var(--color-gray-900);
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.5;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      max-width: 250px;
+      width: 100%;
+    }
+  }
+
+}