@xpyjs/gantt-react 0.0.1-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jeremy Jone
+
+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,219 @@
+# @xpyjs/gantt-react
+
+基于 [@xpyjs/gantt-core](../core/README.md) 的 React 甘特图组件。
+
+## 安装
+
+```bash
+npm install @xpyjs/gantt-react
+# 或
+yarn add @xpyjs/gantt-react
+# 或
+pnpm add @xpyjs/gantt-react
+```
+
+## 基本使用
+
+```tsx
+import React, { useRef } from 'react';
+import { XGanttReact } from '@xpyjs/gantt-react';
+import type { XGanttReactRef } from '@xpyjs/gantt-react';
+
+function App() {
+  const ganttRef = useRef<XGanttReactRef>(null);
+
+  const data = [
+    {
+      id: '1',
+      name: '任务1',
+      startTime: '2024-01-01',
+      endTime: '2024-01-10',
+      progress: 50
+    },
+    {
+      id: '2',
+      name: '任务2',
+      startTime: '2024-01-05',
+      endTime: '2024-01-15',
+      progress: 30
+    }
+  ];
+
+  const handleTaskSelect = (data: any[], checked: boolean, all: any[]) => {
+    console.log('选择的任务:', data);
+  };
+
+  const jumpToToday = () => {
+    ganttRef.current?.jumpTo();
+  };
+
+  return (
+    <div>
+      <button onClick={jumpToToday}>跳转到今天</button>
+      <XGanttReact
+        ref={ganttRef}
+        style={{ height: '500px', width: '100%' }}
+        options={{
+          data,
+          table: {
+            width: 300,
+            columns: [
+              { field: 'name', label: '任务名称', width: 200 },
+              { field: 'progress', label: '进度', width: 100 }
+            ]
+          }
+        }}
+        onSelect={handleTaskSelect}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## 使用 Hooks
+
+```tsx
+import React from 'react';
+import { XGanttReact, useXGantt, useGanttEvents } from '@xpyjs/gantt-react';
+
+function MyGantt() {
+  const { ganttRef, jumpToToday, updateGanttOptions } = useXGantt();
+  const { onSelect, onClickRow, selectedTasks } = useGanttEvents();
+
+  const handleChangeUnit = () => {
+    updateGanttOptions({ unit: 'week' });
+  };
+
+  return (
+    <div>
+      <div>
+        <button onClick={jumpToToday}>跳转到今天</button>
+        <button onClick={handleChangeUnit}>切换到周视图</button>
+        <span>已选择 {selectedTasks.length} 个任务</span>
+      </div>
+      <XGanttReact
+        ref={ganttRef}
+        style={{ height: '500px' }}
+        options={{ data: [] }}
+        onSelect={onSelect}
+        onClickRow={onClickRow}
+      />
+    </div>
+  );
+}
+```
+
+## API
+
+### XGanttReact Props
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| options | `IOptions` | ✓ | 甘特图配置选项，变化时自动更新甘特图 |
+| className | `string` | - | 容器类名 |
+| style | `React.CSSProperties` | - | 容器样式 |
+| onError | `EventMap['error']` | - | 错误事件回调 |
+| onUpdateLink | `EventMap['update:link']` | - | 关联线更新事件回调 |
+| onCreateLink | `EventMap['create:link']` | - | 关联线创建事件回调 |
+| onSelectLink | `EventMap['select:link']` | - | 关联线选择事件回调 |
+| onSelect | `EventMap['select']` | - | 任务选择事件回调 |
+| onClickRow | `EventMap['click:row']` | - | 行点击事件回调 |
+| onDoubleClickRow | `EventMap['dblclick:row']` | - | 行双击事件回调 |
+| onContextMenuRow | `EventMap['contextmenu:row']` | - | 行右键菜单事件回调 |
+| onClickSlider | `EventMap['click:slider']` | - | 任务条点击事件回调 |
+| onDoubleClickSlider | `EventMap['dblclick:slider']` | - | 任务条双击事件回调 |
+| onContextMenuSlider | `EventMap['contextmenu:slider']` | - | 任务条右键菜单事件回调 |
+| onMove | `EventMap['move']` | - | 任务移动事件回调 |
+
+### XGanttReactRef 方法
+
+| 方法 | 参数 | 返回值 | 说明 |
+|------|------|--------|------|
+| getInstance | - | `XGantt \| null` | 获取甘特图核心实例，通过实例可调用所有核心方法 |
+| jumpTo | `date?: any` | `boolean` | 跳转到指定日期（不传参数跳转到今天） |
+
+> **注意**：为了简化API，`updateOptions` 和 `render` 方法已移除。options变化时会自动更新，其他操作请通过 `getInstance()` 获取核心实例进行操作。
+
+### Hooks
+
+#### useXGantt()
+
+提供甘特图操作的便捷方法：
+
+- `ganttRef`: 甘特图组件引用
+- `getInstance()`: 获取核心实例
+- `jumpToToday()`: 跳转到今天
+- `jumpTo(date)`: 跳转到指定日期
+
+> **变更说明**：已移除 `updateGanttOptions()` 和 `renderGantt()` 方法，请通过 `getInstance()` 获取核心实例进行操作。
+
+#### useGanttEvents()
+
+提供事件处理的便捷方法：
+
+- `onSelect`: 选择事件处理器
+- `onClickRow`: 行点击事件处理器
+- `onMove`: 移动事件处理器
+- `selectedTasks`: 已选择的任务
+- `lastClickedRow`: 最后点击的行
+- `movedTasks`: 移动的任务
+
+## 使用核心实例进行高级操作
+
+```tsx
+import React, { useRef } from 'react';
+import { XGanttReact, useXGantt } from '@xpyjs/gantt-react';
+
+function AdvancedGantt() {
+  const { ganttRef, getInstance } = useXGantt();
+
+  const handleAdvancedOperation = () => {
+    const instance = getInstance();
+    if (instance) {
+      // 更新配置
+      instance.updateOptions({
+        unit: 'week',
+        primaryColor: '#007acc'
+      });
+
+      // 手动渲染
+      instance.render();
+
+      // 其他核心方法
+      instance.jumpTo('2024-06-01');
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleAdvancedOperation}>高级操作</button>
+      <XGanttReact ref={ganttRef} options={{ data: [] }} />
+    </div>
+  );
+}
+```
+
+## 类型定义
+
+所有核心库的类型都可以从 `@xpyjs/gantt-react` 直接导入：
+
+```tsx
+import type {
+  IOptions,
+  ILink,
+  ErrorType,
+  EventMap,
+  XGanttReactProps,
+  XGanttReactRef
+} from '@xpyjs/gantt-react';
+```
+
+## 样式
+
+组件已自动导入样式，无需手动引入。如需自定义样式，可以通过 CSS 变量或覆盖样式类来实现。
+
+## 许可证
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const ganttCore = require("@xpyjs/gantt-core");
+const XGanttReact = react.forwardRef(
+  (props, ref) => {
+    const {
+      options,
+      className,
+      style,
+      onError,
+      onUpdateLink,
+      onCreateLink,
+      onSelectLink,
+      onSelect,
+      onClickRow,
+      onDoubleClickRow,
+      onContextMenuRow,
+      onClickSlider,
+      onDoubleClickSlider,
+      onContextMenuSlider,
+      onMove,
+      ...restProps
+    } = props;
+    const containerRef = react.useRef(null);
+    const ganttInstanceRef = react.useRef(null);
+    const registerEventListeners = react.useCallback(() => {
+      const instance = ganttInstanceRef.current;
+      if (!instance) return;
+      if (onError) {
+        instance.on("error", onError);
+      }
+      if (onUpdateLink) {
+        instance.on("update:link", onUpdateLink);
+      }
+      if (onCreateLink) {
+        instance.on("create:link", onCreateLink);
+      }
+      if (onSelectLink) {
+        instance.on("select:link", onSelectLink);
+      }
+      if (onSelect) {
+        instance.on("select", onSelect);
+      }
+      if (onClickRow) {
+        instance.on("click:row", onClickRow);
+      }
+      if (onDoubleClickRow) {
+        instance.on("dblclick:row", onDoubleClickRow);
+      }
+      if (onContextMenuRow) {
+        instance.on("contextmenu:row", onContextMenuRow);
+      }
+      if (onClickSlider) {
+        instance.on("click:slider", onClickSlider);
+      }
+      if (onDoubleClickSlider) {
+        instance.on("dblclick:slider", onDoubleClickSlider);
+      }
+      if (onContextMenuSlider) {
+        instance.on("contextmenu:slider", onContextMenuSlider);
+      }
+      if (onMove) {
+        instance.on("move", onMove);
+      }
+    }, [
+      onError,
+      onUpdateLink,
+      onCreateLink,
+      onSelectLink,
+      onSelect,
+      onClickRow,
+      onDoubleClickRow,
+      onContextMenuRow,
+      onClickSlider,
+      onDoubleClickSlider,
+      onContextMenuSlider,
+      onMove
+    ]);
+    const initGantt = react.useCallback(() => {
+      if (!containerRef.current) return;
+      ganttInstanceRef.current = new ganttCore.XGantt(containerRef.current, options);
+      registerEventListeners();
+    }, [options, registerEventListeners]);
+    const jumpTo = react.useCallback((date) => {
+      if (ganttInstanceRef.current) {
+        return ganttInstanceRef.current.jumpTo(date);
+      }
+      return false;
+    }, []);
+    const destroyGantt = react.useCallback(() => {
+      if (ganttInstanceRef.current) {
+        ganttInstanceRef.current.destroy();
+        ganttInstanceRef.current = null;
+      }
+    }, []);
+    react.useImperativeHandle(ref, () => ({
+      getInstance: () => ganttInstanceRef.current,
+      jumpTo
+    }), [jumpTo]);
+    react.useEffect(() => {
+      initGantt();
+      return () => {
+        destroyGantt();
+      };
+    }, []);
+    react.useEffect(() => {
+      if (ganttInstanceRef.current) {
+        ganttInstanceRef.current.updateOptions(options);
+      }
+    }, [options]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": "x-gantt-container",
+        className: `x-gantt-container ${className || ""}`,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        ...restProps
+      }
+    );
+  }
+);
+XGanttReact.displayName = "XGanttReact";
+function useXGantt() {
+  const ganttRef = react.useRef(null);
+  const getInstance = react.useCallback(() => {
+    var _a;
+    return ((_a = ganttRef.current) == null ? void 0 : _a.getInstance()) || null;
+  }, []);
+  const jumpTo = react.useCallback((date) => {
+    var _a;
+    return ((_a = ganttRef.current) == null ? void 0 : _a.jumpTo(date)) || false;
+  }, []);
+  return {
+    ganttRef,
+    getInstance,
+    jumpTo
+  };
+}
+Object.defineProperty(exports, "colorjs", {
+  enumerable: true,
+  get: () => ganttCore.colorjs
+});
+Object.defineProperty(exports, "dayjs", {
+  enumerable: true,
+  get: () => ganttCore.dayjs
+});
+Object.defineProperty(exports, "generateId", {
+  enumerable: true,
+  get: () => ganttCore.generateId
+});
+exports.XGanttReact = XGanttReact;
+exports.default = XGanttReact;
+exports.useXGantt = useXGantt;

package/dist/index.d.ts

@@ -0,0 +1,303 @@
+import { Colorjs } from '@xpyjs/gantt-core';
+import { colorjs } from '@xpyjs/gantt-core';
+import { Dayjs } from '@xpyjs/gantt-core';
+import { dayjs } from '@xpyjs/gantt-core';
+import { default as default_2 } from 'react';
+import { EmitData } from '@xpyjs/gantt-core';
+import { ErrorType } from '@xpyjs/gantt-core';
+import { EventMap } from '@xpyjs/gantt-core';
+import { generateId } from '@xpyjs/gantt-core';
+import { ILink } from '@xpyjs/gantt-core';
+import { IOptionConfig } from '@xpyjs/gantt-core';
+import { IOptions } from '@xpyjs/gantt-core';
+import { RefObject } from 'react';
+import { XGantt } from '@xpyjs/gantt-core';
+
+export { Colorjs }
+
+export { colorjs }
+
+export { Dayjs }
+
+export { dayjs }
+
+export { EmitData }
+
+export { ErrorType }
+
+export { EventMap }
+
+export { generateId }
+
+export { ILink }
+
+export { IOptionConfig }
+
+export { IOptions }
+
+/**
+ * 使用甘特图的 Hook
+ *
+ * @description 提供更便捷的甘特图操作方法
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { XGanttReact, useXGantt } from '@xpyjs/gantt-react';
+ *
+ * function MyGantt() {
+ *   const { ganttRef, getInstance, jumpTo } = useXGantt();
+ *
+ *   const handleJumpToToday = () => {
+ *     jumpTo(); // 没有参数，默认跳转到今天
+ *   };
+ *
+ *   const handleUpdateOptions = () => {
+ *     const instance = getInstance();
+ *     if (instance) {
+ *       instance.updateOptions({ unit: 'week' });
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleJumpToToday}>跳转到今天</button>
+ *       <button onClick={handleUpdateOptions}>切换到周视图</button>
+ *       <XGanttReact
+ *         ref={ganttRef}
+ *         options={{ data: [] }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useXGantt(): {
+    ganttRef: RefObject<XGanttReactRef>;
+    getInstance: () => XGantt | null;
+    jumpTo: (date?: any) => boolean;
+};
+
+/**
+ * XGantt React 组件
+ *
+ * @description 基于 `@xpyjs/gantt-core` 的 React 封装组件，提供完整的甘特图功能
+ *
+ * @example
+ * ```tsx
+ * import React, { useRef } from 'react';
+ * import { XGanttReact } from '@xpyjs/gantt-react';
+ * import type { XGanttReactRef } from '@xpyjs/gantt-react';
+ *
+ * function App() {
+ *   const ganttRef = useRef<XGanttReactRef>(null);
+ *
+ *   const handleTaskSelect = (data: any[], checked: boolean, all: any[]) => {
+ *     console.log('任务选择:', { data, checked, all });
+ *   };
+ *
+ *   const jumpToToday = () => {
+ *     ganttRef.current?.jumpTo();
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={jumpToToday}>跳转到今天</button>
+ *       <XGanttReact
+ *         ref={ganttRef}
+ *         style={{ height: '500px', width: '100%' }}
+ *         options={{
+ *           data: [
+ *             {
+ *               id: '1',
+ *               name: '任务1',
+ *               startTime: '2024-01-01',
+ *               endTime: '2024-01-10',
+ *               progress: 50
+ *             }
+ *           ]
+ *         }}
+ *         onSelect={handleTaskSelect}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const XGanttReact: default_2.ForwardRefExoticComponent<XGanttReactProps & default_2.RefAttributes<XGanttReactRef>>;
+export { XGanttReact }
+export default XGanttReact;
+
+/**
+ * XGanttReact 组件的 Props 类型
+ */
+export declare interface XGanttReactProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onError" | "onSelect" | "onClick" | "onDoubleClick" | "onContextMenu"> {
+    /**
+     * XGantt 图表的配置选项
+     *
+     * @description
+     * 该选项包含所有 XGantt 图表的配置参数，包括数据源、表格配置、图表配置、样式配置等
+     */
+    options: IOptions;
+    /**
+     * 容器的 className
+     */
+    className?: string;
+    /**
+     * 容器的样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 错误事件回调
+     *
+     * @description 当甘特图发生错误时触发
+     * @param error 错误信息对象
+     */
+    onError?: EventMap["error"];
+    /**
+     * 关联线更新事件回调
+     *
+     * @description 当关联线被更新时触发
+     * @param link 更新的关联线对象
+     */
+    onUpdateLink?: EventMap["update:link"];
+    /**
+     * 关联线创建事件回调
+     *
+     * @description 当新建关联线时触发
+     * @param link 新创建的关联线对象
+     */
+    onCreateLink?: EventMap["create:link"];
+    /**
+     * 关联线选择事件回调
+     *
+     * @description 当关联线的选择状态发生变化时触发
+     * @param add 新增选择的关联线
+     * @param cancel 取消选择的关联线
+     * @param all 所有当前选择的关联线
+     */
+    onSelectLink?: EventMap["select:link"];
+    /**
+     * 任务选择事件回调
+     *
+     * @description 当任务的选择状态发生变化时触发
+     * @param data 当前操作的任务数据数组
+     * @param checked 是否为选中状态
+     * @param all 所有当前选择的任务数据数组
+     */
+    onSelect?: EventMap["select"];
+    /**
+     * 行点击事件回调
+     *
+     * @description 当点击表格行时触发
+     * @param e 鼠标事件对象
+     * @param data 点击行对应的任务数据
+     */
+    onClickRow?: EventMap["click:row"];
+    /**
+     * 行双击事件回调
+     *
+     * @description 当双击表格行时触发
+     * @param e 鼠标事件对象
+     * @param data 双击行对应的任务数据
+     */
+    onDoubleClickRow?: EventMap["dblclick:row"];
+    /**
+     * 行右键菜单事件回调
+     *
+     * @description 当在表格行上右键点击时触发
+     * @param e 鼠标事件对象
+     * @param data 右键行对应的任务数据
+     */
+    onContextMenuRow?: EventMap["contextmenu:row"];
+    /**
+     * 任务条点击事件回调
+     *
+     * @description 当点击甘特图中的任务条时触发
+     * @param e 鼠标事件对象
+     * @param data 点击任务条对应的任务数据
+     */
+    onClickSlider?: EventMap["click:slider"];
+    /**
+     * 任务条双击事件回调
+     *
+     * @description 当双击甘特图中的任务条时触发
+     * @param e 鼠标事件对象
+     * @param data 双击任务条对应的任务数据
+     */
+    onDoubleClickSlider?: EventMap["dblclick:slider"];
+    /**
+     * 任务条右键菜单事件回调
+     *
+     * @description 当在甘特图中的任务条上右键点击时触发
+     * @param e 鼠标事件对象
+     * @param data 右键任务条对应的任务数据
+     */
+    onContextMenuSlider?: EventMap["contextmenu:slider"];
+    /**
+     * 任务移动事件回调
+     *
+     * @description 当任务被拖拽移动完成时触发
+     * @param data 移动的任务信息数组，包含新旧位置信息
+     */
+    onMove?: EventMap["move"];
+}
+
+/**
+ * XGanttReact 组件实例类型
+ */
+export declare interface XGanttReactRef {
+    /**
+     * 获取甘特图核心实例
+     *
+     * @description
+     * 获取底层的 XGantt 核心实例，通过实例可以调用所有核心方法
+     *
+     * @returns XGantt 核心实例，如果组件未初始化则返回 null
+     *
+     * @example
+     * ```tsx
+     * const ganttRef = useRef<XGanttReactRef>(null);
+     *
+     * const handleGetInstance = () => {
+     *   const instance = ganttRef.current?.getInstance();
+     *   if (instance) {
+     *     // 调用核心实例的方法
+     *     instance.updateOptions({ unit: 'week' });
+     *     instance.render();
+     *     instance.destroy();
+     *   }
+     * };
+     * ```
+     */
+    getInstance: () => XGantt | null;
+    /**
+     * 跳转到指定日期
+     *
+     * @description
+     * 将甘特图的视图跳转到指定日期位置，如果不传参数则跳转到今天
+     *
+     * @param date 要跳转的日期，支持多种格式：
+     *   - 字符串：'2024-06-01'、'2024/06/01'
+     *   - Date 对象：new Date()
+     *   - Dayjs 对象：dayjs('2024-06-01')
+     *   - undefined：跳转到今天
+     *
+     * @returns 是否成功跳转
+     *
+     * @example
+     * ```tsx
+     * const ganttRef = useRef<XGanttReactRef>(null);
+     *
+     * // 跳转到今天
+     * ganttRef.current?.jumpTo();
+     *
+     * // 跳转到指定日期
+     * ganttRef.current?.jumpTo('2024-06-01');
+     * ganttRef.current?.jumpTo(new Date());
+     * ```
+     */
+    jumpTo: (date?: any) => boolean;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,153 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useImperativeHandle, useEffect } from "react";
+import { XGantt } from "@xpyjs/gantt-core";
+import { colorjs, dayjs, generateId } from "@xpyjs/gantt-core";
+const XGanttReact = forwardRef(
+  (props, ref) => {
+    const {
+      options,
+      className,
+      style,
+      onError,
+      onUpdateLink,
+      onCreateLink,
+      onSelectLink,
+      onSelect,
+      onClickRow,
+      onDoubleClickRow,
+      onContextMenuRow,
+      onClickSlider,
+      onDoubleClickSlider,
+      onContextMenuSlider,
+      onMove,
+      ...restProps
+    } = props;
+    const containerRef = useRef(null);
+    const ganttInstanceRef = useRef(null);
+    const registerEventListeners = useCallback(() => {
+      const instance = ganttInstanceRef.current;
+      if (!instance) return;
+      if (onError) {
+        instance.on("error", onError);
+      }
+      if (onUpdateLink) {
+        instance.on("update:link", onUpdateLink);
+      }
+      if (onCreateLink) {
+        instance.on("create:link", onCreateLink);
+      }
+      if (onSelectLink) {
+        instance.on("select:link", onSelectLink);
+      }
+      if (onSelect) {
+        instance.on("select", onSelect);
+      }
+      if (onClickRow) {
+        instance.on("click:row", onClickRow);
+      }
+      if (onDoubleClickRow) {
+        instance.on("dblclick:row", onDoubleClickRow);
+      }
+      if (onContextMenuRow) {
+        instance.on("contextmenu:row", onContextMenuRow);
+      }
+      if (onClickSlider) {
+        instance.on("click:slider", onClickSlider);
+      }
+      if (onDoubleClickSlider) {
+        instance.on("dblclick:slider", onDoubleClickSlider);
+      }
+      if (onContextMenuSlider) {
+        instance.on("contextmenu:slider", onContextMenuSlider);
+      }
+      if (onMove) {
+        instance.on("move", onMove);
+      }
+    }, [
+      onError,
+      onUpdateLink,
+      onCreateLink,
+      onSelectLink,
+      onSelect,
+      onClickRow,
+      onDoubleClickRow,
+      onContextMenuRow,
+      onClickSlider,
+      onDoubleClickSlider,
+      onContextMenuSlider,
+      onMove
+    ]);
+    const initGantt = useCallback(() => {
+      if (!containerRef.current) return;
+      ganttInstanceRef.current = new XGantt(containerRef.current, options);
+      registerEventListeners();
+    }, [options, registerEventListeners]);
+    const jumpTo = useCallback((date) => {
+      if (ganttInstanceRef.current) {
+        return ganttInstanceRef.current.jumpTo(date);
+      }
+      return false;
+    }, []);
+    const destroyGantt = useCallback(() => {
+      if (ganttInstanceRef.current) {
+        ganttInstanceRef.current.destroy();
+        ganttInstanceRef.current = null;
+      }
+    }, []);
+    useImperativeHandle(ref, () => ({
+      getInstance: () => ganttInstanceRef.current,
+      jumpTo
+    }), [jumpTo]);
+    useEffect(() => {
+      initGantt();
+      return () => {
+        destroyGantt();
+      };
+    }, []);
+    useEffect(() => {
+      if (ganttInstanceRef.current) {
+        ganttInstanceRef.current.updateOptions(options);
+      }
+    }, [options]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": "x-gantt-container",
+        className: `x-gantt-container ${className || ""}`,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        ...restProps
+      }
+    );
+  }
+);
+XGanttReact.displayName = "XGanttReact";
+function useXGantt() {
+  const ganttRef = useRef(null);
+  const getInstance = useCallback(() => {
+    var _a;
+    return ((_a = ganttRef.current) == null ? void 0 : _a.getInstance()) || null;
+  }, []);
+  const jumpTo = useCallback((date) => {
+    var _a;
+    return ((_a = ganttRef.current) == null ? void 0 : _a.jumpTo(date)) || false;
+  }, []);
+  return {
+    ganttRef,
+    getInstance,
+    jumpTo
+  };
+}
+export {
+  XGanttReact,
+  colorjs,
+  dayjs,
+  XGanttReact as default,
+  generateId,
+  useXGantt
+};

package/dist/style.css

@@ -0,0 +1 @@
+.x-gantt{--x-gantt-border-color: #e5e5e5}.x-gantt-table-container{flex-shrink:0;box-sizing:border-box;height:100%;overflow:hidden;display:flex;flex-direction:column;width:100%}.x-gantt-table-header{flex-shrink:0;box-sizing:border-box;border-bottom:1px solid var(--x-gantt-border-color)!important;display:flex;flex-direction:row;overflow:hidden;position:relative;flex-wrap:nowrap}.x-gantt-table-header .x-gantt-table-header-cell{position:relative;box-sizing:border-box;overflow:hidden;font-weight:var(--x-gantt-header-font-weight);flex-shrink:0;padding:0 8px}.x-gantt-table-header .x-gantt-table-header-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle{transition:background-color .2s ease}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle:hover{background-color:#0000001a!important}.x-gantt-table-header>div:last-child.x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child .x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header-group{display:flex;flex-direction:column;box-sizing:border-box}.x-gantt-table-header-group>.x-gantt-table-header-cell{border-bottom:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header-group>.x-gantt-table-header-cell>.x-gantt-table-header-title{text-align:center}.x-gantt-table-header-children{display:flex;flex-direction:row}.x-gantt-table-body{flex:1;overflow:hidden;box-sizing:border-box;position:relative;width:100%;height:100%}.x-gantt-table-row{box-sizing:border-box}.x-gantt-table-row.hover>.x-gantt-table-cell{background-color:var(--x-gantt-row-hover-color, rgba(0, 0, 0, .05))!important}.x-gantt-table-row.selected>.x-gantt-table-cell{background-color:var(--x-gantt-row-selected-color, rgba(0, 0, 0, .1))!important}.x-gantt-table-cell{box-sizing:border-box;display:inline-block;border-bottom:1px solid var(--x-gantt-border-color)!important;padding:var(--x-gantt-cell-padding, 4px 8px)}.x-gantt-table-cell .x-gantt-table-cell__content{box-sizing:border-box}.x-gantt-table-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-content-wrapper{width:100%;height:100%;scrollbar-width:none}.x-gantt-content-wrapper::-webkit-scrollbar{display:none}.gantt-scrollbar{position:absolute;z-index:10;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.gantt-scrollbar.visible{opacity:1;pointer-events:auto}.gantt-scrollbar-thumb{position:absolute;cursor:pointer;transition:background-color .2s ease-in-out,height .1s ease-out,width .1s ease-out,transform .05s linear}.gantt-scrollbar-vertical{top:0;right:0;bottom:0}.gantt-scrollbar-vertical .gantt-scrollbar-thumb-vertical{top:0;left:0;right:0}.gantt-scrollbar-horizontal{left:0;bottom:0;right:0}.gantt-scrollbar-horizontal .gantt-scrollbar-thumb-horizontal{left:0;top:0;bottom:0}.x-gantt-checkbox{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--x-gantt-border-color);border-radius:3px;cursor:pointer;transition:all .15s ease-in-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.x-gantt-checkbox:focus{outline:none}.x-gantt-checkbox:focus-visible{outline:none}.x-gantt-checkbox__icon svg{transition:all .15s ease-in-out}.x-gantt-checkbox:hover{border-color:var(--x-gantt-primary-color)}.x-gantt{width:100%;height:100%;display:flex;box-sizing:border-box;flex-wrap:nowrap;padding:0;margin:0;overflow:hidden;position:relative}.x-gantt.border{border:1px solid var(--x-gantt-border-color)}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@xpyjs/gantt-react",
+  "version": "0.0.1-alpha.1",
+  "private": false,
+  "description": "React wrapper for x-gantt",
+  "author": "JeremyJone",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@xpyjs/gantt-core": "0.0.1-alpha.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^3.2.1"
+  },
+  "keywords": [
+    "gantt",
+    "react",
+    "react-component",
+    "typescript",
+    "project-management",
+    "schedule",
+    "timeline"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xpyjs/gantt.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/xpyjs/gantt#readme",
+  "bugs": {
+    "url": "https://github.com/xpyjs/gantt/issues"
+  },
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
+    "release": "pnpm publish --access public --no-git-checks"
+  }
+}