@matsu1321/react-gantt-chart 1.0.0

package/dist/style.css

@@ -0,0 +1,235 @@
+/* Main Gantt Canvas Container Styles */
+.ganttOuterWrapper {
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #ebebeb;
+  border-radius: 8px;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
+  background-color: #ffffff;
+}
+
+.ganttWrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  border-bottom: 1px solid #ebebeb;
+}
+
+.ganttResizer {
+  background-color: transparent;
+}
+
+.ganttResizer:hover {
+  background-color: #2563eb;
+}
+
+/* Scroll Sync Selectors */
+.verticalScrollbar {
+  position: absolute;
+  width: 17px;
+  overflow-y: scroll;
+  z-index: 100;
+  border-left: 1px solid #ebebeb;
+  background-color: #fafafa;
+}
+
+.horizontalScrollbar {
+  overflow-x: scroll;
+  height: 17px;
+  width: auto;
+  border-top: 1px solid #ebebeb;
+  background-color: #fafafa;
+}
+
+/* 細いプレミアムスクロールバー */
+.verticalScrollbar::-webkit-scrollbar,
+.horizontalScrollbar::-webkit-scrollbar,
+.ganttTimelineContainer::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.verticalScrollbar::-webkit-scrollbar-track,
+.horizontalScrollbar::-webkit-scrollbar-track,
+.ganttTimelineContainer::-webkit-scrollbar-track {
+  background: #f7f7f7;
+}
+
+.verticalScrollbar::-webkit-scrollbar-thumb,
+.horizontalScrollbar::-webkit-scrollbar-thumb,
+.ganttTimelineContainer::-webkit-scrollbar-thumb {
+  background: #d4d4d8;
+  border-radius: 4px;
+}
+
+.verticalScrollbar::-webkit-scrollbar-thumb:hover,
+.horizontalScrollbar::-webkit-scrollbar-thumb:hover,
+.ganttTimelineContainer::-webkit-scrollbar-thumb:hover {
+  background: #a1a1aa;
+}
+
+/* Left panel: Task List Styles */
+.taskListWrapper {
+  border-right: 1px solid #ebebeb;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+}
+
+.taskListHeader {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  color: #3f3f46;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  box-sizing: border-box;
+}
+
+.taskListHeaderCell {
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.taskListContainer {
+  overflow-y: hidden;
+}
+
+.taskListTableRow {
+  transition:
+    background-color 0.15s ease,
+    border-left-color 0.15s ease;
+  border-left: 3px solid transparent;
+}
+
+.taskListTableRow:hover {
+  background-color: #f7fee7; /* Subtle light green-yellow hint on hover */
+}
+
+.taskListTableRowSelected {
+  background-color: #eff6ff !important; /* Premium light blue highlight */
+  border-left-color: #3b82f6 !important; /* Distinct blue marker */
+}
+
+.taskListExpander {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+
+.taskListExpander:hover {
+  transform: scale(1.15);
+}
+
+/* Right panel: Timeline Styles */
+.ganttTimeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.ganttTimelineContainer {
+  flex-grow: 1;
+}
+
+.calendarSvg {
+  display: block;
+}
+
+.ganttSvg {
+  display: block;
+}
+
+/* Background grid ticks & rows */
+.gridRow {
+  transition: fill 0.1s ease;
+}
+
+.gridRow:hover {
+  fill: #fafafa;
+}
+
+.gridRowLine {
+  stroke: #ebebeb;
+  stroke-width: 1;
+}
+
+.gridTick {
+  stroke: #ebebeb;
+  stroke-width: 1;
+}
+
+.gridTodayHighlight {
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+/* Calendar Timeline labels */
+.calendarHeaderLine {
+  stroke: #e6e6e6;
+  stroke-width: 1;
+}
+
+.calendarHeaderText {
+  font-family: inherit;
+  font-size: 11px;
+}
+
+/* Arrows dependencies connecting lines */
+.arrowPath,
+.dependencyArrow .arrowPath {
+  transition:
+    stroke-width 0.15s ease,
+    stroke 0.15s ease;
+}
+
+.arrow:hover .arrowPath,
+.dependencyArrow:hover .arrowPath {
+  stroke: #f59e0b !important;
+  stroke-width: 2.2 !important;
+}
+
+.arrow:hover .arrowHead,
+.dependencyArrow:hover .arrowHead {
+  fill: #f59e0b !important;
+}
+
+/* Task bars, milestones and labels */
+.barBackground,
+.barProgress,
+.projectBackground,
+.projectProgress,
+.milestoneBackground {
+  transition: filter 0.15s ease;
+}
+
+.taskItemWrapper:hover .barBackground,
+.taskItemWrapper:hover .projectBackground,
+.taskItemWrapper:hover .milestoneBackground {
+  filter: brightness(0.96);
+}
+
+.taskItemWrapper:hover .barProgress,
+.taskItemWrapper:hover .projectProgress {
+  filter: brightness(0.92);
+}
+
+.barLabel,
+.projectLabel,
+.milestoneLabel {
+  font-family: inherit;
+  font-size: 12px;
+  user-select: none;
+}
+
+.barProgressHandle {
+  transition: fill 0.15s ease;
+}
+
+.barProgressHandle:hover {
+  fill: #000000 !important;
+}

package/dist/types/calendar-setup.d.ts

@@ -0,0 +1,7 @@
+import { ViewMode } from './public-types';
+
+/** カレンダー描画に必要なセットアップ情報 */
+export interface CalendarSetup {
+    dates: Date[];
+    viewMode: ViewMode;
+}

package/dist/types/interaction-types.d.ts

@@ -0,0 +1,12 @@
+import { RenderedTask } from './rendered-task';
+
+/** ドラッグ操作の種類 */
+export type DragAction = "progress" | "end" | "start" | "move";
+/** チャート内で発生するインタラクション全種 */
+export type ChartInteraction = "mouseenter" | "mouseleave" | "delete" | "dblclick" | "click" | "select" | "" | DragAction;
+/** 現在進行中のガントインタラクション状態 */
+export interface GanttInteractionState {
+    changedTask?: RenderedTask;
+    originalSelectedTask?: RenderedTask;
+    action: ChartInteraction;
+}

package/dist/types/public-types.d.ts

@@ -0,0 +1,144 @@
+import { default as React } from 'react';
+
+export declare enum ViewMode {
+    Hour = "Hour",
+    QuarterDay = "Quarter Day",
+    HalfDay = "Half Day",
+    Day = "Day",
+    /** ISO-8601 week */
+    Week = "Week",
+    Month = "Month",
+    Year = "Year"
+}
+export type TaskType = "task" | "milestone" | "project";
+export interface Task {
+    id: string;
+    type: TaskType;
+    name: string;
+    start: Date;
+    end: Date;
+    /**
+     * From 0 to 100
+     */
+    progress: number;
+    styles?: {
+        backgroundColor?: string;
+        backgroundSelectedColor?: string;
+        progressColor?: string;
+        progressSelectedColor?: string;
+    };
+    isDisabled?: boolean;
+    project?: string;
+    dependencies?: string[];
+    hideChildren?: boolean;
+    displayOrder?: number;
+}
+export interface EventOption {
+    /**
+     * Time step value for date changes in milliseconds (default: 1 hour / day / etc).
+     */
+    timeStep?: number;
+    /**
+     * Invokes on bar select/unselect.
+     */
+    onSelect?: (task: Task, isSelected: boolean) => void;
+    /**
+     * Invokes on bar double click.
+     */
+    onDoubleClick?: (task: Task) => void;
+    /**
+     * Invokes on bar click.
+     */
+    onClick?: (task: Task) => void;
+    /**
+     * Invokes on end and start time change. Chart undoes operation if method returns false or throws error.
+     */
+    onDateChange?: (task: Task, children: Task[]) => void | boolean | Promise<void> | Promise<boolean>;
+    /**
+     * Invokes on progress change. Chart undoes operation if method returns false or throws error.
+     */
+    onProgressChange?: (task: Task, children: Task[]) => void | boolean | Promise<void> | Promise<boolean>;
+    /**
+     * Invokes on delete selected task. Chart undoes operation if method returns false or throws error.
+     */
+    onDelete?: (task: Task) => void | boolean | Promise<void> | Promise<boolean>;
+    /**
+     * Invokes on expander on task list
+     */
+    onExpanderClick?: (task: Task) => void;
+}
+export interface DisplayOption {
+    viewMode?: ViewMode;
+    viewDate?: Date;
+    preStepsCount?: number;
+    /**
+     * Specifies the month name language. Able formats: ISO 639-2, Java Locale
+     */
+    locale?: string;
+    rtl?: boolean;
+    /**
+     * Custom formatter for the top header of the calendar.
+     */
+    calendarTopHeaderFormat?: (date: Date, viewMode: ViewMode) => string;
+    /**
+     * Custom formatter for the bottom header of the calendar.
+     */
+    calendarBottomHeaderFormat?: (date: Date, viewMode: ViewMode) => string;
+}
+export interface StylingOption {
+    headerHeight?: number;
+    columnWidth?: number;
+    listCellWidth?: string;
+    rowHeight?: number;
+    ganttHeight?: number;
+    barCornerRadius?: number;
+    handleWidth?: number;
+    fontFamily?: string;
+    fontSize?: string;
+    /**
+     * How much of row height can be taken by task.
+     * From 0 to 100
+     */
+    barFill?: number;
+    barProgressColor?: string;
+    barProgressSelectedColor?: string;
+    barBackgroundColor?: string;
+    barBackgroundSelectedColor?: string;
+    projectProgressColor?: string;
+    projectProgressSelectedColor?: string;
+    projectBackgroundColor?: string;
+    projectBackgroundSelectedColor?: string;
+    milestoneBackgroundColor?: string;
+    milestoneBackgroundSelectedColor?: string;
+    arrowColor?: string;
+    arrowIndent?: number;
+    todayColor?: string;
+    TooltipContent?: React.FC<{
+        task: Task;
+        fontSize: string;
+        fontFamily: string;
+    }>;
+    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[];
+        selectedTaskId: string;
+        /**
+         * Sets selected task by id
+         */
+        setSelectedTask: (taskId: string) => void;
+        onExpanderClick: (task: Task) => void;
+    }>;
+}
+export interface GanttProps extends EventOption, DisplayOption, StylingOption {
+    tasks: Task[];
+}

package/dist/types/rendered-task.d.ts

@@ -0,0 +1,25 @@
+import { Task, TaskType } from './public-types';
+
+export type TaskTypeInternal = TaskType | "smalltask";
+/**
+ * レンダリング時のタスク情報（ピクセル座標・スタイルを含む拡張型）
+ */
+export interface RenderedTask extends Task {
+    index: number;
+    typeInternal: TaskTypeInternal;
+    x1: number;
+    x2: number;
+    y: number;
+    height: number;
+    progressX: number;
+    progressWidth: number;
+    barCornerRadius: number;
+    handleWidth: number;
+    barChildren: RenderedTask[];
+    styles: {
+        backgroundColor: string;
+        backgroundSelectedColor: string;
+        progressColor: string;
+        progressSelectedColor: string;
+    };
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@matsu1321/react-gantt-chart",
+  "version": "1.0.0",
+  "description": "Highly performant, interactive Gantt Chart component for React with virtual scrolling support.",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.modern.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {},
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+
+  "keywords": [
+    "react",
+    "gantt",
+    "gantt-chart",
+    "react-gantt",
+    "timeline",
+    "virtual-scrolling",
+    "performance",
+    "typescript"
+  ],
+  "author": "Matsu132",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Matsu132/react-gantt-chart.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Matsu132/react-gantt-chart/issues"
+  },
+  "homepage": "https://github.com/Matsu132/react-gantt-chart#readme"
+}