dishui 0.0.64 → 0.0.66

package/dist/components/pro/Gantt/types.d.ts

@@ -0,0 +1,478 @@
+/**
+ * DishUI Gantt Chart - Type Definitions
+ *
+ * A highly configurable Gantt chart component supporting:
+ * - Arbitrary-level hierarchical data
+ * - Customizable holiday calendars
+ * - Per-category working time configuration
+ * - Configurable time rendering windows
+ */
+import type { ReactNode } from "react";
+/** Unique identifier for a Gantt node */
+export type GanttNodeId = string | number;
+/**
+ * A node in the Gantt tree. Supports arbitrary nesting depth.
+ * Each node can represent any level of hierarchy (project, phase, task, subtask, etc.)
+ */
+export interface GanttNode {
+    /** Unique identifier */
+    id: GanttNodeId;
+    /** Display name */
+    label: string;
+    /** Category/type of this node (e.g. 'project', 'phase', 'task', 'milestone') — used for style & behavior config */
+    category?: string;
+    /** Start date (ISO 8601 string or Date) */
+    startDate?: string | Date;
+    /** End date (ISO 8601 string or Date) */
+    endDate?: string | Date;
+    /** Duration in working days (alternative to endDate) */
+    workingDays?: number;
+    /** Progress percentage (0–100) */
+    progress?: number;
+    /** Whether this node is a milestone (renders as diamond instead of bar) */
+    milestone?: boolean;
+    /** Whether this node should be rendered on the timeline (default: true) */
+    renderable?: boolean;
+    /** Child nodes (arbitrary depth) */
+    children?: GanttNode[];
+    /** Custom metadata for application use */
+    meta?: Record<string, any>;
+    /** Dependencies — IDs of nodes that must complete before this one */
+    dependencies?: GanttNodeId[];
+    /** Assignee or owner display text */
+    assignee?: string;
+    /** Optional URL link for this node (opens when link icon is clicked) */
+    link?: string;
+    /** Custom bar color for this specific node (overrides category color) */
+    barColor?: string;
+}
+/**
+ * A single holiday definition
+ */
+export interface HolidayEntry {
+    /** Date string in YYYY-MM-DD format */
+    date: string;
+    /** Display name of the holiday */
+    name?: string;
+    /** If true, this is a compensatory workday (e.g., 调休 in China) — treated as a working day */
+    isWorkday?: boolean;
+}
+/**
+ * Holiday calendar configuration.
+ * Determines which days are non-working days.
+ *
+ * Priority resolution for any given date:
+ * 1. `isNonWorkingDay` function (if provided) overrides all other logic.
+ * 2. Entries with `isWorkday: true` (调休/compensatory workdays) force a date to be a working day,
+ *    even if it falls on a weekend.
+ * 3. Entries without `isWorkday` (or `isWorkday: false`) mark the date as a holiday/non-working day.
+ * 4. If `weekendsOff` is true (default), Saturday & Sunday are non-working days.
+ *
+ * Example (China 2025 Spring Festival):
+ * ```
+ * {
+ *   weekendsOff: true,
+ *   entries: [
+ *     { date: "2025-01-28", name: "春节" },   // holiday
+ *     { date: "2025-01-26", name: "调休", isWorkday: true }, // Sunday but work
+ *   ]
+ * }
+ * ```
+ */
+export interface HolidayCalendar {
+    /** List of holiday/special day entries */
+    entries: HolidayEntry[];
+    /**
+     * Whether weekends (Saturday & Sunday) are non-working days.
+     * Default: true.
+     * Set to false for industries that work on weekends (e.g., retail, service).
+     * Note: Even when true, entries with `isWorkday: true` can override specific weekends (调休).
+     */
+    weekendsOff?: boolean;
+    /** Custom function to determine if a date is a non-working day (overrides entries + weekends logic) */
+    isNonWorkingDay?: (date: Date) => boolean;
+}
+/**
+ * Defines the renderable time window within each day.
+ * For example, { startHour: 8, endHour: 16 } means only 8:00–16:00 is rendered.
+ */
+export interface TimeWindow {
+    /** Start hour (0–23). Default: 0 */
+    startHour: number;
+    /** End hour (0–24, exclusive). Default: 24 */
+    endHour: number;
+}
+/** Line style for dependency connections */
+export type DependencyLineStyle = "solid" | "dashed" | "dotted";
+/**
+ * A dependency link between two nodes, rendered as a polyline connector.
+ */
+export interface GanttDependencyLink {
+    /** Source node ID (from) */
+    fromId: GanttNodeId;
+    /** Target node ID (to) */
+    toId: GanttNodeId;
+    /** Line style. Default: 'solid' */
+    lineStyle?: DependencyLineStyle;
+    /** Line color (CSS color string). Default: theme-based */
+    color?: string;
+    /** Line width in pixels. Default: 1.5 */
+    lineWidth?: number;
+    /** Whether to show an arrow at the target end. Default: true */
+    showArrow?: boolean;
+}
+/**
+ * Configuration for the timeline grid appearance.
+ */
+export interface GanttGridConfig {
+    /** Whether to show vertical grid lines between each cell. Default: true */
+    showCellBorders?: boolean;
+    /** Color of regular cell border lines. Default: theme-based */
+    cellBorderColor?: string;
+    /** Background color for weekend columns. Default: theme-based */
+    weekendColor?: string;
+    /** Background color for holiday columns (distinct from weekends). Default: light pink '#fff0f3' */
+    holidayColor?: string;
+    /** Background color for today's column. Default: theme-based */
+    todayColor?: string;
+    /** Whether to show horizontal row separator lines in the timeline. Default: false */
+    showRowLines?: boolean;
+}
+/**
+ * Per-category rendering and behavior configuration.
+ * Categories are matched against GanttNode.category.
+ */
+export interface GanttCategoryConfig {
+    /** Display label for this category */
+    label?: string;
+    /** Bar color (CSS color string) */
+    color?: string;
+    /** Bar background color (if different from color) */
+    backgroundColor?: string;
+    /** Bar height as percentage of row height (0–1). Default: 0.6 */
+    barHeight?: number;
+    /** Bar border radius in pixels. Default: 4 */
+    borderRadius?: number;
+    /** Whether to show progress indicator inside the bar */
+    showProgress?: boolean;
+    /** Whether this category's dates should skip non-working days when computing duration. Default: false */
+    skipNonWorkingDays?: boolean;
+    /** Time window for rendering this category's bars. If not set, uses global timeWindow. */
+    timeWindow?: TimeWindow;
+    /** Custom render function for the bar content */
+    renderBar?: (node: GanttNode, barProps: GanttBarRenderProps) => ReactNode;
+    /** Custom render function for the tree row label */
+    renderLabel?: (node: GanttNode) => ReactNode;
+    /** Whether bars of this category are draggable. Default: inherits from global */
+    draggable?: boolean;
+    /** Whether bars of this category are resizable. Default: inherits from global */
+    resizable?: boolean;
+    /** Render style: 'bar' (filled rectangle), 'line' (thin line spanning children), 'segments' (multiple segments per working day) */
+    renderStyle?: "bar" | "line" | "segments";
+}
+/**
+ * Props passed to custom bar render functions
+ */
+export interface GanttBarRenderProps {
+    /** The node being rendered */
+    node: GanttNode;
+    /** Pixel width of the bar */
+    width: number;
+    /** Pixel height of the bar */
+    height: number;
+    /** Whether the bar is currently being dragged */
+    isDragging: boolean;
+    /** Whether the bar is selected */
+    isSelected: boolean;
+    /** Formatted start date string */
+    startDateFormatted: string;
+    /** Formatted end date string */
+    endDateFormatted: string;
+    /** Duration text (e.g. "5d", "2w") */
+    durationText: string;
+}
+/** Available zoom/scale levels */
+export type GanttScaleLevel = "year" | "quarter" | "month" | "week" | "day" | "halfday" | "hour";
+/**
+ * Configuration for a specific scale level
+ */
+export interface GanttScaleConfig {
+    /** Display label */
+    label: string;
+    /** Width of each cell in pixels */
+    cellWidth: number;
+    /** Number of time slots per day at this scale */
+    slotsPerDay: number;
+}
+/**
+ * Column definition for the left tree panel
+ */
+export interface GanttColumn {
+    /** Unique key for the column */
+    key: string;
+    /** Column header title */
+    title: string;
+    /** Column width in pixels */
+    width?: number;
+    /** Minimum column width */
+    minWidth?: number;
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Custom cell renderer */
+    render?: (node: GanttNode, column: GanttColumn) => ReactNode;
+}
+/**
+ * Information about a drag/resize operation on a Gantt bar
+ */
+export interface GanttBarChangeEvent {
+    /** The affected node */
+    node: GanttNode;
+    /** New start date */
+    newStartDate: Date;
+    /** New end date */
+    newEndDate: Date;
+    /** New working days (if skipNonWorkingDays is enabled) */
+    newWorkingDays?: number;
+    /** Type of change */
+    changeType: "move" | "resize-start" | "resize-end";
+    /** The original node before the change */
+    originalNode: GanttNode;
+}
+/**
+ * Context menu event
+ */
+export interface GanttContextMenuEvent {
+    /** The node that was right-clicked (null if clicked on empty area) */
+    node: GanttNode | null;
+    /** Mouse position */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** The date at the click position */
+    date: Date;
+}
+/**
+ * Today marker configuration
+ */
+export interface GanttTodayMarker {
+    /** Whether to show the today marker line. Default: true */
+    visible?: boolean;
+    /** Color of the today line */
+    color?: string;
+    /** Whether to auto-scroll to today on mount. Default: true */
+    autoScroll?: boolean;
+}
+/**
+ * Tooltip configuration
+ */
+export interface GanttTooltipConfig {
+    /** Whether tooltips are enabled. Default: true */
+    enabled?: boolean;
+    /** Custom tooltip render function */
+    render?: (node: GanttNode) => ReactNode;
+}
+/**
+ * i18n labels for the Gantt component
+ */
+export interface GanttLabels {
+    /** Title for the tree panel header */
+    treePanelTitle?: string;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** "Expand All" button text */
+    expandAll?: string;
+    /** "Collapse All" button text */
+    collapseAll?: string;
+    /** "Today" button text */
+    today?: string;
+    /** "Zoom In" tooltip */
+    zoomIn?: string;
+    /** "Zoom Out" tooltip */
+    zoomOut?: string;
+    /** "No data" text */
+    noData?: string;
+    /** Weekday short names (Sun–Sat) */
+    weekDays?: [string, string, string, string, string, string, string];
+    /** Month short names (Jan–Dec) */
+    monthNames?: [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string
+    ];
+    /** "Working days" label */
+    workingDays?: string;
+    /** "Calendar days" label */
+    calendarDays?: string;
+    /** "Add" button tooltip */
+    add?: string;
+    /** "Delete" button tooltip */
+    delete?: string;
+    /** "Edit" label tooltip */
+    edit?: string;
+    /** "Link" tooltip */
+    link?: string;
+}
+/**
+ * Props for the Gantt chart component
+ */
+export interface GanttProps {
+    /** Tree data — supports arbitrary nesting depth */
+    data: GanttNode[];
+    /**
+     * Category configurations — maps category strings to rendering/behavior configs.
+     * Categories not listed here use the 'default' config.
+     */
+    categories?: Record<string, GanttCategoryConfig>;
+    /** Holiday calendar configuration */
+    holidays?: HolidayCalendar;
+    /**
+     * Global time window — defines which hours of the day are rendered.
+     * Default: { startHour: 0, endHour: 24 } (full day)
+     */
+    timeWindow?: TimeWindow;
+    /** Column definitions for the tree panel. If not provided, only shows node label. */
+    columns?: GanttColumn[];
+    /** Initial scale level. Default: 'day' */
+    defaultScale?: GanttScaleLevel;
+    /** Available scale levels (subset of all levels). Default: all levels */
+    availableScales?: GanttScaleLevel[];
+    /** Custom scale configurations (override defaults) */
+    scaleConfigs?: Partial<Record<GanttScaleLevel, GanttScaleConfig>>;
+    /** Width of the tree panel in pixels. Default: 300 */
+    treePanelWidth?: number;
+    /** Minimum width of the tree panel. Default: 200 */
+    treePanelMinWidth?: number;
+    /** Maximum width of the tree panel. Default: 600 */
+    treePanelMaxWidth?: number;
+    /** Whether the tree panel is resizable. Default: true */
+    treePanelResizable?: boolean;
+    /** Height of each row in pixels. Default: 36 */
+    rowHeight?: number;
+    /** Whether bars are draggable (can be overridden per category). Default: false */
+    draggable?: boolean;
+    /** Whether bars are resizable (can be overridden per category). Default: false */
+    resizable?: boolean;
+    /** Read-only mode — disables all interactions. Default: false */
+    readOnly?: boolean;
+    /** IDs of initially expanded nodes. Default: all expanded */
+    defaultExpandedIds?: GanttNodeId[];
+    /** Whether to expand all nodes by default. Default: true */
+    defaultExpandAll?: boolean;
+    /** Today marker configuration */
+    todayMarker?: GanttTodayMarker;
+    /** Tooltip configuration */
+    tooltip?: GanttTooltipConfig;
+    /** i18n labels */
+    labels?: GanttLabels;
+    /** Show search input in tree panel. Default: false */
+    showSearch?: boolean;
+    /** Whether to show non-working day columns with a different background. Default: true */
+    highlightNonWorkingDays?: boolean;
+    /** Grid appearance configuration */
+    grid?: GanttGridConfig;
+    /** Dependency links between nodes (rendered as polyline connectors) */
+    dependencyLinks?: GanttDependencyLink[];
+    /** Called when a new dependency link is created by dragging from one bar's connector to another */
+    onDependencyCreate?: (fromId: GanttNodeId, toId: GanttNodeId) => void;
+    /** Called when a dependency link is clicked */
+    onDependencyClick?: (link: GanttDependencyLink) => void;
+    /** Called when a dependency link is deleted (e.g. via the × button on hover) */
+    onDependencyDelete?: (link: GanttDependencyLink) => void;
+    /** CSS class name for the container */
+    className?: string;
+    /** Component width. Default: '100%' */
+    width?: string | number;
+    /** Component height. Default: '100%' */
+    height?: string | number;
+    /** Called when a bar is moved or resized */
+    onBarChange?: (event: GanttBarChangeEvent) => void;
+    /** Called when a node is clicked in the tree or timeline */
+    onNodeClick?: (node: GanttNode) => void;
+    /** Called when a node is double-clicked */
+    onNodeDoubleClick?: (node: GanttNode) => void;
+    /** Called when right-clicking on the timeline */
+    onContextMenu?: (event: GanttContextMenuEvent) => void;
+    /** Called when a node is expanded/collapsed */
+    onNodeToggle?: (nodeId: GanttNodeId, expanded: boolean) => void;
+    /** Called when the visible date range changes (from scrolling or zooming) */
+    onViewChange?: (startDate: Date, endDate: Date, scale: GanttScaleLevel) => void;
+    /** Called when the scale level changes */
+    onScaleChange?: (scale: GanttScaleLevel) => void;
+    /** Called when a node's label is edited inline (double-click to edit). Return the updated label or undefined to cancel. */
+    onNodeLabelEdit?: (node: GanttNode, newLabel: string) => void;
+    /** Called when requesting to add a sibling node (at the same level, after the given node) */
+    onNodeAdd?: (parentNode: GanttNode | null, siblingNode: GanttNode) => void;
+    /** Called when requesting to add a child node (nested under the given node) */
+    onNodeAddChild?: (parentNode: GanttNode) => void;
+    /** Called when requesting to delete a node */
+    onNodeDelete?: (node: GanttNode) => void;
+    /** Called when a node's link is clicked */
+    onNodeLinkClick?: (node: GanttNode, link: string) => void;
+    /** Custom render for tree node row (entire row) */
+    renderTreeNode?: (node: GanttNode, depth: number, expanded: boolean, toggleExpand: () => void) => ReactNode;
+    /** Custom render for the toolbar area */
+    renderToolbar?: (defaultToolbar: ReactNode) => ReactNode;
+    /** Custom render for the timeline header */
+    renderTimelineHeader?: (dates: Date[], scale: GanttScaleLevel) => ReactNode;
+}
+/**
+ * Flattened node used internally for rendering
+ */
+export interface FlatGanttNode {
+    /** Reference to the original node */
+    node: GanttNode;
+    /** Depth level (0 = root) */
+    depth: number;
+    /** Whether this node is expanded */
+    expanded: boolean;
+    /** Whether this node has children */
+    hasChildren: boolean;
+    /** Computed pixel left offset on the timeline */
+    barLeft: number;
+    /** Computed pixel width on the timeline */
+    barWidth: number;
+    /** Computed start date (resolved from node data) */
+    resolvedStartDate: Date | null;
+    /** Computed end date (resolved from node data) */
+    resolvedEndDate: Date | null;
+    /** Whether this node's bar should be rendered */
+    isRenderable: boolean;
+    /** Category config resolved for this node */
+    categoryConfig: GanttCategoryConfig;
+    /** Index in the visible list */
+    visibleIndex: number;
+}
+/**
+ * Imperative handle for the Gantt component (via React.forwardRef + useImperativeHandle)
+ */
+export interface GanttHandle {
+    /** Scroll the timeline to a specific date */
+    scrollToDate: (date: Date) => void;
+    /** Scroll to today */
+    scrollToToday: () => void;
+    /** Scroll to a specific node */
+    scrollToNode: (nodeId: GanttNodeId) => void;
+    /** Get the current visible date range */
+    getVisibleRange: () => {
+        start: Date;
+        end: Date;
+    };
+    /** Set the scale level programmatically */
+    setScale: (scale: GanttScaleLevel) => void;
+    /** Expand all nodes */
+    expandAll: () => void;
+    /** Collapse all nodes */
+    collapseAll: () => void;
+    /** Expand/collapse a specific node */
+    toggleNode: (nodeId: GanttNodeId, expanded?: boolean) => void;
+}

package/dist/components/pro/Gantt/utils.d.ts

@@ -0,0 +1,124 @@
+/**
+ * DishUI Gantt Chart - Utility Functions
+ *
+ * Core utilities for date math, working day calculations,
+ * and coordinate conversions in the Gantt timeline.
+ */
+import type { GanttNode, HolidayCalendar, TimeWindow, GanttScaleLevel, GanttScaleConfig, GanttCategoryConfig, FlatGanttNode, GanttNodeId } from "./types";
+export declare const DEFAULT_SCALE_CONFIGS: Record<GanttScaleLevel, GanttScaleConfig>;
+export declare const DEFAULT_CATEGORY_CONFIG: GanttCategoryConfig;
+export declare const DEFAULT_TIME_WINDOW: TimeWindow;
+/**
+ * Parse a date value (string or Date) into a Date object.
+ * Handles ISO 8601 strings, YYYY-MM-DD strings, and Date objects.
+ */
+export declare function parseDate(value: string | Date | undefined | null): Date | null;
+/**
+ * Format a Date to YYYY-MM-DD string in local timezone
+ */
+export declare function formatDate(date: Date): string;
+/**
+ * Format a Date to a display string based on scale level
+ */
+export declare function formatDateForScale(date: Date, scale: GanttScaleLevel): string;
+/**
+ * Check if a given date is a weekend (Saturday or Sunday)
+ */
+export declare function isWeekend(date: Date): boolean;
+/**
+ * Check if a date is a non-working day based on the holiday calendar.
+ * Priority: custom function > entries > weekends
+ */
+export declare function isNonWorkingDay(date: Date, calendar?: HolidayCalendar): boolean;
+/**
+ * Calculate the number of working days between two dates (inclusive of both start and end).
+ */
+export declare function calculateWorkingDays(startDate: Date, endDate: Date, calendar?: HolidayCalendar): number;
+/**
+ * Compute the end date from a start date and N working days.
+ * The returned date is the day AFTER the last working day (open interval end).
+ */
+export declare function addWorkingDays(startDate: Date, workingDays: number, calendar?: HolidayCalendar): Date;
+/**
+ * Get the number of calendar days between two dates
+ */
+export declare function daysBetween(start: Date, end: Date): number;
+/**
+ * Add calendar days to a date
+ */
+export declare function addDays(date: Date, days: number): Date;
+/**
+ * Get the start of a day (midnight)
+ */
+export declare function startOfDay(date: Date): Date;
+/**
+ * Get the start of a month
+ */
+export declare function startOfMonth(date: Date): Date;
+/**
+ * Get the start of a year
+ */
+export declare function startOfYear(date: Date): Date;
+/**
+ * Get the start of a quarter
+ */
+export declare function startOfQuarter(date: Date): Date;
+/**
+ * Get the start of a week (Monday)
+ */
+export declare function startOfWeek(date: Date): Date;
+/**
+ * Check if two dates are the same calendar day
+ */
+export declare function isSameDay(a: Date, b: Date): boolean;
+/**
+ * Get the ISO 8601 week number. The week containing January 4 is week 1.
+ * Weeks start on Monday.
+ */
+export declare function getISOWeekNumber(date: Date): number;
+/**
+ * Get the ISO week-numbering year. This may differ from the calendar year
+ * for dates near the start/end of a year.
+ */
+export declare function getISOWeekYear(date: Date): number;
+/**
+ * Compute the date range needed to display all data in the Gantt chart,
+ * with some padding.
+ */
+export declare function computeDateRange(data: GanttNode[], calendar?: HolidayCalendar, paddingDays?: number): {
+    start: Date;
+    end: Date;
+};
+/**
+ * Generate an array of dates between start and end (inclusive)
+ */
+export declare function generateDateRange(start: Date, end: Date): Date[];
+/**
+ * Generate header groups for the timeline (top row: months/years, bottom row: days/hours)
+ */
+export interface TimelineHeaderGroup {
+    label: string;
+    span: number;
+    date: Date;
+}
+export declare function generateHeaderGroups(dates: Date[], scale: GanttScaleLevel): TimelineHeaderGroup[];
+/**
+ * Flatten the hierarchical GanttNode tree into a list of FlatGanttNode,
+ * respecting expanded/collapsed state.
+ */
+export declare function flattenTree(data: GanttNode[], expandedIds: Set<GanttNodeId>, defaultExpandAll: boolean, dateRange: {
+    start: Date;
+    end: Date;
+}, scaleConfig: GanttScaleConfig, categoryConfigs: Record<string, GanttCategoryConfig>, calendar?: HolidayCalendar, globalTimeWindow?: TimeWindow): FlatGanttNode[];
+/**
+ * Convert a pixel x-position on the timeline to a Date
+ */
+export declare function xToDate(x: number, timelineStart: Date, scaleConfig: GanttScaleConfig): Date;
+/**
+ * Convert a Date to a pixel x-position on the timeline
+ */
+export declare function dateToX(date: Date, timelineStart: Date, scaleConfig: GanttScaleConfig): number;
+/**
+ * Clamp a number between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/components/pro/Resizable/Resizable.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type ResizableDirection = 'horizontal' | 'vertical';
+export type ResizablePanelProps = {
+    children: React.ReactNode;
+    /** Initial share as a fraction (0-1). Panels auto-normalise; omit to split evenly. */
+    defaultSize?: number;
+    /** Minimum size in pixels. */
+    minSize?: number;
+    /** Maximum size in pixels. */
+    maxSize?: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const ResizablePanel: React.FC<ResizablePanelProps>;
+export type ResizableHandleProps = {
+    className?: string;
+    /** Width (horizontal) or height (vertical) of the drag handle in px. */
+    size?: number;
+};
+export declare const ResizableHandle: React.FC<ResizableHandleProps>;
+export type ResizableProps = {
+    children: React.ReactNode;
+    direction?: ResizableDirection;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Called on every drag frame with the current panel sizes in px. */
+    onResize?: (sizes: number[]) => void;
+};
+declare const Resizable: React.FC<ResizableProps>;
+export default Resizable;

package/dist/components/pro/Resizable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Resizable, ResizablePanel, ResizableHandle } from './Resizable';
+export type { ResizableProps, ResizablePanelProps, ResizableHandleProps } from './Resizable';