pixelize-design-library 1.0.49 → 1.0.50

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 (8) hide show
  1. package/README.md +2 -1
  2. package/dist/Components/Timeline/Timeline.d.ts +1 -1
  3. package/dist/Components/Timeline/Timeline.js +114 -118
  4. package/dist/Components/Timeline/TimelineProps.d.ts +13 -2
  5. package/dist/Layout.js +67 -17
  6. package/dist/index.d.ts +2 -1
  7. package/dist/index.js +3 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -47,13 +47,14 @@ PixelizeDesign Library Components Are Below
47
47
  - ProgressBar,
48
48
  - RadioButton,
49
49
  - RadioButtonGroup,
50
- - Search, \* New
50
+ - Search,
51
51
  - Select,
52
52
  - SideBar,
53
53
  - Skeletons,
54
54
  - Switch,
55
55
  - Table,
56
56
  - TextInput,
57
+ - Timeline, \* New
57
58
  - Toaster,
58
59
  - useToaster,
59
60
  - ToolTip,
package/dist/Components/Timeline/Timeline.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { TimelineProps } from "./TimelineProps";
3
- declare const Timeline: React.FC<TimelineProps>;
3
+ declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
4
4
  export default Timeline;
package/dist/Components/Timeline/Timeline.js CHANGED
@@ -9,133 +9,129 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_1 = __importDefault(require("@emotion/styled"));
12
- var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
13
- var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #007bff;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #007bff;\n transform: translateX(-50%);\n"])));
14
- var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n"])), function (_a) {
12
+ var fa_1 = require("react-icons/fa");
13
+ var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
14
+ var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"])));
15
+ var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"])), function (_a) {
15
16
  var isLeft = _a.isLeft;
16
17
  return (isLeft ? "flex-end" : "flex-start");
17
- });
18
- var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: white;\n padding: 16px;\n border: 1px solid #007bff;\n border-radius: 8px;\n width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n background: white;\n padding: 16px;\n border: 1px solid #007bff;\n border-radius: 8px;\n width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
19
- var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 12px;\n height: 12px;\n background-color: #007bff;\n border-radius: 50%;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n width: 12px;\n height: 12px;\n background-color: #007bff;\n border-radius: 50%;\n transform: translateX(-50%);\n"])));
20
- var Arrow = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: ", ";\n border-color: transparent #007bff transparent transparent;\n transform: translateX(-50%);\n top: 50%;\n transform: translateY(-50%);\n transform: ", ";\n"], ["\n position: absolute;\n left: ", ";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: ", ";\n border-color: transparent #007bff transparent transparent;\n transform: translateX(-50%);\n top: 50%;\n transform: translateY(-50%);\n transform: ", ";\n"])), function (_a) {
21
- var isLeft = _a.isLeft;
22
- return (isLeft ? "-10px " : "100%");
23
- }, function (_a) {
24
- var isLeft = _a.isLeft;
25
- return isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px";
26
18
  }, function (_a) {
27
19
  var isLeft = _a.isLeft;
28
- return isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)";
20
+ return (isLeft ? "left" : "right");
29
21
  });
22
+ var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
23
+ var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"])));
30
24
  // const Arrow = styled.div<{ isLeft: boolean }>`
31
- // position: absolute;
32
- // left: ${({ isLeft }) => (isLeft ? 'calc(50% - 20px)' : 'calc(50% + 8px)')}; /* Adjust position based on side */
33
- // width: 0;
34
- // height: 0;
35
- // border-style: solid;
36
- // border-width: ${({ isLeft }) => (isLeft ? '10px 10px 10px 0' : '10px 0 10px 10px')};
37
- // border-color: transparent #007bff transparent transparent;
38
- // transform: ${({ isLeft }) => (isLeft ? 'rotate(90deg)' : 'rotate(-90deg)')}; /* Rotate the arrow */
39
- // top: 50%; /* Align the arrow vertically centered */
40
- // transform: translateY(-50%) ${({ isLeft }) => (isLeft ? 'rotate(90deg)' : 'rotate(-90deg)')};
25
+ // position: absolute;
26
+ // left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
27
+ // width: 0;
28
+ // height: 0;
29
+ // border-style: solid;
30
+ // border-width: ${({ isLeft }) =>
31
+ // isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
32
+ // border-color: transparent #007bff transparent transparent;
33
+ // transform: translateX(-50%);
34
+ // top: 50%;
35
+ // transform: translateY(-50%);
36
+ // transform: ${({ isLeft }) =>
37
+ // isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
41
38
  // `;
42
- var EventContent = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: 24px;\n"], ["\n margin-left: 24px;\n"])));
43
- var EventTitle = styled_1.default.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
44
- var EventDescription = styled_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
45
- var EventTime = styled_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
39
+ var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n // margin-left: 24px;\n"], ["\n // margin-left: 24px;\n"])));
40
+ var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
41
+ var EventDescription = styled_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
42
+ var EventDate = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
43
+ var EventTime = styled_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"])), function (_a) {
44
+ var isLeft = _a.isLeft;
45
+ return (isLeft ? "38% " : "53%");
46
+ });
47
+ var EventGroupDate = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"])));
48
+ var EventGroupSeparator = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
49
+ var EventGroupHeader = styled_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: relative;\n margin-bottom: 24px;\n"], ["\n position: relative;\n margin-bottom: 24px;\n"])));
46
50
  var Timeline = function (_a) {
47
- var events = _a.events, onEventClick = _a.onEventClick;
51
+ var timelineEvents = _a.timelineEvents;
52
+ var formatTimestamp = function (timestamp, type) {
53
+ // console.log("Raw timestamp:", timestamp);
54
+ var parsedTimestamp = parseInt(timestamp, 10);
55
+ // console.log("Parsed timestamp:", parsedTimestamp);
56
+ var date = new Date(parsedTimestamp);
57
+ // console.log("Date object:", date);
58
+ if (isNaN(date.getTime())) {
59
+ return "Invalid Date";
60
+ }
61
+ if (type === "date") {
62
+ var monthNames = [
63
+ "January",
64
+ "February",
65
+ "March",
66
+ "April",
67
+ "May",
68
+ "June",
69
+ "July",
70
+ "August",
71
+ "September",
72
+ "October",
73
+ "November",
74
+ "December",
75
+ ];
76
+ var month = monthNames[date.getMonth()];
77
+ var day = date.getDate();
78
+ var year = date.getFullYear();
79
+ return "".concat(month, " ").concat(day, ", ").concat(year);
80
+ }
81
+ else if (type === "time") {
82
+ // Convert to IST (UTC+5:30)
83
+ var istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
84
+ var istDate = new Date(date.getTime() + istOffset);
85
+ var hours = istDate.getUTCHours();
86
+ var minutes = istDate.getUTCMinutes();
87
+ var ampm = hours >= 12 ? "PM" : "AM";
88
+ // Convert hours to 12-hour format
89
+ hours = hours % 12;
90
+ hours = hours ? hours : 12; // the hour '0' should be '12'
91
+ // Pad minutes with leading zero if needed
92
+ var minutesStr = minutes < 10 ? "0" + minutes : minutes;
93
+ return "".concat(hours, ":").concat(minutesStr, " ").concat(ampm);
94
+ }
95
+ return date.toLocaleString();
96
+ };
97
+ var getIcon = function (event) {
98
+ switch (event.action_from) {
99
+ case "Accounts":
100
+ return react_1.default.createElement(fa_1.FaRupeeSign, null);
101
+ case "Notes":
102
+ return react_1.default.createElement(fa_1.FaFileAlt, null);
103
+ default:
104
+ return react_1.default.createElement(fa_1.FaCircle, null);
105
+ }
106
+ };
107
+ var groupEventsByDate = function (events) {
108
+ return events.reduce(function (groups, event) {
109
+ var date = formatTimestamp(event.created_at, "date");
110
+ if (!groups[date]) {
111
+ groups[date] = [];
112
+ }
113
+ groups[date].push(event);
114
+ return groups;
115
+ }, {});
116
+ };
117
+ var groupedEvents = groupEventsByDate(timelineEvents);
118
+ console.log("groupedEvents", groupedEvents);
48
119
  return (react_1.default.createElement(TimelineContainer, null,
49
120
  react_1.default.createElement(Line, null),
50
- events.map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
51
- react_1.default.createElement(Dot, null),
52
- react_1.default.createElement(Event, { onClick: function () { return onEventClick && onEventClick(event, index); } },
53
- react_1.default.createElement(Arrow, { isLeft: index % 2 === 0 }),
54
- react_1.default.createElement(EventContent, null,
55
- react_1.default.createElement(EventTitle, null, event.title),
56
- react_1.default.createElement(EventDescription, null, event.description),
57
- react_1.default.createElement(EventTime, null, event.time))))); })));
121
+ Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
122
+ react_1.default.createElement(EventGroupHeader, null,
123
+ react_1.default.createElement(EventGroupDate, null, date)),
124
+ groupedEvents[date].map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
125
+ react_1.default.createElement(Dot, null, getIcon(event)),
126
+ react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
127
+ react_1.default.createElement(Event, null,
128
+ react_1.default.createElement(EventContent, null,
129
+ react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
130
+ react_1.default.createElement(EventDescription, null, event.changes),
131
+ react_1.default.createElement(EventDate, null, " by " +
132
+ event.action_by +
133
+ " " +
134
+ formatTimestamp(event.created_at, "date")))))); }))); })));
58
135
  };
59
136
  exports.default = Timeline;
60
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
61
- // import React from 'react';
62
- // import styled from '@emotion/styled';
63
- // import { TimelineProps } from './TimelineProps';
64
- // const TimelineContainer = styled.div`
65
- // position: relative;
66
- // padding: 24px;
67
- // margin: 0 auto;
68
- // width: 100%;
69
- // max-width: 800px;
70
- // `;
71
- // const Line = styled.div`
72
- // position: absolute;
73
- // left: 50%;
74
- // top: 0;
75
- // bottom: 0;
76
- // width: 2px;
77
- // background-color: #007bff;
78
- // transform: translateX(-50%);
79
- // `;
80
- // const EventContainer = styled.div<{ isLeft: boolean }>`
81
- // display: flex;
82
- // justify-content: ${({ isLeft }) => (isLeft ? 'flex-end' : 'flex-start')};
83
- // width: 100%;
84
- // padding: 16px;
85
- // box-sizing: border-box;
86
- // position: relative;
87
- // margin-bottom: 24px;
88
- // `;
89
- // const Event = styled.div`
90
- // background: white;
91
- // padding: 16px;
92
- // border: 1px solid #007bff;
93
- // border-radius: 8px;
94
- // width: 40%;
95
- // position: relative;
96
- // display: flex;
97
- // align-items: center;
98
- // `;
99
- // const Dot = styled.div`
100
- // position: absolute;
101
- // left: 50%;
102
- // width: 12px;
103
- // height: 12px;
104
- // background-color: #007bff;
105
- // border-radius: 50%;
106
- // transform: translateX(-50%);
107
- // `;
108
- // const EventContent = styled.div`
109
- // margin-left: 24px;
110
- // `;
111
- // const EventTitle = styled.h3`
112
- // margin: 0;
113
- // `;
114
- // const EventDescription = styled.p`
115
- // margin: 0;
116
- // `;
117
- // const EventTime = styled.span`
118
- // display: block;
119
- // margin-top: 8px;
120
- // color: #6c757d;
121
- // `;
122
- // const Timeline = ({ events,onEventClick}:TimelineProps) => {
123
- // return (
124
- // <TimelineContainer>
125
- // <Line />
126
- // {events.map((event, index) => (
127
- // <EventContainer key={index} isLeft={index % 2 === 0} onClick={() => onEventClick && onEventClick(event, index)}>
128
- // <Dot />
129
- // <Event>
130
- // <EventContent>
131
- // <EventTitle>{event.title}</EventTitle>
132
- // <EventDescription>{event.description}</EventDescription>
133
- // <EventTime>{event.time}</EventTime>
134
- // </EventContent>
135
- // </Event>
136
- // </EventContainer>
137
- // ))}
138
- // </TimelineContainer>
139
- // );
140
- // };
141
- // export default Timeline;
137
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/Components/Timeline/TimelineProps.d.ts CHANGED
@@ -1,9 +1,20 @@
1
1
  export interface TimelineProps {
2
- events: TimelineEvent[];
3
- onEventClick?: (event: TimelineEvent, index: number) => void;
2
+ events?: TimelineEvent[];
3
+ timelineEvents: TimelineEvents[];
4
+ onEventClick?: (event: TimelineEvents, index: number) => void;
4
5
  }
5
6
  export interface TimelineEvent {
6
7
  title: string;
7
8
  description: string;
8
9
  time: string;
9
10
  }
11
+ export interface TimelineEvents {
12
+ logs_id: number;
13
+ title: string;
14
+ primary_id: number;
15
+ is_from: string;
16
+ action_from: string;
17
+ action_by: string;
18
+ created_at: number;
19
+ changes: any;
20
+ }
package/dist/Layout.js CHANGED
@@ -311,21 +311,71 @@ var Layout = function () {
311
311
  console.log("Search query removed");
312
312
  setSearchQuery("");
313
313
  };
314
- var events = [
315
- { title: "Event 1", description: "Description 1", time: "10:00 AM" },
316
- { title: "Event 2", description: "Description 2", time: "11:00 AM" },
317
- { title: "Event 3", description: "Description 3", time: "12:00 AM" },
318
- { title: "Event 4", description: "Description 4", time: "1:00 AM" },
319
- { title: "Event 5", description: "Description 5", time: "2:00 AM" },
320
- { title: "Event 6", description: "Description 6", time: "3:00 AM" },
321
- { title: "Event 7", description: "Description 7", time: "4:00 AM" },
322
- { title: "Event 8", description: "Description 8", time: "5:00 AM" },
323
- { title: "Event 9", description: "Description 9", time: "6:00 AM" },
324
- { title: "Event 10", description: "Description 10", time: "7:00 AM" },
314
+ var timeline = [
315
+ {
316
+ logs_id: 1,
317
+ title: "Created",
318
+ primary_id: 66,
319
+ is_from: "Accounts",
320
+ action_from: "Accounts",
321
+ action_by: "pixelize technology",
322
+ created_at: 1723104998797,
323
+ changes: null,
324
+ },
325
+ {
326
+ logs_id: 2,
327
+ title: "Updated",
328
+ primary_id: 66,
329
+ is_from: "Accounts",
330
+ action_from: "Accounts",
331
+ action_by: "pixelize technology",
332
+ created_at: 1723105040247,
333
+ changes: null,
334
+ },
335
+ {
336
+ logs_id: 10,
337
+ title: "Created",
338
+ primary_id: 66,
339
+ is_from: "Accounts",
340
+ action_from: "Notes",
341
+ action_by: "pixelize technology",
342
+ created_at: 1723202829694,
343
+ changes: null,
344
+ },
345
+ {
346
+ logs_id: 3,
347
+ title: "Created",
348
+ primary_id: 66,
349
+ is_from: "Accounts",
350
+ action_from: "Notes",
351
+ action_by: "pixelize technology",
352
+ created_at: 1723105099207,
353
+ changes: null,
354
+ },
355
+ {
356
+ logs_id: 7,
357
+ title: "Created",
358
+ primary_id: 66,
359
+ is_from: "Accounts",
360
+ action_from: "Notes",
361
+ action_by: "pixelize technology",
362
+ created_at: 1723105603033,
363
+ changes: null,
364
+ },
365
+ {
366
+ logs_id: 8,
367
+ title: "Created",
368
+ primary_id: 66,
369
+ is_from: "Accounts",
370
+ action_from: "Notes",
371
+ action_by: "pixelize technology",
372
+ created_at: 1723202829694,
373
+ changes: null,
374
+ },
325
375
  ];
326
- var handleTimelineChange = function (event, index) {
327
- console.log("Event clicked:", event, "at index:", index);
328
- };
376
+ // const handleTimelineChange = (event: any, index: number) => {
377
+ // console.log("Event clicked:", event, "at index:", index);
378
+ // };
329
379
  return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
330
380
  react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
331
381
  react_2.default.createElement(react_1.Flex, null,
@@ -335,7 +385,7 @@ var Layout = function () {
335
385
  react_2.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramov", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar" }),
336
386
  react_2.default.createElement("br", null),
337
387
  react_2.default.createElement(Breadcrumbs_1.default, { separator: react_2.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
338
- react_2.default.createElement(react_1.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width },
388
+ react_2.default.createElement(react_1.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
339
389
  react_2.default.createElement(TextInput_1.default
340
390
  //label="hello"
341
391
  , {
@@ -459,7 +509,7 @@ var Layout = function () {
459
509
  react_2.default.createElement("br", null),
460
510
  react_2.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
461
511
  handleNoteValue(noteValue, titleValue, file);
462
- }, value: "text", title: "hello", isEditable: true, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
512
+ }, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
463
513
  console.log("isActive", isActive);
464
514
  } }),
465
515
  react_2.default.createElement("br", null),
@@ -503,6 +553,6 @@ var Layout = function () {
503
553
  react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }),
504
554
  react_2.default.createElement("br", null),
505
555
  react_2.default.createElement("br", null),
506
- react_2.default.createElement(Timeline_1.default, { events: events, onEventClick: handleTimelineChange }))))));
556
+ react_2.default.createElement(Timeline_1.default, { timelineEvents: timeline }))))));
507
557
  };
508
558
  exports.default = Layout;
package/dist/index.d.ts CHANGED
@@ -28,7 +28,8 @@ import Skeletons from "./Components/Skeletons/Skeletons";
28
28
  import Switch from "./Components/Switch/Switch";
29
29
  import Table from "./Components/Table/Table";
30
30
  import TextInput from "./Components/Input/TextInput";
31
+ import Timeline from "./Components/Timeline/Timeline";
31
32
  import Toaster, { useToaster } from "./Components/Toaster/Toaster";
32
33
  import ToolTip from "./Components/ToolTip/ToolTip";
33
34
  import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
34
- export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
35
+ export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
package/dist/index.js CHANGED
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
30
+ exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
31
31
  var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
32
32
  exports.ApexBarChart = ApexBarChart_1.default;
33
33
  var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -89,6 +89,8 @@ var Table_1 = __importDefault(require("./Components/Table/Table"));
89
89
  exports.Table = Table_1.default;
90
90
  var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
91
91
  exports.TextInput = TextInput_1.default;
92
+ var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
93
+ exports.Timeline = Timeline_1.default;
92
94
  var Toaster_1 = __importStar(require("./Components/Toaster/Toaster"));
93
95
  exports.Toaster = Toaster_1.default;
94
96
  Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_1.useToaster; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.0.49",
3
+ "version": "1.0.50",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",