@appcorp/kismaa-web-ui 0.2.73 → 0.2.75

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 (7) hide show
  1. package/organisms/navbar/logged-in-user-avatar.d.ts +1 -0
  2. package/organisms/navbar/logged-in-user-avatar.js +12 -8
  3. package/organisms/navbar/navbar.js +2 -2
  4. package/organisms/navbar/notification-item.d.ts +0 -1
  5. package/organisms/navbar/props.js +1 -108
  6. package/organisms/navbar/type.d.ts +1 -0
  7. package/package.json +1 -1
package/organisms/navbar/logged-in-user-avatar.d.ts CHANGED
@@ -4,6 +4,7 @@ interface LoggedInUserProps {
4
4
  avatarClassName: string;
5
5
  loggedInUser: LoggedInUser | null;
6
6
  notificationItems: Notification[] | [];
7
+ handleOnLoad?: () => void;
7
8
  }
8
9
  export declare const LoggedInUserAvatar: FC<LoggedInUserProps>;
9
10
  export {};
package/organisms/navbar/logged-in-user-avatar.js CHANGED
@@ -60,7 +60,7 @@ var notification_item_1 = require("./notification-item");
60
60
  var user_1 = require("@appcorp/kismaa-utils/api/type/user");
61
61
  var LoggedInUserAvatar = function (_a) {
62
62
  var _b, _c;
63
- var avatarClassName = _a.avatarClassName, loggedInUser = _a.loggedInUser, notificationItems = _a.notificationItems;
63
+ var avatarClassName = _a.avatarClassName, loggedInUser = _a.loggedInUser, notificationItems = _a.notificationItems, handleOnLoad = _a.handleOnLoad;
64
64
  var _d = (0, react_2.useState)(null), avatarElement = _d[0], setAvatarElement = _d[1];
65
65
  var _e = (0, react_2.useState)(null), notificationElement = _e[0], setNotificationElement = _e[1];
66
66
  var _f = (0, react_2.useState)(null), avatarDropdown = _f[0], setAvatarDropdown = _f[1];
@@ -82,7 +82,7 @@ var LoggedInUserAvatar = function (_a) {
82
82
  {
83
83
  name: 'offset',
84
84
  options: {
85
- offset: [180, 0],
85
+ offset: [220, 0],
86
86
  },
87
87
  },
88
88
  ],
@@ -103,7 +103,7 @@ var LoggedInUserAvatar = function (_a) {
103
103
  (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.route) &&
104
104
  (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
105
105
  !((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_2.default.createElement("div", { className: "flex flex-col items-end justify-center" },
106
- loggedInUser.userType === user_1.USER_TYPE.PSYCHIC && (react_2.default.createElement(BellIcon_1.default, { className: "size-8" })),
106
+ loggedInUser.userType === user_1.USER_TYPE.PSYCHIC && (react_2.default.createElement(BellIcon_1.default, { className: "stroke-primary size-8" })),
107
107
  react_2.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_2.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_2.default.createElement(atoms_1.UserIcon, { className: avatarClassName }))))),
108
108
  (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_2.default.createElement("div", { className: "flex flex-row items-center justify-end gap-2" },
109
109
  react_2.default.createElement(react_1.Popover, { className: "relative" },
@@ -113,15 +113,20 @@ var LoggedInUserAvatar = function (_a) {
113
113
  unReadNotifications.length > 0 && (react_2.default.createElement("span", { className: "relative flex size-3" },
114
114
  react_2.default.createElement("span", { className: "bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }),
115
115
  react_2.default.createElement("span", { className: "bg-primary relative inline-flex size-3 rounded-full" }))),
116
- react_2.default.createElement(BellIcon_1.default, { className: "stroke-primary size-7 h-full" })))))),
117
- react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setNotificationDropdown, style: notificationStyles.popper }, notificationAttributes.popper),
116
+ react_2.default.createElement(BellIcon_1.default, { className: "stroke-primary size-8" })))))),
117
+ react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: function (prevState) {
118
+ setNotificationDropdown(prevState);
119
+ if (!prevState) {
120
+ handleOnLoad === null || handleOnLoad === void 0 ? void 0 : handleOnLoad();
121
+ }
122
+ }, style: notificationStyles.popper }, notificationAttributes.popper),
118
123
  react_2.default.createElement("div", { className: "max-h-80 w-86 shrink overflow-y-scroll rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" },
119
124
  notificationItems.length === 0 && (react_2.default.createElement("p", { className: "" }, "No new notifications")),
120
125
  react_2.default.createElement("div", { className: "divider-y-gray-300 flex flex-col items-center justify-center" }, unReadNotifications &&
121
126
  unReadNotifications.length > 0 &&
122
127
  unReadNotifications.map(function (_a) {
123
128
  var message = _a.message, time = _a.time, id = _a.id;
124
- return (react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time }));
129
+ return (react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, key: id, message: message, time: time }));
125
130
  })),
126
131
  react_2.default.createElement("div", { className: "divider-y-gray-300 flex w-full flex-col items-center justify-center" },
127
132
  react_2.default.createElement("div", { className: "w-full" }, readNotifications && readNotifications.length > 0 && (react_2.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Read Notifications" }))),
@@ -129,8 +134,7 @@ var LoggedInUserAvatar = function (_a) {
129
134
  readNotifications.length > 0 &&
130
135
  readNotifications.map(function (_a) {
131
136
  var message = _a.message, time = _a.time, id = _a.id;
132
- return (react_2.default.createElement(react_2.default.Fragment, null,
133
- react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time })));
137
+ return (react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, key: id, message: message, time: time }));
134
138
  }))))),
135
139
  react_2.default.createElement(react_1.Popover, { className: "relative" },
136
140
  react_2.default.createElement("div", { className: "flex flex-col items-end justify-start" },
package/organisms/navbar/navbar.js CHANGED
@@ -17,7 +17,7 @@ var mobile_menu_1 = require("./mobile-menu");
17
17
  var user_1 = require("@appcorp/kismaa-utils/api/type/user");
18
18
  var logged_in_user_avatar_1 = require("./logged-in-user-avatar");
19
19
  var Navbar = function (_a) {
20
- var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _b = _a.loggedInUser, loggedInUser = _b === void 0 ? null : _b, navLinks = _a.navLinks, notificationItems = _a.notificationItems, _c = _a.showSearch, showSearch = _c === void 0 ? false : _c, toggleMobileMenu = _a.toggleMobileMenu;
20
+ var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleOnLoad = _a.handleOnLoad, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _b = _a.loggedInUser, loggedInUser = _b === void 0 ? null : _b, navLinks = _a.navLinks, notificationItems = _a.notificationItems, _c = _a.showSearch, showSearch = _c === void 0 ? false : _c, toggleMobileMenu = _a.toggleMobileMenu;
21
21
  var renderNavLink = function (link) {
22
22
  var _a;
23
23
  return (react_1.default.createElement("div", { key: link.label, className: "relative w-fit", onMouseEnter: handleMegaMenuToggle, onMouseLeave: handleMegaMenuToggle },
@@ -50,7 +50,7 @@ var Navbar = function (_a) {
50
50
  showSearch && (react_1.default.createElement("div", { className: "", onClick: handleSearch },
51
51
  react_1.default.createElement(search_icon_1.SearchIcon, { className: "size-5 cursor-pointer" }))),
52
52
  loggedInUser ? (react_1.default.createElement(react_1.default.Fragment, null,
53
- react_1.default.createElement(logged_in_user_avatar_1.LoggedInUserAvatar, { loggedInUser: loggedInUser, avatarClassName: avatarClassName, notificationItems: notificationItems }))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
53
+ react_1.default.createElement(logged_in_user_avatar_1.LoggedInUserAvatar, { loggedInUser: loggedInUser, avatarClassName: avatarClassName, notificationItems: notificationItems, handleOnLoad: handleOnLoad }))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
54
54
  .filter(function (_a) {
55
55
  var enabled = _a.enabled;
56
56
  return enabled;
package/organisms/navbar/notification-item.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  interface NotificationItemProps {
3
3
  avatarClassName: string;
4
- id: string;
5
4
  message: string;
6
5
  time: string;
7
6
  }
package/organisms/navbar/props.js CHANGED
@@ -68,119 +68,12 @@ exports.navbarData = {
68
68
  isRead: true,
69
69
  time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
70
70
  },
71
- {
72
- id: '1',
73
- message: 'Missed chat opportunity with John Doe',
74
- isRead: false,
75
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
76
- },
77
- {
78
- id: '2',
79
- message: 'Missed chat opportunity with John Doe',
80
- isRead: true,
81
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
82
- },
83
- {
84
- id: '3',
85
- message: 'Missed chat opportunity with John Doe',
86
- isRead: true,
87
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
88
- },
89
- {
90
- id: '1',
91
- message: 'Missed chat opportunity with John Doe',
92
- isRead: false,
93
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
94
- },
95
- {
96
- id: '2',
97
- message: 'Missed chat opportunity with John Doe',
98
- isRead: true,
99
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
100
- },
101
- {
102
- id: '3',
103
- message: 'Missed chat opportunity with John Doe',
104
- isRead: true,
105
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
106
- },
107
- {
108
- id: '1',
109
- message: 'Missed chat opportunity with John Doe',
110
- isRead: false,
111
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
112
- },
113
- {
114
- id: '2',
115
- message: 'Missed chat opportunity with John Doe',
116
- isRead: true,
117
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
118
- },
119
- {
120
- id: '3',
121
- message: 'Missed chat opportunity with John Doe',
122
- isRead: true,
123
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
124
- },
125
- {
126
- id: '1',
127
- message: 'Missed chat opportunity with John Doe',
128
- isRead: false,
129
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
130
- },
131
- {
132
- id: '2',
133
- message: 'Missed chat opportunity with John Doe',
134
- isRead: true,
135
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
136
- },
137
- {
138
- id: '3',
139
- message: 'Missed chat opportunity with John Doe',
140
- isRead: true,
141
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
142
- },
143
- {
144
- id: '1',
145
- message: 'Missed chat opportunity with John Doe',
146
- isRead: false,
147
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
148
- },
149
- {
150
- id: '2',
151
- message: 'Missed chat opportunity with John Doe',
152
- isRead: true,
153
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
154
- },
155
- {
156
- id: '3',
157
- message: 'Missed chat opportunity with John Doe',
158
- isRead: true,
159
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
160
- },
161
- {
162
- id: '1',
163
- message: 'Missed chat opportunity with John Doe',
164
- isRead: false,
165
- time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
166
- },
167
- {
168
- id: '2',
169
- message: 'Missed chat opportunity with John Doe',
170
- isRead: true,
171
- time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
172
- },
173
- {
174
- id: '3',
175
- message: 'Missed chat opportunity with John Doe',
176
- isRead: true,
177
- time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
178
- },
179
71
  ],
180
72
  handleMegaMenuToggle: function () { return void 0; },
181
73
  handleSearch: function () { return void 0; },
182
74
  isMobileMenuOpen: false,
183
75
  toggleMobileMenu: function () { return void 0; },
76
+ handleOnLoad: function () { return console.log('Navbar loaded'); },
184
77
  loggedInUser: {
185
78
  firstName: 'Taimoor Khan',
186
79
  avatarUrl: '',
package/organisms/navbar/type.d.ts CHANGED
@@ -36,6 +36,7 @@ export interface Notification {
36
36
  }
37
37
  export interface NavbarProps {
38
38
  handleMegaMenuToggle: (e: MouseEvent<HTMLDivElement>) => void;
39
+ handleOnLoad?: () => void;
39
40
  handleSearch: () => void;
40
41
  headerActions: NavbarHeaderActionItem[];
41
42
  homeLink: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/kismaa-web-ui",
3
- "version": "0.2.73",
3
+ "version": "0.2.75",
4
4
  "source": "src/index.ts",
5
5
  "main": "lib/main.js",
6
6
  "module": "lib/module.js",