@matsu1321/react-gantt-chart 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matsu132
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,186 @@
+# react-gantt-chart
+
+[![npm version](https://badge.fury.io/js/react-gantt-chart.svg)](https://badge.fury.io/js/react-gantt-chart)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+**The ultimate high-performance, flexible Gantt chart component for modern React.**
+
+`react-gantt-chart` is an ultra-lightweight, high-performance Gantt chart library designed to run **smoothly at 60fps** even when managing large-scale projects with over 10,000 tasks.
+
+Built with a custom **Zero Dependency** architecture, it avoids heavy third-party libraries. By incorporating advanced rendering optimization via Virtual DOM (Virtualization) and native scrolling for seamless horizontal scroll synchronization, it overturns the common perception of Gantt chart libraries as being "heavy", "slow", and "clunky".
+
+---
+
+## 🌟 Why choose `react-gantt-chart`?
+
+- **⚡ Groundbreaking Performance**: Automatically removes off-screen elements from the DOM. Even with tens of thousands of tasks, it only renders the few dozen rows visible on the screen, resulting in zero latency.
+- **🎮 Intuitive Interactions**: Seamlessly modify task duration (slide), resize, and update progress rates using drag-and-drop mouse operations.
+- **📱 Perfect Scroll Synchronization**: The task tree on the left and the timeline on the right are perfectly synchronized pixel by pixel. No matter how fast you scroll, there is no misalignment or delay.
+- **🛠 Flexible Customization**: Highly extensible to fit your project's needs, including custom label formatters, arbitrary locale support (fully supports `en-US`, `ja-JP`, etc.), and task-specific styling.
+- **🔒 Type-Safe Reliability (TypeScript)**: Built entirely in TypeScript, ensuring a robust design and allowing you to develop safely with powerful IDE auto-completion support.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-gantt-chart
+```
+
+or
+
+```bash
+yarn add react-gantt-chart
+```
+
+---
+
+## 🔌 Quick Start
+
+```tsx
+import React, { useState } from "react";
+import { Gantt, ViewMode, Task } from "react-gantt-chart";
+import "react-gantt-chart/dist/style.css";
+
+const initialTasks: Task[] = [
+  {
+    id: "project-1",
+    name: "Product Development Project",
+    start: new Date(2026, 4, 1),
+    end: new Date(2026, 4, 15),
+    type: "project",
+    progress: 45,
+    displayOrder: 1,
+    hideChildren: false,
+  },
+  {
+    id: "task-1-1",
+    name: "Requirement Definition & Design",
+    start: new Date(2026, 4, 1),
+    end: new Date(2026, 4, 5),
+    type: "task",
+    progress: 80,
+    project: "project-1",
+    displayOrder: 2,
+  },
+  {
+    id: "task-1-2",
+    name: "Frontend Development",
+    start: new Date(2026, 4, 6),
+    end: new Date(2026, 4, 12),
+    type: "task",
+    progress: 30,
+    project: "project-1",
+    dependencies: ["task-1-1"],
+    displayOrder: 3,
+  },
+  {
+    id: "milestone-1",
+    name: "Alpha Release",
+    start: new Date(2026, 4, 15),
+    end: new Date(2026, 4, 15),
+    type: "milestone",
+    progress: 0,
+    project: "project-1",
+    dependencies: ["task-1-2"],
+    displayOrder: 4,
+  },
+];
+
+export const MyGanttChart = () => {
+  const [tasks, setTasks] = useState<Task[]>(initialTasks);
+  const [view, setView] = useState<ViewMode>(ViewMode.Day);
+
+  const handleDateChange = (updatedTask: Task, _children: Task[]) => {
+    setTasks(prev => prev.map(t => t.id === updatedTask.id ? updatedTask : t));
+  };
+
+  const handleProgressChange = (updatedTask: Task, _children: Task[]) => {
+    setTasks(prev => prev.map(t => t.id === updatedTask.id ? updatedTask : t));
+  };
+
+  const handleExpanderClick = (task: Task) => {
+    setTasks(prev => prev.map(t => t.id === task.id ? { ...t, hideChildren: !t.hideChildren } : t));
+  };
+
+  return (
+    <div style={{ width: "100%", height: "600px" }}>
+      <Gantt
+        tasks={tasks}
+        viewMode={view}
+        locale="en-US"
+        ganttHeight={500}
+        onDateChange={handleDateChange}
+        onProgressChange={handleProgressChange}
+        onExpanderClick={handleExpanderClick}
+      />
+    </div>
+  );
+};
+```
+
+---
+
+## 🛠️ API Reference
+
+### `Gantt` Component Props
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `tasks` | `Task[]` | **Required** | The array of tasks to display |
+| `viewMode` | `ViewMode` | `ViewMode.Day` | The time scale of the calendar (display unit) |
+| `locale` | `string` | `"en-GB"` | Localization string. E.g., `"en-US"`, `"ja-JP"` |
+| `ganttHeight` | `number` | `0` (Auto) | The total height of the Gantt chart (px) |
+| `rowHeight` | `number` | `50` | The height per task row (px) |
+| `headerHeight` | `number` | `50` | The height of the calendar and table headers (px) |
+| `columnWidth` | `number` | *Depends on ViewMode* | The width per date column (px) |
+| `listCellWidth` | `string` | `"155px"` | The total width of the task list on the left |
+| `barFill` | `number` | `60` | The vertical ratio of the task bar relative to the row height (%) |
+| `barCornerRadius` | `number` | `3` | The border-radius of the task bar (px) |
+| `handleWidth` | `number` | `8` | The width of the left/right drag detection area for resizing (px) |
+| `fontFamily` | `string` | `"Arial, ..."` | The font family for the entire chart |
+| `fontSize` | `string` | `"14px"` | The font size for the entire chart |
+| `rtl` | `boolean` | `false` | Enable Right-to-Left (RTL) layout rendering |
+| `todayColor` | `string` | `"rgba(...)"` | The background color of the grid representing "today" |
+
+### Event Handlers
+
+| Event Name | Signature | Description |
+| :--- | :--- | :--- |
+| `onDateChange` | `(task: Task, children: Task[]) => void \| Promise<void>` | Called when a task period change (drag/resize) is completed |
+| `onProgressChange` | `(task: Task, children: Task[]) => void \| Promise<void>` | Called when the progress handle is dragged |
+| `onExpanderClick` | `(task: Task) => void` | Called when the expand/collapse icon of a project is clicked |
+| `onSelect` | `(task: Task, isSelected: boolean) => void` | Called when a task is clicked and its selection state changes |
+| `onDoubleClick` | `(task: Task) => void` | Called when a task is double-clicked |
+| `onClick` | `(task: Task) => void` | Called when a task is single-clicked |
+| `onDelete` | `(task: Task) => void` | Called when a task deletion action occurs |
+
+---
+
+## 🎨 Styling Customization
+
+Each `Task` object can have a `styles` property, allowing you to define individual color designs for each task.
+
+```typescript
+export interface Task {
+  id: string;
+  name: string;
+  start: Date;
+  end: Date;
+  type: TaskType;       // 'task' | 'project' | 'milestone'
+  progress: number;     // 0 - 100
+  styles?: {
+    backgroundColor?: string;
+    backgroundSelectedColor?: string;
+    progressColor?: string;
+    progressSelectedColor?: string;
+  };
+  // ...
+}
+```
+
+---
+
+## 📄 License
+
+MIT

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { ViewMode } from '../../types/public-types';
+import { CalendarSetup } from '../../types/calendar-setup';
+
+export type CalendarProps = {
+    dateSetup: CalendarSetup;
+    locale: string;
+    viewMode: ViewMode;
+    headerHeight: number;
+    columnWidth: number;
+    fontFamily: string;
+    fontSize: string;
+    rtl?: boolean;
+    calendarTopHeaderFormat?: (date: Date, viewMode: ViewMode) => string;
+    calendarBottomHeaderFormat?: (date: Date, viewMode: ViewMode) => string;
+};
+export declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;

package/dist/components/calendar/top-part-of-calendar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+type TopPartOfCalendarProps = {
+    value: string;
+    x1Line: number;
+    y1Line: number;
+    y2Line: number;
+    xText: number;
+    yText: number;
+};
+export declare const TopPartOfCalendar: React.FC<TopPartOfCalendarProps>;
+export default TopPartOfCalendar;

package/dist/components/gantt/dependency-arrow.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { RenderedTask } from '../../types/rendered-task';
+
+type DependencyArrowProps = {
+    taskFrom: RenderedTask;
+    taskTo: RenderedTask;
+    rowHeight: number;
+    taskHeight: number;
+    arrowIndent: number;
+    rtl: boolean;
+};
+/**
+ * タスク間の依存関係を示す矢印
+ */
+export declare const DependencyArrow: React.FC<DependencyArrowProps>;
+export default DependencyArrow;

package/dist/components/gantt/gantt.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { GanttProps } from '../../types/public-types';
+
+export declare const Gantt: React.FC<GanttProps>;

package/dist/components/gantt/task-tooltip.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { Task } from '../../types/public-types';
+import { RenderedTask } from '../../types/rendered-task';
+
+export type TaskTooltipProps = {
+    task: RenderedTask;
+    arrowIndent: number;
+    rtl: boolean;
+    svgWidth: number;
+    fontSize: string;
+    fontFamily: string;
+    mousePos?: {
+        x: number;
+        y: number;
+    };
+    TooltipContent: React.FC<{
+        task: Task;
+        fontSize: string;
+        fontFamily: string;
+    }>;
+};
+/**
+ * ガントチャートのデフォルトツールチップ表示内容
+ */
+export declare const DefaultTooltipContent: React.FC<{
+    task: Task;
+    fontSize: string;
+    fontFamily: string;
+}>;
+/**
+ * ホバー時に表示されるタスク詳細ツールチップ
+ */
+export declare const TaskTooltip: React.FC<TaskTooltipProps>;
+export default TaskTooltip;

package/dist/components/gantt/timeline-content.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Task, EventOption } from '../../types/public-types';
+import { RenderedTask } from '../../types/rendered-task';
+import { GanttInteractionState } from '../../types/interaction-types';
+
+export type TimelineContentProps = {
+    /** 仮想スクロールで切り出した表示中タスク */
+    tasks: RenderedTask[];
+    /** 矢印描画などに使う全タスクリスト */
+    allTasks?: RenderedTask[];
+    interactionState: GanttInteractionState;
+    selectedTask: RenderedTask | undefined;
+    rowHeight: number;
+    columnWidth: number;
+    timeStep: number;
+    svg?: React.RefObject<SVGSVGElement>;
+    svgWidth: number;
+    /** 全タスク合計高さ（SVG の height） */
+    svgHeight?: number;
+    taskHeight: number;
+    arrowColor: string;
+    arrowIndent: number;
+    fontSize: string;
+    fontFamily: string;
+    rtl: boolean;
+    setInteractionState: (value: GanttInteractionState) => void;
+    setFailedTask: (value: RenderedTask | null) => void;
+    setSelectedTask: (taskId: string) => void;
+    mousePos?: {
+        x: number;
+        y: number;
+    };
+    TooltipContent?: React.FC<{
+        task: Task;
+        fontSize: string;
+        fontFamily: string;
+    }>;
+} & EventOption;
+export declare const TimelineContent: React.FC<TimelineContentProps>;
+export default TimelineContent;

package/dist/components/gantt/timeline-panel.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { GridProps } from '../grid/grid';
+import { CalendarProps } from '../calendar/calendar';
+import { TimelineContentProps } from './timeline-content';
+
+export type TimelinePanelProps = {
+    gridProps: GridProps;
+    calendarProps: CalendarProps;
+    contentProps: TimelineContentProps;
+};
+/**
+ * ガントチャートの右側タイムライン領域
+ *
+ * ### スクロールガタつき解消の核心
+ * - カレンダーヘッダーを `position: sticky; top: 0` でスクロールコンテナ内部に配置
+ * - `overflow: auto` を持つコンテナが縦横スクロールを一括管理するため
+ *   「state → 再レンダリング → DOM 書き込み」のフレーム遅延が発生しない
+ * - translateX 計算が不要になりカレンダーとグリッドのズレがゼロになる
+ */
+export declare const TimelinePanel: React.FC<TimelinePanelProps>;
+export default TimelinePanel;

package/dist/components/grid/grid-body.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Task } from '../../types/public-types';
+
+export type GridBodyProps = {
+    tasks: Task[];
+    dates: Date[];
+    svgWidth: number;
+    rowHeight: number;
+    columnWidth: number;
+    todayColor: string;
+    startIndex?: number;
+    endIndex?: number;
+    svgHeight?: number;
+};
+export declare const GridBody: React.FC<GridBodyProps>;
+export default GridBody;

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { GridBodyProps } from './grid-body';
+
+export type GridProps = GridBodyProps;
+export declare const Grid: React.FC<GridProps>;
+export default Grid;

package/dist/components/task-item/bar/bar.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TaskItemProps } from '../task-item';
+
+export declare const Bar: React.FC<TaskItemProps>;
+export default Bar;

package/dist/components/task-item/milestone/milestone.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TaskItemProps } from '../task-item';
+
+export declare const Milestone: React.FC<TaskItemProps>;
+export default Milestone;

package/dist/components/task-item/project/project.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TaskItemProps } from '../task-item';
+
+export declare const Project: React.FC<TaskItemProps>;
+export default Project;

package/dist/components/task-item/task-item.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { RenderedTask } from '../../types/rendered-task';
+import { ChartInteraction } from '../../types/interaction-types';
+
+export type TaskItemProps = {
+    task: RenderedTask;
+    arrowIndent: number;
+    taskHeight: number;
+    isProgressChangeable: boolean;
+    isDateChangeable: boolean;
+    isDelete: boolean;
+    isSelected: boolean;
+    rtl: boolean;
+    onEventStart: (action: ChartInteraction, selectedTask: RenderedTask, event?: React.MouseEvent | React.KeyboardEvent) => void;
+};
+export declare const TaskItem: React.FC<TaskItemProps>;
+export default TaskItem;

package/dist/components/task-list/task-list-header.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export declare const TaskListHeaderDefault: React.FC<{
+    headerHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+}>;
+export type TaskListHeaderProps = typeof TaskListHeaderDefault;
+export default TaskListHeaderDefault;

package/dist/components/task-list/task-list-table.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Task } from '../../types/public-types';
+
+export declare const TaskListTableDefault: React.FC<{
+    rowHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    locale: string;
+    tasks: Task[];
+    visibleTasks?: Task[];
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
+}>;
+export type TaskListTableProps = typeof TaskListTableDefault;
+export default TaskListTableDefault;

package/dist/components/task-list/task-list.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { RenderedTask } from '../../types/rendered-task';
+import { Task } from '../../types/public-types';
+
+export type TaskListProps = {
+    headerHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    rowHeight: number;
+    locale: string;
+    tasks: Task[];
+    visibleTasks?: Task[];
+    horizontalContainerClass?: string;
+    selectedTask?: RenderedTask | undefined;
+    selectedTaskId?: string;
+    setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
+    TaskListHeader?: React.FC<{
+        headerHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+    }>;
+    TaskListTable?: React.FC<{
+        rowHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        locale: string;
+        tasks: Task[];
+        visibleTasks?: Task[];
+        selectedTaskId: string;
+        setSelectedTask: (taskId: string) => void;
+        onExpanderClick: (task: Task) => void;
+    }>;
+    taskListWidth?: number;
+};
+export declare const TaskList: React.FC<TaskListProps>;
+export default TaskList;

package/dist/helpers/date-helper.d.ts

@@ -0,0 +1,12 @@
+import { Task, ViewMode } from '../types/public-types';
+
+export type DateHelperScales = "year" | "month" | "week" | "day" | "hour" | "minute" | "second" | "millisecond";
+export declare const getCachedDateTimeFormat: (locString: string | string[], opts?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
+export declare const addToDate: (date: Date, quantity: number, scale: DateHelperScales) => Date;
+export declare const startOfDate: (date: Date, scale: DateHelperScales) => Date;
+export declare const getLocaleMonth: (date: Date, locale: string) => string;
+export declare const getLocalDayOfWeek: (date: Date, locale: string, format?: "long" | "short" | "narrow") => string;
+export declare const getWeekNumberISO8601: (date: Date) => string;
+export declare const getDaysInMonth: (month: number, year: number) => number;
+export declare const seedDates: (startDate: Date, endDate: Date, viewMode: ViewMode) => Date[];
+export declare const ganttDateRange: (tasks: Task[], viewMode: ViewMode, preStepsCount: number) => Date[];

package/dist/helpers/task-filter.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { RenderedTask } from '../types/rendered-task';
+import { Task } from '../types/public-types';
+
+export declare function isKeyboardEvent(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent): event is React.KeyboardEvent;
+export declare function isMouseEvent(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent): event is React.MouseEvent;
+export declare function isRenderedTask(task: Task | RenderedTask): task is RenderedTask;
+/**
+ * 折りたたまれたプロジェクト配下の子タスクを除外する
+ */
+export declare function removeHiddenTasks(tasks: Task[]): Task[];
+/**
+ * displayOrder に基づいてタスクをソートする比較関数
+ */
+export declare const sortTasks: (taskA: Task, taskB: Task) => 0 | 1 | -1;

package/dist/helpers/task-geometry.d.ts

@@ -0,0 +1,22 @@
+import { Task } from '../types/public-types';
+import { RenderedTask } from '../types/rendered-task';
+import { DragAction } from '../types/interaction-types';
+
+/**
+ * 指定日付に対応するSVG上のX座標を線形補間で算出する
+ */
+export declare const taskXCoordinate: (date: Date, dates: Date[], columnWidth: number) => number;
+/**
+ * Task[] をピクセル座標付きの RenderedTask[] に変換する
+ */
+export declare const convertToRenderedTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, taskHeight: number, barCornerRadius: number, handleWidth: number, rtl: boolean, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string, projectProgressColor: string, projectProgressSelectedColor: string, projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, milestoneBackgroundSelectedColor: string) => RenderedTask[];
+export declare const calcProgressGeometry: (taskX1: number, taskX2: number, progress: number, rtl: boolean) => number[];
+export declare const progressByProgressWidth: (progressWidth: number, task: RenderedTask) => number;
+export declare const getProgressHandlePoint: (progressX: number, taskY: number, taskHeight: number) => string;
+/**
+ * SVG上のマウスX座標とドラッグ操作種別から変更後のタスク座標を算出する
+ */
+export declare const applyDragToTask: (svgX: number, action: DragAction, selectedTask: RenderedTask, xStep: number, timeStep: number, initEventX1Delta: number, rtl: boolean) => {
+    isChanged: boolean;
+    changedTask: RenderedTask;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+
+export { Gantt } from './components/gantt/gantt';
+export { ViewMode } from './types/public-types';
+export type { Task, EventOption, DisplayOption, StylingOption, GanttProps, TaskType, } from './types/public-types';