@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/DataDisplay/GanttChart/GanttChart.tsx

@@ -0,0 +1,616 @@
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+  ReactNode, useContext,
+} from "react";
+import {
+  addDays,
+  addMinutes,
+  differenceInMinutes,
+  format,
+  formatISO,
+  startOfDay,
+} from "date-fns";
+import styles from "./GanttChart.module.scss";
+import { DotsSixVertical } from "../../Icons";
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft.tsx";
+import CaretRight from "../../Icons/Arrows/CaretRight/CaretRight.tsx";
+import { PencilSimple } from "@hellobetterdigitalnz/betterui";
+import BetterUIContext from "../../BetterUIProvider/BetterUIContext.tsx";
+
+type GanttTask = {
+  id: string;
+  name: string;
+  start: string;
+  end: string;
+  color?: string;
+  user?: string;
+  userId?: string;
+  modal?:ReactNode
+};
+
+type GanttTaskChange = {
+  task: GanttTask;
+  previousTask: GanttTask;
+  changeType: "move" | "resize-start" | "resize-end";
+};
+
+type WorkingHours = {
+  userId: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+};
+
+type GanttChartProps = {
+  tasks?: GanttTask[];
+  onChange?: (tasks: GanttTask[], change?: GanttTaskChange) => void;
+  dropdown?: ReactNode;
+  action?: ReactNode;
+  lockTime?: boolean;
+  preventOverlap?: boolean;
+  workingHours?: WorkingHours[];
+};
+
+function dateToMinuteIndex(base: Date, d: Date) {
+  return differenceInMinutes(d, base);
+}
+
+function minutesBetween(a: Date, b: Date) {
+  return Math.max(1, differenceInMinutes(b, a));
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+const GanttChart = ({ tasks: initialTasks, onChange, dropdown, action, lockTime, preventOverlap, workingHours }: GanttChartProps) => {
+  const [currentDay, setCurrentDay] = useState<Date>(startOfDay(new Date()));
+  const context = useContext(BetterUIContext)
+  const startDate = startOfDay(currentDay);
+  const totalDays = 7;
+
+  const headerHoursRef = useRef<HTMLDivElement>(null);
+  const [cellSize, setCellSize] = useState<number>(60);
+
+  const [tasks, setTasks] = useState<GanttTask[]>(initialTasks ?? []);
+
+  const [dragGhost, setDragGhost] = useState<null | {
+    taskId: string;
+    x: number;
+    y: number;
+    rowUser: string;
+    rowUserId: string;
+  }>(null);
+
+  const minuteWidth = useMemo(() => (cellSize > 0 ? cellSize / 60 : 1), [cellSize]);
+  const pxToMinutes = useCallback((px: number) => px / minuteWidth, [minuteWidth]);
+  const minutesToPx = useCallback((minutes: number) => minutes * minuteWidth, [minuteWidth]);
+
+  const daysArray = useMemo(() => {
+    return Array.from({ length: totalDays }).map((_, i) => addDays(startDate, i));
+  }, [startDate, totalDays]);
+
+
+  const [allKnownUsers, setAllKnownUsers] = useState<Map<string, string>>(new Map());
+
+  useEffect(() => {
+    // Update known users whenever tasks change
+    setAllKnownUsers((prevUsers) => {
+      const newUsers = new Map(prevUsers);
+      tasks.forEach((task) => {
+        const userName = task.user?.trim() || "";
+        const userId = task.userId || "";
+        if (!newUsers.has(userName)) {
+          newUsers.set(userName, userId);
+        }
+      });
+      return newUsers;
+    });
+  }, [tasks]);
+
+  const groupedTasks = useMemo(() => {
+    const groups: {
+      userName: string;
+      userId: string;
+      tasks: GanttTask[];
+    }[] = [];
+
+    const assigned = new Map<string, { userId: string; tasks: GanttTask[] }>();
+    const unassigned: GanttTask[] = [];
+
+    tasks.forEach((task) => {
+      const userName = task.user?.trim() || "";
+      if (!userName) {
+        unassigned.push(task);
+      } else {
+        if (!assigned.has(userName)) {
+          assigned.set(userName, { userId: task.userId || "", tasks: [] });
+        }
+        assigned.get(userName)!.tasks.push(task);
+      }
+    });
+
+    // Assigned users → one row (existing behavior)
+    assigned.forEach((value, userName) => {
+      groups.push({
+        userName,
+        userId: value.userId,
+        tasks: value.tasks,
+      });
+    });
+
+    // Unassigned → one row per task
+    unassigned.forEach((task) => {
+      groups.push({
+        userName: "",
+        userId: "",
+        tasks: [task],
+      });
+    });
+
+    // Unassigned first
+    groups.sort((a, b) => {
+      if (!a.userName) return -1;
+      if (!b.userName) return 1;
+      return a.userName.localeCompare(b.userName);
+    });
+
+    return groups;
+  }, [tasks,allKnownUsers]);
+
+
+  // Helper to check if a specific time slot is within working hours
+  const isWithinWorkingHours = useCallback(
+    (userId: string, date: Date, hour: number): boolean => {
+      if (!workingHours || workingHours.length === 0) return true;
+
+      const dateStr = format(date, "yyyy-MM-dd");
+      const userWorkingHours = workingHours.filter(
+        (wh) => wh.userId === userId && wh.date === dateStr
+      );
+
+      if (userWorkingHours.length === 0) return true; // No restrictions for this user/date
+
+      return userWorkingHours.some((wh) => {
+        const [startHour, startMin] = wh.startTime.split(":").map(Number);
+        const [endHour, endMin] = wh.endTime.split(":").map(Number);
+        const startMinutes = startHour * 60 + startMin;
+        const endMinutes = endHour * 60 + endMin;
+        const currentMinutes = hour * 60;
+
+        return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+      });
+    },
+    [workingHours]
+  );
+
+  // Check if a time range is valid for a user (all minutes within working hours)
+  const isTimeRangeValid = useCallback(
+    (userId: string, startTime: Date, endTime: Date): boolean => {
+      if (!workingHours || workingHours.length === 0) return true;
+
+      const startMinutes = dateToMinuteIndex(startOfDay(startTime), startTime);
+      const endMinutes = dateToMinuteIndex(startOfDay(endTime), endTime);
+      const dateStr = format(startTime, "yyyy-MM-dd");
+
+      const userWorkingHours = workingHours.filter(
+        (wh) => wh.userId === userId && wh.date === dateStr
+      );
+
+      if (userWorkingHours.length === 0) return true;
+
+      // Check if entire range falls within any working hours period
+      return userWorkingHours.some((wh) => {
+        const [startHour, startMin] = wh.startTime.split(":").map(Number);
+        const [endHour, endMin] = wh.endTime.split(":").map(Number);
+        const whStartMinutes = startHour * 60 + startMin;
+        const whEndMinutes = endHour * 60 + endMin;
+
+        return startMinutes >= whStartMinutes && endMinutes <= whEndMinutes;
+      });
+    },
+    [workingHours]
+  );
+
+  useEffect(() => {
+    const updateSize = () => {
+      const firstHour = headerHoursRef.current?.querySelector(`.${styles.hour}`);
+      if (firstHour) {
+        setCellSize((firstHour as HTMLElement).offsetWidth);
+      }
+    };
+
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+
+  const dragState = useRef<null | {
+    mode: "move" | "resize-start" | "resize-end";
+    taskId: string;
+    originX: number;
+    originLeftMin: number;
+    originRightMin: number;
+    originUser?: string;
+    originalTask?: GanttTask;
+  }>(null);
+
+  function getRowInfoFromPoint(x: number, y: number): { user: string; userId: string; daysEl: HTMLElement | null } {
+    const el = document.elementFromPoint(x, y) as HTMLElement | null;
+    const row = el?.closest(`.${styles.ganttRow}`) as HTMLElement | null;
+    if (!row) return { user: "", userId: "", daysEl: null };
+
+    const label = row.querySelector(`.${styles.taskColLabel}`)?.textContent?.trim();
+    const user = label && label !== "Unassigned" ? label : "";
+    const userId = row.getAttribute("data-user-id") || "";
+    const daysEl = row.querySelector(`.${styles.days}`) as HTMLElement | null;
+    return { user, userId, daysEl };
+  }
+
+  // Check if a task overlaps with any other tasks for the same user
+  function checkOverlap(taskId: string, user: string, newStart: Date, newEnd: Date): boolean {
+    if (!preventOverlap) return false;
+
+    return tasks.some((t) => {
+      if (t.id === taskId) return false; // Don't check against itself
+      if ((t.user?.trim() || "") !== user) return false; // Only check same user
+
+      const tStart = new Date(t.start);
+      const tEnd = new Date(t.end);
+
+      // Check if there's any overlap
+      return newStart < tEnd && newEnd > tStart;
+    });
+  }
+
+  const onPointerDownBar = (
+    e: React.PointerEvent,
+    taskId: string,
+    mode: "move" | "resize-start" | "resize-end"
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task) return;
+
+    const taskStart = new Date(task.start);
+    const taskEnd = new Date(task.end);
+
+    const target = e.currentTarget as HTMLElement;
+    target.setPointerCapture(e.pointerId);
+
+    dragState.current = {
+      mode,
+      taskId,
+      originX: e.clientX,
+      originLeftMin: dateToMinuteIndex(startDate, taskStart),
+      originRightMin: dateToMinuteIndex(startDate, taskEnd),
+      originUser: task.user ?? "",
+      originalTask: { ...task },
+    };
+
+    if (mode === "move") {
+      setDragGhost({ taskId, x: e.clientX, y: e.clientY, rowUser: task.user ?? "", rowUserId: task.userId ?? "" });
+    }
+
+    const onPointerMove = (ev: PointerEvent) => {
+      if (!dragState.current) return;
+      if (minuteWidth <= 0) return;
+      const ds = dragState.current;
+
+      if (ds.mode === "move") {
+        const { user: hoverUser, userId: hoverUserId } = getRowInfoFromPoint(ev.clientX, ev.clientY);
+        setDragGhost((ghost) =>
+          ghost ? { ...ghost, x: ev.clientX, y: ev.clientY, rowUser: hoverUser, rowUserId: hoverUserId } : null
+        );
+      } else {
+        // Only update task position for resize operations
+        const dx = ev.clientX - ds.originX;
+        const deltaMinutes = Math.round(pxToMinutes(dx));
+
+        setTasks((prev) =>
+          prev.map((t) => {
+            if (t.id !== ds.taskId) return t;
+
+            if (ds.mode === "resize-start") {
+              const newLeft = clamp(ds.originLeftMin + deltaMinutes, 0, ds.originRightMin - 1);
+              const newStart = addMinutes(startDate, newLeft);
+              const currentEnd = new Date(t.end);
+
+              // Check working hours
+              if (!isTimeRangeValid(t.userId || "", newStart, currentEnd)) {
+                return t;
+              }
+
+              // Check for overlap
+              if (checkOverlap(t.id, t.user?.trim() || "", newStart, currentEnd)) {
+                return t; // Don't update if it would cause overlap
+              }
+
+              return { ...t, start: formatISO(newStart, { representation: "complete" }) };
+            }
+
+            const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
+            const newEnd = addMinutes(startDate, newRight);
+            const currentStart = new Date(t.start);
+
+            // Check working hours
+            if (!isTimeRangeValid(t.userId || "", currentStart, newEnd)) {
+              return t;
+            }
+
+            // Check for overlap
+            if (checkOverlap(t.id, t.user?.trim() || "", currentStart, newEnd)) {
+              return t; // Don't update if it would cause overlap
+            }
+
+            return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
+          })
+        );
+      }
+    };
+
+    const onPointerUp = (ev: PointerEvent) => {
+      try {
+        target.releasePointerCapture(e.pointerId);
+      } catch {}
+
+      const ds = dragState.current;
+
+      if (ds && ds.mode === "move") {
+        const { user: dropUser, userId: dropUserId, daysEl } = dragGhost
+          ? getRowInfoFromPoint(dragGhost.x, dragGhost.y)
+          : getRowInfoFromPoint(ev.clientX, ev.clientY);
+
+        if (daysEl) {
+          setTasks((prev) => {
+            const updatedTasks = prev.map((t) => {
+              if (t.id !== ds.taskId) return t;
+
+              if (lockTime) {
+                // Only update user assignment, keep original start/end times
+                const newUser = dropUser !== undefined ? dropUser : t.user;
+                const newUserId = dropUserId !== undefined ? dropUserId : t.userId;
+
+                // Check working hours for new user
+                if (!isTimeRangeValid(newUserId || "", new Date(t.start), new Date(t.end))) {
+                  return t;
+                }
+
+                // Check for overlap when moving to new user
+                if (checkOverlap(t.id, newUser?.trim() || "", new Date(t.start), new Date(t.end))) {
+                  return t; // Don't update if it would cause overlap
+                }
+
+                return {
+                  ...t,
+                  user: newUser,
+                  userId: newUserId,
+                };
+              }
+
+              // Original behavior: update both time and user based on drop position
+              const rect = daysEl.getBoundingClientRect();
+              const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
+              const dropMinutes = Math.round(pxToMinutes(dropX));
+              const duration = minutesBetween(new Date(t.start), new Date(t.end));
+              const maxMinutes = totalDays * 24 * 60 - duration;
+              const newLeft = clamp(dropMinutes, 0, maxMinutes);
+              const newStart = addMinutes(startDate, newLeft);
+              const newEnd = addMinutes(newStart, duration);
+              const newUser = dropUser !== undefined ? dropUser : t.user;
+              const newUserId = dropUserId !== undefined ? dropUserId : t.userId;
+
+              // Check working hours
+              if (!isTimeRangeValid(newUserId || "", newStart, newEnd)) {
+                return t;
+              }
+
+              // Check for overlap
+              if (checkOverlap(t.id, newUser?.trim() || "", newStart, newEnd)) {
+                return t; // Don't update if it would cause overlap
+              }
+
+              return {
+                ...t,
+                start: formatISO(newStart, { representation: "complete" }),
+                end: formatISO(newEnd, { representation: "complete" }),
+                user: newUser,
+                userId: newUserId,
+              };
+            });
+
+            // Call onChange with change details
+            if (onChange && ds.originalTask) {
+              const updatedTask = updatedTasks.find((t) => t.id === ds.taskId);
+              if (updatedTask) {
+                onChange(updatedTasks, {
+                  task: updatedTask,
+                  previousTask: ds.originalTask,
+                  changeType: ds.mode,
+                });
+              }
+            }
+
+            return updatedTasks;
+          });
+        }
+      } else if (ds && (ds.mode === "resize-start" || ds.mode === "resize-end")) {
+        // For resize operations, call onChange
+        if (onChange && ds.originalTask) {
+          const currentTask = tasks.find((t) => t.id === ds.taskId);
+          if (currentTask) {
+            onChange(tasks, {
+              task: currentTask,
+              previousTask: ds.originalTask,
+              changeType: ds.mode,
+            });
+          }
+        }
+      }
+
+      setDragGhost(null);
+      dragState.current = null;
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  const renderBar = (task: GanttTask) => {
+    const taskStart = new Date(task.start);
+    const taskEnd = new Date(task.end);
+
+    const rangeStart = startDate;
+    const rangeEnd = addDays(startDate, totalDays);
+
+    const displayStart = taskStart < rangeStart ? rangeStart : taskStart;
+    const displayEnd = taskEnd > rangeEnd ? rangeEnd : taskEnd;
+
+    if (displayStart >= displayEnd) return null;
+
+    const minutesFromStart = dateToMinuteIndex(rangeStart, displayStart);
+    const minutesWidth = minutesBetween(displayStart, displayEnd);
+
+    const leftPx = minutesToPx(minutesFromStart);
+    const widthPx = minutesToPx(minutesWidth);
+
+    return (
+      <div
+        key={task.id}
+        className={styles.taskBar}
+        style={{
+          left: leftPx,
+          width: widthPx,
+          backgroundColor: task.color,
+          opacity: dragGhost?.taskId === task.id ? 0.4 : 1,
+        }}
+      >
+        <div className={styles.bar}>
+          <div className={styles.content}>
+            <div onPointerDown={(e) => onPointerDownBar(e, task.id, "move")} className={styles.barDrag}>
+              <DotsSixVertical />
+            </div>
+            <span>{task.name}</span>
+          </div>
+          <div
+            className={styles.editIcon}
+            onClick={() =>{
+              if(task.modal){
+                context.openModal(task.modal)
+              }
+            }}
+          >
+            {task.modal && <PencilSimple type={'light'}/>}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.monthControls}>
+        <div className={styles.monthControlLeft}>
+          <div className={styles.prevBtn} onClick={() => setCurrentDay((d) => addDays(d, -1))}>
+            <CaretLeft />
+          </div>
+          <div className={styles.nxtBtn} onClick={() => setCurrentDay((d) => addDays(d, 1))}>
+            <CaretRight />
+          </div>
+          <span className={styles.period}>{format(currentDay, "MMMM dd, yyyy")}</span>
+        </div>
+        <div className={styles.monthControlRight}>
+          <div className={styles.action}>
+            {action}
+          </div>
+          <div className={styles.dropdowm}>
+            {dropdown}
+          </div>
+        </div>
+      </div>
+
+      <div className={`${styles.ganttChart} ganttChart`}>
+        <div className={`${styles.ganttHeader} ganttHeader`}>
+          <div className={`${styles.taskCol} taskCol`}></div>
+          <div className={`${styles.days} days`}>
+            {daysArray.map((day, idx) => (
+              <div
+                key={day.toISOString()}
+                className={`${styles.dateDayView} ${idx === 0 ? styles.currentDay : ""} dateDayView`}
+              >
+                <div className={styles.singleDate}>{format(day, "MM/dd")}</div>
+                <div className={`${styles.hours} hours`} ref={idx === 0 ? headerHoursRef : null}>
+                  {Array.from({ length: 24 }).map((_, h) => (
+                    <div className={`${styles.hour} hour`} key={h}>
+                      {`${String(h).padStart(2, "0")}:00`}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className={`${styles.ganttBody} ganttBody`}>
+          {groupedTasks.map(({ userName, userId, tasks: userTasks }) => (
+            <div key={userName || "unassigned"} className={`${styles.ganttRow} ganttRow`} data-user-id={userId}>
+              <div className={`${styles.taskColLabel} taskColLabel`}>{userName || "Unassigned"}</div>
+              <div className={`${styles.days} days`}>
+                {daysArray.map((day) => (
+                  <div key={day.toISOString()} className={`${styles.dayColumn} dayColumn`}>
+                    {Array.from({ length: 24 }).map((_, h) => {
+                      const isWorking = isWithinWorkingHours(userId, day, h);
+                      return (
+                        <div
+                          className={`${styles.dayHrs} ${!isWorking && workingHours ? styles.disabled : ""} dayHrs`}
+                          key={h}
+                        />
+                      );
+                    })}
+                  </div>
+                ))}
+                {userTasks.map((task) => renderBar(task))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {dragGhost && (
+        <div
+          className="drag-ghost"
+          style={{
+            position: "fixed",
+            left: dragGhost.x,
+            top: dragGhost.y - 12,
+            pointerEvents: "none",
+            opacity: 0.9,
+            background: tasks.find((t) => t.id === dragGhost.taskId)?.color ?? "gray",
+            padding: "4px 8px",
+            height: "24px",
+            minWidth: "100px",
+            borderRadius: 4,
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            fontSize: "12px",
+            color: "white",
+            fontWeight: 500,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+          }}
+        >
+          <span>{tasks.find((t) => t.id === dragGhost.taskId)?.name}</span>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default GanttChart;

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Media from "./Media";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Data Display / Media",
+  component: Media,
+  parameters: {
+    layout: ["top", "centered"],
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Media>;
+
+export default meta;
+type Story = StoryObj<typeof Media>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const MediaImage: Story = {
+  args: {
+    type: "image",
+    imageSrc: "https://www.w3schools.com/html/pic_trulli.jpg",
+  },
+};
+
+export const MediaVideo: Story = {
+  args: {
+    type: "video",
+  },
+};

package/src/Components/DataDisplay/Media/Media.tsx

@@ -0,0 +1,50 @@
+import MediaProps from "./MediaProps.tsx";
+import styles from "./media.module.scss";
+
+const Media = (props: MediaProps) => {
+
+  const { type, videoSrc, imageSrc } = props;
+
+  const isImageString = typeof imageSrc === "string";
+
+  return (
+    <>
+      {type === "image" && (
+        <>
+          {isImageString ? (
+            <img
+              src={imageSrc}
+              alt={"media image"}
+              className={styles.mediaImage}
+            />
+          ) : (
+            <div className={styles.mediaImage}>{imageSrc}</div>
+          )}
+        </>
+      )}
+      {type === "video" && (
+        <div className="video-container">
+          <div className="custom-play-button">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="64"
+              height="64"
+              viewBox="0 0 64 64"
+            >
+              <path
+                fill="#fff"
+                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
+              />
+            </svg>
+          </div>
+          <video controls className="custom-video">
+            <source src={videoSrc} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface MediaProps {
+  type?: "image" | "video";
+  videoSrc?: string;
+  imageSrc: string | ReactNode;
+}
+
+export default MediaProps;