@ninthforge/gantt 0.0.0-stage → 1.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +9 -0
- package/README.md +82 -3
- package/dist/index.cjs +3279 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +439 -0
- package/dist/index.d.ts +439 -0
- package/dist/index.js +3237 -0
- package/dist/index.js.map +1 -0
- package/package.json +50 -3
package/LICENSE.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Copyright (c) 2026 Inspire Labs Pty Ltd, trading as Ninth Forge. All rights reserved.
|
|
2
|
+
|
|
3
|
+
This repository and its contents are proprietary and confidential. No licence is
|
|
4
|
+
granted to use, copy, modify or distribute any part of it except under a written
|
|
5
|
+
agreement with Inspire Labs Pty Ltd. Packages published from this repository are
|
|
6
|
+
licensed under the Ninth Forge End User Licence Agreement at https://ninthforge.com/legal/eula.
|
|
7
|
+
|
|
8
|
+
Free-pack packages and `@ninthforge/tokens` are released under the MIT licence; for
|
|
9
|
+
those packages, the licence file inside the package applies to that package only.
|
package/README.md
CHANGED
|
@@ -1,3 +1,82 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
# @ninthforge/gantt
|
|
2
|
+
|
|
3
|
+
A work plan for Microsoft Power Apps code apps and any React app: phases, tasks and milestones on a timeline, with dependencies, progress and a task grid. It's part of **[Ninth Forge Plan](https://ninthforge.com)**, the same component as the Ninth Forge Gantt control for model-driven and canvas apps.
|
|
4
|
+
|
|
5
|
+
- **Plan:** phases that span their tasks, milestones as diamonds, finish-to-start dependencies, baselines, and working days (Monday to Friday, or every day).
|
|
6
|
+
- **Edit:**
|
|
7
|
+
- drag to move, drag an edge to resize, drag the progress knob
|
|
8
|
+
- drag from a bar to link tasks
|
|
9
|
+
- rename in place, add tasks
|
|
10
|
+
- Alt+arrows from the keyboard, with undo and redo
|
|
11
|
+
- **Read:** Week, Month and Quarter zoom, a task grid with owner, % done, dates and duration columns, a filter box, and expand or collapse by phase.
|
|
12
|
+
- **Output and access:**
|
|
13
|
+
- print and PNG export
|
|
14
|
+
- light and dark themes with your accent
|
|
15
|
+
- right-to-left layouts and high-contrast mode
|
|
16
|
+
- full keyboard and screen-reader support
|
|
17
|
+
- **Fast:** 5,000 tasks scroll smoothly; only the rows on screen are drawn.
|
|
18
|
+
- **Lean and private:**
|
|
19
|
+
- no runtime dependencies beyond React (16.14 or later)
|
|
20
|
+
- no network calls, and the licence check is offline
|
|
21
|
+
|
|
22
|
+
## Install
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
npm install @ninthforge/gantt@next
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Release candidates (1.0.0-rc.N) are under npm's `next` tag until 1.0.0 on 27 January 2027.
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
# from 1.0.0
|
|
32
|
+
npm install @ninthforge/gantt
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Use
|
|
36
|
+
|
|
37
|
+
You hold the data. The Gantt shows it and tells you what the user changed.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { useState } from 'react';
|
|
41
|
+
import { Gantt, type GanttChange, type GanttTask } from '@ninthforge/gantt';
|
|
42
|
+
|
|
43
|
+
const initial: GanttTask[] = [
|
|
44
|
+
{ id: 'p1', name: 'Discovery', kind: 'phase' }, // a phase spans its tasks
|
|
45
|
+
{ id: 't1', name: 'Stakeholder interviews', parentId: 'p1', start: '2026-07-06', end: '2026-07-22', progress: 100, owner: { name: 'Ava Kim' } },
|
|
46
|
+
{ id: 'm1', name: 'Requirements signed off', kind: 'milestone', parentId: 'p1', date: '2026-08-03', dependsOn: ['t1'] },
|
|
47
|
+
{ id: 'p2', name: 'Build', kind: 'phase' },
|
|
48
|
+
{ id: 't2', name: 'Front end', parentId: 'p2', start: '2026-09-14', end: '2026-11-13', progress: 42, owner: { name: 'Ravi Shah' }, dependsOn: ['m1'] },
|
|
49
|
+
{ id: 't3', name: 'Integrations', parentId: 'p2', start: '2026-09-21', end: '2026-11-20', progress: 30, owner: { name: 'Mia Tan' } }
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
export function WorkPlan({ licenseKey, tenantId }: { licenseKey?: string; tenantId?: string }) {
|
|
53
|
+
const [tasks, setTasks] = useState(initial);
|
|
54
|
+
|
|
55
|
+
// Save to your backend; throw (or reject) to put the task back with a message.
|
|
56
|
+
const onTaskChange = async (c: GanttChange) => {
|
|
57
|
+
const { id, previous, source, ...fields } = c;
|
|
58
|
+
setTasks((list) => list.map((t) => (t.id === id ? { ...t, ...fields } : t)));
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<div style={{ height: 560 }}>
|
|
63
|
+
<Gantt
|
|
64
|
+
title="Customer portal relaunch"
|
|
65
|
+
tasks={tasks}
|
|
66
|
+
onTaskChange={onTaskChange}
|
|
67
|
+
licenseKey={licenseKey}
|
|
68
|
+
tenantId={tenantId}
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
- **Dates** are ISO `YYYY-MM-DD` strings, end inclusive, handled in UTC. Changes come back the same way, with only the changed fields plus `previous` (for undo or diffing).
|
|
76
|
+
- **Kinds:** `task` (the default), `phase` (its dates come from its tasks) and `milestone` (one `date`).
|
|
77
|
+
- **Read-only:** `editable={false}`, or switch single actions off, e.g. `editable={{ link: false }}`.
|
|
78
|
+
- **Optimistic saves:** return a promise from `onTaskChange`. The chart keeps the edit while it's pending, and puts it back with a message if the promise rejects.
|
|
79
|
+
|
|
80
|
+
## Licence
|
|
81
|
+
|
|
82
|
+
Ninth Forge Plan is a paid product. Without a key, everything works, with a small "Unlicensed" badge in the corner. Pass your Plan key as `licenseKey` and your Microsoft Entra tenant ID as `tenantId`. The check is offline. Trials and keys: [ninthforge.com](https://ninthforge.com).
|