pixelize-design-library 2.0.9 → 2.0.11

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 (10) hide show
  1. package/dist/Components/DatePicker/DatePickerProps.d.ts +13 -8
  2. package/dist/Components/DatePicker/TimePicker.d.ts +1 -5
  3. package/dist/Components/DatePicker/TimePicker.js +27 -9
  4. package/dist/Components/Header/HeaderActions.d.ts +3 -0
  5. package/dist/Components/Header/HeaderActions.js +6 -3
  6. package/dist/Components/KanbanBoard/AccountCard.js +1 -1
  7. package/dist/Components/KanbanBoard/KanbanBoard.js +7 -2
  8. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +1 -1
  9. package/dist/Pages/datePick.js +1 -1
  10. package/package.json +1 -1
package/dist/Components/DatePicker/DatePickerProps.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type PickerType = "date" | "time" | "datetime";
2
- export interface BaseDatePickerProps {
2
+ export type BaseDatePickerProps = {
3
3
  id?: string;
4
4
  name?: string;
5
5
  label?: string;
@@ -19,19 +19,24 @@ export interface BaseDatePickerProps {
19
19
  autoComplete?: string;
20
20
  disabled?: boolean;
21
21
  width?: string | number;
22
- }
23
- export interface SingleDatePickerProps extends BaseDatePickerProps {
22
+ };
23
+ export type SingleDatePickerProps = BaseDatePickerProps & {
24
24
  isRange?: false;
25
25
  selectedDate?: Date | null;
26
26
  onChange: (date: Date | null) => void;
27
- }
28
- export interface RangeDate {
27
+ };
28
+ export type RangeDate = {
29
29
  from: Date | null;
30
30
  to: Date | null;
31
- }
32
- export interface RangeDatePickerProps extends BaseDatePickerProps {
31
+ };
32
+ export type RangeDatePickerProps = BaseDatePickerProps & {
33
33
  isRange: true;
34
34
  selectedDate?: RangeDate | null;
35
35
  onChange: (range: RangeDate | null) => void;
36
- }
36
+ };
37
37
  export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
38
+ export type TimePickerProps = {
39
+ date: Date;
40
+ onChange: (date: Date) => void;
41
+ dateFormat: string;
42
+ };
package/dist/Components/DatePicker/TimePicker.d.ts CHANGED
@@ -1,8 +1,4 @@
1
1
  import React from "react";
2
- interface TimePickerProps {
3
- date: Date;
4
- onChange: (date: Date) => void;
5
- dateFormat: string;
6
- }
2
+ import { TimePickerProps } from "./DatePickerProps";
7
3
  declare const TimePicker: React.FC<TimePickerProps>;
8
4
  export default TimePicker;
package/dist/Components/DatePicker/TimePicker.js CHANGED
@@ -29,11 +29,15 @@ var TimePicker = function (_a) {
29
29
  var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
30
30
  var _b = (0, react_1.useState)(date.getHours()), hour = _b[0], setHour = _b[1];
31
31
  var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
32
- var ampm = is12HourFormat ? (hour >= 12 ? "PM" : "AM") : "";
32
+ var _d = (0, react_1.useState)(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""), ampm = _d[0], setAmpm = _d[1];
33
33
  (0, react_1.useEffect)(function () {
34
- setHour(date.getHours());
34
+ var newHour = date.getHours();
35
+ setHour(newHour);
35
36
  setMinute(date.getMinutes());
36
- }, [date]);
37
+ if (is12HourFormat) {
38
+ setAmpm(newHour >= 12 ? "PM" : "AM");
39
+ }
40
+ }, [date, is12HourFormat]);
37
41
  var convertTo24Hour = function (hr, meridiem) {
38
42
  if (meridiem === "AM")
39
43
  return hr === 12 ? 0 : hr;
@@ -52,13 +56,14 @@ var TimePicker = function (_a) {
52
56
  var hr = parseInt(e.target.value || "1", 10);
53
57
  if (is12HourFormat) {
54
58
  hr = Math.max(1, Math.min(12, hr));
59
+ setHour(hr);
55
60
  updateTime(hr, minute, ampm);
56
61
  }
57
62
  else {
58
63
  hr = Math.max(0, Math.min(23, hr));
64
+ setHour(hr);
59
65
  updateTime(hr, minute);
60
66
  }
61
- setHour(hr);
62
67
  };
63
68
  var handleMinuteChange = function (e) {
64
69
  var min = parseInt(e.target.value || "0", 10);
@@ -70,14 +75,27 @@ var TimePicker = function (_a) {
70
75
  var newMeridiem = ampm === "AM" ? "PM" : "AM";
71
76
  var displayHr = hour % 12 === 0 ? 12 : hour % 12;
72
77
  var newHr = convertTo24Hour(displayHr, newMeridiem);
73
- setHour(newHr);
74
- updateTime(newHr, minute, newMeridiem);
78
+ setAmpm(newMeridiem);
79
+ setHour(displayHr);
80
+ updateTime(displayHr, minute, newMeridiem);
75
81
  };
76
82
  var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
77
- return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "1.25rem" } },
83
+ return (react_1.default.createElement("div", { style: {
84
+ display: "flex",
85
+ alignItems: "center",
86
+ gap: "0.5rem",
87
+ fontSize: "1.25rem",
88
+ marginTop: "1rem",
89
+ } },
78
90
  react_1.default.createElement("input", { type: "number", value: displayHour, onChange: handleHourChange, min: is12HourFormat ? 1 : 0, max: is12HourFormat ? 12 : 23, style: { width: "3rem", textAlign: "center" } }),
79
91
  ":",
80
- react_1.default.createElement("input", { type: "number", value: minute, onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
81
- is12HourFormat && (react_1.default.createElement("button", { onClick: handleAmpmToggle, style: { fontWeight: "bold", padding: "0.25rem 0.5rem" } }, ampm))));
92
+ react_1.default.createElement("input", { type: "number", value: minute.toString().padStart(2, "0"), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
93
+ is12HourFormat && (react_1.default.createElement("button", { type: "button", onClick: handleAmpmToggle, style: {
94
+ fontWeight: "bold",
95
+ padding: "0.25rem 0.5rem",
96
+ border: "none",
97
+ background: "transparent",
98
+ cursor: "pointer",
99
+ } }, ampm))));
82
100
  };
83
101
  exports.default = TimePicker;
package/dist/Components/Header/HeaderActions.d.ts CHANGED
@@ -7,14 +7,17 @@ declare const HeaderActions: ({ select, edit, create, }: {
7
7
  onSelectChange?: ((option?: OptionProp) => void) | undefined;
8
8
  selectPlaceholderText?: string | undefined;
9
9
  width?: string | undefined;
10
+ value?: string | undefined;
10
11
  } | undefined;
11
12
  edit?: {
12
13
  isEditable?: boolean | undefined;
13
14
  onEdit?: (() => void) | undefined;
15
+ label?: string | undefined;
14
16
  } | undefined;
15
17
  create?: {
16
18
  isCreatable?: boolean | undefined;
17
19
  onCreate?: (() => void) | undefined;
20
+ label?: string | undefined;
18
21
  } | undefined;
19
22
  }) => React.JSX.Element;
20
23
  export default HeaderActions;
package/dist/Components/Header/HeaderActions.js CHANGED
@@ -15,17 +15,20 @@ var HeaderActions = function (_a) {
15
15
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
16
16
  var elements = [];
17
17
  if (select === null || select === void 0 ? void 0 : select.isSelect) {
18
- elements.push(react_2.default.createElement(Select_1.default, { key: "select", options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, width: (_c = select.width) !== null && _c !== void 0 ? _c : "12.5rem", onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); } }));
18
+ elements.push(react_2.default.createElement(Select_1.default, { key: "select", options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, width: (_c = select.width) !== null && _c !== void 0 ? _c : "12.5rem", onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }));
19
19
  }
20
20
  if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
21
21
  elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
22
22
  react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
23
- react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, "Edit Layout")));
23
+ react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, edit.label ? edit.label : "Edit Layout")));
24
24
  }
25
25
  if (create === null || create === void 0 ? void 0 : create.isCreatable) {
26
26
  elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
27
27
  react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
28
- react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] }, "Create New")));
28
+ react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] },
29
+ " ",
30
+ create.label ? create.label : "Create New",
31
+ " ")));
29
32
  }
30
33
  return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" }, elements.map(function (el, i) { return (react_2.default.createElement(react_2.default.Fragment, { key: i },
31
34
  i > 0 && react_2.default.createElement(Divider_1.default, null),
package/dist/Components/KanbanBoard/AccountCard.js CHANGED
@@ -50,7 +50,7 @@ var AccountCard = function (_a) {
50
50
  var _b = (0, react_1.useState)(false), showMore = _b[0], setShowMore = _b[1];
51
51
  var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
52
52
  var visibleKeys = showMore ? keys : keys.slice(0, 4);
53
- return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id, index: index }, function (provided) {
53
+ return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index }, function (provided) {
54
54
  var _a, _b, _c, _d, _e, _f;
55
55
  return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { width: "16.5rem", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[500], border: "0.1rem solid ".concat((_b = colors.gray) === null || _b === void 0 ? void 0 : _b[200]), p: 2, mt: 3 }),
56
56
  react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[700], overflow: "none" },
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -88,17 +88,22 @@ var KanbanBoard = function (_a) {
88
88
  });
89
89
  }
90
90
  };
91
+ var handleColumnDelete = function (colId) {
92
+ var _a;
93
+ var columnIds = ((_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items.map(function (item) { return item.id; })) || [];
94
+ onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
95
+ };
91
96
  return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
92
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) {
93
98
  var colId = _a[0], column = _a[1];
94
- return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId }, function (provided, snapshot) {
99
+ return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
95
100
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
96
101
  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
97
102
  ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
98
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" }),
99
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" },
100
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),
101
- 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 onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(colId); } })),
106
+ 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); } })),
102
107
  react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
103
108
  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 })); }),
104
109
  provided.placeholder)));
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -17,7 +17,7 @@ export type KanbanBoardProps = {
17
17
  data: Record<string, ColumnType>;
18
18
  onDelete?: (account: Account) => void;
19
19
  onOpen?: (account: Account) => void;
20
- onColumnDelete?: (colId: string | number) => void;
20
+ onColumnDelete?: (colId: (string | number)[]) => void;
21
21
  onDrag?: ({ from, to, item, }: {
22
22
  from: string;
23
23
  to: string;
package/dist/Pages/datePick.js CHANGED
@@ -62,7 +62,7 @@ var DatePick = function () {
62
62
  react_1.default.createElement("h2", null, "time "),
63
63
  react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedTime, onChange: handleTimeChange, dateFormat: "HH:mm", pickerType: "time", width: "300px", error: true, errorMessage: "Invalid date" }),
64
64
  react_1.default.createElement("h2", null, "datetime "),
65
- react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
65
+ react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy hh:mm aa", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
66
66
  react_1.default.createElement("br", null),
67
67
  react_1.default.createElement("h2", null, "Date Range Picker"),
68
68
  react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "date", onChange: handleDateRangeChange, selectedDate: selectedDateRange, width: "300px", error: true, errorMessage: "Invalid date" })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.9",
3
+ "version": "2.0.11",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",