@thebuoyant-tsdev/mui-ts-library 1.3.1 → 1.3.2

package/README.de.md

@@ -22,42 +22,13 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Installation
 
-### Schritt 1 — Paketdatei erstellen
-
-Dieses Repository klonen und ausführen:
-
-```bash
-npm install
-npm run pack-release
-```
-
-Dieser Befehl baut die Bibliothek und legt eine fertige Paketdatei im Ordner `releases/` ab:
-
-```
-releases/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-Diese Datei per Slack, E-Mail oder Netzlaufwerk an das Team weitergeben.
-
-### Schritt 2 — Im eigenen Projekt installieren
-
-Ein Terminal im **eigenen React-Projekt** öffnen und ausführen:
-
-```bash
-npm install /pfad/zur/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-**Beispiele:**
+### Schritt 1 — Bibliothek installieren
 
 ```bash
-# Datei liegt im Downloads-Ordner
-npm install ~/Downloads/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-
-# Datei liegt im Nachbarordner des Projekts
-npm install ../thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
+npm install @thebuoyant-tsdev/mui-ts-library
 ```
 
-### Schritt 3 — Peer-Dependencies installieren
+### Schritt 2 — Peer-Dependencies installieren
 
 Falls MUI noch nicht im Projekt vorhanden ist:
 
@@ -65,7 +36,7 @@ Falls MUI noch nicht im Projekt vorhanden ist:
 npm install react@^19 react-dom@^19 @mui/material@^9 @emotion/react @emotion/styled @mui/icons-material@^9
 ```
 
-### Schritt 4 — Fertig
+### Schritt 3 — Fertig
 
 Beliebige Komponente importieren — TypeScript-Typen sind automatisch verfügbar:
 

package/README.md

@@ -22,42 +22,13 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Installation
 
-### Step 1 — Get the package file
-
-Clone this repository and run:
-
-```bash
-npm install
-npm run pack-release
-```
-
-This builds the library and places a ready-to-use package file in the `releases/` folder:
-
-```
-releases/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-Share this file with your team via Slack, email, or a network drive.
-
-### Step 2 — Install in your project
-
-Open a terminal in **your own React project** and run:
-
-```bash
-npm install /path/to/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-**Examples:**
+### Step 1 — Install the library
 
 ```bash
-# File is in your Downloads folder
-npm install ~/Downloads/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-
-# File is next to your project folder
-npm install ../thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
+npm install @thebuoyant-tsdev/mui-ts-library
 ```
 
-### Step 3 — Install peer dependencies
+### Step 2 — Install peer dependencies
 
 If your project doesn't have MUI set up yet:
 
@@ -65,9 +36,9 @@ If your project doesn't have MUI set up yet:
 npm install react@^19 react-dom@^19 @mui/material@^9 @emotion/react @emotion/styled @mui/icons-material@^9
 ```
 
-### Step 4 — Done
+### Step 3 — Done
 
-Import any component and TypeScript types are included automatically:
+Import any component — TypeScript types are included automatically:
 
 ```tsx
 import { GanttChart, JsonEditor, useConfirm } from '@thebuoyant-tsdev/mui-ts-library';

package/dist/components/gantt-chart/GanttBarRow.d.ts

@@ -0,0 +1,24 @@
+import type { GanttTask, GanttTaskNode } from "./GanttChart.types";
+import type { TimelineRange } from "./util/gantt-chart.util";
+import type { ActiveDrag, DragType } from "./hooks/useGanttDrag";
+type GanttBarRowProps = {
+    task: GanttTaskNode;
+    virtualTop?: number;
+    activeDrag: ActiveDrag | null;
+    displayRange: TimelineRange;
+    totalWidth: number;
+    gridColumnWidth: number;
+    criticalTaskIds: Set<string>;
+    draggable?: boolean;
+    resizable?: boolean;
+    progressDraggable?: boolean;
+    onTaskClick?: (task: GanttTask) => void;
+    onMilestoneClick?: (task: GanttTask) => void;
+    onContextMenu: (task: GanttTaskNode, mouseX: number, mouseY: number) => void;
+    suppressClickRef: React.MutableRefObject<boolean>;
+    handleBarMouseDown: (e: React.MouseEvent, task: GanttTaskNode, type: DragType) => void;
+    handleProgressMouseDown: (e: React.MouseEvent, task: GanttTaskNode, initialProgress: number, barWidthPx: number) => void;
+    formatDragDate: (d: Date) => string;
+};
+export declare function GanttBarRow({ task, virtualTop, activeDrag, displayRange, totalWidth, gridColumnWidth, criticalTaskIds, draggable, resizable, progressDraggable, onTaskClick, onMilestoneClick, onContextMenu, suppressClickRef, handleBarMouseDown, handleProgressMouseDown, formatDragDate, }: GanttBarRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/gantt-chart/GanttChart.constants.d.ts

@@ -9,3 +9,7 @@ export declare const BAR_HEIGHT = 16;
 export declare const STATUS_COL_WIDTH = 90;
 export declare const ACTIONS_COL_WIDTH = 96;
 export declare const DIVIDER_WIDTH = 4;
+/** MUI-Farb-Token für Balken und Status-Punkte (bgcolor-kompatibel) */
+export declare const STATUS_BAR_COLOR: Record<string, string>;
+/** MUI-Chip-Color-Werte für den Status-Chip im Task-Panel */
+export declare const STATUS_CHIP_COLOR: Record<string, "default" | "warning" | "info" | "success" | "error">;

package/dist/components/gantt-chart/GanttDependencyArrows.d.ts

@@ -0,0 +1,22 @@
+type DependencyLine = {
+    key: string;
+    d: string;
+};
+type GanttDependencyArrowsProps = {
+    dependencyLines: DependencyLine[];
+    todayX: number | null;
+    totalWidth: number;
+    height: number;
+    top: number;
+    arrowMarkerId: string;
+};
+/**
+ * SVG-Layer über allen Gantt-Balken. Zeichnet:
+ * - Z-förmige Abhängigkeitspfeile zwischen Vorgänger und Nachfolger
+ * - Vertikale Today-Line am heutigen Datum
+ *
+ * pointerEvents: none — Klicks auf Balken und Zeilen gehen durch.
+ * Farben werden intern via useTheme() / useGanttTheme() gelesen.
+ */
+export declare function GanttDependencyArrows({ dependencyLines, todayX, totalWidth, height, top, arrowMarkerId, }: GanttDependencyArrowsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/gantt-chart/GanttStatusContextMenu.d.ts

@@ -0,0 +1,19 @@
+import type { GanttTaskNode, GanttTaskStatus } from "./GanttChart.types";
+type ContextMenuState = {
+    task: GanttTaskNode;
+    mouseX: number;
+    mouseY: number;
+};
+type GanttStatusContextMenuProps = {
+    contextMenu: ContextMenuState | null;
+    onClose: () => void;
+    /** Wird aufgerufen wenn der User einen Status wählt. Business-Logik (Store-Update,
+     *  Callbacks) bleibt in GanttTimeline — diese Komponente ist rein präsentational. */
+    onSelect: (task: GanttTaskNode, status: GanttTaskStatus) => void;
+};
+/**
+ * Rechtsklick-Kontextmenü für schnellen Statuswechsel eines Gantt-Balkens.
+ * Übersetzungen werden intern via useGanttTranslations() gelesen.
+ */
+export declare function GanttStatusContextMenu({ contextMenu, onClose, onSelect }: GanttStatusContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/gantt-chart/GanttWeekendStrips.d.ts

@@ -0,0 +1,17 @@
+type WeekendStrip = {
+    key: string;
+    left: number;
+};
+type GanttWeekendStripsProps = {
+    strips: WeekendStrip[];
+    totalWidth: number;
+    height: number;
+    top: number;
+};
+/**
+ * Zeichnet halbtransparente Hintergrundstreifen für Wochenend-Spalten
+ * in der Tages-Skala. Eigener Layer (pointerEvents: none) damit Klicks
+ * auf Balken und Zeilen durchgehen.
+ */
+export declare function GanttWeekendStrips({ strips, totalWidth, height, top }: GanttWeekendStripsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/gantt-chart/hooks/useGanttDrag.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useGanttDrag — Kapselt die gesamte Drag & Drop / Resize / Progress-Logik des GanttCharts.
+ *
+ * Muster für komplexe Interaktions-Hooks (auch für zukünftige Komponenten):
+ *
+ * 1. STABLE CALLBACK REFS — Callbacks (onTaskMoved, onTaskResized, …) werden in Refs
+ *    gespiegelt. So können document-Event-Listener immer die aktuellen Props lesen,
+ *    ohne bei jeder Prop-Änderung neu registriert werden zu müssen.
+ *
+ * 2. ZWEI-EBENEN STATE — dragInitRef + activeDragRef halten stabile Werte (kein Re-render),
+ *    setActiveDrag(state) löst nur dann einen Re-render aus wenn die UI aktualisiert
+ *    werden soll (Balken-Position während des Ziehens). Dadurch kein unnötiges Rendering.
+ *
+ * 3. DOCUMENT-LEVEL LISTENERS — mousemove/mouseup auf document statt auf dem Element,
+ *    damit Drag auch funktioniert wenn der Mauszeiger den Balken verlässt.
+ *
+ * 4. SUPPRESS-CLICK — suppressClickRef verhindert dass ein onClick ausgelöst wird
+ *    wenn der User eigentlich gezogen hat (≥ 5px Bewegung).
+ */
+import type { GanttTask, GanttTaskNode } from "../GanttChart.types";
+import type { TimelineRange } from "../util/gantt-chart.util";
+export type DragType = "move" | "resize" | "progress";
+export type ActiveDrag = {
+    taskId: string;
+    type: DragType;
+    deltaDays: number;
+    newProgress?: number;
+};
+type UseGanttDragOptions = {
+    totalWidth: number;
+    displayRange: TimelineRange;
+    onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
+    onTaskResized?: (task: GanttTask, newEnd: Date) => void;
+    onTasksChange?: (tasks: GanttTask[]) => void;
+};
+type UseGanttDragReturn = {
+    activeDrag: ActiveDrag | null;
+    suppressClickRef: React.MutableRefObject<boolean>;
+    handleBarMouseDown: (e: React.MouseEvent, task: GanttTaskNode, type: DragType) => void;
+    handleProgressMouseDown: (e: React.MouseEvent, task: GanttTaskNode, initialProgress: number, barWidthPx: number) => void;
+    formatDragDate: (d: Date) => string;
+};
+export declare function useGanttDrag({ totalWidth, displayRange, onTaskMoved, onTaskResized, onTasksChange, }: UseGanttDragOptions): UseGanttDragReturn;
+export {};

package/dist/components/password-strength-meter/PasswordStrengthBar.d.ts

@@ -0,0 +1,12 @@
+type PasswordStrengthBarProps = {
+    percent: number;
+    color: string;
+    ariaLabel: string;
+};
+/**
+ * Visuelle Fortschrittsleiste für die Passwortstärke.
+ * role="progressbar" macht die Anzeige für Screenreader zugänglich —
+ * ohne aria-Attribute wäre sie für assistive Technologien unsichtbar.
+ */
+export declare function PasswordStrengthBar({ percent, color, ariaLabel }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/ToolbarButton.d.ts

@@ -0,0 +1,13 @@
+export type ToolbarButtonProps = {
+    label: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Gemeinsamer Toolbar-Button für SqlEditor, JsonEditor und RichTextEditor.
+ * Tooltip mit Arrow, kleines Icon-Format, optionaler Active-State (primary color).
+ * onMouseDown preventDefault verhindert Fokus-Verlust im Editor beim Klick.
+ */
+export declare function ToolbarButton({ label, icon, onClick, active, disabled }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/normalizeSize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Wandelt numerische Strings in Zahlen um (für Storybook-Controls),
+ * lässt alle anderen Werte unverändert durch.
+ *
+ * Beispiele:
+ *   "300"  → 300
+ *   "auto" → "auto"
+ *   300    → 300
+ *   undefined → undefined
+ */
+export declare function normalizeSize(val: number | string | undefined): number | string | undefined;