@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/data-display/GanttChart/GanttChart.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ganttChartTheme } from './GanttChart.theme.js';
+import { useGanttDates } from './hooks/useGanttDates.js';
+import { useGanttLayout } from './hooks/useGanttLayout.js';
+import { useGanttScrollSync } from './hooks/useGanttScrollSync.js';
+import { GanttToolbar } from './GanttToolbar.js';
+import { GanttTablePanel } from './GanttTablePanel.js';
+import { GanttChartPanel } from './GanttChartPanel.js';
+import { GanttSplitter } from './GanttSplitter.js';
+import { formatDuration } from './GanttChart.utils.js';
+import { GanttProgressCircle } from './GanttProgressCircle.js';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const GanttContext = createContext(undefined);
+const GanttInteractionContext = createContext(undefined);
+function useGanttContext() {
+    const ctx = useContext(GanttContext);
+    if (!ctx) {
+        throw new Error("useGanttContext must be used within <GanttChart>");
+    }
+    return ctx;
+}
+function useGanttInteraction() {
+    const ctx = useContext(GanttInteractionContext);
+    if (!ctx) {
+        throw new Error("useGanttInteraction must be used within <GanttChart>");
+    }
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Default columns
+// ---------------------------------------------------------------------------
+const defaultColumns = [
+    {
+        id: "title",
+        header: "Task",
+        accessor: "title",
+        width: 200,
+    },
+    {
+        id: "duration",
+        header: "Duration",
+        accessor: (task) => formatDuration(task.startDate, task.endDate),
+        width: 70,
+        align: "center",
+    },
+    {
+        id: "progress",
+        header: "Status",
+        accessor: "progress",
+        cell: (task, group) => {
+            var _a;
+            return (jsx(GanttProgressCircle, { progress: task.progress, color: (_a = task.color) !== null && _a !== void 0 ? _a : group.color, size: 20 }));
+        },
+        width: 56,
+        align: "center",
+    },
+];
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker = true, scrollToToday = true, readonly: readonlyProp = false, readonlyDates: readonlyDatesProp = false, readonlyProgress: readonlyProgressProp = false, zoom: zoomProp, defaultZoom = "day", onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted = false, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth = 400, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp = [], gridLines = "both", className, theme: themeOverrides, rowHeight = 40, }) {
+    // ----- Controlled / uncontrolled state -----
+    const [uncontrolledZoom, setUncontrolledZoom] = useState(defaultZoom);
+    const isZoomControlled = zoomProp !== undefined;
+    const zoom = isZoomControlled ? zoomProp : uncontrolledZoom;
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsedGroups);
+    const isCollapsedControlled = collapsedProp !== undefined;
+    const collapsedGroups = isCollapsedControlled ? collapsedProp : uncontrolledCollapsed;
+    const [uncontrolledHide, setUncontrolledHide] = useState(defaultHideCompleted);
+    const isHideControlled = hideCompletedProp !== undefined;
+    const hideCompleted = isHideControlled ? hideCompletedProp : uncontrolledHide;
+    const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultTablePanelWidth);
+    const isWidthControlled = tablePanelWidthProp !== undefined;
+    const tablePanelWidth = isWidthControlled ? tablePanelWidthProp : uncontrolledWidth;
+    // ----- Hover / focus / drag state -----
+    const [hoveredTaskId, setHoveredTaskId] = useState(null);
+    const [focusedTaskId, setFocusedTaskId] = useState(null);
+    const [activeDrag, setActiveDrag] = useState(null);
+    // ----- Handlers -----
+    const setZoom = useCallback((val) => {
+        if (!isZoomControlled)
+            setUncontrolledZoom(val);
+        onZoomChange === null || onZoomChange === void 0 ? void 0 : onZoomChange(val);
+    }, [isZoomControlled, onZoomChange]);
+    const toggleGroup = useCallback((groupId) => {
+        const next = collapsedGroups.includes(groupId)
+            ? collapsedGroups.filter((id) => id !== groupId)
+            : [...collapsedGroups, groupId];
+        if (!isCollapsedControlled)
+            setUncontrolledCollapsed(next);
+        onCollapsedGroupsChange === null || onCollapsedGroupsChange === void 0 ? void 0 : onCollapsedGroupsChange(next);
+    }, [collapsedGroups, isCollapsedControlled, onCollapsedGroupsChange]);
+    const setHideCompleted = useCallback((val) => {
+        if (!isHideControlled)
+            setUncontrolledHide(val);
+        onHideCompletedChange === null || onHideCompletedChange === void 0 ? void 0 : onHideCompletedChange(val);
+    }, [isHideControlled, onHideCompletedChange]);
+    const setTablePanelWidth = useCallback((val) => {
+        if (!isWidthControlled)
+            setUncontrolledWidth(val);
+        onTablePanelWidthChange === null || onTablePanelWidthChange === void 0 ? void 0 : onTablePanelWidthChange(val);
+    }, [isWidthControlled, onTablePanelWidthChange]);
+    // ----- Derived data -----
+    const resolvedColumns = columns !== null && columns !== void 0 ? columns : defaultColumns;
+    const dates = useGanttDates(data, zoom, startDate, endDate);
+    const rows = useGanttLayout(groups, data, collapsedGroups, hideCompleted);
+    const { tableRef, chartRef, handleTableScroll, handleChartScroll } = useGanttScrollSync();
+    const theme = useMemo(() => ({ ...ganttChartTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    // ----- Context -----
+    const contextValue = useMemo(() => ({
+        groups,
+        tasks: data,
+        columns: resolvedColumns,
+        rows,
+        rangeStart: dates.rangeStart,
+        rangeEnd: dates.rangeEnd,
+        totalDays: dates.totalDays,
+        dayWidth: dates.dayWidth,
+        zoom,
+        collapsedGroups,
+        hideCompleted,
+        tablePanelWidth,
+        readonly: readonlyProp,
+        readonlyDates: readonlyDatesProp,
+        readonlyProgress: readonlyProgressProp,
+        onTaskUpdate,
+        onTaskDelete,
+        onTaskDuplicate,
+        onTaskAdd,
+        onGroupAdd,
+        onTaskClick,
+        toggleGroup,
+        setZoom,
+        setHideCompleted,
+        setTablePanelWidth,
+        theme,
+        todayMarker,
+        todayOffset: dates.todayOffset,
+        scrollToToday,
+        holidays: holidaysProp,
+        gridLines,
+        rowHeight,
+    }), [
+        groups, data, resolvedColumns, rows, dates, zoom, collapsedGroups,
+        hideCompleted, tablePanelWidth, readonlyProp, readonlyDatesProp,
+        readonlyProgressProp, onTaskUpdate, onTaskDelete, onTaskDuplicate,
+        onTaskAdd, onGroupAdd, onTaskClick, toggleGroup, setZoom,
+        setHideCompleted, setTablePanelWidth,
+        theme, todayMarker, scrollToToday, holidaysProp, gridLines, rowHeight,
+    ]);
+    // Interaction state changes frequently (hover, focus, drag) — kept in a
+    // separate context so that stable consumers don't re-render.
+    const interactionValue = useMemo(() => ({
+        hoveredTaskId,
+        setHoveredTaskId,
+        focusedTaskId,
+        setFocusedTaskId,
+        activeDrag,
+        setActiveDrag,
+    }), [hoveredTaskId, focusedTaskId, activeDrag]);
+    return (jsx(GanttContext.Provider, { value: contextValue, children: jsx(GanttInteractionContext.Provider, { value: interactionValue, children: jsxs("div", { className: cn(theme.baseStyle, className), children: [jsx(GanttToolbar, {}), jsxs("div", { className: "flex flex-1 min-h-0 overflow-x-auto", children: [jsx(GanttTablePanel, { ref: tableRef, onScroll: handleTableScroll }), jsx(GanttSplitter, {}), jsx(GanttChartPanel, { ref: chartRef, onScroll: handleChartScroll, days: dates.days, monthSpans: dates.monthSpans })] })] }) }) }));
+}
+GanttChartComponent.displayName = "GanttChart";
+
+export { GanttChartComponent as GanttChart, useGanttContext, useGanttInteraction };

package/dist/components/data-display/GanttChart/GanttChart.theme.d.ts

@@ -0,0 +1,2 @@
+import type { GanttChartThemeOverrides } from "./GanttChart.types";
+export declare const ganttChartTheme: GanttChartThemeOverrides;

package/dist/components/data-display/GanttChart/GanttChart.theme.js

@@ -0,0 +1,23 @@
+const ganttChartTheme = {
+    baseStyle: "flex flex-col w-full overflow-hidden text-base",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
+    chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    tableHeaderCellStyle: "px-3 font-medium text-[var(--color-text-secondary)] truncate",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
+    timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
+    timelineMonthStyle: "text-sm font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
+    timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
+    gridLineStyle: "border-r border-[var(--color-border)]/30",
+    weekendStyle: "bg-[var(--color-background-secondary)]/50",
+    todayMarkerStyle: "bg-[var(--color-primary)] w-px",
+    todayColumnStyle: "bg-[var(--color-primary)]/5",
+    taskBarStyle: "absolute rounded-md cursor-pointer flex items-center",
+    groupBarStyle: "absolute rounded-md opacity-25",
+    splitterStyle: "hidden sm:block w-1 cursor-col-resize bg-[var(--color-border)] hover:bg-[var(--color-primary)] transition-colors shrink-0",
+};
+
+export { ganttChartTheme };

package/dist/components/data-display/GanttChart/GanttChart.types.d.ts

@@ -0,0 +1,162 @@
+import React, { ReactNode } from "react";
+export interface GanttTask {
+    id: string;
+    groupId: string;
+    title: string;
+    startDate: Date | string;
+    endDate: Date | string;
+    progress: number;
+    assignee?: {
+        name: string;
+        avatar?: string;
+    };
+    color?: string;
+    completed?: boolean;
+    dependencies?: string[];
+    milestone?: boolean;
+    [key: string]: unknown;
+}
+export interface GanttHoliday {
+    date: Date | string;
+    label: string;
+    color?: string;
+}
+export interface GanttGroup {
+    id: string;
+    title: string;
+    color: string;
+    order?: number;
+}
+export interface GanttColumn<T extends GanttTask = GanttTask> {
+    id: string;
+    header: string;
+    accessor: keyof T | ((task: T) => ReactNode | string | number | boolean | null | undefined);
+    cell?: (task: T, group: GanttGroup) => ReactNode;
+    width?: number;
+    align?: "left" | "center" | "right";
+}
+export interface GanttDragState {
+    taskId: string;
+    mode: "move" | "resize-left" | "resize-right";
+    deltaX: number;
+}
+export type GanttZoom = "day" | "week" | "quarter" | "month" | "year";
+export declare const DAY_WIDTHS: Record<GanttZoom, number>;
+export type GanttRowType = "group" | "task";
+export interface GanttGroupRow {
+    type: "group";
+    group: GanttGroup;
+    taskCount: number;
+    completedCount: number;
+    earliestStart: Date;
+    latestEnd: Date;
+}
+export interface GanttTaskRow {
+    type: "task";
+    task: GanttTask;
+    group: GanttGroup;
+}
+export type GanttRow = GanttGroupRow | GanttTaskRow;
+export interface GanttChartThemeOverrides {
+    baseStyle?: string;
+    toolbarStyle?: string;
+    tablePanelStyle?: string;
+    chartPanelStyle?: string;
+    tableHeaderStyle?: string;
+    tableHeaderCellStyle?: string;
+    tableGroupRowStyle?: string;
+    tableTaskRowStyle?: string;
+    tableCellStyle?: string;
+    timelineHeaderStyle?: string;
+    timelineMonthStyle?: string;
+    timelineDayStyle?: string;
+    gridLineStyle?: string;
+    weekendStyle?: string;
+    todayMarkerStyle?: string;
+    todayColumnStyle?: string;
+    taskBarStyle?: string;
+    groupBarStyle?: string;
+    splitterStyle?: string;
+}
+export interface GanttContextValue {
+    groups: GanttGroup[];
+    tasks: GanttTask[];
+    columns: GanttColumn[];
+    rows: GanttRow[];
+    rangeStart: Date;
+    rangeEnd: Date;
+    totalDays: number;
+    dayWidth: number;
+    zoom: GanttZoom;
+    collapsedGroups: string[];
+    hideCompleted: boolean;
+    tablePanelWidth: number;
+    readonly: boolean;
+    readonlyDates: boolean;
+    readonlyProgress: boolean;
+    onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
+    onTaskDelete?: (taskId: string) => void;
+    onTaskDuplicate?: (taskId: string) => void;
+    onTaskAdd?: (groupId: string) => void;
+    onGroupAdd?: () => void;
+    onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+    toggleGroup: (groupId: string) => void;
+    setZoom: (zoom: GanttZoom) => void;
+    setHideCompleted: (hide: boolean) => void;
+    setTablePanelWidth: (width: number) => void;
+    theme: GanttChartThemeOverrides;
+    todayMarker: boolean;
+    todayOffset: number | null;
+    scrollToToday: boolean;
+    holidays: GanttHoliday[];
+    gridLines: "both" | "vertical" | "horizontal" | "none";
+    rowHeight: number;
+}
+/**
+ * Frequently-changing interaction state is separated into its own context
+ * so that stable consumers (toolbar, grid, table header) don't re-render
+ * on hover/focus/drag changes.
+ */
+export interface GanttInteractionValue {
+    hoveredTaskId: string | null;
+    setHoveredTaskId: (id: string | null) => void;
+    focusedTaskId: string | null;
+    setFocusedTaskId: (id: string | null) => void;
+    activeDrag: GanttDragState | null;
+    setActiveDrag: (state: GanttDragState | null) => void;
+}
+export interface GanttChartProps {
+    data: GanttTask[];
+    groups: GanttGroup[];
+    columns?: GanttColumn[];
+    startDate?: Date | string;
+    endDate?: Date | string;
+    todayMarker?: boolean;
+    scrollToToday?: boolean;
+    readonly?: boolean;
+    readonlyDates?: boolean;
+    readonlyProgress?: boolean;
+    zoom?: GanttZoom;
+    defaultZoom?: GanttZoom;
+    onZoomChange?: (zoom: GanttZoom) => void;
+    collapsedGroups?: string[];
+    defaultCollapsedGroups?: string[];
+    onCollapsedGroupsChange?: (groups: string[]) => void;
+    hideCompleted?: boolean;
+    defaultHideCompleted?: boolean;
+    onHideCompletedChange?: (hide: boolean) => void;
+    tablePanelWidth?: number;
+    defaultTablePanelWidth?: number;
+    onTablePanelWidthChange?: (width: number) => void;
+    onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
+    onTaskDelete?: (taskId: string) => void;
+    onTaskDuplicate?: (taskId: string) => void;
+    onTaskAdd?: (groupId: string) => void;
+    onGroupAdd?: () => void;
+    onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+    holidays?: GanttHoliday[];
+    gridLines?: "both" | "vertical" | "horizontal" | "none";
+    className?: string;
+    theme?: GanttChartThemeOverrides;
+    rowHeight?: number;
+}

package/dist/components/data-display/GanttChart/GanttChart.types.js

@@ -0,0 +1,9 @@
+const DAY_WIDTHS = {
+    day: 40,
+    week: 16,
+    quarter: 8,
+    month: 4,
+    year: 1.2,
+};
+
+export { DAY_WIDTHS };

package/dist/components/data-display/GanttChart/GanttChart.utils.d.ts

@@ -0,0 +1,80 @@
+import type { GanttTask, GanttGroup, GanttRow, GanttDragState } from "./GanttChart.types";
+export { toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, } from "../../../utils/dateUtils";
+/**
+ * Day-offset of `date` from `rangeStart` (0-based).
+ */
+export declare function getDayOffset(date: Date | string, rangeStart: Date | string): number;
+/**
+ * Generate every date between rangeStart and rangeEnd (inclusive).
+ */
+export declare function generateDayColumns(rangeStart: Date, rangeEnd: Date): Date[];
+/**
+ * Group consecutive days into month spans.
+ * Returns [{month: "Jan 2024", startIndex: 0, span: 31}, …]
+ */
+export interface MonthSpan {
+    label: string;
+    startIndex: number;
+    span: number;
+}
+export declare function generateMonthSpans(days: Date[]): MonthSpan[];
+/**
+ * Auto-detect date range from task data with padding.
+ */
+export declare function autoDateRange(tasks: GanttTask[], paddingDays?: number): {
+    start: Date;
+    end: Date;
+};
+/**
+ * Compute group summary: earliest start, latest end, completed count.
+ */
+export declare function computeGroupSummary(group: GanttGroup, tasks: GanttTask[]): {
+    earliestStart: Date;
+    latestEnd: Date;
+    completedCount: number;
+};
+/**
+ * Format a short day label (e.g. "15", "Mon 15").
+ */
+export declare function formatDayLabel(date: Date, zoom: "day" | "week" | "quarter" | "month" | "year"): string;
+/**
+ * Format duration as "X days".
+ */
+export declare function formatDuration(startDate: Date | string, endDate: Date | string): string;
+/**
+ * Format a date as "Jan 15" style short label.
+ */
+export declare function formatDateShort(date: Date | string): string;
+export interface WeekSpan {
+    label: string;
+    startIndex: number;
+    span: number;
+}
+/**
+ * Group consecutive days into week spans with "W3" style labels.
+ */
+export declare function generateWeekSpans(days: Date[]): WeekSpan[];
+export interface ArrowPath {
+    id: string;
+    d: string;
+    isBackward: boolean;
+}
+/**
+ * Calculate an SVG path string for a dependency arrow from one task bar to another.
+ *
+ * Two routing modes:
+ * - Forward: target left >= source right + minGap → clean L-shaped path through midpoint
+ * - Overlap/backward: bars overlap horizontally → route below both bars
+ */
+export declare function calculateDependencyPath(fromLeft: number, fromWidth: number, fromTop: number, fromHeight: number, toLeft: number, toTop: number, toHeight: number): {
+    d: string;
+    isBackward: boolean;
+};
+/**
+ * Build all dependency arrow paths for visible tasks.
+ */
+export declare function buildDependencyArrows(tasks: GanttTask[], rows: GanttRow[], dayWidth: number, rowHeight: number, rangeStart: Date, activeDrag?: GanttDragState | null): ArrowPath[];
+/**
+ * Calculate expected progress (0-100) based on elapsed time.
+ */
+export declare function calculateExpectedProgress(startDate: Date | string, endDate: Date | string): number;