pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.3
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/.claude/settings.local.json +3 -1
- package/dist/Components/Accordion/Accordion.js +26 -5
- package/dist/Components/NavigationBar/NavigationBar.js +4 -4
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts +1 -1
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +42 -24
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts +2 -0
- package/dist/Components/Table/components/TableHeader.js +5 -9
- package/dist/Components/Timeline/Timeline.d.ts +1 -1
- package/dist/Components/Timeline/Timeline.js +145 -78
- package/dist/Components/Toaster/Toaster.js +40 -20
- package/package.json +1 -1
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
"Bash(echo \"exit=$?\")",
|
|
19
19
|
"Read(//tmp/**)",
|
|
20
20
|
"Bash(git mv *)",
|
|
21
|
-
"Bash(git rm *)"
|
|
21
|
+
"Bash(git rm *)",
|
|
22
|
+
"Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
|
|
23
|
+
"Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")"
|
|
22
24
|
]
|
|
23
25
|
}
|
|
24
26
|
}
|
|
@@ -27,14 +27,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
var react_1 = __importDefault(require("react"));
|
|
29
29
|
var react_2 = require("@chakra-ui/react");
|
|
30
|
+
var lucide_react_1 = require("lucide-react");
|
|
31
|
+
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
30
32
|
var Accordion = function (_a) {
|
|
33
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
31
34
|
var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
|
|
35
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
36
|
+
var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
37
|
+
var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
|
|
38
|
+
var headingColor = (_g = (_f = c.text) === null || _f === void 0 ? void 0 : _f[800]) !== null && _g !== void 0 ? _g : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[800];
|
|
39
|
+
var bodyColor = (_k = (_j = c.text) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600];
|
|
40
|
+
var softHover = (_p = (_o = (_m = c.table) === null || _m === void 0 ? void 0 : _m.hover) === null || _o === void 0 ? void 0 : _o[100]) !== null && _p !== void 0 ? _p : (_q = c.gray) === null || _q === void 0 ? void 0 : _q[50];
|
|
41
|
+
var expandedBg = (_t = (_s = (_r = c.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[8]) !== null && _t !== void 0 ? _t : (_u = c.gray) === null || _u === void 0 ? void 0 : _u[50];
|
|
32
42
|
return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
|
|
33
|
-
var _a, _b, _c, _d;
|
|
34
|
-
return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
react_1.default.createElement(
|
|
43
|
+
var _a, _b, _c, _d, _e;
|
|
44
|
+
return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx, border: "0.063rem solid ".concat(border), borderRadius: "0.625rem", bg: (_a = c.white) !== null && _a !== void 0 ? _a : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300] } }, item.itemProps, { sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.itemStyle }), function (_a) {
|
|
45
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
46
|
+
var isExpanded = _a.isExpanded;
|
|
47
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
48
|
+
react_1.default.createElement("h2", null,
|
|
49
|
+
react_1.default.createElement(react_2.AccordionButton, __assign({ px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
|
|
50
|
+
boxShadow: "none",
|
|
51
|
+
outline: "0.125rem solid ".concat((_c = (_b = c.primary) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300]),
|
|
52
|
+
outlineOffset: "-0.125rem",
|
|
53
|
+
} }, item.buttonProps, { sx: __assign(__assign({}, (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.buttonStyle), { "&:hover": __assign({}, (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.hoverbuttonStyle) }) }),
|
|
54
|
+
react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, item.header),
|
|
55
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : headingColor) : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[500], bg: isExpanded ? ((_m = (_l = (_k = c.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[16]) !== null && _m !== void 0 ? _m : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease" },
|
|
56
|
+
react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))),
|
|
57
|
+
react_1.default.createElement(react_2.AccordionPanel, __assign({ px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor }, item.panelProps, { sx: (_o = item.customStyles) === null || _o === void 0 ? void 0 : _o.panelStyle }), item.content)));
|
|
58
|
+
}));
|
|
38
59
|
})));
|
|
39
60
|
};
|
|
40
61
|
exports.default = Accordion;
|
|
@@ -57,11 +57,11 @@ function NavBar(_a) {
|
|
|
57
57
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } }),
|
|
58
58
|
react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
|
|
59
59
|
(navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
|
|
60
|
-
react_1.default.createElement(react_2.Flex,
|
|
61
|
-
react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing:
|
|
60
|
+
react_1.default.createElement(react_2.Flex, { minW: 0, flexShrink: 1 },
|
|
61
|
+
react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0 },
|
|
62
|
+
moreIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", minW: 0 }, moreIcon)),
|
|
62
63
|
react_1.default.createElement(react_2.Menu, null,
|
|
63
|
-
|
|
64
|
-
react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
|
|
64
|
+
react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0 },
|
|
65
65
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
|
|
66
66
|
react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden" },
|
|
67
67
|
react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
|
|
3
|
-
export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React.JSX.Element;
|
|
3
|
+
export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): React.JSX.Element;
|
|
@@ -50,10 +50,12 @@ var react_2 = require("@chakra-ui/react");
|
|
|
50
50
|
var lucide_react_1 = require("lucide-react");
|
|
51
51
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
52
52
|
function ProfilePhotoViewer(_a) {
|
|
53
|
-
var
|
|
54
|
-
var
|
|
53
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
54
|
+
var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _z = _a.imageWidth, imageWidth = _z === void 0 ? "100px" : _z, _0 = _a.imageAlt, imageAlt = _0 === void 0 ? "Profile Photo" : _0, _1 = _a.imageObjectFit, imageObjectFit = _1 === void 0 ? "cover" : _1, _2 = _a.imageBorderRadius, imageBorderRadius = _2 === void 0 ? "full" : _2, _3 = _a.editIconSize, editIconSize = _3 === void 0 ? "sm" : _3, _4 = _a.editIconPositionRight, editIconPositionRight = _4 === void 0 ? "0px" : _4, _5 = _a.editIconPositionBottom, editIconPositionBottom = _5 === void 0 ? "0px" : _5, _6 = _a.isRound, isRound = _6 === void 0 ? true : _6, boxStyle = _a.boxStyle, _7 = _a.isEditable, isEditable = _7 === void 0 ? false : _7, _8 = _a.isView, isView = _8 === void 0 ? false : _8, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText, _9 = _a.revealOnHover, revealOnHover = _9 === void 0 ? true : _9;
|
|
55
|
+
var _10 = (0, react_1.useState)(photoUrl), photo = _10[0], setPhoto = _10[1];
|
|
55
56
|
var fileInputRef = (0, react_1.useRef)(null);
|
|
56
57
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
58
|
+
var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
57
59
|
var handlePhotoChange = function (event) {
|
|
58
60
|
var _a;
|
|
59
61
|
if (!isEditable)
|
|
@@ -76,31 +78,47 @@ function ProfilePhotoViewer(_a) {
|
|
|
76
78
|
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
77
79
|
};
|
|
78
80
|
var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
|
|
82
|
+
// Shared modern frame for whichever media we render (photo / pdf / fallback).
|
|
83
|
+
var mediaFrame = {
|
|
84
|
+
boxSize: imageWidth,
|
|
85
|
+
borderRadius: imageBorderRadius,
|
|
86
|
+
border: "0.063rem solid ".concat(border),
|
|
87
|
+
boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.sm,
|
|
88
|
+
};
|
|
89
|
+
var renderMedia = function () {
|
|
90
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
91
|
+
if (photo) {
|
|
92
|
+
return isPdf ? (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }),
|
|
93
|
+
react_1.default.createElement(lucide_react_1.FileText, { size: "45%" }))) : (react_1.default.createElement(react_2.Image, __assign({ src: photo, alt: imageAlt, objectFit: imageObjectFit }, mediaFrame)));
|
|
94
|
+
}
|
|
95
|
+
// Fallback: branded tinted avatar (initials or user glyph).
|
|
96
|
+
return (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500] }), fallbackText ? (react_1.default.createElement(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1" }, fallbackText)) : (react_1.default.createElement(lucide_react_1.User, { size: "48%" }))));
|
|
97
|
+
};
|
|
98
|
+
var hasActions = isEditable || isView;
|
|
99
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
|
|
100
|
+
"&:hover .ppv-overlay": { opacity: 1 },
|
|
101
|
+
"&:hover .ppv-actions": { opacity: 1 },
|
|
102
|
+
"&:hover .ppv-media": {
|
|
103
|
+
boxShadow: "0 0 0 0.1875rem ".concat((_j = (_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[24]) !== null && _j !== void 0 ? _j : "transparent"),
|
|
82
104
|
},
|
|
83
105
|
} },
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
react_1.default.createElement(react_2.
|
|
87
|
-
react_1.default.createElement(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
transition: "opacity 0.3s",
|
|
92
|
-
} },
|
|
93
|
-
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
|
|
94
|
-
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
|
|
106
|
+
react_1.default.createElement(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease" }, renderMedia()),
|
|
107
|
+
hasActions && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
108
|
+
react_1.default.createElement(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }),
|
|
109
|
+
react_1.default.createElement(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease" },
|
|
110
|
+
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true },
|
|
111
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_k = c.primary) === null || _k === void 0 ? void 0 : _k[500], color: (_l = c.white) !== null && _l !== void 0 ? _l : "#fff", border: "0.125rem solid ".concat((_m = c.white) !== null && _m !== void 0 ? _m : "#fff"), boxShadow: (_o = theme.shadows) === null || _o === void 0 ? void 0 : _o.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
|
|
112
|
+
bg: (_p = c.primary) === null || _p === void 0 ? void 0 : _p[600],
|
|
95
113
|
transform: "scale(1.1)",
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
114
|
+
boxShadow: (_q = theme.shadows) === null || _q === void 0 ? void 0 : _q.lg,
|
|
115
|
+
}, _active: { bg: (_r = c.primary) === null || _r === void 0 ? void 0 : _r[700] } }))),
|
|
116
|
+
isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true },
|
|
117
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = c.white) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: "0.063rem solid ".concat(border), boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
|
|
118
|
+
bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
|
|
119
|
+
color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
|
|
101
120
|
transform: "scale(1.1)",
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
} })))),
|
|
121
|
+
boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
|
|
122
|
+
}, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } })))),
|
|
105
123
|
isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
|
|
106
124
|
}
|
|
@@ -15,4 +15,6 @@ export type ProfilePhotoViewerProps = {
|
|
|
15
15
|
style?: React.CSSProperties;
|
|
16
16
|
handleIsView?: () => void;
|
|
17
17
|
fallbackText?: string;
|
|
18
|
+
/** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
|
|
19
|
+
revealOnHover?: boolean;
|
|
18
20
|
};
|
|
@@ -59,8 +59,8 @@ var TableHeader = function (_a) {
|
|
|
59
59
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
60
60
|
var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
|
|
61
61
|
var RenderCheckbox = (0, react_2.useCallback)(function () {
|
|
62
|
-
var _a, _b, _c, _d;
|
|
63
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9 }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (
|
|
62
|
+
var _a, _b, _c, _d, _e;
|
|
63
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
|
|
64
64
|
}, [
|
|
65
65
|
checked,
|
|
66
66
|
freezedTextColor,
|
|
@@ -72,15 +72,11 @@ var TableHeader = function (_a) {
|
|
|
72
72
|
]);
|
|
73
73
|
var RenderConent = (0, react_2.useCallback)(function () {
|
|
74
74
|
var _a, _b, _c;
|
|
75
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50],
|
|
75
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
|
|
76
76
|
}, [noBorders, theme.colors]);
|
|
77
77
|
var RenderView = (0, react_2.useCallback)(function () {
|
|
78
|
-
var _a, _b;
|
|
79
|
-
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50],
|
|
80
|
-
// borderY={
|
|
81
|
-
// noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
|
|
82
|
-
// }
|
|
83
|
-
position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
|
|
78
|
+
var _a, _b, _c;
|
|
79
|
+
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
|
|
84
80
|
}, [noBorders, theme.colors, isActionFreeze]);
|
|
85
81
|
return (react_2.default.createElement(react_1.Tr, { pr: 0 },
|
|
86
82
|
isContent && react_2.default.createElement(RenderConent, null),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TimelineProps } from "./TimelineProps";
|
|
3
|
-
declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
|
|
3
|
+
declare const Timeline: ({ timelineEvents, onEventClick }: TimelineProps) => React.JSX.Element;
|
|
4
4
|
export default Timeline;
|
|
@@ -9,13 +9,14 @@ var lucide_react_1 = require("lucide-react");
|
|
|
9
9
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
10
10
|
var functions_1 = require("../../Utils/functions");
|
|
11
11
|
var Timeline = function (_a) {
|
|
12
|
-
var _b, _c, _d, _e;
|
|
13
|
-
var timelineEvents = _a.timelineEvents;
|
|
12
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
13
|
+
var timelineEvents = _a.timelineEvents, onEventClick = _a.onEventClick;
|
|
14
14
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
15
|
+
var colors = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
15
16
|
var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
|
|
16
17
|
var formatTimestamp = function (timestamp, type) {
|
|
17
18
|
var parsedTimestamp;
|
|
18
|
-
if (typeof timestamp ===
|
|
19
|
+
if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
|
|
19
20
|
var date_1 = new Date(timestamp);
|
|
20
21
|
if (!isNaN(date_1.getTime())) {
|
|
21
22
|
if (type === "date") {
|
|
@@ -57,16 +58,47 @@ var Timeline = function (_a) {
|
|
|
57
58
|
}
|
|
58
59
|
return date.toLocaleString();
|
|
59
60
|
};
|
|
60
|
-
|
|
61
|
+
// A semantic color scale chosen by the action title (created / updated / delete).
|
|
62
|
+
var getEventScale = function (title) {
|
|
63
|
+
var _a, _b, _c, _d, _e, _f;
|
|
64
|
+
switch ((title || "").toLowerCase()) {
|
|
65
|
+
case "created":
|
|
66
|
+
return (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : colors.green;
|
|
67
|
+
case "updated":
|
|
68
|
+
return (_d = (_c = colors.semantic) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : colors.orange;
|
|
69
|
+
case "delete":
|
|
70
|
+
case "deleted":
|
|
71
|
+
return (_f = (_e = colors.semantic) === null || _e === void 0 ? void 0 : _e.error) !== null && _f !== void 0 ? _f : colors.red;
|
|
72
|
+
default:
|
|
73
|
+
return colors.primary;
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
// Action-title icon (what happened); falls back to the source icon below.
|
|
77
|
+
var getActionIcon = function (title, size) {
|
|
78
|
+
switch ((title || "").toLowerCase()) {
|
|
79
|
+
case "created":
|
|
80
|
+
return react_1.default.createElement(lucide_react_1.Plus, { size: size });
|
|
81
|
+
case "updated":
|
|
82
|
+
return react_1.default.createElement(lucide_react_1.PencilLine, { size: size });
|
|
83
|
+
case "delete":
|
|
84
|
+
case "deleted":
|
|
85
|
+
return react_1.default.createElement(lucide_react_1.Trash2, { size: size });
|
|
86
|
+
default:
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
// Source icon (where it came from) — preserves the original mapping.
|
|
91
|
+
var getSourceIcon = function (event, size) {
|
|
61
92
|
switch (event.action_from) {
|
|
62
93
|
case "Accounts":
|
|
63
|
-
return react_1.default.createElement(lucide_react_1.IndianRupee, { size:
|
|
94
|
+
return react_1.default.createElement(lucide_react_1.IndianRupee, { size: size });
|
|
64
95
|
case "Notes":
|
|
65
|
-
return react_1.default.createElement(lucide_react_1.FileText, { size:
|
|
96
|
+
return react_1.default.createElement(lucide_react_1.FileText, { size: size });
|
|
66
97
|
default:
|
|
67
|
-
return react_1.default.createElement(lucide_react_1.Volleyball, { size:
|
|
98
|
+
return react_1.default.createElement(lucide_react_1.Volleyball, { size: size });
|
|
68
99
|
}
|
|
69
100
|
};
|
|
101
|
+
var getIcon = function (event, size) { var _a; return (_a = getActionIcon(event.title, size)) !== null && _a !== void 0 ? _a : getSourceIcon(event, size); };
|
|
70
102
|
var groupEventsByDate = function (events) {
|
|
71
103
|
return events.reduce(function (groups, event) {
|
|
72
104
|
var date = formatTimestamp(event.created_at, "date");
|
|
@@ -79,91 +111,126 @@ var Timeline = function (_a) {
|
|
|
79
111
|
}, {});
|
|
80
112
|
};
|
|
81
113
|
var groupedEvents = groupEventsByDate(timelineEvents);
|
|
82
|
-
var
|
|
114
|
+
var parseChanges = function (changes) {
|
|
83
115
|
if (!changes || changes === "null")
|
|
84
|
-
return
|
|
116
|
+
return [];
|
|
85
117
|
try {
|
|
86
|
-
var
|
|
87
|
-
if (typeof
|
|
88
|
-
return
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
.map(function (_a) {
|
|
118
|
+
var parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
|
|
119
|
+
if (typeof parsed !== "object" || parsed === null)
|
|
120
|
+
return [];
|
|
121
|
+
return Object.entries(parsed).map(function (_a) {
|
|
122
|
+
var _b;
|
|
92
123
|
var key = _a[0], value = _a[1];
|
|
93
|
-
var
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
})
|
|
101
|
-
.join("\n");
|
|
124
|
+
var record = value;
|
|
125
|
+
return {
|
|
126
|
+
field: key,
|
|
127
|
+
from: (_b = record === null || record === void 0 ? void 0 : record.original) !== null && _b !== void 0 ? _b : null,
|
|
128
|
+
to: record === null || record === void 0 ? void 0 : record.updated,
|
|
129
|
+
};
|
|
130
|
+
});
|
|
102
131
|
}
|
|
103
132
|
catch (error) {
|
|
104
133
|
console.error("Error parsing changes:", error);
|
|
105
|
-
return
|
|
134
|
+
return [];
|
|
106
135
|
}
|
|
107
136
|
};
|
|
108
|
-
var
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
return (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50];
|
|
117
|
-
default:
|
|
118
|
-
return (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white;
|
|
119
|
-
}
|
|
137
|
+
var initials = function (name) {
|
|
138
|
+
return (name || "")
|
|
139
|
+
.trim()
|
|
140
|
+
.split(/\s+/)
|
|
141
|
+
.map(function (p) { return p[0]; })
|
|
142
|
+
.slice(0, 2)
|
|
143
|
+
.join("")
|
|
144
|
+
.toUpperCase() || "?";
|
|
120
145
|
};
|
|
121
146
|
if (!timelineEvents || timelineEvents.length === 0) {
|
|
122
|
-
return (react_1.default.createElement(react_2.
|
|
123
|
-
react_1.default.createElement(react_2.
|
|
147
|
+
return (react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[500] },
|
|
148
|
+
react_1.default.createElement(react_2.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[400] },
|
|
149
|
+
react_1.default.createElement(lucide_react_1.Volleyball, { size: 20 })),
|
|
150
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: 500 }, "No timeline events to display")));
|
|
151
|
+
}
|
|
152
|
+
// The colored event card (shared by both the desktop "tree" and mobile rail).
|
|
153
|
+
// `accent` decides which edge carries the colored bar (pointing toward the spine).
|
|
154
|
+
var EventCard = function (_a) {
|
|
155
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
156
|
+
var event = _a.event, index = _a.index, accent = _a.accent;
|
|
157
|
+
var scale = getEventScale(event.title);
|
|
158
|
+
var changes = parseChanges(event.changes);
|
|
159
|
+
var clickable = typeof onEventClick === "function";
|
|
160
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? function () { return onEventClick(event, index); } : undefined, _hover: {
|
|
161
|
+
borderColor: (_f = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[300],
|
|
162
|
+
boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.md,
|
|
163
|
+
transform: clickable ? "translateY(-1px)" : undefined,
|
|
164
|
+
} },
|
|
165
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap" },
|
|
166
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
|
|
167
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[800], noOfLines: 1 }, event.action_from),
|
|
168
|
+
react_1.default.createElement(react_2.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_m = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _m !== void 0 ? _m : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: "0.063rem solid ".concat((_o = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[200]), borderRadius: "full", px: 2, py: 1 }, event.title)),
|
|
169
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], whiteSpace: "nowrap" }, formatTimestamp(event.created_at, "time"))),
|
|
170
|
+
changes.length > 0 && (react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: 2 }, changes.map(function (c, i) {
|
|
171
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
172
|
+
return (react_1.default.createElement(react_2.Flex, { key: "".concat(c.field, "-").concat(i), align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap" },
|
|
173
|
+
react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700] }, (0, functions_1.toWords)(c.field)),
|
|
174
|
+
c.from !== null && c.from !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
175
|
+
react_1.default.createElement(react_2.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.from)),
|
|
176
|
+
react_1.default.createElement(react_2.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex" },
|
|
177
|
+
react_1.default.createElement(lucide_react_1.ArrowRight, { size: 11 })))),
|
|
178
|
+
react_1.default.createElement(react_2.Box, { as: "span", color: (_j = (_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors.green) === null || _k === void 0 ? void 0 : _k[700], bg: (_o = (_m = (_l = colors.semantic) === null || _l === void 0 ? void 0 : _l.success) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : (_p = colors.green) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.to))));
|
|
179
|
+
}))),
|
|
180
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mt: 2 },
|
|
181
|
+
react_1.default.createElement(react_2.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true },
|
|
182
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_t = (_s = (_r = colors.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16]) !== null && _t !== void 0 ? _t : (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[50], color: (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[600], fontSize: "0.5625rem", fontWeight: 700 }, initials((0, functions_1.toWords)(event.action_by)))),
|
|
183
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500] },
|
|
184
|
+
"by",
|
|
185
|
+
" ",
|
|
186
|
+
react_1.default.createElement(react_2.Box, { as: "span", color: (_y = (_x = colors.text) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_z = colors.gray) === null || _z === void 0 ? void 0 : _z[700], fontWeight: 500 }, (0, functions_1.toWords)(event.action_by))))));
|
|
187
|
+
};
|
|
188
|
+
var NODE = "1.875rem"; // 30px node, centered on the spine
|
|
189
|
+
var NODE_RADIUS = "0.9375rem";
|
|
190
|
+
var SPINE_GAP = "1.75rem"; // gap between spine and card edge
|
|
191
|
+
// -------------------------------------------------------------------------
|
|
192
|
+
// Mobile: single left rail (alternating doesn't read well on narrow widths)
|
|
193
|
+
// -------------------------------------------------------------------------
|
|
194
|
+
if (isMobile) {
|
|
195
|
+
return (react_1.default.createElement(react_2.Box, { maxW: "100%", px: 2, py: 2 }, Object.keys(groupedEvents).map(function (date) {
|
|
196
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
197
|
+
return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
|
|
198
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, mb: 4, mt: 2 },
|
|
199
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap" }, date),
|
|
200
|
+
react_1.default.createElement(react_2.Box, { flex: "1", h: "0.063rem", bg: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[200] })),
|
|
201
|
+
react_1.default.createElement(react_2.Box, { position: "relative" },
|
|
202
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }),
|
|
203
|
+
groupedEvents[date].map(function (event, index) {
|
|
204
|
+
var _a, _b, _c, _d;
|
|
205
|
+
var scale = getEventScale(event.title);
|
|
206
|
+
return (react_1.default.createElement(react_2.Flex, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3 },
|
|
207
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_b = colors.white) !== null && _b !== void 0 ? _b : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_c = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]), zIndex: 1 }, getIcon(event, 14)),
|
|
208
|
+
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
209
|
+
react_1.default.createElement(EventCard, { event: event, index: index, accent: "left" }))));
|
|
210
|
+
}))));
|
|
211
|
+
})));
|
|
124
212
|
}
|
|
125
|
-
|
|
126
|
-
|
|
213
|
+
// -------------------------------------------------------------------------
|
|
214
|
+
// Desktop: center spine with cards alternating left / right (the "tree")
|
|
215
|
+
// -------------------------------------------------------------------------
|
|
216
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2 },
|
|
217
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_h = colors.boxborder) === null || _h === void 0 ? void 0 : _h[400], transform: "translateX(-50%)" }),
|
|
127
218
|
Object.keys(groupedEvents).map(function (date) {
|
|
128
|
-
var _a, _b, _c, _d, _e;
|
|
129
|
-
return (react_1.default.createElement(react_2.Box, { key: date, mb:
|
|
130
|
-
react_1.default.createElement(react_2.Flex, { justify: "center", mb:
|
|
131
|
-
react_1.default.createElement(react_2.
|
|
219
|
+
var _a, _b, _c, _d, _e, _f;
|
|
220
|
+
return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
|
|
221
|
+
react_1.default.createElement(react_2.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2 },
|
|
222
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap" }, date)),
|
|
132
223
|
groupedEvents[date].map(function (event, index) {
|
|
133
|
-
var _a, _b, _c, _d, _e, _f
|
|
224
|
+
var _a, _b, _c, _d, _e, _f;
|
|
134
225
|
var isLeft = index % 2 === 0;
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
react_1.default.createElement(react_2.Box, {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
event.title),
|
|
144
|
-
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
145
|
-
react_1.default.createElement(react_2.Box, { cursor: "pointer" },
|
|
146
|
-
react_1.default.createElement(lucide_react_1.Info, { size: 12 })))),
|
|
147
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[500] },
|
|
148
|
-
"by ",
|
|
149
|
-
(0, functions_1.toWords)(event.action_by))))) : (
|
|
150
|
-
// Desktop Layout
|
|
151
|
-
react_1.default.createElement(react_2.Flex, { justify: isLeft ? "flex-start" : "flex-end", align: "flex-start", position: "relative" },
|
|
152
|
-
react_1.default.createElement(react_2.Box, { position: "absolute", left: isLeft ? "auto" : "calc(50% + 0.938rem)", right: isLeft ? "calc(50% + 0.938rem)" : "auto", top: "0.938rem", width: isLeft ? "calc(50% - 4rem)" : "calc(50% - 4rem)", height: "0.125rem", bg: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300], zIndex: 0 }),
|
|
153
|
-
react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "full", border: "0.063rem solid ".concat((_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, getIcon(event)),
|
|
154
|
-
react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.gray) === null || _t === void 0 ? void 0 : _t[300]), borderRadius: "0.5rem", px: 4, py: 2, maxW: "16rem", boxShadow: "sm", zIndex: 1, ml: isLeft ? 0 : "50%", mr: isLeft ? "50%" : 0, width: "calc(50% - 2rem)", position: "relative" },
|
|
155
|
-
react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 1 },
|
|
156
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: "medium" },
|
|
157
|
-
event.action_from,
|
|
158
|
-
" ",
|
|
159
|
-
event.title),
|
|
160
|
-
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
161
|
-
react_1.default.createElement(react_2.Box, { ml: 1, cursor: "pointer" },
|
|
162
|
-
react_1.default.createElement(lucide_react_1.Info, { size: 14 })))),
|
|
163
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray) === null || _v === void 0 ? void 0 : _v[500] },
|
|
164
|
-
"by ",
|
|
165
|
-
(0, functions_1.toWords)(event.action_by)),
|
|
166
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray) === null || _x === void 0 ? void 0 : _x[500] }, formatTimestamp(event.created_at, "time")))))));
|
|
226
|
+
var scale = getEventScale(event.title);
|
|
227
|
+
return (react_1.default.createElement(react_2.Box, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE },
|
|
228
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_b = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300], left: isLeft
|
|
229
|
+
? "calc(50% - ".concat(SPINE_GAP, ")")
|
|
230
|
+
: "calc(50% + ".concat(NODE_RADIUS, ")"), zIndex: 0 }),
|
|
231
|
+
react_1.default.createElement(react_2.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_d = colors.white) !== null && _d !== void 0 ? _d : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_e = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), zIndex: 2 }, getIcon(event, 15)),
|
|
232
|
+
react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, w: "calc(50% - ".concat(SPINE_GAP, ")"), ml: isLeft ? 0 : "calc(50% + ".concat(SPINE_GAP, ")") },
|
|
233
|
+
react_1.default.createElement(EventCard, { event: event, index: index, accent: isLeft ? "right" : "left" }))));
|
|
167
234
|
})));
|
|
168
235
|
})));
|
|
169
236
|
};
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
7
|
if (k2 === undefined) k2 = k;
|
|
4
8
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -37,50 +41,65 @@ exports.useToaster = void 0;
|
|
|
37
41
|
exports.default = ToasterProvider;
|
|
38
42
|
var react_1 = __importStar(require("react"));
|
|
39
43
|
var react_2 = require("@chakra-ui/react");
|
|
44
|
+
var react_3 = require("@emotion/react");
|
|
45
|
+
var lucide_react_1 = require("lucide-react");
|
|
40
46
|
var ToasterContext = (0, react_1.createContext)(undefined);
|
|
47
|
+
var shrink = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { transform: scaleX(1); }\n to { transform: scaleX(0); }\n"], ["\n from { transform: scaleX(1); }\n to { transform: scaleX(0); }\n"])));
|
|
41
48
|
function ToasterProvider(_a) {
|
|
49
|
+
var _b;
|
|
42
50
|
var children = _a.children;
|
|
43
51
|
var toast = (0, react_2.useToast)();
|
|
44
52
|
var theme = (0, react_2.useTheme)();
|
|
53
|
+
var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
|
|
45
54
|
var showToast = function (_a) {
|
|
46
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
47
|
-
var title = _a.title, description = _a.description,
|
|
48
|
-
|
|
55
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
56
|
+
var title = _a.title, description = _a.description, _t = _a.status, status = _t === void 0 ? "info" : _t, _u = _a.duration, duration = _u === void 0 ? 5000 : _u, _v = _a.isClosable, isClosable = _v === void 0 ? true : _v, _w = _a.position, position = _w === void 0 ? "top-right" : _w, onClose = _a.onClose;
|
|
57
|
+
// Status → semantic color scale + icon (falls back to legacy palettes).
|
|
58
|
+
var statusConfig = {
|
|
49
59
|
success: {
|
|
50
|
-
|
|
51
|
-
|
|
60
|
+
scale: (_c = (_b = c.semantic) === null || _b === void 0 ? void 0 : _b.success) !== null && _c !== void 0 ? _c : c.green,
|
|
61
|
+
icon: react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 18 }),
|
|
52
62
|
},
|
|
53
63
|
error: {
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
scale: (_e = (_d = c.semantic) === null || _d === void 0 ? void 0 : _d.error) !== null && _e !== void 0 ? _e : c.red,
|
|
65
|
+
icon: react_1.default.createElement(lucide_react_1.XCircle, { size: 18 }),
|
|
56
66
|
},
|
|
57
67
|
warning: {
|
|
58
|
-
|
|
59
|
-
|
|
68
|
+
scale: (_h = (_g = (_f = c.semantic) === null || _f === void 0 ? void 0 : _f.warning) !== null && _g !== void 0 ? _g : c.yellow) !== null && _h !== void 0 ? _h : c.orange,
|
|
69
|
+
icon: react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 }),
|
|
60
70
|
},
|
|
61
71
|
info: {
|
|
62
|
-
|
|
63
|
-
|
|
72
|
+
scale: (_k = (_j = c.semantic) === null || _j === void 0 ? void 0 : _j.info) !== null && _k !== void 0 ? _k : c.blue,
|
|
73
|
+
icon: react_1.default.createElement(lucide_react_1.Info, { size: 18 }),
|
|
64
74
|
},
|
|
65
75
|
loading: {
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
scale: (_l = c.primary) !== null && _l !== void 0 ? _l : c.gray,
|
|
77
|
+
icon: react_1.default.createElement(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
|
|
68
78
|
},
|
|
69
79
|
};
|
|
70
|
-
var
|
|
80
|
+
var _x = (_m = statusConfig[status]) !== null && _m !== void 0 ? _m : statusConfig.info, scale = _x.scale, icon = _x.icon;
|
|
81
|
+
var solid = (_o = scale === null || scale === void 0 ? void 0 : scale[500]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500];
|
|
82
|
+
var soft = (_q = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _q !== void 0 ? _q : (_r = c.gray) === null || _r === void 0 ? void 0 : _r[50];
|
|
83
|
+
var accent = (_s = scale === null || scale === void 0 ? void 0 : scale[600]) !== null && _s !== void 0 ? _s : solid;
|
|
84
|
+
var showProgress = typeof duration === "number" && duration > 0;
|
|
71
85
|
toast({
|
|
72
86
|
duration: duration,
|
|
73
87
|
isClosable: isClosable,
|
|
74
88
|
position: position,
|
|
75
89
|
onCloseComplete: onClose,
|
|
76
90
|
render: function (_a) {
|
|
91
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
77
92
|
var onClose = _a.onClose;
|
|
78
|
-
return (react_1.default.createElement(react_2.Box, { bg:
|
|
79
|
-
react_1.default.createElement(react_2.Flex, {
|
|
80
|
-
react_1.default.createElement(react_2.
|
|
81
|
-
|
|
82
|
-
react_1.default.createElement(react_2.Text, { fontSize: "
|
|
83
|
-
|
|
93
|
+
return (react_1.default.createElement(react_2.Box, { position: "relative", bg: (_b = c.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_g = (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.lg) !== null && _g !== void 0 ? _g : "lg", borderRadius: "0.75rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem" },
|
|
94
|
+
react_1.default.createElement(react_2.Flex, { p: 3.5, gap: 3, align: "center" },
|
|
95
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent }, icon),
|
|
96
|
+
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
97
|
+
title && (react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[800] }, title)),
|
|
98
|
+
description && (react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_m = (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : (_o = c.text) === null || _o === void 0 ? void 0 : _o[600], mt: title ? "0.125rem" : 0 }, description))),
|
|
99
|
+
isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500], borderRadius: "md", _hover: { bg: (_q = c.gray) === null || _q === void 0 ? void 0 : _q[100], color: (_r = c.gray) === null || _r === void 0 ? void 0 : _r[700] } }))),
|
|
100
|
+
showProgress && (react_1.default.createElement(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, transformOrigin: "left", sx: {
|
|
101
|
+
animation: "".concat(shrink, " ").concat(duration, "ms linear forwards"),
|
|
102
|
+
} }))));
|
|
84
103
|
},
|
|
85
104
|
});
|
|
86
105
|
};
|
|
@@ -94,3 +113,4 @@ var useToaster = function () {
|
|
|
94
113
|
return context;
|
|
95
114
|
};
|
|
96
115
|
exports.useToaster = useToaster;
|
|
116
|
+
var templateObject_1;
|