@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/components/gantt/markers.tsx

@@ -0,0 +1,228 @@
+import "client-only";
+
+import { Temporal } from "@js-temporal/polyfill";
+import { Button } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@tulip-systems/ui/context-menu";
+import { useMouse, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
+import { formatDate } from "date-fns";
+import { PlusIcon, TrashIcon } from "lucide-react";
+import { memo, useCallback, useMemo } from "react";
+import { useGanttContext } from "./context";
+import { ganttLocale } from "./format";
+import type {
+  GanttCreateMarkerTriggerProps,
+  GanttMarkerProps,
+  GanttTimelineProps,
+  GanttTodayButtonProps,
+  GanttTodayProps,
+} from "./types";
+import {
+  calculateInnerOffset,
+  getCenteredScrollLeft,
+  getDateByMousePosition,
+  getDifferenceIn,
+  getScaledColumnWidth,
+  getTimelineStartDate,
+  toDate,
+} from "./utils";
+
+/** Converts a marker date into CSS transform pieces for the current range and zoom. */
+const useMarkerPosition = (date: Temporal.PlainDate) => {
+  const gantt = useGanttContext();
+  const differenceIn = useMemo(() => getDifferenceIn(gantt.range), [gantt.range]);
+  const timelineStartDate = useMemo(
+    () => getTimelineStartDate(gantt.timelineData.at(0)?.year ?? 0),
+    [gantt.timelineData],
+  );
+  const offset = useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate],
+  );
+  const innerOffset = useMemo(
+    () => calculateInnerOffset(date, gantt.range, getScaledColumnWidth(gantt)),
+    [date, gantt],
+  );
+
+  return { offset, innerOffset };
+};
+
+/** Container for timeline header, markers, and feature overlays. */
+export function GanttTimeline({ children, className }: GanttTimelineProps) {
+  return (
+    <div className={cn("relative flex h-full w-max flex-none overflow-clip", className)}>
+      {children}
+    </div>
+  );
+}
+
+/** Hover affordance for creating a marker at the current mouse date. */
+export function GanttCreateMarkerTrigger({
+  onCreateMarker,
+  className,
+}: GanttCreateMarkerTriggerProps) {
+  const gantt = useGanttContext();
+  const [mousePosition, mouseRef] = useMouse<HTMLDivElement>();
+  const [windowScroll] = useWindowScroll();
+  const x = useThrottle(
+    mousePosition.x - (mouseRef.current?.getBoundingClientRect().x ?? 0) - (windowScroll.x ?? 0),
+    10,
+  );
+  const date = getDateByMousePosition(gantt, x);
+
+  return (
+    <div
+      className={cn(
+        "group pointer-events-none absolute top-0 left-0 h-full w-full select-none overflow-visible",
+        className,
+      )}
+      ref={mouseRef}
+    >
+      <div
+        className="pointer-events-auto sticky top-6 z-20 -ml-2 flex w-4 flex-col items-center justify-center gap-1 overflow-visible opacity-0 group-hover:opacity-100"
+        style={{ transform: `translateX(${x}px)` }}
+      >
+        <button
+          className="z-50 inline-flex h-4 w-4 items-center justify-center rounded-full bg-card"
+          onClick={() => onCreateMarker(date)}
+          type="button"
+        >
+          <PlusIcon className="text-muted-foreground" size={12} />
+        </button>
+        <div className="whitespace-nowrap rounded-full border border-border/50 bg-background/90 px-2 py-1 text-foreground text-xs backdrop-blur-lg">
+          {formatDate(toDate(date), "MMM dd, yyyy", { locale: ganttLocale })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function GanttMarkerLine({
+  label,
+  date,
+  className,
+  children,
+}: {
+  label: string;
+  date: Temporal.PlainDate;
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  const { offset, innerOffset } = useMarkerPosition(date);
+
+  return (
+    <div
+      className="pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible"
+      style={{
+        width: 0,
+        transform: `translateX(calc(var(--gantt-column-width) * ${offset} + ${innerOffset}px))`,
+      }}
+    >
+      {children ?? <MarkerLabel className={className} date={date} label={label} />}
+      <div className={cn("h-full w-px bg-card", className)} />
+    </div>
+  );
+}
+
+/** Shared label chip rendered above every marker line. */
+function MarkerLabel({
+  label,
+  date,
+  className,
+}: {
+  label: string;
+  date: Temporal.PlainDate;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "group pointer-events-auto sticky top-0 flex select-auto flex-col flex-nowrap items-center justify-center whitespace-nowrap rounded-b-md bg-card px-2 py-1 text-foreground text-xs",
+        className,
+      )}
+    >
+      {label}
+      <span className="max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]">
+        {formatDate(toDate(date), "MMM dd, yyyy", { locale: ganttLocale })}
+      </span>
+    </div>
+  );
+}
+
+function GanttMarkerComponent({
+  label,
+  date,
+  id,
+  onRemove,
+  className,
+}: GanttMarkerProps & {
+  onRemove?: (id: string) => void;
+  className?: string;
+}) {
+  const handleRemove = useCallback(() => onRemove?.(id), [onRemove, id]);
+
+  return (
+    <GanttMarkerLine className={className} date={date} label={label}>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <MarkerLabel className={className} date={date} label={label} />
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          {onRemove ? (
+            <ContextMenuItem
+              className="flex items-center gap-2 text-destructive"
+              onClick={handleRemove}
+            >
+              <TrashIcon size={16} />
+              Remove marker
+            </ContextMenuItem>
+          ) : null}
+        </ContextMenuContent>
+      </ContextMenu>
+    </GanttMarkerLine>
+  );
+}
+
+export const GanttMarker = memo(GanttMarkerComponent);
+
+GanttMarker.displayName = "GanttMarker";
+
+/** Current day marker. */
+export function GanttToday({ className, label = "Vandaag" }: GanttTodayProps) {
+  const date = useMemo(() => Temporal.Now.plainDateISO(), []);
+
+  return <GanttMarkerLine className={className} date={date} label={label} />;
+}
+
+/** Scrolls the timeline so today is centered in the non-sidebar viewport. */
+export function GanttTodayButton({ className, label = "Vandaag" }: GanttTodayButtonProps) {
+  const gantt = useGanttContext();
+
+  const handleClick = useCallback(() => {
+    const scrollElement = gantt.ref?.current;
+    if (!scrollElement || gantt.timelineData.length === 0) {
+      return;
+    }
+
+    scrollElement.scrollTo({
+      left: getCenteredScrollLeft(Temporal.Now.plainDateISO(), gantt, scrollElement),
+      behavior: "smooth",
+    });
+  }, [gantt]);
+
+  return (
+    <Button
+      className={cn("shrink-0 text-xs", className)}
+      onClick={handleClick}
+      type="button"
+      variant="outline"
+    >
+      {label}
+    </Button>
+  );
+}

package/dist/templates/code/src/components/gantt/provider.tsx

@@ -0,0 +1,194 @@
+import "client-only";
+
+import { Temporal } from "@js-temporal/polyfill";
+import { cn } from "@tulip-systems/ui/cn";
+import throttle from "lodash.throttle";
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { GanttContext, useGanttScrollX } from "./context";
+import type { GanttContextProps, GanttFeature, GanttProviderProps } from "./types";
+import {
+  appendTimelineYear,
+  createInitialTimelineData,
+  DEFAULT_HEADER_HEIGHT,
+  DEFAULT_PLACEHOLDER_LENGTH,
+  DEFAULT_ROW_HEIGHT,
+  DEFAULT_SIDEBAR_WIDTH,
+  getCenteredScrollLeft,
+  getColumnWidth,
+  getOffset,
+  getTimelineStartDate,
+  prependTimelineYear,
+} from "./utils";
+
+const SIDEBAR_SELECTOR = '[data-roadmap-ui="gantt-sidebar"]';
+
+/**
+ * Owns chart-wide layout settings, scroll position, and lazy timeline expansion.
+ * Consumers should read these values through `useGanttContext` instead of recalculating them.
+ */
+export function GanttProvider({
+  zoom = 100,
+  range = "monthly",
+  autoScrollToTodayOnRangeChange = false,
+  onAddItem,
+  children,
+  className,
+}: GanttProviderProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [timelineData, setTimelineData] = useState(() =>
+    createInitialTimelineData(Temporal.Now.plainDateISO()),
+  );
+  const [, setScrollX] = useGanttScrollX();
+  const [sidebarWidth, setSidebarWidth] = useState(0);
+  const columnWidth = getColumnWidth(range);
+
+  /** Scrolls the timeline so the left edge of the feature's start date is visible. */
+  const scrollToFeature = useCallback(
+    (feature: GanttFeature) => {
+      const scrollElement = scrollRef.current;
+      if (!scrollElement || timelineData.length === 0) {
+        return;
+      }
+
+      const timelineStartDate = getTimelineStartDate(timelineData[0]?.year ?? 0);
+      const offset = getOffset(feature.startAt, timelineStartDate, { columnWidth, zoom, range });
+
+      scrollElement.scrollTo({
+        left: Math.max(0, offset),
+        behavior: "smooth",
+      });
+    },
+    [timelineData, columnWidth, zoom, range],
+  );
+
+  const value = useMemo<GanttContextProps>(
+    () => ({
+      zoom,
+      range,
+      headerHeight: DEFAULT_HEADER_HEIGHT,
+      columnWidth,
+      sidebarWidth,
+      rowHeight: DEFAULT_ROW_HEIGHT,
+      onAddItem,
+      timelineData,
+      placeholderLength: DEFAULT_PLACEHOLDER_LENGTH,
+      ref: scrollRef,
+      scrollToFeature,
+    }),
+    [zoom, range, columnWidth, sidebarWidth, onAddItem, timelineData, scrollToFeature],
+  );
+
+  const cssVariables = useMemo(
+    () =>
+      ({
+        "--gantt-zoom": `${zoom}`,
+        "--gantt-column-width": `${(zoom / 100) * columnWidth}px`,
+        "--gantt-header-height": `${DEFAULT_HEADER_HEIGHT}px`,
+        "--gantt-row-height": `${DEFAULT_ROW_HEIGHT}px`,
+        "--gantt-sidebar-width": `${sidebarWidth}px`,
+      }) as CSSProperties,
+    [zoom, columnWidth, sidebarWidth],
+  );
+
+  /** Scrolls the timeline so today is centred in the visible viewport. */
+  const scrollToToday = useCallback(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement || timelineData.length === 0) {
+      return;
+    }
+
+    scrollElement.scrollTo({
+      left: getCenteredScrollLeft(Temporal.Now.plainDateISO(), value, scrollElement),
+      behavior: "smooth",
+    });
+  }, [timelineData.length, value]);
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) {
+      return;
+    }
+
+    scrollElement.scrollLeft = scrollElement.scrollWidth / 2 - scrollElement.clientWidth / 2;
+    setScrollX(scrollElement.scrollLeft);
+  }, [setScrollX]);
+
+  useEffect(() => {
+    const updateSidebarWidth = () => {
+      const hasSidebar = Boolean(scrollRef.current?.querySelector(SIDEBAR_SELECTOR));
+      setSidebarWidth(hasSidebar ? DEFAULT_SIDEBAR_WIDTH : 0);
+    };
+
+    updateSidebarWidth();
+
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) {
+      return;
+    }
+
+    const observer = new MutationObserver(updateSidebarWidth);
+    observer.observe(scrollElement, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) {
+      return;
+    }
+
+    const handleScroll = throttle(() => {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollElement;
+      setScrollX(scrollLeft);
+
+      if (scrollLeft === 0) {
+        setTimelineData(prependTimelineYear);
+        scrollElement.scrollLeft = clientWidth;
+        setScrollX(scrollElement.scrollLeft);
+      } else if (scrollLeft + clientWidth >= scrollWidth) {
+        setTimelineData(appendTimelineYear);
+        scrollElement.scrollLeft = scrollElement.scrollWidth - clientWidth;
+        setScrollX(scrollElement.scrollLeft);
+      }
+    }, 100);
+
+    scrollElement.addEventListener("scroll", handleScroll);
+
+    return () => {
+      scrollElement.removeEventListener("scroll", handleScroll);
+      handleScroll.cancel();
+    };
+  }, [setScrollX]);
+
+  useEffect(() => {
+    if (!autoScrollToTodayOnRangeChange) {
+      return;
+    }
+
+    scrollToToday();
+  }, [autoScrollToTodayOnRangeChange, scrollToToday]);
+
+  return (
+    <GanttContext.Provider value={value}>
+      <div
+        className={cn(
+          "gantt relative isolate grid h-full w-full flex-none select-none overflow-auto rounded-sm bg-muted/70",
+          range,
+          className,
+        )}
+        ref={scrollRef}
+        style={{
+          ...cssVariables,
+          gridTemplateColumns: "var(--gantt-sidebar-width) 1fr",
+        }}
+      >
+        {children}
+      </div>
+    </GanttContext.Provider>
+  );
+}

package/dist/templates/code/src/components/gantt/sidebar.tsx

@@ -0,0 +1,112 @@
+import "client-only";
+
+import { Temporal } from "@js-temporal/polyfill";
+import { cn } from "@tulip-systems/ui/cn";
+import { formatDistance } from "date-fns";
+import type { ComponentProps, KeyboardEventHandler, MouseEventHandler } from "react";
+import { useGanttContext } from "./context";
+import { ganttLocale } from "./format";
+import type { GanttSidebarGroupProps, GanttSidebarItemProps } from "./types";
+import { toDate } from "./utils";
+
+const getFeatureDurationLabel = (feature: GanttSidebarItemProps["feature"]) => {
+  const endAt =
+    Temporal.PlainDate.compare(feature.startAt, feature.endAt) === 0
+      ? feature.endAt.add({ days: 1 })
+      : feature.endAt;
+
+  return formatDistance(toDate(feature.startAt), toDate(endAt), { locale: ganttLocale });
+};
+
+/** Row label paired with a timeline feature. Selecting it scrolls the matching bar into view. */
+export function GanttSidebarItem({ feature, onSelectItem, className }: GanttSidebarItemProps) {
+  const gantt = useGanttContext();
+
+  const selectFeature = () => {
+    gantt.scrollToFeature?.(feature);
+    onSelectItem?.(feature.id);
+  };
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    if (event.target === event.currentTarget) {
+      selectFeature();
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    if (event.key === "Enter") {
+      selectFeature();
+    }
+  };
+
+  return (
+    <button
+      className={cn("relative flex items-center gap-2 p-3 text-xs hover:bg-secondary", className)}
+      key={feature.id}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      style={{ height: "var(--gantt-row-height)" }}
+      type="button"
+    >
+      {feature.status.icon ? (
+        <feature.status.icon className={cn("size-3.5", feature.status.className)} />
+      ) : null}
+      <p className="pointer-events-none flex-1 truncate text-left font-medium">{feature.name}</p>
+      <p className="pointer-events-none text-muted-foreground">
+        {getFeatureDurationLabel(feature)}
+      </p>
+    </button>
+  );
+}
+
+/** Sticky left column that contains feature labels and controls. */
+export function GanttSidebar({ children, className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "sticky left-0 z-30 h-max min-h-full overflow-clip border-border border-r bg-sidebar",
+        className,
+      )}
+      data-roadmap-ui="gantt-sidebar"
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Sticky sidebar header that aligns with the timeline header height. */
+export function GanttSidebarHeader({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "sticky top-0 z-10 flex shrink-0 justify-between gap-2.5 border-border/50 border-b p-3 font-medium text-muted-foreground text-xs",
+        className,
+      )}
+      style={{ height: "var(--gantt-header-height)" }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Scrollable content area inside the sidebar, adds vertical spacing between groups. */
+export function GanttSidebarContent({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("space-y-4", className)}>{props.children}</div>;
+}
+
+/** Optional visual grouping for sidebar feature rows. */
+export function GanttSidebarGroup({ children, name, className }: GanttSidebarGroupProps) {
+  return (
+    <div className={className}>
+      <p
+        className="w-full truncate p-2.5 text-left font-medium text-muted-foreground text-xs"
+        style={{ height: "var(--gantt-row-height)" }}
+      >
+        {name}
+      </p>
+      <div className="divide-y divide-border/50">{children}</div>
+    </div>
+  );
+}

package/dist/templates/code/src/components/gantt/types.ts

@@ -0,0 +1,169 @@
+import type { Temporal } from "@js-temporal/polyfill";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode, RefObject } from "react";
+
+/** A status category that can be attached to a feature (e.g. "In Progress", "Done"). */
+export type GanttStatus = {
+  id: string;
+  name: string;
+  color?: string;
+  icon?: LucideIcon;
+  className?: string;
+};
+
+/** A schedulable work item with a mandatory start date and an optional end date. */
+export type GanttFeature = {
+  id: string;
+  name: string;
+  startAt: Temporal.PlainDate;
+  endAt: Temporal.PlainDate;
+  status: GanttStatus;
+  lane?: string;
+};
+
+/** A named vertical line anchored to a specific date on the timeline. */
+export type GanttMarkerProps = {
+  id: string;
+  date: Temporal.PlainDate;
+  label: string;
+};
+
+/** Zoom granularity of the timeline columns. */
+export type Range = "daily" | "monthly" | "quarterly";
+
+/**
+ * Nested structure describing every year/quarter/month that is currently rendered.
+ * Built by `createInitialTimelineData` and lazily extended as the user scrolls.
+ */
+export type TimelineData = {
+  year: number;
+  quarters: {
+    months: {
+      days: number;
+    }[];
+  }[];
+}[];
+
+/** Values shared via `GanttContext` to all chart sub-components. */
+export type GanttContextProps = {
+  zoom: number;
+  range: Range;
+  /** Base column width before zoom is applied. */
+  columnWidth: number;
+  sidebarWidth: number;
+  headerHeight: number;
+  rowHeight: number;
+  onAddItem: ((date: Temporal.PlainDate) => void) | undefined;
+  /** Number of columns used as the placeholder width when a feature has no end date. */
+  placeholderLength: number;
+  timelineData: TimelineData;
+  /** Ref to the outer scrollable container, used for scroll manipulation. */
+  ref: RefObject<HTMLDivElement | null> | null;
+  /** Imperatively scrolls the timeline so the given feature's start is visible. */
+  scrollToFeature?: (feature: GanttFeature) => void;
+};
+
+/** Props for a single date-section inside the timeline header. */
+export type GanttContentHeaderProps = {
+  renderHeaderItem: (index: number) => ReactNode;
+  title: string;
+  columns: number;
+};
+
+export type GanttHeaderProps = {
+  className?: string;
+};
+
+export type GanttSidebarItemProps = {
+  feature: GanttFeature;
+  onSelectItem?: (id: string) => void;
+  className?: string;
+};
+
+export type GanttSidebarGroupProps = {
+  children: ReactNode;
+  name: string;
+  className?: string;
+};
+
+export type GanttAddFeatureHelperProps = {
+  top: number;
+  className?: string;
+};
+
+export type GanttColumnProps = {
+  index: number;
+  /** Returns `true` for column indices that should receive a secondary background (e.g. weekends). */
+  isColumnSecondary?: (item: number) => boolean;
+};
+
+export type GanttColumnsProps = {
+  columns: number;
+  isColumnSecondary?: (item: number) => boolean;
+};
+
+export type GanttCreateMarkerTriggerProps = {
+  onCreateMarker: (date: Temporal.PlainDate) => void;
+  className?: string;
+};
+
+export type GanttFeatureDragHelperProps = {
+  featureId: GanttFeature["id"];
+  direction: "left" | "right";
+  /** Current date shown in the tooltip while dragging. `null` hides the tooltip. */
+  date: Temporal.PlainDate | null;
+};
+
+export type GanttFeatureItemCardProps = Pick<GanttFeature, "id"> & {
+  children?: ReactNode;
+};
+
+export type GanttFeatureItemProps = GanttFeature & {
+  onMove?: (id: string, startDate: Temporal.PlainDate, endDate: Temporal.PlainDate | null) => void;
+  children?: ReactNode;
+  className?: string;
+};
+
+export type GanttFeatureListGroupProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type GanttFeatureRowProps = {
+  features: GanttFeature[];
+  onMove?: (id: string, startAt: Temporal.PlainDate, endAt: Temporal.PlainDate | null) => void;
+  /** Optional render function for custom feature bar content. */
+  children?: (feature: GanttFeature) => ReactNode;
+  className?: string;
+};
+
+export type GanttFeatureListProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+export type GanttProviderProps = {
+  range?: Range;
+  zoom?: number;
+  /** When `true`, the timeline auto-scrolls to today whenever `range` changes. */
+  autoScrollToTodayOnRangeChange?: boolean;
+  onAddItem?: (date: Temporal.PlainDate) => void;
+  children: ReactNode;
+  className?: string;
+};
+
+export type GanttTimelineProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type GanttTodayProps = {
+  className?: string;
+  /** Label shown in the marker chip. Defaults to "Vandaag". */
+  label?: string;
+};
+
+export type GanttTodayButtonProps = {
+  className?: string;
+  label?: string;
+};