pixelize-design-library 2.0.12 → 2.0.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.
Files changed (6) hide show
  1. package/dist/Components/DatePicker/DatePicker.js +14 -4
  2. package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
  3. package/dist/Components/KanbanBoard/KanbanBoard.js +14 -7
  4. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +1 -0
  5. package/dist/Pages/kanbanboard.js +1 -1
  6. package/package.json +1 -1
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -65,7 +65,7 @@ function CustomDatePicker(props) {
65
65
  var popoverRef = (0, react_1.useRef)(null);
66
66
  var handleOpen = function () {
67
67
  if (!isRange && !selectedDate) {
68
- setTempDate(null);
68
+ setTempDate(new Date());
69
69
  }
70
70
  onOpen();
71
71
  };
@@ -186,16 +186,26 @@ function CustomDatePicker(props) {
186
186
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
187
187
  react_1.default.createElement(react_2.PopoverBody, null,
188
188
  showDate && (react_1.default.createElement(react_1.default.Fragment, null,
189
- react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mb: 2 },
189
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
190
190
  react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
191
191
  react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
192
- react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, (0, date_fns_1.format)(currentMonth, "MMMM yyyy")),
192
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
193
+ react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
194
+ var newMonth = parseInt(e.target.value, 10);
195
+ setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
196
+ } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
197
+ react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
198
+ var newYear = parseInt(e.target.value, 10);
199
+ setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
200
+ } }, Array.from({ length: 100 }).map(function (_, i) {
201
+ var year = new Date().getFullYear() - 50 + i;
202
+ return (react_1.default.createElement("option", { key: year, value: year }, year));
203
+ }))),
193
204
  react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
194
205
  react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
195
206
  react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
196
207
  renderDays())),
197
208
  !isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date(), dateFormat: dateFormat, onChange: function (updatedDate) {
198
- console.log("onChange", updatedDate);
199
209
  setTempDate(updatedDate);
200
210
  props.onChange(updatedDate);
201
211
  } })),
package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { KanbanBoardProps } from "./KanbanBoardProps";
3
- declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete }: KanbanBoardProps) => React.JSX.Element;
3
+ declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, }: KanbanBoardProps) => React.JSX.Element;
4
4
  export default KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -54,9 +54,9 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
54
54
  var AccountCard_1 = __importDefault(require("./AccountCard"));
55
55
  var KanbanBoard = function (_a) {
56
56
  var _b;
57
- var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete;
57
+ var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c;
58
58
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
59
- var _c = (0, react_1.useState)(data), columns = _c[0], setColumns = _c[1];
59
+ var _d = (0, react_1.useState)(data), columns = _d[0], setColumns = _d[1];
60
60
  var onDragEnd = function (result) {
61
61
  var _a, _b;
62
62
  var source = result.source, destination = result.destination;
@@ -94,20 +94,27 @@ var KanbanBoard = function (_a) {
94
94
  onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
95
95
  };
96
96
  return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
97
- react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, Object.entries(columns).map(function (_a) {
97
+ react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? (Array.from({ length: 5 }).map(function (_, idx) {
98
+ var _a, _b;
99
+ return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
100
+ react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
101
+ react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
102
+ })) : (Object.entries(columns).map(function (_a) {
98
103
  var colId = _a[0], column = _a[1];
99
104
  return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
100
105
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
101
106
  return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
102
107
  ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
103
- : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500]) : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column" }),
104
- react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, display: "flex", justifyContent: "space-between" },
105
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", lineHeight: "100%", letterSpacing: "0%", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
108
+ : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
109
+ ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
110
+ : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0 }),
111
+ react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, justifyContent: "space-between" },
112
+ react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
106
113
  react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
107
114
  react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
108
115
  column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
109
116
  provided.placeholder)));
110
117
  }));
111
- }))));
118
+ })))));
112
119
  };
113
120
  exports.default = KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -23,4 +23,5 @@ export type KanbanBoardProps = {
23
23
  to: string;
24
24
  item: Account;
25
25
  }) => void;
26
+ isLoading?: boolean;
26
27
  };
package/dist/Pages/kanbanboard.js CHANGED
@@ -110,6 +110,6 @@ var initialData = {
110
110
  },
111
111
  };
112
112
  var KanbanBoardExample = function () {
113
- return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); } }));
113
+ return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false }));
114
114
  };
115
115
  exports.default = KanbanBoardExample;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.12",
3
+ "version": "2.0.13",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",