pixelize-design-library 2.3.12 → 2.3.13
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/.cursor/modules/data-display/MODULE.md +1 -0
- package/dist/Components/Timeline/Timeline.d.ts.map +1 -1
- package/dist/Components/Timeline/Timeline.js +10 -2
- package/dist/Components/Timeline/TimelineProps.d.ts +15 -0
- package/dist/Components/Timeline/TimelineProps.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ Tag, Timeline, Reorder, Divider, Trail.
|
|
|
12
12
|
|
|
13
13
|
## Key rules
|
|
14
14
|
|
|
15
|
+
- Timeline: each event card renders its manual notes from `event.notes` (`TimelineNote[]` — `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`.
|
|
15
16
|
- Trail includes editable cell demos
|
|
16
17
|
- Tag styling lives in `Tag.styles.tsx` (Chakra component theme), not hardcoded in `Tag.tsx`
|
|
17
18
|
- Tag sizes: `xs | sm | md | lg`; variants: `solid | outline | subtle`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhE,QAAA,MAAM,QAAQ,GAAI,0DAAkE,aAAa,4CA2oBhG,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -145,7 +145,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false
|
|
|
145
145
|
// The colored event card (shared by both the desktop "tree" and mobile rail).
|
|
146
146
|
// `accent` decides which edge carries the colored bar (pointing toward the spine).
|
|
147
147
|
const EventCard = ({ event, index, accent, }) => {
|
|
148
|
-
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;
|
|
148
|
+
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;
|
|
149
149
|
const scale = getEventScale(event.title);
|
|
150
150
|
const changes = parseChanges(event.changes);
|
|
151
151
|
const clickable = typeof onEventClick === "function";
|
|
@@ -163,7 +163,15 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false
|
|
|
163
163
|
setActiveNoteEventIndex(isActiveNote ? null : index);
|
|
164
164
|
}, 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: {
|
|
165
165
|
bg: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[50],
|
|
166
|
-
}, children: isActiveNote ? "Hide note" : "Add note" }))] })
|
|
166
|
+
}, 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) => {
|
|
167
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
168
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[50], border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, borderRadius: "0.5rem", px: 2.5, py: 2, 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: (_e = colors.primary) === null || _e === void 0 ? void 0 : _e[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: (_g = (_f = colors.text) === null || _f === void 0 ? void 0 : _f[800]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[800], noOfLines: 1, children: note.title }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[700]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[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) => {
|
|
169
|
+
var _a, _b, _c;
|
|
170
|
+
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));
|
|
171
|
+
}) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.625rem", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], mt: 1, children: [note.created_by ? (0, functions_1.toWords)(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at
|
|
172
|
+
? formatTimestamp(note.created_at, "time")
|
|
173
|
+
: ""] }))] }, (_o = note.log_note_id) !== null && _o !== void 0 ? _o : noteIndex));
|
|
174
|
+
}) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { handleSubmit: (note, title, files) => {
|
|
167
175
|
onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
|
|
168
176
|
setActiveNoteEventIndex(null);
|
|
169
177
|
}, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
|
|
@@ -10,6 +10,20 @@ export interface TimelineEvent {
|
|
|
10
10
|
description: string;
|
|
11
11
|
time: string;
|
|
12
12
|
}
|
|
13
|
+
export interface TimelineNoteAttachment {
|
|
14
|
+
url: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
size?: number | null;
|
|
17
|
+
}
|
|
18
|
+
export interface TimelineNote {
|
|
19
|
+
log_note_id: number;
|
|
20
|
+
logs_id?: number;
|
|
21
|
+
title?: string | null;
|
|
22
|
+
note?: string | null;
|
|
23
|
+
attachments?: TimelineNoteAttachment[] | null;
|
|
24
|
+
created_at?: number | string | null;
|
|
25
|
+
created_by?: string | null;
|
|
26
|
+
}
|
|
13
27
|
export interface TimelineEvents {
|
|
14
28
|
logs_id: number;
|
|
15
29
|
title: string;
|
|
@@ -19,5 +33,6 @@ export interface TimelineEvents {
|
|
|
19
33
|
action_by: string;
|
|
20
34
|
created_at: number;
|
|
21
35
|
changes: unknown;
|
|
36
|
+
notes?: TimelineNote[] | null;
|
|
22
37
|
}
|
|
23
38
|
//# sourceMappingURL=TimelineProps.d.ts.map
|
|
@@ -1 +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;
|
|
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,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"}
|