pixelize-design-library 2.2.145 → 2.2.146
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/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js +72 -18
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js +37 -26
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js +168 -121
- package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js +93 -44
- package/dist/Components/Common/ErrorComponent.d.ts +2 -2
- package/dist/Components/Common/ErrorComponent.js +12 -6
- package/dist/Components/Common/Label.d.ts +2 -2
- package/dist/Components/Common/Label.js +8 -2
- package/dist/Components/DatePicker/CalendarPanel.js +2 -2
- package/dist/Components/FilterSidebar/FilterSidebar.js +8 -6
- package/dist/Components/Input/Input/Input.d.ts +1 -1
- package/dist/Components/Input/Input/Input.js +29 -6
- package/dist/Components/Loading/Loading.js +4 -2
- package/dist/Components/PinInputs/PinInputs.d.ts +2 -2
- package/dist/Components/PinInputs/PinInputs.js +19 -4
- package/dist/Components/ProductCard/ProductPrice.js +2 -2
- package/dist/Components/ProductCard/ProductTags.js +7 -3
- package/dist/Components/ProfileCard/ProfileCard.js +8 -4
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +4 -4
- package/dist/Components/SelectSearch/SelectSearch.js +14 -4
- package/dist/Components/Table/Components/TableHeader.js +3 -3
- package/dist/Components/Table/LeftFilterPane.js +5 -5
- package/dist/Components/Timeline/Timeline.js +15 -15
- package/dist/Components/Trail/TrailWorks.js +13 -206
- package/dist/Theme/chartColorsFromTheme.d.ts +18 -0
- package/dist/Theme/chartColorsFromTheme.js +39 -0
- package/dist/Theme/chartColorsFromTheme.test.d.ts +1 -0
- package/dist/Theme/chartColorsFromTheme.test.js +35 -0
- package/package.json +1 -1
|
@@ -60,7 +60,7 @@ var TableHeader = function (_a) {
|
|
|
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
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: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow:
|
|
63
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md },
|
|
64
64
|
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" })));
|
|
65
65
|
}, [
|
|
66
66
|
checked,
|
|
@@ -72,11 +72,11 @@ var TableHeader = function (_a) {
|
|
|
72
72
|
]);
|
|
73
73
|
var RenderConent = (0, react_2.useCallback)(function () {
|
|
74
74
|
var _a, _b, _c, _d;
|
|
75
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow:
|
|
75
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
|
|
76
76
|
}, [noBorders, theme.colors]);
|
|
77
77
|
var RenderView = (0, react_2.useCallback)(function () {
|
|
78
78
|
var _a, _b, _c, _d;
|
|
79
|
-
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow:
|
|
79
|
+
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
|
|
80
80
|
}, [noBorders, theme.colors, isActionFreeze]);
|
|
81
81
|
return (react_2.default.createElement(react_1.Tr, { pr: 0 },
|
|
82
82
|
isContent && react_2.default.createElement(RenderConent, null),
|
|
@@ -150,10 +150,10 @@ var SectionContent = function (_a) {
|
|
|
150
150
|
};
|
|
151
151
|
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
152
152
|
var LeftFilterPane = function (_a) {
|
|
153
|
-
var _b, _c;
|
|
154
|
-
var
|
|
155
|
-
var
|
|
156
|
-
var
|
|
153
|
+
var _b, _c, _d, _e;
|
|
154
|
+
var _f = _a.title, title = _f === void 0 ? "Filter" : _f, _g = _a.height, height = _g === void 0 ? 300 : _g, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _h = _a.isApplyLoading, isApplyLoading = _h === void 0 ? false : _h, _j = _a.filterMode, filterMode = _j === void 0 ? "sidebar" : _j;
|
|
155
|
+
var _k = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _k[0], setIsSearching = _k[1];
|
|
156
|
+
var _l = (0, react_1.useState)({}), localSelected = _l[0], setLocalSelected = _l[1];
|
|
157
157
|
var searchRef = (0, react_1.useRef)(null);
|
|
158
158
|
(0, react_1.useEffect)(function () {
|
|
159
159
|
setLocalSelected(selectedProp || {});
|
|
@@ -256,7 +256,7 @@ var LeftFilterPane = function (_a) {
|
|
|
256
256
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); }, mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
|
|
257
257
|
react_1.default.createElement(react_2.InputGroup, { size: "sm" },
|
|
258
258
|
react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
|
|
259
|
-
react_1.default.createElement(lucide_react_1.Search, { size: 16, color:
|
|
259
|
+
react_1.default.createElement(lucide_react_1.Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] })),
|
|
260
260
|
react_1.default.createElement(react_2.Input, { placeholder: "Search", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true }),
|
|
261
261
|
search.length > 0 && (react_1.default.createElement(react_2.InputRightElement, null,
|
|
262
262
|
react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () { setSearch(""); setIsSearching(false); } }))))))),
|
|
@@ -109,13 +109,13 @@ var Timeline = function (_a) {
|
|
|
109
109
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
110
110
|
switch (title.toLowerCase()) {
|
|
111
111
|
case "created":
|
|
112
|
-
return (
|
|
112
|
+
return (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.green) === null || _b === void 0 ? void 0 : _b[50];
|
|
113
113
|
case "updated":
|
|
114
|
-
return (
|
|
114
|
+
return (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.yellow) === null || _d === void 0 ? void 0 : _d[50];
|
|
115
115
|
case "delete":
|
|
116
|
-
return (
|
|
116
|
+
return (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50];
|
|
117
117
|
default:
|
|
118
|
-
return (
|
|
118
|
+
return (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white;
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
if (!timelineEvents || timelineEvents.length === 0) {
|
|
@@ -123,35 +123,35 @@ var Timeline = function (_a) {
|
|
|
123
123
|
react_1.default.createElement(react_2.Text, null, "No timeline events to display")));
|
|
124
124
|
}
|
|
125
125
|
return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 3, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
|
|
126
|
-
react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: (
|
|
126
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300], transform: { md: "translateX(-50%)" } }),
|
|
127
127
|
Object.keys(groupedEvents).map(function (date) {
|
|
128
128
|
var _a, _b, _c, _d, _e;
|
|
129
129
|
return (react_1.default.createElement(react_2.Box, { key: date, mb: 4 },
|
|
130
130
|
react_1.default.createElement(react_2.Flex, { justify: "center", mb: 4 },
|
|
131
|
-
react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: (
|
|
131
|
+
react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black, bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]), borderRadius: "0.313rem", px: { base: 2, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
|
|
132
132
|
groupedEvents[date].map(function (event, index) {
|
|
133
133
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
134
134
|
var isLeft = index % 2 === 0;
|
|
135
135
|
return (react_1.default.createElement(react_2.Box, { key: "".concat(date, "-").concat(index), mb: 4, position: "relative" }, isMobile ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 3 },
|
|
136
|
-
react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: (
|
|
136
|
+
react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "full", border: "0.063rem solid ".concat((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[300]), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, mt: 0.5 }, getIcon(event)),
|
|
137
137
|
react_1.default.createElement(react_2.Box, { flex: "1" },
|
|
138
138
|
react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 1 },
|
|
139
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (
|
|
140
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: (
|
|
139
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[500], minW: "3.5rem" }, formatTimestamp(event.created_at, "time")),
|
|
140
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[700] },
|
|
141
141
|
event.action_from,
|
|
142
142
|
" ",
|
|
143
143
|
event.title),
|
|
144
144
|
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
145
145
|
react_1.default.createElement(react_2.Box, { cursor: "pointer" },
|
|
146
146
|
react_1.default.createElement(lucide_react_1.Info, { size: 12 })))),
|
|
147
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: (
|
|
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
148
|
"by ",
|
|
149
149
|
(0, functions_1.toWords)(event.action_by))))) : (
|
|
150
150
|
// Desktop Layout
|
|
151
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: (
|
|
153
|
-
react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: (
|
|
154
|
-
react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat((
|
|
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
155
|
react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 1 },
|
|
156
156
|
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: "medium" },
|
|
157
157
|
event.action_from,
|
|
@@ -160,10 +160,10 @@ var Timeline = function (_a) {
|
|
|
160
160
|
react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
|
|
161
161
|
react_1.default.createElement(react_2.Box, { ml: 1, cursor: "pointer" },
|
|
162
162
|
react_1.default.createElement(lucide_react_1.Info, { size: 14 })))),
|
|
163
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (
|
|
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
164
|
"by ",
|
|
165
165
|
(0, functions_1.toWords)(event.action_by)),
|
|
166
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (
|
|
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")))))));
|
|
167
167
|
})));
|
|
168
168
|
})));
|
|
169
169
|
};
|
|
@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = require("@chakra-ui/react");
|
|
7
7
|
var react_2 = __importDefault(require("react"));
|
|
8
8
|
var TrailWorks = function () {
|
|
9
|
+
var _a, _b, _c;
|
|
10
|
+
var theme = (0, react_1.useTheme)();
|
|
11
|
+
var cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
|
|
9
12
|
var data = [
|
|
10
13
|
{
|
|
11
14
|
contact: "John Doe",
|
|
@@ -45,218 +48,22 @@ var TrailWorks = function () {
|
|
|
45
48
|
},
|
|
46
49
|
];
|
|
47
50
|
var renderRow = function (row, index) {
|
|
48
|
-
return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid
|
|
49
|
-
react_2.default.createElement(react_1.Td, { border: "1px solid
|
|
51
|
+
return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid", borderColor: cellBorder },
|
|
52
|
+
react_2.default.createElement(react_1.Td, { border: "1px solid", borderColor: cellBorder, padding: "5px" },
|
|
50
53
|
react_2.default.createElement(react_1.Checkbox, null)),
|
|
51
|
-
columns.map(function (column,
|
|
52
|
-
return (react_2.default.createElement(react_1.Td, { key:
|
|
54
|
+
columns.map(function (column, colIndex) {
|
|
55
|
+
return (react_2.default.createElement(react_1.Td, { key: colIndex, border: "1px solid", borderColor: cellBorder }, row[column.accessor]));
|
|
53
56
|
})));
|
|
54
57
|
};
|
|
55
58
|
return (react_2.default.createElement(react_1.Box, { width: "100%", overflowX: "auto" },
|
|
56
|
-
react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid
|
|
57
|
-
react_2.default.createElement(react_1.Thead, { border: "1px solid
|
|
58
|
-
react_2.default.createElement(react_1.Tr, { border: "1px solid
|
|
59
|
-
react_2.default.createElement(react_1.Th, { border: "1px solid
|
|
59
|
+
react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder },
|
|
60
|
+
react_2.default.createElement(react_1.Thead, { border: "1px solid", borderColor: cellBorder },
|
|
61
|
+
react_2.default.createElement(react_1.Tr, { border: "1px solid", borderColor: cellBorder },
|
|
62
|
+
react_2.default.createElement(react_1.Th, { border: "1px solid", borderColor: cellBorder, padding: "5px" },
|
|
60
63
|
react_2.default.createElement(react_1.Checkbox, null)),
|
|
61
64
|
columns.map(function (column, index) {
|
|
62
|
-
return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid
|
|
65
|
+
return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid", borderColor: cellBorder }, column.Header));
|
|
63
66
|
}))),
|
|
64
|
-
react_2.default.createElement(react_1.Tbody, { border: "1px solid
|
|
67
|
+
react_2.default.createElement(react_1.Tbody, { border: "1px solid", borderColor: cellBorder }, data.map(function (row, index) { return renderRow(row, index); })))));
|
|
65
68
|
};
|
|
66
69
|
exports.default = TrailWorks;
|
|
67
|
-
// import React, { useState } from "react";
|
|
68
|
-
// import {
|
|
69
|
-
// Box,
|
|
70
|
-
// Table,
|
|
71
|
-
// Thead,
|
|
72
|
-
// Tr,
|
|
73
|
-
// Th,
|
|
74
|
-
// Tbody,
|
|
75
|
-
// Td,
|
|
76
|
-
// Checkbox,
|
|
77
|
-
// IconButton,
|
|
78
|
-
// Input,
|
|
79
|
-
// Button,
|
|
80
|
-
// HStack,
|
|
81
|
-
// Flex,
|
|
82
|
-
// Text,
|
|
83
|
-
// } from "@chakra-ui/react";
|
|
84
|
-
// import { DeleteIcon, AddIcon, CloseIcon } from "@chakra-ui/icons";
|
|
85
|
-
// import { Row, Column, initialColumns, initialRows } from "./data";
|
|
86
|
-
// import { EditableCell } from "./EditableCell";
|
|
87
|
-
// import { SelectAllCheckbox } from "./SelectAllCheckbox";
|
|
88
|
-
// const TrailWorks: React.FC = () => {
|
|
89
|
-
// const [rows, setRows] = useState<Row[]>(initialRows);
|
|
90
|
-
// const [columns, setColumns] = useState<Column[]>(initialColumns);
|
|
91
|
-
// const [newColumnName, setNewColumnName] = useState<string>("");
|
|
92
|
-
// const [isAddingColumn, setIsAddingColumn] = useState<boolean>(false);
|
|
93
|
-
// const [editableCell, setEditableCell] = useState<{
|
|
94
|
-
// rowId: number;
|
|
95
|
-
// columnId: number;
|
|
96
|
-
// } | null>(null);
|
|
97
|
-
// const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
|
|
98
|
-
// const addRow = () => {
|
|
99
|
-
// const newRow: Row = {
|
|
100
|
-
// id: rows.length + 1,
|
|
101
|
-
// project: `Project ${String.fromCharCode(65 + rows.length)}`,
|
|
102
|
-
// owner: `Owner ${String.fromCharCode(65 + rows.length)}`,
|
|
103
|
-
// status: "New",
|
|
104
|
-
// priority: "Low",
|
|
105
|
-
// dueDate: "2023-12-31",
|
|
106
|
-
// };
|
|
107
|
-
// setRows([...rows, newRow]);
|
|
108
|
-
// };
|
|
109
|
-
// const addColumn = () => {
|
|
110
|
-
// if (newColumnName) {
|
|
111
|
-
// const newColumn = { id: columns.length + 1, label: newColumnName };
|
|
112
|
-
// setColumns([...columns, newColumn]);
|
|
113
|
-
// setRows(
|
|
114
|
-
// rows.map((row) => ({ ...row, [newColumnName]: "Default Value" }))
|
|
115
|
-
// );
|
|
116
|
-
// setNewColumnName("");
|
|
117
|
-
// setIsAddingColumn(false);
|
|
118
|
-
// }
|
|
119
|
-
// };
|
|
120
|
-
// const handleCellClick = (rowId: number, columnId: number) => {
|
|
121
|
-
// setEditableCell({ rowId, columnId });
|
|
122
|
-
// };
|
|
123
|
-
// const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
|
|
124
|
-
// setRows(
|
|
125
|
-
// rows.map((row) =>
|
|
126
|
-
// row.id === rowId ? { ...row, [columnLabel]: value } : row
|
|
127
|
-
// )
|
|
128
|
-
// );
|
|
129
|
-
// setEditableCell(null);
|
|
130
|
-
// };
|
|
131
|
-
// const handleRowSelect = (rowId: number) => {
|
|
132
|
-
// const newSelectedRows = new Set(selectedRows);
|
|
133
|
-
// if (newSelectedRows.has(rowId)) {
|
|
134
|
-
// newSelectedRows.delete(rowId);
|
|
135
|
-
// } else {
|
|
136
|
-
// newSelectedRows.add(rowId);
|
|
137
|
-
// }
|
|
138
|
-
// setSelectedRows(newSelectedRows);
|
|
139
|
-
// };
|
|
140
|
-
// const handleSelectAll = () => {
|
|
141
|
-
// if (selectedRows.size === rows.length) {
|
|
142
|
-
// setSelectedRows(new Set());
|
|
143
|
-
// } else {
|
|
144
|
-
// setSelectedRows(new Set(rows.map((row) => row.id)));
|
|
145
|
-
// }
|
|
146
|
-
// };
|
|
147
|
-
// const handleDeleteSelected = () => {
|
|
148
|
-
// setRows(rows.filter((row) => !selectedRows.has(row.id)));
|
|
149
|
-
// setSelectedRows(new Set());
|
|
150
|
-
// };
|
|
151
|
-
// const handleCloseFooter = () => {
|
|
152
|
-
// setSelectedRows(new Set());
|
|
153
|
-
// };
|
|
154
|
-
// const isAllSelected = selectedRows.size === rows.length;
|
|
155
|
-
// const isIndeterminate =
|
|
156
|
-
// selectedRows.size > 0 && selectedRows.size < rows.length;
|
|
157
|
-
// return (
|
|
158
|
-
// <Box width="100%" overflowX="auto" p={5}>
|
|
159
|
-
// <Table variant="simple" size="md">
|
|
160
|
-
// <Thead>
|
|
161
|
-
// <Tr>
|
|
162
|
-
// <Th>
|
|
163
|
-
// <SelectAllCheckbox
|
|
164
|
-
// isAllSelected={isAllSelected}
|
|
165
|
-
// isIndeterminate={isIndeterminate}
|
|
166
|
-
// handleSelectAll={handleSelectAll}
|
|
167
|
-
// />
|
|
168
|
-
// </Th>
|
|
169
|
-
// {columns.map((column) => (
|
|
170
|
-
// <Th key={column.id}>{column.label}</Th>
|
|
171
|
-
// ))}
|
|
172
|
-
// <Th>
|
|
173
|
-
// {isAddingColumn ? (
|
|
174
|
-
// <HStack>
|
|
175
|
-
// <Input
|
|
176
|
-
// placeholder="New column name"
|
|
177
|
-
// value={newColumnName}
|
|
178
|
-
// onChange={(e) => setNewColumnName(e.target.value)}
|
|
179
|
-
// />
|
|
180
|
-
// <Button onClick={addColumn}>Add</Button>
|
|
181
|
-
// </HStack>
|
|
182
|
-
// ) : (
|
|
183
|
-
// <IconButton
|
|
184
|
-
// aria-label="Add column"
|
|
185
|
-
// icon={<AddIcon />}
|
|
186
|
-
// size="sm"
|
|
187
|
-
// onClick={() => setIsAddingColumn(true)}
|
|
188
|
-
// />
|
|
189
|
-
// )}
|
|
190
|
-
// </Th>
|
|
191
|
-
// </Tr>
|
|
192
|
-
// </Thead>
|
|
193
|
-
// <Tbody>
|
|
194
|
-
// {rows.map((row) => (
|
|
195
|
-
// <Tr key={row.id}>
|
|
196
|
-
// <Td>
|
|
197
|
-
// <Checkbox
|
|
198
|
-
// isChecked={selectedRows.has(row.id)}
|
|
199
|
-
// onChange={() => handleRowSelect(row.id)}
|
|
200
|
-
// />
|
|
201
|
-
// </Td>
|
|
202
|
-
// {columns.map((column) => (
|
|
203
|
-
// <Td key={column.id}>
|
|
204
|
-
// <EditableCell
|
|
205
|
-
// row={row}
|
|
206
|
-
// column={column}
|
|
207
|
-
// isEditable={Boolean(
|
|
208
|
-
// editableCell &&
|
|
209
|
-
// editableCell.rowId === row.id &&
|
|
210
|
-
// editableCell.columnId === column.id
|
|
211
|
-
// )}
|
|
212
|
-
// handleCellClick={handleCellClick}
|
|
213
|
-
// handleCellChange={handleCellChange}
|
|
214
|
-
// />
|
|
215
|
-
// </Td>
|
|
216
|
-
// ))}
|
|
217
|
-
// </Tr>
|
|
218
|
-
// ))}
|
|
219
|
-
// </Tbody>
|
|
220
|
-
// </Table>
|
|
221
|
-
// <Button
|
|
222
|
-
// leftIcon={<AddIcon />}
|
|
223
|
-
// colorScheme="teal"
|
|
224
|
-
// variant="solid"
|
|
225
|
-
// onClick={addRow}
|
|
226
|
-
// mt={4}
|
|
227
|
-
// >
|
|
228
|
-
// Add Row
|
|
229
|
-
// </Button>
|
|
230
|
-
// {selectedRows.size > 0 && (
|
|
231
|
-
// <Flex
|
|
232
|
-
// position="fixed"
|
|
233
|
-
// bottom="0"
|
|
234
|
-
// left="10%"
|
|
235
|
-
// width="80%"
|
|
236
|
-
// p={4}
|
|
237
|
-
// justifyContent="space-between"
|
|
238
|
-
// alignItems="center"
|
|
239
|
-
// boxShadow="md"
|
|
240
|
-
// >
|
|
241
|
-
// <Text>{selectedRows.size} row(s) selected</Text>
|
|
242
|
-
// <HStack>
|
|
243
|
-
// <Button
|
|
244
|
-
// leftIcon={<DeleteIcon />}
|
|
245
|
-
// colorScheme="red"
|
|
246
|
-
// variant="solid"
|
|
247
|
-
// onClick={handleDeleteSelected}
|
|
248
|
-
// >
|
|
249
|
-
// Delete Selected
|
|
250
|
-
// </Button>
|
|
251
|
-
// <IconButton
|
|
252
|
-
// aria-label="Close"
|
|
253
|
-
// icon={<CloseIcon />}
|
|
254
|
-
// onClick={handleCloseFooter}
|
|
255
|
-
// />
|
|
256
|
-
// </HStack>
|
|
257
|
-
// </Flex>
|
|
258
|
-
// )}
|
|
259
|
-
// </Box>
|
|
260
|
-
// );
|
|
261
|
-
// };
|
|
262
|
-
// export default TrailWorks;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { CustomThemeProps } from "./themeProps";
|
|
2
|
+
export type ThemeColorPalette = CustomThemeProps["colors"];
|
|
3
|
+
/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
|
|
4
|
+
export declare function getDefaultSeriesColors(colors: ThemeColorPalette): string[];
|
|
5
|
+
export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleStyle?: {
|
|
6
|
+
color?: string;
|
|
7
|
+
fontSize?: string;
|
|
8
|
+
fontWeight?: number | string;
|
|
9
|
+
fontFamily?: string;
|
|
10
|
+
}): {
|
|
11
|
+
color: string;
|
|
12
|
+
fontSize: string;
|
|
13
|
+
fontWeight: number | string;
|
|
14
|
+
fontFamily: string;
|
|
15
|
+
};
|
|
16
|
+
export declare function chartAxisLabelColor(colors: ThemeColorPalette): string;
|
|
17
|
+
export declare function chartTooltipBackground(colors: ThemeColorPalette): string;
|
|
18
|
+
export declare function chartTooltipForeground(colors: ThemeColorPalette): string;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.getDefaultSeriesColors = getDefaultSeriesColors;
|
|
15
|
+
exports.mergeChartTitleStyle = mergeChartTitleStyle;
|
|
16
|
+
exports.chartAxisLabelColor = chartAxisLabelColor;
|
|
17
|
+
exports.chartTooltipBackground = chartTooltipBackground;
|
|
18
|
+
exports.chartTooltipForeground = chartTooltipForeground;
|
|
19
|
+
/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
|
|
20
|
+
function getDefaultSeriesColors(colors) {
|
|
21
|
+
return [
|
|
22
|
+
colors.primary[500],
|
|
23
|
+
colors.semantic.error[500],
|
|
24
|
+
colors.semantic.success[500],
|
|
25
|
+
colors.orange[500],
|
|
26
|
+
];
|
|
27
|
+
}
|
|
28
|
+
function mergeChartTitleStyle(colors, titleStyle) {
|
|
29
|
+
return __assign({ fontSize: "16px", fontWeight: 600, fontFamily: "Arial", color: colors.primary[500] }, titleStyle);
|
|
30
|
+
}
|
|
31
|
+
function chartAxisLabelColor(colors) {
|
|
32
|
+
return colors.gray[700];
|
|
33
|
+
}
|
|
34
|
+
function chartTooltipBackground(colors) {
|
|
35
|
+
return colors.gray[700];
|
|
36
|
+
}
|
|
37
|
+
function chartTooltipForeground(colors) {
|
|
38
|
+
return colors.white;
|
|
39
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var chartColorsFromTheme_1 = require("./chartColorsFromTheme");
|
|
4
|
+
var mockColors = {
|
|
5
|
+
primary: { 500: "#111111" },
|
|
6
|
+
semantic: {
|
|
7
|
+
error: { 500: "#222222" },
|
|
8
|
+
success: { 500: "#333333" },
|
|
9
|
+
},
|
|
10
|
+
orange: { 500: "#444444" },
|
|
11
|
+
gray: { 700: "#555555" },
|
|
12
|
+
white: "#ffffff",
|
|
13
|
+
};
|
|
14
|
+
describe("chartColorsFromTheme", function () {
|
|
15
|
+
it("getDefaultSeriesColors returns four theme hues", function () {
|
|
16
|
+
expect((0, chartColorsFromTheme_1.getDefaultSeriesColors)(mockColors)).toEqual([
|
|
17
|
+
"#111111",
|
|
18
|
+
"#222222",
|
|
19
|
+
"#333333",
|
|
20
|
+
"#444444",
|
|
21
|
+
]);
|
|
22
|
+
});
|
|
23
|
+
it("mergeChartTitleStyle applies primary then overrides", function () {
|
|
24
|
+
expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { fontSize: "20px" })).toMatchObject({
|
|
25
|
+
color: "#111111",
|
|
26
|
+
fontSize: "20px",
|
|
27
|
+
fontWeight: 600,
|
|
28
|
+
fontFamily: "Arial",
|
|
29
|
+
});
|
|
30
|
+
expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { color: "#999999" }).color).toBe("#999999");
|
|
31
|
+
});
|
|
32
|
+
it("chartAxisLabelColor reads gray scale", function () {
|
|
33
|
+
expect((0, chartColorsFromTheme_1.chartAxisLabelColor)(mockColors)).toBe("#555555");
|
|
34
|
+
});
|
|
35
|
+
});
|