@thebuoyant-tsdev/mui-ts-library 3.2.0 → 3.4.0

package/dist/components/gantt-chart/GanttChart.js

@@ -0,0 +1,258 @@
+import { getDisplayRange as e, getTimelineRange as t } from "./util/gantt-chart.util.js";
+import { createGanttChartStore as n } from "./GanttChart.store.js";
+import { DEFAULT_GANTT_TRANSLATIONS as r } from "./GanttChart.types.js";
+import { GanttTaskPanel as i } from "./GanttTaskPanel.js";
+import { GanttTimeline as a } from "./GanttTimeline.js";
+import { GanttToolbar as o } from "./GanttToolbar.js";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { Box as m } from "@mui/material";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useStore as _ } from "zustand";
+//#region src/components/gantt-chart/GanttChart.tsx
+var v = s(null);
+function y(e) {
+	let t = l(v);
+	if (!t) throw Error("GanttChartStoreContext is missing.");
+	return _(t, e);
+}
+function b() {
+	let e = l(v);
+	if (!e) throw Error("GanttChartStoreContext is missing.");
+	return e;
+}
+var x = s(r);
+function S() {
+	return l(x);
+}
+var C = s({});
+function w() {
+	return l(C);
+}
+function T(e, t) {
+	return e === void 0 ? t : e === "auto" ? "100%" : typeof e == "string" && /^\d+$/.test(e) ? Number(e) : e;
+}
+var E = [
+	"days",
+	"weeks",
+	"months",
+	"quarters"
+], D = {
+	showScaleDays: !0,
+	showScaleWeeks: !0,
+	showScaleMonths: !0,
+	showScaleQuarters: !0,
+	showExpandCollapseAll: !0,
+	showScrollToToday: !0,
+	showDateRange: !0,
+	showRangeReset: !0,
+	showResetView: !0,
+	showExportCSV: !1
+};
+function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: O, showToolbar: k = !0, toolbarConfig: A, height: j, width: ee, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: I = !1, inlineEdit: L = !1, progressDraggable: te = !1, showCriticalPath: ne = !1, virtualizeRows: R = !1, showAssigneeColumn: z = !1, onExportCSV: B, onTaskMoved: V, onTaskResized: H }) {
+	let U = T(j, 400), W = d(() => ({
+		...D,
+		...A
+	}), [A]), G = T(ee, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$, re] = p(320), ie = b(), ae = c(() => {
+		let e = ie.getState().tasks, t = [[
+			"id",
+			"name",
+			"status",
+			"startDate",
+			"endDate",
+			"progress",
+			"assignee",
+			"parentId",
+			"isMilestone",
+			"dependencies",
+			"color"
+		].join(","), ...e.map((e) => [
+			e.id,
+			`"${e.name.replace(/"/g, "\"\"")}"`,
+			e.status,
+			e.startDate.toISOString().split("T")[0],
+			e.endDate.toISOString().split("T")[0],
+			e.progress ?? "",
+			e.assignee ? `"${e.assignee.replace(/"/g, "\"\"")}"` : "",
+			e.parentId ?? "",
+			e.isMilestone ? "true" : "false",
+			(e.dependencies ?? []).join(";"),
+			e.color ?? ""
+		].join(","))].join("\n");
+		if (B) B(t, e);
+		else {
+			let e = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(e), r = document.createElement("a");
+			r.href = n, r.download = "gantt-tasks.csv", r.click(), URL.revokeObjectURL(n);
+		}
+	}, [ie, B]);
+	u(() => {
+		K(t);
+	}, [t, K]);
+	let oe = () => {
+		Q.current ||= (Q.current = !0, Z.current && X.current && (Z.current.scrollTop = X.current.scrollTop), !1);
+	}, se = () => {
+		Q.current ||= (Q.current = !0, X.current && Z.current && (X.current.scrollTop = Z.current.scrollTop), !1);
+	}, ce = c(() => {
+		if (!Z.current) return;
+		let t = e(Y, q), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * Z.current.scrollWidth;
+		Z.current.scrollLeft = Math.max(0, a - Z.current.clientWidth / 2);
+	}, [Y, q]);
+	u(() => {
+		if (!P || !Z.current) return;
+		let e = Z.current, t = (e) => {
+			if (!e.ctrlKey) return;
+			e.preventDefault();
+			let t = E.indexOf(q);
+			e.deltaY < 0 && t > 0 ? J(E[t - 1]) : e.deltaY > 0 && t < E.length - 1 && J(E[t + 1]);
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, [
+		P,
+		q,
+		J
+	]);
+	let le = c((e) => {
+		e.preventDefault();
+		let t = e.clientX, n = $, r = (e) => {
+			let r = e.clientX - t;
+			re(Math.max(M, Math.min(N, n + r)));
+		}, i = () => {
+			document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
+		};
+		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+	}, [
+		$,
+		M,
+		N
+	]);
+	return /* @__PURE__ */ g(m, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			height: U,
+			width: G,
+			border: "1px solid",
+			borderColor: "divider",
+			borderRadius: 1,
+			overflow: "hidden"
+		},
+		children: [k && /* @__PURE__ */ h(o, {
+			onScrollToToday: ce,
+			config: W,
+			onExportCSV: W.showExportCSV ? ae : void 0
+		}), /* @__PURE__ */ g(m, {
+			sx: {
+				display: "flex",
+				flex: 1,
+				overflow: "hidden"
+			},
+			children: [
+				/* @__PURE__ */ h(i, {
+					scrollRef: X,
+					onScroll: oe,
+					panelWidth: $,
+					onTaskClick: n,
+					onAddTask: s,
+					onEditTask: l,
+					onDeleteTask: _,
+					onStatusChange: v,
+					onTasksChange: x,
+					enableBuiltinDialogs: S,
+					onTaskCreated: C,
+					onTaskUpdated: w,
+					onTaskDeleted: O,
+					inlineEdit: L,
+					virtualizeRows: R,
+					showAssigneeColumn: z
+				}),
+				/* @__PURE__ */ h(m, {
+					"data-testid": "gantt-panel-divider",
+					sx: {
+						width: 4,
+						flexShrink: 0,
+						bgcolor: "divider",
+						cursor: "col-resize",
+						"&:hover": { bgcolor: "action.hover" }
+					},
+					onMouseDown: le
+				}),
+				/* @__PURE__ */ h(a, {
+					scrollRef: Z,
+					onScroll: se,
+					onTaskClick: n,
+					onMilestoneClick: r,
+					draggable: F,
+					resizable: I,
+					progressDraggable: te,
+					showCriticalPath: ne,
+					virtualizeRows: R,
+					onTaskMoved: V,
+					onTaskResized: H,
+					onTasksChange: x,
+					onStatusChange: v
+				})
+			]
+		})]
+	});
+}
+function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: k, onExportCSV: A, onTaskClick: j, onMilestoneClick: ee, onAddTask: M, onEditTask: N, onDeleteTask: P, onStatusChange: F, onTasksChange: I, onTaskMoved: L, onTaskResized: te, onTaskCreated: ne, onTaskUpdated: R, onTaskDeleted: z, height: B, width: V, minPanelWidth: H, maxPanelWidth: U }) {
+	let W = d(() => ({
+		...r,
+		...l
+	}), [l]), [G] = p(() => {
+		if (!(s !== void 0 || c !== void 0)) return n(e, i, a, void 0, E);
+		let r = t(e);
+		return n(e, i, a, {
+			start: s ?? r.start,
+			end: c ?? r.end
+		}, E);
+	}), K = d(() => ({
+		...k,
+		statusColors: {
+			...D,
+			...k?.statusColors
+		}
+	}), [D, k]);
+	return /* @__PURE__ */ h(x.Provider, {
+		value: W,
+		children: /* @__PURE__ */ h(C.Provider, {
+			value: K,
+			children: /* @__PURE__ */ h(v.Provider, {
+				value: G,
+				children: /* @__PURE__ */ h(O, {
+					tasks: e,
+					timeScale: i,
+					enableBuiltinDialogs: u,
+					showToolbar: o,
+					toolbarConfig: f,
+					zoomable: m,
+					draggable: g,
+					resizable: _,
+					inlineEdit: y,
+					progressDraggable: b,
+					showCriticalPath: S,
+					virtualizeRows: w,
+					showAssigneeColumn: T,
+					onExportCSV: A,
+					onTaskClick: j,
+					onMilestoneClick: ee,
+					onAddTask: M,
+					onEditTask: N,
+					onDeleteTask: P,
+					onStatusChange: F,
+					onTasksChange: I,
+					onTaskMoved: L,
+					onTaskResized: te,
+					onTaskCreated: ne,
+					onTaskUpdated: R,
+					onTaskDeleted: z,
+					height: B,
+					width: V,
+					minPanelWidth: H,
+					maxPanelWidth: U
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { k as GanttChart, y as useGanttChartStore, w as useGanttTheme, S as useGanttTranslations, b as useRawGanttChartStore };

package/dist/components/gantt-chart/GanttChart.store.js

@@ -0,0 +1,119 @@
+import { addMonths as e, buildTaskTree as t, cascadeDateUpdate as n, endOfMonth as r, getTimelineRange as i, getVisibleTasks as a, startOfMonth as o } from "./util/gantt-chart.util.js";
+import { createStore as s } from "zustand/vanilla";
+//#region src/components/gantt-chart/GanttChart.store.ts
+function c(t, n) {
+	let i = n.startDate < t.start ? o(e(n.startDate, -1)) : t.start, a = n.endDate > t.end ? r(e(n.endDate, 1)) : t.end;
+	return i === t.start && a === t.end ? t : {
+		start: i,
+		end: a
+	};
+}
+function l(e, r = "months", o = !1, l, u = !1) {
+	let d = i(e);
+	return s((s, f) => ({
+		tasks: e,
+		taskTree: t(e),
+		expandedIds: o ? new Set(e.map((e) => e.id)) : new Set(e.filter((e) => !e.parentId).map((e) => e.id)),
+		timeScale: r,
+		timelineRange: l ?? d,
+		isRangeCustomized: l !== void 0,
+		cascadeDependencies: u,
+		defaultTimeScale: r,
+		initialExpandAll: o,
+		isExpandedCustomized: !1,
+		setTasks: (e) => {
+			s((n) => ({
+				tasks: e,
+				taskTree: t(e),
+				...n.isRangeCustomized ? {} : { timelineRange: i(e) }
+			}));
+		},
+		addTask: (e) => {
+			s((n) => {
+				let r = [...n.tasks, e];
+				return {
+					tasks: r,
+					taskTree: t(r),
+					timelineRange: c(n.timelineRange, e)
+				};
+			});
+		},
+		updateTask: (e) => {
+			s((r) => {
+				let i = r.tasks.find((t) => t.id === e.id), a = r.tasks.map((t) => t.id === e.id ? e : t);
+				if (r.cascadeDependencies && i) {
+					let t = e.endDate.getTime() - i.endDate.getTime();
+					a = n(a, e.id, t);
+				}
+				let o = c(r.timelineRange, e);
+				for (let e of a) o = c(o, e);
+				return {
+					tasks: a,
+					taskTree: t(a),
+					timelineRange: o
+				};
+			});
+		},
+		deleteTask: (e) => {
+			s((n) => {
+				let r = /* @__PURE__ */ new Set(), i = (e) => {
+					r.add(e), n.tasks.filter((t) => t.parentId === e).forEach((e) => i(e.id));
+				};
+				i(e);
+				let a = n.tasks.filter((e) => !r.has(e.id));
+				return {
+					tasks: a,
+					taskTree: t(a)
+				};
+			});
+		},
+		toggleExpand: (e) => {
+			s((t) => {
+				let n = new Set(t.expandedIds);
+				return n.has(e) ? n.delete(e) : n.add(e), { expandedIds: n };
+			});
+		},
+		expandAll: () => {
+			s((e) => ({
+				expandedIds: new Set(e.tasks.map((e) => e.id)),
+				isExpandedCustomized: !0
+			}));
+		},
+		collapseAll: () => {
+			s({
+				expandedIds: /* @__PURE__ */ new Set(),
+				isExpandedCustomized: !0
+			});
+		},
+		setTimeScale: (e) => {
+			s({ timeScale: e });
+		},
+		setTimelineRange: (e) => {
+			s({
+				timelineRange: e,
+				isRangeCustomized: !0
+			});
+		},
+		resetTimelineRange: () => {
+			s((e) => ({
+				timelineRange: i(e.tasks),
+				isRangeCustomized: !1
+			}));
+		},
+		resetView: () => {
+			s((e) => ({
+				timeScale: e.defaultTimeScale,
+				timelineRange: i(e.tasks),
+				isRangeCustomized: !1,
+				isExpandedCustomized: !1,
+				expandedIds: e.initialExpandAll ? new Set(e.tasks.map((e) => e.id)) : new Set(e.tasks.filter((e) => !e.parentId).map((e) => e.id))
+			}));
+		},
+		getVisibleTasks: () => {
+			let { taskTree: e, expandedIds: t } = f();
+			return a(e, t);
+		}
+	}));
+}
+//#endregion
+export { l as createGanttChartStore };

package/dist/components/gantt-chart/GanttChart.types.js

@@ -0,0 +1,47 @@
+//#region src/components/gantt-chart/GanttChart.types.ts
+var e = {
+	scaleDays: "Tage",
+	scaleWeeks: "Wochen",
+	scaleMonths: "Monate",
+	scaleQuarters: "Quartale",
+	rangeFrom: "Von",
+	rangeTo: "Bis",
+	rangeResetTooltip: "Bereich zurücksetzen",
+	columnName: "Name",
+	columnStatus: "Status",
+	statusPlanned: "Planned",
+	statusInProgress: "In Progress",
+	statusDone: "Done",
+	statusBlocked: "Blocked",
+	weekColumnPrefix: "KW",
+	todayLabel: "Heute",
+	dateLocale: "de-DE",
+	dialogAddTitle: "Aufgabe hinzufügen",
+	dialogEditTitle: "Aufgabe bearbeiten",
+	dialogDeleteTitle: "Aufgabe löschen",
+	dialogSave: "Speichern",
+	dialogCancel: "Abbrechen",
+	dialogDelete: "Löschen",
+	dialogFieldName: "Name",
+	dialogFieldStartDate: "Startdatum",
+	dialogFieldEndDate: "Enddatum",
+	dialogFieldStatus: "Status",
+	dialogFieldMilestone: "Ist Meilenstein",
+	dialogFieldParent: "Übergeordnete Aufgabe",
+	dialogFieldParentNone: "— Keine —",
+	dialogDeleteConfirm: "Soll die Aufgabe \"{name}\" wirklich gelöscht werden?",
+	dialogFieldDependencies: "Vorgänger",
+	dialogFieldDependenciesNone: "— Keine —",
+	scrollToTodayTooltip: "Zum heutigen Tag",
+	expandAllTooltip: "Alle aufklappen",
+	collapseAllTooltip: "Alle zuklappen",
+	resetViewTooltip: "Ansicht zurücksetzen",
+	columnActions: "Aktionen",
+	columnAssignee: "Assignee",
+	exportCsvTooltip: "Als CSV exportieren",
+	addTaskTooltip: "Aufgabe hinzufügen",
+	editTaskTooltip: "Aufgabe bearbeiten",
+	deleteTaskTooltip: "Aufgabe löschen"
+};
+//#endregion
+export { e as DEFAULT_GANTT_TRANSLATIONS };

package/dist/components/gantt-chart/GanttDeleteDialog.js

@@ -0,0 +1,30 @@
+import { useGanttTranslations as e } from "./GanttChart.js";
+import { Button as t, Dialog as n, DialogActions as r, DialogContent as i, DialogContentText as a, DialogTitle as o } from "@mui/material";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttDeleteDialog.tsx
+function l({ open: l, task: u, onConfirm: d, onClose: f }) {
+	let p = e(), m = p.dialogDeleteConfirm.replace("{name}", u?.name ?? "");
+	return /* @__PURE__ */ c(n, {
+		open: l,
+		onClose: f,
+		maxWidth: "xs",
+		fullWidth: !0,
+		"data-testid": "gantt-delete-dialog",
+		children: [
+			/* @__PURE__ */ s(o, { children: p.dialogDeleteTitle }),
+			/* @__PURE__ */ s(i, { children: /* @__PURE__ */ s(a, { children: m }) }),
+			/* @__PURE__ */ c(r, { children: [/* @__PURE__ */ s(t, {
+				onClick: f,
+				children: p.dialogCancel
+			}), /* @__PURE__ */ s(t, {
+				onClick: d,
+				variant: "contained",
+				color: "error",
+				"data-testid": "gantt-dialog-delete-confirm",
+				children: p.dialogDelete
+			})] })
+		]
+	});
+}
+//#endregion
+export { l as GanttDeleteDialog };

package/dist/components/gantt-chart/GanttDependencyArrows.js

@@ -0,0 +1,54 @@
+import { useGanttTheme as e } from "./GanttChart.js";
+import { useTheme as t } from "@mui/material";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttDependencyArrows.tsx
+function i({ dependencyLines: i, todayX: a, totalWidth: o, height: s, top: c, arrowMarkerId: l }) {
+	let u = t(), { todayLineColor: d } = e();
+	return i.length === 0 && a === null ? null : /* @__PURE__ */ r("svg", {
+		"data-testid": "gantt-dependency-arrows",
+		style: {
+			position: "absolute",
+			top: c,
+			left: 0,
+			width: o,
+			height: s,
+			pointerEvents: "none",
+			overflow: "visible"
+		},
+		children: [
+			i.length > 0 && /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("marker", {
+				id: l,
+				markerWidth: "6",
+				markerHeight: "4",
+				refX: "5",
+				refY: "2",
+				orient: "auto",
+				children: /* @__PURE__ */ n("polygon", {
+					points: "0 0, 6 2, 0 4",
+					fill: "currentColor"
+				})
+			}) }),
+			i.map((e) => /* @__PURE__ */ n("path", {
+				"data-testid": `gantt-dep-${e.key}`,
+				d: e.d,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeOpacity: .4,
+				markerEnd: `url(#${l})`
+			}, e.key)),
+			a !== null && /* @__PURE__ */ n("line", {
+				"data-testid": "gantt-today-line",
+				x1: a,
+				y1: 0,
+				x2: a,
+				y2: s,
+				stroke: d || u.palette.primary.main,
+				strokeWidth: 1.5,
+				strokeDasharray: "4 2"
+			})
+		]
+	});
+}
+//#endregion
+export { i as GanttDependencyArrows };

package/dist/components/gantt-chart/GanttStatusContextMenu.js

@@ -0,0 +1,36 @@
+import { useGanttTranslations as e } from "./GanttChart.js";
+import { Menu as t, MenuItem as n } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttStatusContextMenu.tsx
+function i({ contextMenu: i, onClose: a, onSelect: o }) {
+	let s = e(), c = {
+		planned: s.statusPlanned,
+		"in-progress": s.statusInProgress,
+		done: s.statusDone,
+		blocked: s.statusBlocked
+	};
+	return /* @__PURE__ */ r(t, {
+		open: i !== null,
+		onClose: a,
+		anchorReference: "anchorPosition",
+		anchorPosition: i === null ? void 0 : {
+			top: i.mouseY,
+			left: i.mouseX
+		},
+		children: [
+			"planned",
+			"in-progress",
+			"done",
+			"blocked"
+		].map((e) => /* @__PURE__ */ r(n, {
+			selected: i?.task.status === e,
+			"data-testid": `gantt-status-menu-${e}`,
+			onClick: () => {
+				i && o(i.task, e);
+			},
+			children: c[e]
+		}, e))
+	});
+}
+//#endregion
+export { i as GanttStatusContextMenu };