@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,33 @@
+import "client-only";
+
+import { atom, useAtom } from "jotai";
+import { createContext, useContext } from "react";
+import type { GanttContextProps } from "./types";
+
+const draggingAtom = atom(false);
+const scrollXAtom = atom(0);
+
+export const defaultGanttContext: GanttContextProps = {
+  zoom: 100,
+  range: "monthly",
+  columnWidth: 50,
+  headerHeight: 60,
+  sidebarWidth: 300,
+  rowHeight: 36,
+  onAddItem: undefined,
+  placeholderLength: 2,
+  timelineData: [],
+  ref: null,
+  scrollToFeature: undefined,
+};
+
+export const GanttContext = createContext<GanttContextProps>(defaultGanttContext);
+
+/** Shared immutable chart configuration and timeline state for child components. */
+export const useGanttContext = () => useContext(GanttContext);
+
+/** Global drag flag used to suppress hover affordances while a bar is being moved or resized. */
+export const useGanttDragging = () => useAtom(draggingAtom);
+
+/** Scroll offset shared by hover and drag helpers that need viewport-to-timeline conversion. */
+export const useGanttScrollX = () => useAtom(scrollXAtom);

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

@@ -0,0 +1,280 @@
+import "client-only";
+
+import { DndContext, MouseSensor, useDraggable, useSensor } from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import type { Temporal } from "@js-temporal/polyfill";
+import { Card } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { useMouse } from "@uidotdev/usehooks";
+import { format } from "date-fns";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useGanttContext, useGanttDragging, useGanttScrollX } from "./context";
+import { ganttLocale } from "./format";
+import type {
+  GanttFeatureDragHelperProps,
+  GanttFeatureItemCardProps,
+  GanttFeatureItemProps,
+  GanttFeatureListGroupProps,
+  GanttFeatureListProps,
+  GanttFeatureRowProps,
+} from "./types";
+import {
+  getAddRange,
+  getDateByMousePosition,
+  getDifferenceIn,
+  getFeatureLayout,
+  getInnerDifferenceForRange,
+  getOffset,
+  getTimelineStartDate,
+  getWidth,
+  toDate,
+} from "./utils";
+
+/** Resize handle for the left or right edge of a feature bar. */
+export function GanttFeatureDragHelper({
+  direction,
+  featureId,
+  date,
+}: GanttFeatureDragHelperProps) {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: `feature-drag-helper-${featureId}`,
+  });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+
+  useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+
+  return (
+    <div
+      className={cn(
+        "group !cursor-col-resize absolute top-1/2 z-[3] h-full w-6 -translate-y-1/2 rounded-md outline-none",
+        direction === "left" ? "-left-2.5" : "-right-2.5",
+      )}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+    >
+      <div
+        className={cn(
+          "absolute top-1/2 h-[80%] w-1 -translate-y-1/2 rounded-sm bg-muted-foreground opacity-0 transition-all",
+          direction === "left" ? "left-2.5" : "right-2.5",
+          direction === "left" ? "group-hover:left-0" : "group-hover:right-0",
+          isPressed && (direction === "left" ? "left-0" : "right-0"),
+          "group-hover:opacity-100",
+          isPressed && "opacity-100",
+        )}
+      />
+      {date ? (
+        <div
+          className={cn(
+            "absolute top-10 hidden -translate-x-1/2 whitespace-nowrap rounded-lg border border-border/50 bg-background/90 px-2 py-1 text-foreground text-xs backdrop-blur-lg group-hover:block",
+            isPressed && "block",
+          )}
+        >
+          {format(toDate(date), "MMM dd, yyyy", { locale: ganttLocale })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** Draggable card shell for feature content. */
+export function GanttFeatureItemCard({ id, children }: GanttFeatureItemCardProps) {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = useDraggable({ id });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+
+  useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+
+  return (
+    <Card className="h-full w-full rounded-md bg-background p-2 text-xs shadow-sm">
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-2 text-left",
+          isPressed && "cursor-grabbing",
+        )}
+        {...attributes}
+        {...listeners}
+        ref={setNodeRef}
+      >
+        {children}
+      </div>
+    </Card>
+  );
+}
+
+/** Positions, drags, and resizes a feature bar against the current timeline scale. */
+export function GanttFeatureItem({
+  onMove,
+  children,
+  className,
+  ...feature
+}: GanttFeatureItemProps) {
+  const [scrollX] = useGanttScrollX();
+  const gantt = useGanttContext();
+  const timelineStartDate = useMemo(
+    () => getTimelineStartDate(gantt.timelineData.at(0)?.year ?? 0),
+    [gantt.timelineData],
+  );
+  const [startAt, setStartAt] = useState<Temporal.PlainDate>(feature.startAt);
+  const [endAt, setEndAt] = useState<Temporal.PlainDate | null>(feature.endAt);
+  const width = useMemo(() => getWidth(startAt, endAt, gantt), [startAt, endAt, gantt]);
+  const offset = useMemo(
+    () => getOffset(startAt, timelineStartDate, gantt),
+    [startAt, timelineStartDate, gantt],
+  );
+  const addRange = useMemo(() => getAddRange(gantt.range), [gantt.range]);
+  const [mousePosition] = useMouse<HTMLDivElement>();
+  const [previousMouseX, setPreviousMouseX] = useState(0);
+  const [previousStartAt, setPreviousStartAt] = useState(startAt);
+  const [previousEndAt, setPreviousEndAt] = useState(endAt);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: { distance: 10 },
+  });
+
+  const getDateUnderMouse = useCallback(() => {
+    const ganttRect = gantt.ref?.current?.getBoundingClientRect();
+    const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
+
+    return getDateByMousePosition(gantt, x);
+  }, [gantt, mousePosition.x, scrollX]);
+
+  const handleItemDragStart = useCallback(() => {
+    setPreviousMouseX(mousePosition.x);
+    setPreviousStartAt(startAt);
+    setPreviousEndAt(endAt);
+  }, [mousePosition.x, startAt, endAt]);
+
+  const handleItemDragMove = useCallback(() => {
+    const currentDate = getDateByMousePosition(gantt, mousePosition.x);
+    const originalDate = getDateByMousePosition(gantt, previousMouseX);
+    const differenceFn =
+      gantt.range === "daily"
+        ? getDifferenceIn(gantt.range)
+        : getInnerDifferenceForRange(gantt.range);
+    const delta = differenceFn(currentDate, originalDate);
+
+    setStartAt(previousStartAt.add({ days: delta }));
+    setEndAt(previousEndAt ? previousEndAt.add({ days: delta }) : null);
+  }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
+
+  const onDragEnd = useCallback(
+    () => onMove?.(feature.id, startAt, endAt),
+    [onMove, feature.id, startAt, endAt],
+  );
+
+  const handleLeftDragMove = useCallback(
+    () => setStartAt(getDateUnderMouse()),
+    [getDateUnderMouse],
+  );
+  const handleRightDragMove = useCallback(() => setEndAt(getDateUnderMouse()), [getDateUnderMouse]);
+
+  return (
+    <div
+      className={cn("relative flex w-max min-w-full py-0.5", className)}
+      style={{ height: "var(--gantt-row-height)" }}
+    >
+      <div
+        className="pointer-events-auto absolute top-0.5"
+        style={{
+          height: "calc(var(--gantt-row-height) - 4px)",
+          width: Math.round(width),
+          left: Math.round(offset),
+        }}
+      >
+        {onMove ? (
+          <DndContext
+            modifiers={[restrictToHorizontalAxis]}
+            onDragEnd={onDragEnd}
+            onDragMove={handleLeftDragMove}
+            sensors={[mouseSensor]}
+          >
+            <GanttFeatureDragHelper date={startAt} direction="left" featureId={feature.id} />
+          </DndContext>
+        ) : null}
+        <DndContext
+          modifiers={[restrictToHorizontalAxis]}
+          onDragEnd={onDragEnd}
+          onDragMove={handleItemDragMove}
+          onDragStart={handleItemDragStart}
+          sensors={[mouseSensor]}
+        >
+          <GanttFeatureItemCard id={feature.id}>
+            {children ?? <p className="flex-1 truncate text-xs">{feature.name}</p>}
+          </GanttFeatureItemCard>
+        </DndContext>
+        {onMove ? (
+          <DndContext
+            modifiers={[restrictToHorizontalAxis]}
+            onDragEnd={onDragEnd}
+            onDragMove={handleRightDragMove}
+            sensors={[mouseSensor]}
+          >
+            <GanttFeatureDragHelper
+              date={endAt ?? addRange(startAt, gantt.placeholderLength)}
+              direction="right"
+              featureId={feature.id}
+            />
+          </DndContext>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** Adds top spacing so feature groups align with sidebar group labels. */
+export function GanttFeatureListGroup({ children, className }: GanttFeatureListGroupProps) {
+  return (
+    <div className={className} style={{ paddingTop: "var(--gantt-row-height)" }}>
+      {children}
+    </div>
+  );
+}
+
+/** Renders one logical row, splitting overlapping features into sub-rows. */
+export function GanttFeatureRow({ features, onMove, children, className }: GanttFeatureRowProps) {
+  const gantt = useGanttContext();
+  const layout = useMemo(() => getFeatureLayout(features), [features]);
+  const subRowHeight = gantt.rowHeight;
+
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{
+        height: `${layout.subRowCount * subRowHeight}px`,
+        minHeight: "var(--gantt-row-height)",
+      }}
+    >
+      {layout.features.map((feature) => (
+        <div
+          className="absolute w-full"
+          key={feature.id}
+          style={{
+            top: `${feature.subRow * subRowHeight}px`,
+            height: `${subRowHeight}px`,
+          }}
+        >
+          <GanttFeatureItem {...feature} onMove={onMove}>
+            {children ? (
+              children(feature)
+            ) : (
+              <p className="flex-1 truncate text-xs">{feature.name}</p>
+            )}
+          </GanttFeatureItem>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Absolute overlay that contains all feature rows above the column grid. */
+export function GanttFeatureList({ className, children }: GanttFeatureListProps) {
+  return (
+    <div
+      className={cn("absolute top-0 left-0 h-full w-max space-y-4", className)}
+      style={{ marginTop: "var(--gantt-header-height)" }}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { nlBE } from "date-fns/locale";
+
+export const ganttLocale = nlBE;

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

@@ -0,0 +1,90 @@
+import "client-only";
+
+import { cn } from "@tulip-systems/ui/cn";
+import { useMouse, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
+import { PlusIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { useGanttContext, useGanttDragging, useGanttScrollX } from "./context";
+import type { GanttAddFeatureHelperProps, GanttColumnProps, GanttColumnsProps } from "./types";
+import { getDateByMousePosition } from "./utils";
+
+/** Contextual add button shown at the hovered row/date when `onAddItem` is available. */
+export function GanttAddFeatureHelper({ top, className }: GanttAddFeatureHelperProps) {
+  const [scrollX] = useGanttScrollX();
+  const gantt = useGanttContext();
+  const [mousePosition, mouseRef] = useMouse<HTMLDivElement>();
+
+  const handleClick = () => {
+    const ganttRect = gantt.ref?.current?.getBoundingClientRect();
+    const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
+
+    gantt.onAddItem?.(getDateByMousePosition(gantt, x));
+  };
+
+  return (
+    <div
+      className={cn("absolute top-0 w-full px-0.5", className)}
+      ref={mouseRef}
+      style={{
+        marginTop: -gantt.rowHeight / 2,
+        transform: `translateY(${top}px)`,
+      }}
+    >
+      <button
+        className="flex h-full w-full items-center justify-center rounded-md border border-dashed p-2"
+        onClick={handleClick}
+        type="button"
+      >
+        <PlusIcon className="pointer-events-none select-none text-muted-foreground" size={16} />
+      </button>
+    </div>
+  );
+}
+
+/** Background timeline column. It owns hover tracking for the add helper. */
+export function GanttColumn({ index, isColumnSecondary }: GanttColumnProps) {
+  const gantt = useGanttContext();
+  const [dragging] = useGanttDragging();
+  const [mousePosition, mouseRef] = useMouse<HTMLDivElement>();
+  const [hovering, setHovering] = useState(false);
+  const [windowScroll] = useWindowScroll();
+  const top = useThrottle(
+    mousePosition.y - (mouseRef.current?.getBoundingClientRect().y ?? 0) - (windowScroll.y ?? 0),
+    10,
+  );
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: <div> is used here for gridcell role
+    <div
+      className={cn(
+        "group relative h-full overflow-hidden",
+        isColumnSecondary?.(index) ? "bg-secondary" : "",
+      )}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+      ref={mouseRef}
+      role="gridcell"
+      tabIndex={-1}
+    >
+      {!dragging && hovering && gantt.onAddItem ? <GanttAddFeatureHelper top={top} /> : null}
+    </div>
+  );
+}
+
+/** Column grid used behind every date header section. Renders a `GanttColumn` per slot. */
+export function GanttColumns({ columns, isColumnSecondary }: GanttColumnsProps) {
+  const id = useId();
+
+  return (
+    <div
+      className="divide grid h-full w-full divide-x divide-border/50"
+      style={{
+        gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`,
+      }}
+    >
+      {Array.from({ length: columns }).map((_, index) => (
+        <GanttColumn index={index} isColumnSecondary={isColumnSecondary} key={`${id}-${index}`} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,145 @@
+import "client-only";
+
+import { cn } from "@tulip-systems/ui/cn";
+import { addDays, format } from "date-fns";
+import type { ReactNode } from "react";
+import { useId } from "react";
+import { useGanttContext } from "./context";
+import { ganttLocale } from "./format";
+import { GanttColumns } from "./grid";
+import type { GanttContentHeaderProps, GanttHeaderProps, Range } from "./types";
+
+/** Title row plus repeated column labels for a single timeline section. */
+export function GanttContentHeader({ title, columns, renderHeaderItem }: GanttContentHeaderProps) {
+  const id = useId();
+
+  return (
+    <div
+      className="sticky top-0 z-20 grid w-full shrink-0 bg-backdrop/90 backdrop-blur-sm"
+      style={{ height: "var(--gantt-header-height)" }}
+    >
+      <div>
+        <div
+          className="sticky inline-flex whitespace-nowrap px-3 py-2 text-muted-foreground text-xs"
+          style={{ left: "var(--gantt-sidebar-width)" }}
+        >
+          <p>{title}</p>
+        </div>
+      </div>
+      <div
+        className="grid w-full"
+        style={{
+          gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`,
+        }}
+      >
+        {Array.from({ length: columns }).map((_, index) => (
+          <div
+            className="shrink-0 border-border/50 border-b py-1 text-center text-xs"
+            key={`${id}-${index}`}
+          >
+            {renderHeaderItem(index)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DailyHeader() {
+  const gantt = useGanttContext();
+
+  return gantt.timelineData.map((year) =>
+    year.quarters
+      .flatMap((quarter) => quarter.months)
+      .map((month, index) => {
+        const monthDate = new Date(year.year, index, 1);
+
+        return (
+          <div className="relative flex flex-col" key={`${year.year}-${index}`}>
+            <GanttContentHeader
+              columns={month.days}
+              renderHeaderItem={(item) => {
+                const day = addDays(monthDate, item);
+
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <p>{format(day, "d", { locale: ganttLocale })}</p>
+                    <p className="text-muted-foreground">
+                      {format(day, "EEEEE", { locale: ganttLocale })}
+                    </p>
+                  </div>
+                );
+              }}
+              title={format(monthDate, "MMMM yyyy", { locale: ganttLocale })}
+            />
+            <GanttColumns
+              columns={month.days}
+              isColumnSecondary={(item) => [0, 6].includes(addDays(monthDate, item).getDay())}
+            />
+          </div>
+        );
+      }),
+  );
+}
+
+function MonthlyHeader() {
+  const gantt = useGanttContext();
+
+  return gantt.timelineData.map((year) => {
+    const months = year.quarters.flatMap((quarter) => quarter.months);
+
+    return (
+      <div className="relative flex flex-col" key={year.year}>
+        <GanttContentHeader
+          columns={months.length}
+          renderHeaderItem={(item) => (
+            <p>{format(new Date(year.year, item, 1), "MMM", { locale: ganttLocale })}</p>
+          )}
+          title={`${year.year}`}
+        />
+        <GanttColumns columns={months.length} />
+      </div>
+    );
+  });
+}
+
+function QuarterlyHeader() {
+  const gantt = useGanttContext();
+
+  return gantt.timelineData.map((year) =>
+    year.quarters.map((quarter, quarterIndex) => (
+      <div className="relative flex flex-col" key={`${year.year}-${quarterIndex}`}>
+        <GanttContentHeader
+          columns={quarter.months.length}
+          renderHeaderItem={(item) => (
+            <p>
+              {format(new Date(year.year, quarterIndex * 3 + item, 1), "MMM", {
+                locale: ganttLocale,
+              })}
+            </p>
+          )}
+          title={`Q${quarterIndex + 1} ${year.year}`}
+        />
+        <GanttColumns columns={quarter.months.length} />
+      </div>
+    )),
+  );
+}
+
+const headers: Record<Range, () => ReactNode> = {
+  daily: DailyHeader,
+  monthly: MonthlyHeader,
+  quarterly: QuarterlyHeader,
+};
+
+/** Selects the matching date header for the active range. */
+export function GanttHeader({ className }: GanttHeaderProps) {
+  const gantt = useGanttContext();
+  const Header = headers[gantt.range];
+
+  return (
+    <div className={cn("flex h-full w-max -space-x-px divide-x divide-border/50", className)}>
+      <Header />
+    </div>
+  );
+}