pixelize-design-library 2.2.33 → 2.2.35
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/README.md +223 -47
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +102 -99
- package/dist/Components/Notification/Notification.d.ts +4 -1
- package/dist/Components/Notification/Notification.js +45 -22
- package/dist/Components/Notification/NotificationProps.d.ts +4 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,64 +1,240 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pixelize Design Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A comprehensive React component library built with TypeScript, providing a rich set of UI components for modern web applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Modern Design System** - Consistent and beautiful components
|
|
8
|
+
- 📱 **Responsive** - Mobile-first design approach
|
|
9
|
+
- ♿ **Accessible** - Built with accessibility in mind
|
|
10
|
+
- 🔧 **TypeScript** - Full TypeScript support
|
|
11
|
+
- 🎯 **Customizable** - Easy theming and customization
|
|
12
|
+
- 📦 **Tree-shakable** - Import only what you need
|
|
4
13
|
|
|
5
14
|
## Prerequisites
|
|
6
15
|
|
|
7
16
|
Before you begin, ensure you have the following installed:
|
|
8
17
|
|
|
9
|
-
- Node.js (
|
|
10
|
-
- npm (
|
|
18
|
+
- Node.js (v16 or higher)
|
|
19
|
+
- npm (v7 or higher) or yarn
|
|
20
|
+
- React (v16.8 or higher)
|
|
11
21
|
|
|
12
22
|
## Installation
|
|
13
23
|
|
|
14
|
-
|
|
24
|
+
Install the library and its peer dependencies:
|
|
15
25
|
|
|
16
26
|
```bash
|
|
17
|
-
npm install pixelize-design-library
|
|
27
|
+
npm install pixelize-design-library pixelize-authenticator
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
or with yarn:
|
|
18
31
|
|
|
32
|
+
```bash
|
|
33
|
+
yarn add pixelize-design-library pixelize-authenticator
|
|
19
34
|
```
|
|
20
35
|
|
|
21
|
-
|
|
36
|
+
## Quick Start
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import React from 'react';
|
|
40
|
+
import { Button, Card, TextInput } from 'pixelize-design-library';
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<div>
|
|
45
|
+
<Card>
|
|
46
|
+
<TextInput placeholder="Enter your name" />
|
|
47
|
+
<Button variant="primary">Submit</Button>
|
|
48
|
+
</Card>
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default App;
|
|
54
|
+
```
|
|
22
55
|
|
|
23
56
|
## Components
|
|
24
57
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
-
|
|
49
|
-
-
|
|
50
|
-
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
58
|
+
### Layout & Navigation
|
|
59
|
+
- **Accordion** - Collapsible content sections
|
|
60
|
+
- **Breadcrumbs** - Navigation breadcrumb trail
|
|
61
|
+
- **Card** - Container component for content
|
|
62
|
+
- **Modal** - Overlay dialog component
|
|
63
|
+
- **NavigationBar** - Main navigation component
|
|
64
|
+
- **SideBar** - Side navigation panel
|
|
65
|
+
|
|
66
|
+
### Form Controls
|
|
67
|
+
- **Button** - Interactive button component
|
|
68
|
+
- **ButtonGroupIcon** - Icon-based button group
|
|
69
|
+
- **Checkbox** - Checkbox input control
|
|
70
|
+
- **DatePicker** - Date selection component
|
|
71
|
+
- **Dropdown** - Dropdown selection component
|
|
72
|
+
- **MultiSelect** - Multi-selection dropdown
|
|
73
|
+
- **NumberInput** - Numeric input field
|
|
74
|
+
- **PinInput** - PIN/OTP input component
|
|
75
|
+
- **RadioButton** - Radio button input
|
|
76
|
+
- **RadioButtonGroup** - Group of radio buttons
|
|
77
|
+
- **Search** - Search input component
|
|
78
|
+
- **SearchSelect** - Searchable select dropdown
|
|
79
|
+
- **Select** - Single selection dropdown
|
|
80
|
+
- **Switch** - Toggle switch component
|
|
81
|
+
- **TextInput** - Text input field
|
|
82
|
+
- **InputTextArea** - Multi-line text input
|
|
83
|
+
- **NoteTextArea** - Rich text editor
|
|
84
|
+
|
|
85
|
+
### Data Display
|
|
86
|
+
- **Table** - Data table component
|
|
87
|
+
- **Timeline** - Timeline visualization
|
|
88
|
+
- **Skeletons** - Loading skeleton components
|
|
89
|
+
- **ProgressBar** - Progress indicator
|
|
90
|
+
|
|
91
|
+
### Charts & Visualization
|
|
92
|
+
- **ApexBarChart** - Bar chart component
|
|
93
|
+
- **ApexPieChart** - Pie chart component
|
|
94
|
+
|
|
95
|
+
### Feedback & Status
|
|
96
|
+
- **AlertDialog** - Alert dialog component *(New)*
|
|
97
|
+
- **Loading** - Loading spinner component
|
|
98
|
+
- **Toaster** - Toast notification system
|
|
99
|
+
- **useToaster** - Hook for toast management
|
|
100
|
+
- **ToolTip** - Tooltip component
|
|
101
|
+
|
|
102
|
+
### User & Profile
|
|
103
|
+
- **ProfileCard** - User profile card
|
|
104
|
+
- **ProfilePhotoViewer** - Profile photo viewer
|
|
105
|
+
- **VerifyEmailOtp** - Email verification component
|
|
106
|
+
|
|
107
|
+
### Editor
|
|
108
|
+
- **Editor** - Rich text editor component
|
|
109
|
+
|
|
110
|
+
## Usage Examples
|
|
111
|
+
|
|
112
|
+
### Basic Button Usage
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import { Button } from 'pixelize-design-library';
|
|
116
|
+
|
|
117
|
+
function MyComponent() {
|
|
118
|
+
return (
|
|
119
|
+
<div>
|
|
120
|
+
<Button variant="primary" size="medium">
|
|
121
|
+
Primary Button
|
|
122
|
+
</Button>
|
|
123
|
+
<Button variant="secondary" size="large">
|
|
124
|
+
Secondary Button
|
|
125
|
+
</Button>
|
|
126
|
+
</div>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Form with Validation
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { TextInput, Button, Card } from 'pixelize-design-library';
|
|
135
|
+
|
|
136
|
+
function LoginForm() {
|
|
137
|
+
const [email, setEmail] = useState('');
|
|
138
|
+
const [password, setPassword] = useState('');
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<Card>
|
|
142
|
+
<TextInput
|
|
143
|
+
label="Email"
|
|
144
|
+
type="email"
|
|
145
|
+
value={email}
|
|
146
|
+
onChange={setEmail}
|
|
147
|
+
required
|
|
148
|
+
/>
|
|
149
|
+
<TextInput
|
|
150
|
+
label="Password"
|
|
151
|
+
type="password"
|
|
152
|
+
value={password}
|
|
153
|
+
onChange={setPassword}
|
|
154
|
+
required
|
|
155
|
+
/>
|
|
156
|
+
<Button variant="primary" type="submit">
|
|
157
|
+
Login
|
|
158
|
+
</Button>
|
|
159
|
+
</Card>
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Data Table
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import { Table } from 'pixelize-design-library';
|
|
168
|
+
|
|
169
|
+
const columns = [
|
|
170
|
+
{ key: 'name', title: 'Name' },
|
|
171
|
+
{ key: 'email', title: 'Email' },
|
|
172
|
+
{ key: 'role', title: 'Role' }
|
|
173
|
+
];
|
|
174
|
+
|
|
175
|
+
const data = [
|
|
176
|
+
{ name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
|
177
|
+
{ name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
|
|
178
|
+
];
|
|
179
|
+
|
|
180
|
+
function DataTable() {
|
|
181
|
+
return (
|
|
182
|
+
<Table
|
|
183
|
+
columns={columns}
|
|
184
|
+
data={data}
|
|
185
|
+
pagination
|
|
186
|
+
searchable
|
|
187
|
+
/>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## Theming
|
|
193
|
+
|
|
194
|
+
The library supports custom theming through CSS variables:
|
|
195
|
+
|
|
196
|
+
```css
|
|
197
|
+
:root {
|
|
198
|
+
--primary-color: #007bff;
|
|
199
|
+
--secondary-color: #6c757d;
|
|
200
|
+
--success-color: #28a745;
|
|
201
|
+
--danger-color: #dc3545;
|
|
202
|
+
--warning-color: #ffc107;
|
|
203
|
+
--info-color: #17a2b8;
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## TypeScript Support
|
|
208
|
+
|
|
209
|
+
All components are built with TypeScript and include full type definitions:
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
import { ButtonProps } from 'pixelize-design-library';
|
|
213
|
+
|
|
214
|
+
interface CustomButtonProps extends ButtonProps {
|
|
215
|
+
customProp?: string;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
function CustomButton({ customProp, ...props }: CustomButtonProps) {
|
|
219
|
+
return <Button {...props} />;
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Contributing
|
|
224
|
+
|
|
225
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
226
|
+
|
|
227
|
+
## License
|
|
228
|
+
|
|
229
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
230
|
+
|
|
231
|
+
## Support
|
|
232
|
+
|
|
233
|
+
For support and questions:
|
|
234
|
+
- 📧 Email: support@pixelize.com
|
|
235
|
+
- 📖 Documentation: [docs.pixelize.com](https://docs.pixelize.com)
|
|
236
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/pixelize/design-library/issues)
|
|
237
|
+
|
|
238
|
+
## Changelog
|
|
239
|
+
|
|
240
|
+
See [CHANGELOG.md](CHANGELOG.md) for a list of changes and updates.
|
|
@@ -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, isLoading, virtualization, }: KanbanBoardProps) => React.JSX.Element;
|
|
3
|
+
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, }: KanbanBoardProps) => React.JSX.Element;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -53,10 +53,11 @@ var lucide_react_1 = require("lucide-react");
|
|
|
53
53
|
var react_window_1 = require("react-window");
|
|
54
54
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
55
55
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
56
|
+
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
56
57
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
57
58
|
var KanbanBoard = function (_a) {
|
|
58
59
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
59
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, virtualization = _a.virtualization;
|
|
60
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
|
|
60
61
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
61
62
|
var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
|
|
62
63
|
var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
|
|
@@ -163,103 +164,105 @@ var KanbanBoard = function (_a) {
|
|
|
163
164
|
react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); } }))); }))),
|
|
164
165
|
index === items.length - 1 && placeholder));
|
|
165
166
|
};
|
|
166
|
-
return (react_1.default.createElement(
|
|
167
|
-
react_1.default.createElement(
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
react_1.default.createElement(react_2.
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
167
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
168
|
+
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
169
|
+
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
170
|
+
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
|
|
171
|
+
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
|
|
172
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
173
|
+
sx: {
|
|
174
|
+
"&::-webkit-scrollbar": {
|
|
175
|
+
height: "6px", // Consistent size - 6px
|
|
176
|
+
},
|
|
177
|
+
"&::-webkit-scrollbar-track": {
|
|
178
|
+
background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100],
|
|
179
|
+
borderRadius: "3px",
|
|
180
|
+
margin: "0 4px", // Add gap on sides
|
|
181
|
+
},
|
|
182
|
+
"&::-webkit-scrollbar-thumb": {
|
|
183
|
+
background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[400],
|
|
184
|
+
borderRadius: "3px",
|
|
185
|
+
border: "1px solid ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[100]),
|
|
186
|
+
},
|
|
187
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
188
|
+
background: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500],
|
|
189
|
+
},
|
|
190
|
+
// For Firefox
|
|
191
|
+
scrollbarWidth: "thin",
|
|
192
|
+
scrollbarColor: "".concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], " ").concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100]),
|
|
193
|
+
} }, isLoading
|
|
194
|
+
? Array.from({ length: 5 }).map(function (_, idx) {
|
|
195
|
+
var _a, _b;
|
|
196
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, 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 },
|
|
197
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
198
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
199
|
+
})
|
|
200
|
+
: Object.entries(columns).map(function (_a) {
|
|
201
|
+
var colId = _a[0], column = _a[1];
|
|
202
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
203
|
+
var item = column.items[rubric.source.index];
|
|
204
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
|
|
205
|
+
react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
|
|
206
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
207
|
+
} })));
|
|
208
|
+
} }, function (provided, snapshot) {
|
|
209
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
210
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
211
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
212
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
213
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
214
|
+
: "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
215
|
+
react_1.default.createElement(react_2.Flex, { width: "95%", 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, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
|
|
216
|
+
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),
|
|
217
|
+
hoveredColumn === colId && column.items.length > 0 && (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); }, transition: "color 0.2s ease" })),
|
|
218
|
+
!(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
|
|
219
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflowY: "auto", width: "100%", mr: 1,
|
|
220
|
+
/////LIST/////////////////////////////
|
|
221
|
+
sx: {
|
|
222
|
+
overflowY: "auto",
|
|
223
|
+
overflowX: "hidden",
|
|
224
|
+
/* === Firefox === */
|
|
225
|
+
scrollbarWidth: "thin",
|
|
226
|
+
scrollbarColor: "var(--chakra-colors-gray-300) transparent",
|
|
227
|
+
/* === Chrome, Edge, Safari === */
|
|
228
|
+
"&::-webkit-scrollbar": {
|
|
229
|
+
width: "6px !important",
|
|
230
|
+
height: "6px !important", // for horizontal scrollbar if any
|
|
231
|
+
},
|
|
232
|
+
"&::-webkit-scrollbar-track": {
|
|
233
|
+
background: "gray.100",
|
|
234
|
+
borderRadius: "3px",
|
|
235
|
+
marginTop: "4px",
|
|
236
|
+
marginBottom: "4px",
|
|
237
|
+
},
|
|
238
|
+
"&::-webkit-scrollbar-thumb": {
|
|
239
|
+
background: "gray.300",
|
|
240
|
+
borderRadius: "3px",
|
|
241
|
+
border: "1px solid",
|
|
242
|
+
borderColor: "gray.100",
|
|
243
|
+
},
|
|
244
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
245
|
+
background: "gray.400",
|
|
246
|
+
},
|
|
247
|
+
/* === Prevent scrollbar expansion in Chrome === */
|
|
248
|
+
"&": {
|
|
249
|
+
scrollbarGutter: "stable both-edges",
|
|
250
|
+
},
|
|
251
|
+
} }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
252
|
+
if (el)
|
|
253
|
+
listRefs.current[colId] = el;
|
|
254
|
+
}, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
|
|
255
|
+
items: column.items,
|
|
256
|
+
colId: colId,
|
|
257
|
+
placeholder: provided.placeholder,
|
|
258
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
259
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
260
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
261
|
+
react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
262
|
+
return toggleExpand(account.id, colId, index);
|
|
263
|
+
} }))); }))); }),
|
|
264
|
+
provided.placeholder)))));
|
|
265
|
+
}));
|
|
266
|
+
}))))));
|
|
264
267
|
};
|
|
265
268
|
exports.default = KanbanBoard;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { NotificationProps } from "./NotificationProps";
|
|
3
|
-
|
|
3
|
+
interface ExtendedNotificationProps extends NotificationProps {
|
|
4
|
+
isLoading?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, }: ExtendedNotificationProps) => React.JSX.Element;
|
|
4
7
|
export default Notification;
|
|
@@ -28,7 +28,7 @@ var react_2 = require("@chakra-ui/react");
|
|
|
28
28
|
var lucide_react_1 = require("lucide-react");
|
|
29
29
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
30
30
|
var Notification = function (_a) {
|
|
31
|
-
var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick;
|
|
31
|
+
var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
|
|
32
32
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
33
33
|
var bgColor = theme.colors.white;
|
|
34
34
|
var borderColor = theme.colors.gray[200];
|
|
@@ -40,8 +40,7 @@ var Notification = function (_a) {
|
|
|
40
40
|
var startDate = notification.startDate
|
|
41
41
|
? new Date(notification.startDate)
|
|
42
42
|
: null;
|
|
43
|
-
|
|
44
|
-
var _b = (0, react_1.useMemo)(function () {
|
|
43
|
+
var _c = (0, react_1.useMemo)(function () {
|
|
45
44
|
var targetDate = notification.dueDate
|
|
46
45
|
? new Date(notification.dueDate)
|
|
47
46
|
: notification.endDate
|
|
@@ -62,7 +61,6 @@ var Notification = function (_a) {
|
|
|
62
61
|
var typeLabel = toTitle(notification.type);
|
|
63
62
|
var label = "";
|
|
64
63
|
if (diffMs < 0) {
|
|
65
|
-
// 🔴 Overdue / Ended
|
|
66
64
|
var overdueMinutes = Math.abs(diffMinutes);
|
|
67
65
|
if (overdueMinutes < 60)
|
|
68
66
|
label = "".concat(typeLabel, " overdue by ").concat(overdueMinutes, " minute").concat(overdueMinutes === 1 ? "" : "s", " ago");
|
|
@@ -72,7 +70,6 @@ var Notification = function (_a) {
|
|
|
72
70
|
label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 1440), " day").concat(Math.floor(overdueMinutes / 1440) === 1 ? "" : "s", " ago");
|
|
73
71
|
}
|
|
74
72
|
else {
|
|
75
|
-
// 🟢 Upcoming
|
|
76
73
|
if (diffMinutes < 60)
|
|
77
74
|
label = "".concat(typeLabel, " due in ").concat(diffMinutes, " minute").concat(diffMinutes === 1 ? "" : "s");
|
|
78
75
|
else if (diffHours < 24)
|
|
@@ -81,27 +78,54 @@ var Notification = function (_a) {
|
|
|
81
78
|
label = "".concat(typeLabel, " due in ").concat(Math.ceil(diffDays), " day").concat(Math.ceil(diffDays) === 1 ? "" : "s");
|
|
82
79
|
}
|
|
83
80
|
return { timeLabel: label, diffDays: diffDays };
|
|
84
|
-
}, [notification.dueDate, notification.endDate, notification.type]), timeLabel =
|
|
85
|
-
// 🟡 Status color indicator
|
|
81
|
+
}, [notification.dueDate, notification.endDate, notification.type]), timeLabel = _c.timeLabel, diffDays = _c.diffDays;
|
|
86
82
|
var getStatusColor = function () {
|
|
87
83
|
if (diffDays === null)
|
|
88
84
|
return theme.colors.gray[400];
|
|
89
85
|
if (diffDays < 0)
|
|
90
|
-
return errorColor;
|
|
86
|
+
return errorColor;
|
|
91
87
|
if (diffDays <= 0.04)
|
|
92
|
-
return warningColor;
|
|
88
|
+
return warningColor;
|
|
93
89
|
if (diffDays <= 1)
|
|
94
|
-
return theme.colors.yellow[400];
|
|
95
|
-
return successColor;
|
|
90
|
+
return theme.colors.yellow[400];
|
|
91
|
+
return successColor;
|
|
96
92
|
};
|
|
97
93
|
var TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
94
|
+
var formattedStartDateTime = (0, react_1.useMemo)(function () {
|
|
95
|
+
if (!startDate)
|
|
96
|
+
return "";
|
|
97
|
+
var options = notification.type === "meeting"
|
|
98
|
+
? {
|
|
99
|
+
day: "2-digit",
|
|
100
|
+
month: "short",
|
|
101
|
+
hour: "2-digit",
|
|
102
|
+
minute: "2-digit",
|
|
103
|
+
}
|
|
104
|
+
: {
|
|
105
|
+
day: "2-digit",
|
|
106
|
+
month: "short",
|
|
107
|
+
year: "numeric",
|
|
108
|
+
};
|
|
109
|
+
return startDate.toLocaleString("en-US", options);
|
|
110
|
+
}, [startDate, notification.type]);
|
|
111
|
+
// 🔄 If loading, show skeleton
|
|
112
|
+
if (isLoading) {
|
|
113
|
+
return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm" },
|
|
114
|
+
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
|
|
115
|
+
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
116
|
+
react_1.default.createElement(react_2.SkeletonCircle, { size: "4" }),
|
|
117
|
+
react_1.default.createElement(react_2.Skeleton, { height: "14px", width: "60%" })),
|
|
118
|
+
react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
|
|
119
|
+
react_1.default.createElement(react_2.SkeletonCircle, { size: "8" }),
|
|
120
|
+
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, flex: "1" },
|
|
121
|
+
react_1.default.createElement(react_2.Skeleton, { height: "16px", width: "70%" }),
|
|
122
|
+
react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "50%" }))),
|
|
123
|
+
react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
|
|
124
|
+
react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
|
|
125
|
+
react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "40%" }),
|
|
126
|
+
react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "30%" })))));
|
|
127
|
+
}
|
|
128
|
+
// 🧩 Normal render
|
|
105
129
|
return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative" },
|
|
106
130
|
onClose && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: function (e) {
|
|
107
131
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -121,17 +145,16 @@ var Notification = function (_a) {
|
|
|
121
145
|
react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
|
|
122
146
|
react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
|
|
123
147
|
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
|
|
124
|
-
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); } }, notification.title),
|
|
148
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(notification.id); } }, notification.title),
|
|
125
149
|
notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
|
|
126
150
|
react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
|
|
127
151
|
react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
|
|
128
152
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
129
153
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }),
|
|
130
|
-
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] },
|
|
154
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formattedStartDateTime)),
|
|
131
155
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
132
156
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }),
|
|
133
157
|
notification.host && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.host))),
|
|
134
|
-
showStatus &&
|
|
135
|
-
react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" })))));
|
|
158
|
+
showStatus && (react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))))));
|
|
136
159
|
};
|
|
137
160
|
exports.default = Notification;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type NotificationData = {
|
|
2
|
-
id:
|
|
2
|
+
id: number;
|
|
3
3
|
title: string;
|
|
4
4
|
startDate: string;
|
|
5
5
|
dueDate?: string;
|
|
@@ -7,11 +7,12 @@ export type NotificationData = {
|
|
|
7
7
|
host?: string;
|
|
8
8
|
description?: string;
|
|
9
9
|
status?: string;
|
|
10
|
-
type
|
|
10
|
+
type: "task" | "meeting" | "call";
|
|
11
11
|
};
|
|
12
12
|
export type NotificationProps = {
|
|
13
13
|
notification: NotificationData;
|
|
14
14
|
onClose?: () => void;
|
|
15
15
|
showStatus?: boolean;
|
|
16
|
-
onClick?: () => void;
|
|
16
|
+
onClick?: (id: number) => void;
|
|
17
|
+
isLoading?: boolean;
|
|
17
18
|
};
|