{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gantt","type":"registry:ui","title":"Gantt","description":"Tailark Base UI Gantt component","dependencies":["@dnd-kit/core","@dnd-kit/modifiers","@uidotdev/usehooks","date-fns","jotai","lodash.throttle"],"registryDependencies":["@tailark/core-utils","@tailark/card","@tailark/context-menu"],"files":[{"path":"components/ui/gantt.tsx","type":"registry:ui","target":"@ui/gantt.tsx","content":"\"use client\"\n\nimport { Card } from \"@/components/ui/card\"\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n} from \"./context-menu\"\nimport { cn } from \"@/lib/utils\"\nimport { DndContext, MouseSensor, useDraggable, useSensor } from \"@dnd-kit/core\"\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\"\nimport { useMouse, useThrottle, useWindowScroll } from \"@uidotdev/usehooks\"\nimport { formatDate, getDate } from \"date-fns\"\nimport { formatDistance, isSameDay } from \"date-fns\"\nimport { format } from \"date-fns\"\nimport {\n addDays,\n addMonths,\n differenceInDays,\n differenceInHours,\n differenceInMonths,\n endOfDay,\n endOfMonth,\n getDaysInMonth,\n startOfDay,\n startOfMonth,\n} from \"date-fns\"\nimport { atom, useAtom } from \"jotai\"\nimport throttle from \"lodash.throttle\"\nimport { PlusIcon, TrashIcon } from \"lucide-react\"\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport type {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactNode,\n RefObject,\n} from \"react\"\n\nconst draggingAtom = atom(false)\nconst scrollXAtom = atom(0)\n\nexport const useGanttDragging = () => useAtom(draggingAtom)\nexport const useGanttScrollX = () => useAtom(scrollXAtom)\n\nexport type GanttStatus = {\n id: string\n name: string\n color: string\n}\n\nexport type GanttFeature = {\n id: string\n name: string\n startAt: Date\n endAt: Date\n status: GanttStatus\n}\n\nexport type GanttMarkerProps = {\n id: string\n date: Date\n label: string\n}\n\nexport type Range = \"daily\" | \"monthly\" | \"quarterly\"\n\nexport type TimelineData = {\n year: number\n quarters: {\n months: {\n days: number\n }[]\n }[]\n}[]\n\nexport type GanttContextProps = {\n zoom: number\n range: Range\n columnWidth: number\n sidebarWidth: number\n headerHeight: number\n rowHeight: number\n onAddItem: ((date: Date) => void) | undefined\n placeholderLength: number\n timelineData: TimelineData\n ref: RefObject | null\n}\n\nconst getsDaysIn = (range: Range) => {\n // For when range is daily\n let fn: (date: Date) => number = () => 1\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = getDaysInMonth\n }\n\n return fn\n}\n\nconst getDifferenceIn = (range: Range) => {\n let fn = differenceInDays\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = differenceInMonths\n }\n\n return fn\n}\n\nconst getInnerDifferenceIn = (range: Range) => {\n let fn = differenceInHours\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = differenceInDays\n }\n\n return fn\n}\n\nconst getStartOf = (range: Range) => {\n let fn = startOfDay\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = startOfMonth\n }\n\n return fn\n}\n\nconst getEndOf = (range: Range) => {\n let fn = endOfDay\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = endOfMonth\n }\n\n return fn\n}\n\nconst getAddRange = (range: Range) => {\n let fn = addDays\n\n if (range === \"monthly\" || range === \"quarterly\") {\n fn = addMonths\n }\n\n return fn\n}\n\nconst getDateByMousePosition = (context: GanttContextProps, mouseX: number) => {\n const timelineStartDate = new Date(context.timelineData[0].year, 0, 1)\n const columnWidth = (context.columnWidth * context.zoom) / 100\n const offset = Math.floor(mouseX / columnWidth)\n const daysIn = getsDaysIn(context.range)\n const addRange = getAddRange(context.range)\n const month = addRange(timelineStartDate, offset)\n const daysInMonth = daysIn(month)\n const pixelsPerDay = Math.round(columnWidth / daysInMonth)\n const dayOffset = Math.floor((mouseX % columnWidth) / pixelsPerDay)\n const actualDate = addDays(month, dayOffset)\n\n return actualDate\n}\n\nconst createInitialTimelineData = (today: Date) => {\n const data: TimelineData = []\n\n data.push(\n { year: today.getFullYear() - 1, quarters: new Array(4).fill(null) },\n { year: today.getFullYear(), quarters: new Array(4).fill(null) },\n { year: today.getFullYear() + 1, quarters: new Array(4).fill(null) }\n )\n\n for (const yearObj of data) {\n yearObj.quarters = new Array(4).fill(null).map((_, quarterIndex) => ({\n months: new Array(3).fill(null).map((_, monthIndex) => {\n const month = quarterIndex * 3 + monthIndex\n return {\n days: getDaysInMonth(new Date(yearObj.year, month, 1)),\n }\n }),\n }))\n }\n\n return data\n}\n\nconst getOffset = (\n date: Date,\n timelineStartDate: Date,\n context: GanttContextProps\n) => {\n const parsedColumnWidth = (context.columnWidth * context.zoom) / 100\n const differenceIn = getDifferenceIn(context.range)\n const startOf = getStartOf(context.range)\n const fullColumns = differenceIn(startOf(date), timelineStartDate)\n\n if (context.range === \"daily\") {\n return parsedColumnWidth * fullColumns\n }\n\n const partialColumns = date.getDate()\n const daysInMonth = getDaysInMonth(date)\n const pixelsPerDay = parsedColumnWidth / daysInMonth\n\n return fullColumns * parsedColumnWidth + partialColumns * pixelsPerDay\n}\n\nconst getWidth = (\n startAt: Date,\n endAt: Date | null,\n context: GanttContextProps\n) => {\n const parsedColumnWidth = (context.columnWidth * context.zoom) / 100\n\n if (!endAt) {\n return parsedColumnWidth * 2\n }\n\n const differenceIn = getDifferenceIn(context.range)\n\n if (context.range === \"daily\") {\n const delta = differenceIn(endAt, startAt)\n\n return parsedColumnWidth * (delta ? delta : 1)\n }\n\n const daysInStartMonth = getDaysInMonth(startAt)\n const pixelsPerDayInStartMonth = parsedColumnWidth / daysInStartMonth\n\n if (isSameDay(startAt, endAt)) {\n return pixelsPerDayInStartMonth\n }\n\n const innerDifferenceIn = getInnerDifferenceIn(context.range)\n const startOf = getStartOf(context.range)\n\n if (isSameDay(startOf(startAt), startOf(endAt))) {\n return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth\n }\n\n const startRangeOffset = daysInStartMonth - getDate(startAt)\n const endRangeOffset = getDate(endAt)\n const fullRangeOffset = differenceIn(startOf(endAt), startOf(startAt))\n const daysInEndMonth = getDaysInMonth(endAt)\n const pixelsPerDayInEndMonth = parsedColumnWidth / daysInEndMonth\n\n return (\n (fullRangeOffset - 1) * parsedColumnWidth +\n startRangeOffset * pixelsPerDayInStartMonth +\n endRangeOffset * pixelsPerDayInEndMonth\n )\n}\n\nconst calculateInnerOffset = (\n date: Date,\n range: Range,\n columnWidth: number\n) => {\n const startOf = getStartOf(range)\n const endOf = getEndOf(range)\n const differenceIn = getInnerDifferenceIn(range)\n const startOfRange = startOf(date)\n const endOfRange = endOf(date)\n const totalRangeDays = differenceIn(endOfRange, startOfRange)\n const dayOfMonth = date.getDate()\n\n return (dayOfMonth / totalRangeDays) * columnWidth\n}\n\nconst GanttContext = createContext({\n zoom: 100,\n range: \"monthly\",\n columnWidth: 50,\n headerHeight: 60,\n sidebarWidth: 300,\n rowHeight: 36,\n onAddItem: undefined,\n placeholderLength: 2,\n timelineData: [],\n ref: null,\n})\n\nexport type GanttContentHeaderProps = {\n renderHeaderItem: (index: number) => ReactNode\n title: string\n columns: number\n}\n\nexport const GanttContentHeader: FC = ({\n title,\n columns,\n renderHeaderItem,\n}) => {\n const id = useId()\n\n return (\n \n
\n \n

{title}

\n
\n \n \n {Array.from({ length: columns }).map((_, index) => (\n \n {renderHeaderItem(index)}\n \n ))}\n \n \n )\n}\n\nconst DailyHeader: FC = () => {\n const gantt = useContext(GanttContext)\n\n return gantt.timelineData.map((year) => {\n const headers = []\n let calendarMonth = 0\n for (const quarter of year.quarters) {\n for (const month of quarter.months) {\n const monthNumber = calendarMonth\n headers.push(\n \n (\n
\n

\n {format(\n addDays(new Date(year.year, monthNumber, 1), item),\n \"d\"\n )}\n

\n

\n {format(\n addDays(new Date(year.year, monthNumber, 1), item),\n \"EEEEE\"\n )}\n

\n
\n )}\n />\n \n [0, 6].includes(\n addDays(new Date(year.year, monthNumber, 1), item).getDay()\n )\n }\n />\n \n )\n calendarMonth++\n }\n }\n return headers\n })\n}\n\nconst MonthlyHeader: FC = () => {\n const gantt = useContext(GanttContext)\n\n return gantt.timelineData.map((year) => (\n
\n quarter.months).length}\n renderHeaderItem={(item: number) => (\n

{format(new Date(year.year, item, 1), \"MMM\")}

\n )}\n />\n quarter.months).length}\n />\n
\n ))\n}\n\nconst QuarterlyHeader: FC = () => {\n const gantt = useContext(GanttContext)\n\n return gantt.timelineData.map((year) =>\n year.quarters.map((quarter, quarterIndex) => (\n \n (\n

\n {format(new Date(year.year, quarterIndex * 3 + item, 1), \"MMM\")}\n

\n )}\n />\n \n \n ))\n )\n}\n\nconst headers: Record = {\n daily: DailyHeader,\n monthly: MonthlyHeader,\n quarterly: QuarterlyHeader,\n}\n\nexport type GanttHeaderProps = {\n className?: string\n}\n\nexport const GanttHeader: FC = ({ className }) => {\n const gantt = useContext(GanttContext)\n const Header = headers[gantt.range]\n\n return (\n \n
\n \n )\n}\n\nexport type GanttSidebarItemProps = {\n feature: GanttFeature\n onSelectItem?: (id: string) => void\n className?: string\n}\n\nexport const GanttSidebarItem: FC = ({\n feature,\n onSelectItem,\n className,\n}) => {\n const tempEndAt =\n feature.endAt && isSameDay(feature.startAt, feature.endAt)\n ? addDays(feature.endAt, 1)\n : feature.endAt\n const duration = tempEndAt\n ? formatDistance(feature.startAt, tempEndAt)\n : `${formatDistance(feature.startAt, typeof window !== \"undefined\" ? new Date() : new Date(\"2024-10-25\"))} so far`\n\n const handleClick: MouseEventHandler = (event) => {\n if (event.target === event.currentTarget) {\n onSelectItem?.(feature.id)\n }\n }\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === \"Enter\") {\n onSelectItem?.(feature.id)\n }\n }\n\n return (\n \n role=\"button\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n key={feature.id}\n className={cn(\n \"relative flex items-center gap-2.5 p-2.5 text-xs\",\n className\n )}\n style={{\n height: \"var(--gantt-row-height)\",\n }}\n >\n {/* */}\n \n

\n {feature.name}\n

\n

{duration}

\n \n )\n}\n\nexport const GanttSidebarHeader: FC = () => (\n \n {/* */}\n

Issues

\n

Duration

\n \n)\n\nexport type GanttSidebarGroupProps = {\n children: ReactNode\n name: string\n className?: string\n}\n\nexport const GanttSidebarGroup: FC = ({\n children,\n name,\n className,\n}) => (\n
\n \n {name}\n

\n
{children}
\n
\n)\n\nexport type GanttSidebarProps = {\n children: ReactNode\n className?: string\n}\n\nexport const GanttSidebar: FC = ({\n children,\n className,\n}) => (\n \n \n
{children}
\n \n)\n\nexport type GanttAddFeatureHelperProps = {\n top: number\n className?: string\n}\n\nexport const GanttAddFeatureHelper: FC = ({\n top,\n className,\n}) => {\n const [scrollX] = useGanttScrollX()\n const gantt = useContext(GanttContext)\n const [mousePosition, mouseRef] = useMouse()\n\n const handleClick = () => {\n const ganttRect = gantt.ref?.current?.getBoundingClientRect()\n const x =\n mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth\n const currentDate = getDateByMousePosition(gantt, x)\n\n gantt.onAddItem?.(currentDate)\n }\n\n return (\n \n \n \n \n \n )\n}\n\nexport type GanttColumnProps = {\n index: number\n isColumnSecondary?: (item: number) => boolean\n}\n\nexport const GanttColumn: FC = ({\n index,\n isColumnSecondary,\n}) => {\n const gantt = useContext(GanttContext)\n const [dragging] = useGanttDragging()\n const [mousePosition, mouseRef] = useMouse()\n const [hovering, setHovering] = useState(false)\n const [windowScroll] = useWindowScroll()\n const [offsetY, setOffsetY] = useState(0)\n\n const handleMouseEnter = () => setHovering(true)\n const handleMouseLeave = () => setHovering(false)\n\n useEffect(() => {\n if (mouseRef.current) {\n setOffsetY(mouseRef.current.getBoundingClientRect().y)\n }\n }, [mouseRef])\n\n const top = useThrottle(mousePosition.y - offsetY - (windowScroll.y ?? 0), 10)\n\n return (\n // biome-ignore lint/nursery/noStaticElementInteractions: \n \n {!dragging && hovering && gantt.onAddItem ? (\n \n ) : null}\n \n )\n}\n\nexport type GanttColumnsProps = {\n columns: number\n isColumnSecondary?: (item: number) => boolean\n}\n\nexport const GanttColumns: FC = ({\n columns,\n isColumnSecondary,\n}) => {\n const id = useId()\n\n return (\n \n {Array.from({ length: columns }).map((_, index) => (\n \n ))}\n \n )\n}\n\nexport type GanttCreateMarkerTriggerProps = {\n onCreateMarker: (date: Date) => void\n className?: string\n}\n\nexport const GanttCreateMarkerTrigger: FC = ({\n onCreateMarker,\n className,\n}) => {\n const gantt = useContext(GanttContext)\n const [mousePosition, mouseRef] = useMouse()\n const [windowScroll] = useWindowScroll()\n const [offsetX, setOffsetX] = useState(0)\n\n useEffect(() => {\n if (mouseRef.current) {\n setOffsetX(mouseRef.current.getBoundingClientRect().x)\n }\n }, [mouseRef])\n\n const x = useThrottle(mousePosition.x - offsetX - (windowScroll.x ?? 0), 10)\n\n const date = getDateByMousePosition(gantt, x)\n\n const handleClick = () => onCreateMarker(date)\n\n return (\n \n \n \n \n \n
\n {formatDate(date, \"MMM dd, yyyy\")}\n
\n \n \n )\n}\n\nexport type GanttFeatureDragHelperProps = {\n featureId: GanttFeature[\"id\"]\n direction: \"left\" | \"right\"\n date: Date | null\n}\n\nexport const GanttFeatureDragHelper: FC = ({\n direction,\n featureId,\n date,\n}) => {\n const [, setDragging] = useGanttDragging()\n const { attributes, listeners, setNodeRef } = useDraggable({\n id: `feature-drag-helper-${featureId}`,\n })\n\n const isPressed = Boolean(attributes[\"aria-pressed\"])\n\n useEffect(() => setDragging(isPressed), [isPressed, setDragging])\n\n return (\n \n \n {date && (\n