@oneuptime/common 13.0.3 → 13.0.5

package/UI/Components/GanttChart/Bar/Index.tsx

@@ -1,149 +0,0 @@
-import BarLabel from "./BarLabel";
-import Color from "../../../../Types/Color";
-import React, {
-  FunctionComponent,
-  MouseEventHandler,
-  ReactElement,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-export interface GanttChartBar {
-  id: string;
-  label: string | ReactElement;
-  barColor: Color;
-  barTimelineStart: number;
-  barTimelineEnd: number;
-  rowId: string;
-  tooltip?: ReactElement;
-}
-
-export interface ComponentProps {
-  bar: GanttChartBar;
-  chartTimelineStart: number;
-  chartTimelineEnd: number;
-  timelineWidth: number;
-  areOtherBarsSelected: boolean;
-  onSelect: (barId: string) => void;
-  onDeselect: (barId: string) => void;
-  isSelected?: boolean;
-  isHighlighted?: boolean;
-}
-
-const Bar: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const [isHovered, setIsHovered] = useState(false);
-  const barRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null,
-  ) as React.RefObject<HTMLDivElement>;
-
-  // calculate bar width.
-  let barWidth: number =
-    ((props.bar.barTimelineEnd - props.bar.barTimelineStart) /
-      (props.chartTimelineEnd - props.chartTimelineStart)) *
-    props.timelineWidth;
-
-  const barLeftPosition: number =
-    ((props.bar.barTimelineStart - props.chartTimelineStart) /
-      (props.chartTimelineEnd - props.chartTimelineStart)) *
-    props.timelineWidth;
-
-  if (barWidth > 1) {
-    barWidth -= 1; // we do this because the bar width is calculated based on the timeline width, and we want to remove 1px from the width to account for the 1px margin on the left and right of the bar.
-  }
-
-  if (barWidth < 5) {
-    barWidth = 5;
-  }
-
-  const handleMouseEnter: MouseEventHandler = (): void => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave: MouseEventHandler = (): void => {
-    setIsHovered(false);
-  };
-
-  let barOpacity: number = 0.9;
-
-  if (props.areOtherBarsSelected && !props.isSelected) {
-    barOpacity = 0.5;
-  }
-
-  if (props.isHighlighted) {
-    barOpacity = 1;
-  }
-
-  if (isHovered) {
-    barOpacity = 1;
-  }
-
-  const highlightShadow: string | undefined = props.isHighlighted
-    ? "0 0 0 2px rgba(99, 102, 241, 0.8), 0 0 14px rgba(129, 140, 248, 0.55)"
-    : undefined;
-
-  return (
-    // rectangle div with curved corners and text inside in tailwindcss
-    <div
-      className="flex absolute"
-      style={{
-        marginLeft: `${barLeftPosition}px`,
-      }}
-    >
-      <div
-        ref={barRef}
-        className="chart-bar h-8 pt-1 pb-1 mt-2.5 mb-2.5 rounded absolute cursor-pointer ml-1 mr-1"
-        style={{
-          width: `${barWidth}px`,
-          backgroundColor: `${props.bar.barColor.toString()}`,
-          opacity: barOpacity,
-          boxShadow: highlightShadow,
-          zIndex: props.isHighlighted ? 30 : undefined,
-        }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={() => {
-          if (props.isSelected) {
-            props.onDeselect(props.bar.id);
-          } else {
-            props.onSelect(props.bar.id);
-          }
-        }}
-      />
-      {isHovered &&
-        props.bar.tooltip &&
-        barRef.current &&
-        ReactDOM.createPortal(
-          <div
-            className="bar-tooltip cursor-pointer bg-white shadow-lg rounded p-2 w-fit"
-            style={{
-              position: "fixed",
-              zIndex: 9999,
-              top: barRef.current.getBoundingClientRect().bottom + 4,
-              left: barRef.current.getBoundingClientRect().left,
-              pointerEvents: "none",
-            }}
-          >
-            {props.bar.tooltip}
-          </div>,
-          document.body,
-        )}
-
-      <div
-        className="h-8 pt-1 pb-1 mt-2.5 mb-2.5"
-        style={{
-          marginLeft: `${barWidth + 15}px`,
-          opacity: barOpacity,
-          fontWeight: props.isHighlighted ? 600 : undefined,
-          color: props.isHighlighted ? "var(--ou-link, #4338ca)" : undefined,
-        }}
-      >
-        <BarLabel label={props.bar.label} />
-      </div>
-    </div>
-  );
-};
-
-export default Bar;

package/UI/Components/GanttChart/ChartContainer.tsx

@@ -1,50 +0,0 @@
-import React, { FunctionComponent, ReactElement, Ref } from "react";
-
-export interface ComponentProps {
-  onWidthChange: (width: number) => void;
-  children?: undefined | Array<ReactElement> | ReactElement;
-}
-
-const ChartContainer: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const divRef: Ref<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (!props.onWidthChange) {
-      return;
-    }
-
-    if (!divRef.current) {
-      return;
-    }
-
-    const resizeObserver: ResizeObserver = new ResizeObserver(() => {
-      if (divRef.current && props.onWidthChange) {
-        props.onWidthChange(divRef.current.offsetWidth);
-      }
-    });
-
-    resizeObserver.observe(divRef.current);
-
-    return () => {
-      return resizeObserver.disconnect();
-    }; // clean up
-  }, []);
-
-  return (
-    /*
-     * `isolate` creates a new stacking context so the chart's internal
-     * z-indexes (e.g. a highlighted/matched bar uses z-30, see Bar/Index.tsx)
-     * stay trapped inside the chart. Without it those bars compete directly
-     * with page-level overlays such as the span-details SideOver (z-30, and
-     * portalled to the end of <body>), and a matched span would "show above"
-     * the sidebar.
-     */
-    <div ref={divRef} className={"w-full"} style={{ isolation: "isolate" }}>
-      {props.children}
-    </div>
-  );
-};
-
-export default ChartContainer;

package/UI/Components/GanttChart/Index.tsx

@@ -1,90 +0,0 @@
-import ChartContainer from "./ChartContainer";
-import { GanttChartRow } from "./Row/Row";
-import Rows from "./Rows";
-import Timeline, { GanttChartTimeline } from "./Timeline/Index";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
-
-export interface GanttChartProps {
-  id: string;
-  rows: GanttChartRow[];
-  timeline: GanttChartTimeline;
-  onBarSelectChange: (barIds: string[]) => void;
-  multiSelect?: boolean | undefined;
-  selectedBarIds: string[];
-  highlightBarIds?: string[];
-}
-
-export interface ComponentProps {
-  chart: GanttChartProps;
-}
-
-const GanttChart: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const eachIntervalDefaultWidth: number = 100; // in pixels
-
-  const [chartWidth, setChartWidth] = React.useState<number>(0);
-  const [timelineWidth, setTimelineWidth] = React.useState<number>(2000);
-
-  const [eachIntervalWidth, setEachIntervalWidth] = React.useState<number>(
-    eachIntervalDefaultWidth,
-  );
-
-  const numberOfInterval: number =
-    (props.chart.timeline.end - props.chart.timeline.start) /
-    props.chart.timeline.interval;
-
-  const totalIntervalWidth: number =
-    eachIntervalDefaultWidth * numberOfInterval;
-
-  useEffect(() => {
-    if (chartWidth < totalIntervalWidth) {
-      setChartWidth(totalIntervalWidth);
-    } else {
-      setEachIntervalWidth(chartWidth / numberOfInterval);
-    }
-
-    const timelineWidth: number = chartWidth * 0.75; // 75 % of chart width, 25% for category spacer
-
-    setTimelineWidth(timelineWidth); // 75 % of chart width, 25% for category spacer
-  }, [chartWidth]);
-
-  return (
-    <ChartContainer
-      onWidthChange={(width: number) => {
-        setChartWidth(width);
-      }}
-    >
-      <div
-        style={{
-          width: `${chartWidth}px`,
-        }}
-      >
-        {/** Remve 25% because of category spacer */}
-        <Timeline
-          timeline={props.chart.timeline}
-          eachIntervalWidth={eachIntervalWidth - 0.25 * eachIntervalWidth}
-        />
-
-        <Rows
-          timelineWidth={timelineWidth}
-          chartTimelineEnd={props.chart.timeline.end}
-          chartTimelineStart={props.chart.timeline.start}
-          rows={props.chart.rows}
-          selectedBarIds={props.chart.selectedBarIds}
-          {...(props.chart.multiSelect !== undefined
-            ? { multiSelect: props.chart.multiSelect }
-            : {})}
-          {...(props.chart.highlightBarIds
-            ? { highlightBarIds: props.chart.highlightBarIds }
-            : {})}
-          onBarSelectChange={(barIds: string[]) => {
-            props.chart.onBarSelectChange(barIds);
-          }}
-        />
-      </div>
-    </ChartContainer>
-  );
-};
-
-export default GanttChart;

package/UI/Components/GanttChart/Row/Index.tsx

@@ -1,22 +0,0 @@
-import Row, { GanttChartRow } from "./Row";
-import React, { FunctionComponent, ReactElement } from "react";
-
-export interface ComponentProps {
-  row: GanttChartRow;
-  chartTimelineStart: number;
-  chartTimelineEnd: number;
-  timelineWidth: number;
-  selectedBarIds: string[];
-  onBarSelectChange: (barIds: string[]) => void;
-  children?: ReactElement;
-  multiSelect?: boolean | undefined;
-  highlightBarIds?: string[];
-}
-
-const RowIndex: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  return <Row {...props} level={0} />;
-};
-
-export default RowIndex;

package/UI/Components/GanttChart/Row/Row.tsx

@@ -1,231 +0,0 @@
-import Icon from "../../Icon/Icon";
-import Bar, { GanttChartBar } from "../Bar/Index";
-import RowLabel from "./RowLabel";
-import IconProp from "../../../../Types/Icon/IconProp";
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-
-export interface GanttChartRow {
-  rowInfo: {
-    id: string;
-    title: string | ReactElement;
-    description: string | ReactElement;
-  };
-  childRows: GanttChartRow[];
-  bars: Array<GanttChartBar>; // usually will have only one bar, this is for future proofing
-}
-
-export interface ComponentProps {
-  row: GanttChartRow;
-  chartTimelineStart: number;
-  chartTimelineEnd: number;
-  timelineWidth: number;
-  selectedBarIds: string[];
-  onBarSelectChange: (barIds: string[]) => void;
-  level: number;
-  multiSelect?: boolean | undefined;
-  highlightBarIds?: string[];
-}
-
-const doesRowContainHighlight: (
-  row: GanttChartRow,
-  highlightSet: Set<string>,
-) => boolean = (row: GanttChartRow, highlightSet: Set<string>): boolean => {
-  if (
-    row.bars.some((bar: GanttChartBar) => {
-      return highlightSet.has(bar.id);
-    })
-  ) {
-    return true;
-  }
-
-  return row.childRows.some((childRow: GanttChartRow) => {
-    return doesRowContainHighlight(childRow, highlightSet);
-  });
-};
-
-const Row: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const { row } = props;
-
-  let { level } = props;
-
-  if (!level) {
-    level = 0;
-  }
-
-  const hasChildRows: boolean = row.childRows.length > 0;
-
-  const highlightSet: Set<string> | null = useMemo(() => {
-    if (!props.highlightBarIds || props.highlightBarIds.length === 0) {
-      return null;
-    }
-
-    return new Set(props.highlightBarIds);
-  }, [props.highlightBarIds]);
-
-  const hasHighlightedDescendant: boolean = useMemo(() => {
-    if (!highlightSet) {
-      return false;
-    }
-
-    return row.childRows.some((childRow: GanttChartRow) => {
-      return doesRowContainHighlight(childRow, highlightSet);
-    });
-  }, [highlightSet, row]);
-
-  const shouldShowChildRows: boolean = level < 2 || hasHighlightedDescendant;
-
-  const [showChildRows, setShowChildRows] = useState(shouldShowChildRows);
-
-  useEffect(() => {
-    if (hasHighlightedDescendant && !showChildRows) {
-      setShowChildRows(true);
-    }
-  }, [hasHighlightedDescendant, showChildRows]);
-
-  const rowIsHighlighted: boolean = useMemo(() => {
-    if (!highlightSet) {
-      return false;
-    }
-
-    return doesRowContainHighlight(row, highlightSet);
-  }, [highlightSet, row]);
-
-  const labelPaddingLeft: string = `${level}rem`;
-
-  return (
-    // rectangle div with curved corners and text inside in tailwindcss
-    <div>
-      <div
-        className={`flex w-full border-b border-gray-200 border-l-2 border-l-gray-300 border-r-2 border-r-gray-300 transition-colors duration-150 ${rowIsHighlighted ? "bg-indigo-50/40 ring-1 ring-inset ring-indigo-200/70 shadow-sm" : ""}`}
-        data-span-highlighted={rowIsHighlighted ? "true" : undefined}
-      >
-        <div className="flex w-1/4 border-r-2 border-gray-300 overflow-hidden">
-          <div
-            className="flex overflow-hidden items-center gap-3 pr-3 pt-2 pb-2 w-full"
-            style={{
-              paddingLeft: labelPaddingLeft,
-              backgroundColor: rowIsHighlighted
-                ? "rgba(99, 102, 241, 0.08)"
-                : undefined,
-              borderRadius: rowIsHighlighted ? "0.5rem" : undefined,
-            }}
-          >
-            <div className="w-5 h-5 ml-3 mt-1">
-              {hasChildRows && (
-                <Icon
-                  icon={
-                    showChildRows ? IconProp.ChevronDown : IconProp.ChevronRight
-                  }
-                  className="cursor-pointer h-4 w-4 text-gray-500 hover:text-gray-800 font-semibold"
-                  onClick={() => {
-                    return setShowChildRows(!showChildRows);
-                  }}
-                />
-              )}
-            </div>
-            <div className="flex-1 min-w-0">
-              <RowLabel
-                title={row.rowInfo.title}
-                description={row.rowInfo.description}
-                isHighlighted={rowIsHighlighted}
-              />
-            </div>
-            {rowIsHighlighted ? (
-              <span className="hidden lg:inline-flex items-center gap-1 rounded-full bg-indigo-100 text-indigo-600 text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 shadow-sm">
-                <span className="inline-block h-1.5 w-1.5 rounded-full bg-indigo-500" />
-                Matched
-              </span>
-            ) : (
-              <></>
-            )}
-          </div>
-        </div>
-        <div
-          className={`flex w-3/4 relative overflow-hidden transition-all duration-150 ${rowIsHighlighted ? "bg-indigo-500/5" : ""}`}
-          style={{
-            boxShadow: rowIsHighlighted
-              ? "inset 0 0 0 1px rgba(129, 140, 248, 0.25)"
-              : undefined,
-          }}
-        >
-          {row.bars.map((bar: GanttChartBar, i: number) => {
-            return (
-              <Bar
-                key={i}
-                bar={bar}
-                chartTimelineEnd={props.chartTimelineEnd}
-                chartTimelineStart={props.chartTimelineStart}
-                timelineWidth={props.timelineWidth}
-                areOtherBarsSelected={props.selectedBarIds.length > 0}
-                isSelected={props.selectedBarIds.includes(bar.id)}
-                isHighlighted={Boolean(
-                  highlightSet && highlightSet.has(bar.id),
-                )}
-                onSelect={(barId: string) => {
-                  // check if the bar is already selected
-                  if (props.selectedBarIds.includes(barId)) {
-                    return;
-                  }
-
-                  if (!props.multiSelect) {
-                    props.onBarSelectChange([barId]);
-                    return;
-                  }
-
-                  props.onBarSelectChange([...props.selectedBarIds, barId]);
-                }}
-                onDeselect={(barId: string) => {
-                  // check if the bar is already selected
-                  if (!props.selectedBarIds.includes(barId)) {
-                    return;
-                  }
-
-                  props.onBarSelectChange(
-                    props.selectedBarIds.filter((id: string) => {
-                      return id !== barId;
-                    }),
-                  );
-                }}
-              />
-            );
-          })}
-        </div>
-      </div>
-      {showChildRows && (
-        <div>
-          {row.childRows.map((childRow: GanttChartRow, i: number) => {
-            return (
-              <div key={i}>
-                <Row
-                  level={level + 1}
-                  row={childRow}
-                  chartTimelineEnd={props.chartTimelineEnd}
-                  chartTimelineStart={props.chartTimelineStart}
-                  timelineWidth={props.timelineWidth}
-                  selectedBarIds={props.selectedBarIds}
-                  onBarSelectChange={props.onBarSelectChange}
-                  {...(props.highlightBarIds
-                    ? { highlightBarIds: props.highlightBarIds }
-                    : {})}
-                  {...(props.multiSelect !== undefined
-                    ? { multiSelect: props.multiSelect }
-                    : {})}
-                />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Row;

package/UI/Components/GanttChart/Row/RowLabel.tsx

@@ -1,30 +0,0 @@
-import React, { FunctionComponent, ReactElement } from "react";
-
-export interface ComponentProps {
-  title: string | ReactElement;
-  description: string | ReactElement;
-  isHighlighted?: boolean;
-}
-
-const RowLabel: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  return (
-    // rectangle div with curved corners and text inside in tailwindcss
-
-    <div className="overflow-hidden">
-      <div
-        className={`truncate overflow-hidden text-sm transition-colors duration-150 ${props.isHighlighted ? "font-semibold text-indigo-700" : "text-gray-600"}`}
-      >
-        {props.title}
-      </div>
-      <div
-        className={`truncate overflow-hidden text-xs transition-colors duration-150 ${props.isHighlighted ? "text-indigo-500" : "text-gray-500"}`}
-      >
-        {props.description}
-      </div>
-    </div>
-  );
-};
-
-export default RowLabel;

package/UI/Components/GanttChart/Rows.tsx

@@ -1,59 +0,0 @@
-import Row from "./Row/Index";
-import { GanttChartRow } from "./Row/Row";
-import React, { FunctionComponent, ReactElement } from "react";
-
-export interface ComponentProps {
-  rows: Array<GanttChartRow>;
-  chartTimelineStart: number;
-  chartTimelineEnd: number;
-  timelineWidth: number;
-  selectedBarIds: string[];
-  onBarSelectChange: (barIds: string[]) => void;
-  multiSelect?: boolean | undefined;
-  highlightBarIds?: string[];
-}
-
-const Rows: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  type GetRowFunction = (data: { row: GanttChartRow }) => ReactElement;
-
-  const getRow: GetRowFunction = (data: {
-    row: GanttChartRow;
-  }): ReactElement => {
-    const { row } = data;
-
-    return (
-      <Row
-        chartTimelineStart={props.chartTimelineStart}
-        chartTimelineEnd={props.chartTimelineEnd}
-        timelineWidth={props.timelineWidth}
-        row={row}
-        selectedBarIds={props.selectedBarIds}
-        onBarSelectChange={props.onBarSelectChange}
-        {...(props.multiSelect !== undefined
-          ? { multiSelect: props.multiSelect }
-          : {})}
-        {...(props.highlightBarIds
-          ? { highlightBarIds: props.highlightBarIds }
-          : {})}
-      />
-    );
-  };
-
-  return (
-    <div className="w-full border-b-2 border-gray-400">
-      {props.rows.map((row: GanttChartRow, i: number) => {
-        return (
-          <div key={i}>
-            {getRow({
-              row: row,
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Rows;

package/UI/Components/GanttChart/Timeline/Index.tsx

@@ -1,46 +0,0 @@
-import TimelineInterval from "./TimelineInterval";
-import React, { FunctionComponent, ReactElement } from "react";
-
-export interface GanttChartTimeline {
-  start: number;
-  end: number;
-  interval: number;
-  intervalUnit: string;
-}
-
-export interface ComponentProps {
-  timeline: GanttChartTimeline;
-  eachIntervalWidth: number;
-}
-
-const Timeline: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const numberOfInterval: number =
-    (props.timeline.end - props.timeline.start) / props.timeline.interval;
-
-  return (
-    <div className="timeline flex h-5 border-b-2 border-l-2 border-t-2 border-gray-400 w-full">
-      <div className="w-1/4 border-r-2 border-gray-400">
-        {/** Row Category Spacer  */}
-      </div>
-
-      {/** Render Timeline Intervals */}
-      {Array.from({ length: numberOfInterval }, (_: number, i: number) => {
-        return (
-          <TimelineInterval
-            key={i}
-            timelineInterval={{
-              width: props.eachIntervalWidth,
-              intervalUnit: props.timeline.intervalUnit,
-              intervalCount:
-                props.timeline.start + (i + 1) * props.timeline.interval,
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-export default Timeline;