pixelize-design-library 2.3.12 → 2.3.14

package/.cursor/modules/data-display/MODULE.md

@@ -12,6 +12,8 @@ Tag, Timeline, Reorder, Divider, Trail.
 
 ## Key rules
 
+- Timeline: each event card renders its manual notes from `event.notes` (`TimelineNote[]` — `log_note_id`, `title`, `note`, `attachments[]`, `created_by`, `created_at`). Adding a note is event-scoped via the per-card "Add note" button → `onAddNote(note, title, files, event, index)`; the consumer persists it against `event.logs_id` and re-supplies it back in `event.notes`. Attachments show as links opening `attachment.url`.
+- Timeline notes support edit + delete: hovering a note shows edit/delete icons → `onEditNote(logNoteId, note, title, files, event, index)` (inline `NoteTextArea`) and `onDeleteNote(logNoteId, event, index)` (consumer owns any confirm dialog). Loading props: `addNoteLoading`/`editNoteLoading` keep the editor open with a Save spinner until the request resolves (then auto-close); `deletingNoteId` shows a spinner on the note being deleted. With no loading props wired, the add editor closes immediately on submit (back-compat).
 - Trail includes editable cell demos
 - Tag styling lives in `Tag.styles.tsx` (Chakra component theme), not hardcoded in `Tag.tsx`
 - Tag sizes: `xs | sm | md | lg`; variants: `solid | outline | subtle`

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
 import { TimelineProps } from "./TimelineProps";
-declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, showAddNote }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;
 //# sourceMappingURL=Timeline.d.ts.map

package/dist/Components/Timeline/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhE,QAAA,MAAM,QAAQ,GAAI,0DAAkE,aAAa,4CAijBhG,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAgC,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAM9E,QAAA,MAAM,QAAQ,GAAI,sIAUf,aAAa,4CA0wBf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Components/Timeline/Timeline.js

@@ -10,12 +10,29 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
 const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
 const react_2 = require("react");
-const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false }) => {
+const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
     const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_2.useState)(null);
+    const [activeEditNoteId, setActiveEditNoteId] = (0, react_2.useState)(null);
+    // Auto-close the add editor once the create request finishes (true -> false).
+    const prevAddLoading = (0, react_2.useRef)(addNoteLoading);
+    (0, react_2.useEffect)(() => {
+        if (prevAddLoading.current && !addNoteLoading) {
+            setActiveNoteEventIndex(null);
+        }
+        prevAddLoading.current = addNoteLoading;
+    }, [addNoteLoading]);
+    // Auto-close the edit editor once the update request finishes.
+    const prevEditLoading = (0, react_2.useRef)(editNoteLoading);
+    (0, react_2.useEffect)(() => {
+        if (prevEditLoading.current && !editNoteLoading) {
+            setActiveEditNoteId(null);
+        }
+        prevEditLoading.current = editNoteLoading;
+    }, [editNoteLoading]);
     const formatTimestamp = (timestamp, type) => {
         if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
             const date = new Date(timestamp);
@@ -142,10 +159,37 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false
     if (!timelineEvents || timelineEvents.length === 0) {
         return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[500], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[400], children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
     }
+    // A single manual note attached to a log — read view + hover edit/delete,
+    // swapping to an inline NoteTextArea while editing.
+    const NoteItem = ({ note, event, index, }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        const [hovered, setHovered] = (0, react_2.useState)(false);
+        const isEditing = activeEditNoteId === note.log_note_id;
+        const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+        if (isEditing) {
+            return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), position: "relative", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[50], border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, borderRadius: "0.5rem", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_g = colors.primary) === null || _g === void 0 ? void 0 : _g[500], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", fontWeight: 700, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (hovered || isDeleting) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 0.5, ml: "auto", flexShrink: 0, children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[500] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], bg: "transparent", cursor: "pointer", _hover: {
+                                                bg: (_o = colors.primary) === null || _o === void 0 ? void 0 : _o[50],
+                                                color: (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[600],
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                setActiveEditNoteId(note.log_note_id);
+                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }) }) })), onDeleteNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], bg: "transparent", cursor: "pointer", _hover: {
+                                                bg: (_t = (_s = (_r = colors.semantic) === null || _r === void 0 ? void 0 : _r.error) === null || _s === void 0 ? void 0 : _s[50]) !== null && _t !== void 0 ? _t : (_u = colors.red) === null || _u === void 0 ? void 0 : _u[50],
+                                                color: (_x = (_w = (_v = colors.semantic) === null || _v === void 0 ? void 0 : _v.error) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : (_y = colors.red) === null || _y === void 0 ? void 0 : _y[600],
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
+                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_0 = (_z = colors.text) === null || _z === void 0 ? void 0 : _z[700]) !== null && _0 !== void 0 ? _0 : (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => {
+                        var _a, _b, _c;
+                        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[50], color: (_b = colors.primary) === null || _b === void 0 ? void 0 : _b[700], fontSize: "0.625rem", maxW: "100%", _hover: { bg: (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex));
+                    }) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.625rem", color: (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[500], mt: 1, children: [note.created_by ? (0, functions_1.toWords)(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+    };
     // The colored event card (shared by both the desktop "tree" and mobile rail).
     // `accent` decides which edge carries the colored bar (pointing toward the spine).
     const EventCard = ({ event, index, accent, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         const scale = getEventScale(event.title);
         const changes = parseChanges(event.changes);
         const clickable = typeof onEventClick === "function";
@@ -163,9 +207,15 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false
                                         setActiveNoteEventIndex(isActiveNote ? null : index);
                                     }, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_z = colors.primary) === null || _z === void 0 ? void 0 : _z[700], bg: "transparent", cursor: "pointer", _hover: {
                                         bg: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[50],
-                                    }, children: isActiveNote ? "Hide note" : "Add note" }))] })] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { handleSubmit: (note, title, files) => {
+                                    }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_2 = (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[100]) !== null && _2 !== void 0 ? _2 : (_3 = colors.boxborder) === null || _3 === void 0 ? void 0 : _3[200]}`, children: event.notes.map((note, noteIndex) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
+                            }) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
                             onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
-                            setActiveNoteEventIndex(null);
+                            // When the consumer wires addNoteLoading, the effect closes the
+                            // editor on completion; otherwise close immediately.
+                            if (addNoteLoading === undefined)
+                                setActiveNoteEventIndex(null);
                         }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
     };
     const NODE = "1.875rem"; // 30px node, centered on the spine

package/dist/Components/Timeline/TimelineProps.d.ts

@@ -3,13 +3,35 @@ export interface TimelineProps {
     timelineEvents: TimelineEvents[];
     onEventClick?: (event: TimelineEvents, index: number) => void;
     onAddNote?: (note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    onEditNote?: (logNoteId: number, note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    onDeleteNote?: (logNoteId: number, event: TimelineEvents, index: number) => void;
     showAddNote?: boolean;
+    /** Spinner on the "Add note" editor while the create request is in flight. */
+    addNoteLoading?: boolean;
+    /** Spinner on the open note editor while the update request is in flight. */
+    editNoteLoading?: boolean;
+    /** log_note_id currently being deleted — shows a spinner on that note. */
+    deletingNoteId?: number | string | null;
 }
 export interface TimelineEvent {
     title: string;
     description: string;
     time: string;
 }
+export interface TimelineNoteAttachment {
+    url: string;
+    name?: string;
+    size?: number | null;
+}
+export interface TimelineNote {
+    log_note_id: number;
+    logs_id?: number;
+    title?: string | null;
+    note?: string | null;
+    attachments?: TimelineNoteAttachment[] | null;
+    created_at?: number | string | null;
+    created_by?: string | null;
+}
 export interface TimelineEvents {
     logs_id: number;
     title: string;
@@ -19,5 +41,6 @@ export interface TimelineEvents {
     action_by: string;
     created_at: number;
     changes: unknown;
+    notes?: TimelineNote[] | null;
 }
 //# sourceMappingURL=TimelineProps.d.ts.map

package/dist/Components/Timeline/TimelineProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvG,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3H,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;CAC/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.12",
+  "version": "2.3.14",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",