@inceptionbg/iui 2.0.25 → 2.0.26

package/src/components/Header/Components/ModuleSelect.tsx

@@ -1,68 +1,68 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { Link } from 'react-router';
-import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
-import { Menu } from '../../Menu/Menu';
-
-interface Props {
-  modules: { name: string; icon: IconDefinition; disabled?: boolean; url: string }[];
-  activeModule: { name: string; icon: IconDefinition } | null;
-}
-
-export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
-  const { isOpen, onOpen, onClose } = useIsMenuOpen();
-
-  return (
-    <div className="flex align-center gap-1">
-      {!!modules.length && (
-        <Menu
-          isOpen={isOpen}
-          onClose={onClose}
-          renderButton={ref => (
-            <button
-              ref={ref}
-              className={clsx('header-button clickable', { active: isOpen })}
-              onClick={onOpen}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-                <rect width="256" height="256" fill="none" />
-                <circle cx="60" cy="60" r="20" />
-                <circle cx="128" cy="60" r="20" />
-                <circle cx="196" cy="60" r="20" />
-                <circle cx="60" cy="128" r="20" />
-                <circle cx="128" cy="128" r="20" />
-                <circle cx="196" cy="128" r="20" />
-                <circle cx="60" cy="196" r="20" />
-                <circle cx="128" cy="196" r="20" />
-                <circle cx="196" cy="196" r="20" />
-              </svg>
-            </button>
-          )}
-          className="modules-menu"
-        >
-          {modules.map(e => (
-            <Link to={e.url} key={e.name}>
-              <div className="module-item clickable hover-neutral">
-                <div className="menu-item-icon">
-                  <FontAwesomeIcon icon={e.icon} />
-                </div>
-                <p className="menu-item-label">{e.name}</p>
-              </div>
-            </Link>
-          ))}
-        </Menu>
-      )}
-
-      {activeModule && (
-        <Link className="module-name clickable" to="/">
-          <div className="module-icon">
-            <FontAwesomeIcon icon={activeModule.icon} />
-          </div>
-          <h3>{activeModule.name}</h3>
-        </Link>
-      )}
-    </div>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { Link } from 'react-router';
+import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
+import { Menu } from '../../Menu/Menu';
+
+interface Props {
+  modules: { name: string; icon: IconDefinition; disabled?: boolean; url: string }[];
+  activeModule: { name: string; icon: IconDefinition } | null;
+}
+
+export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
+  const { isOpen, onOpen, onClose } = useIsMenuOpen();
+
+  return (
+    <div className="flex align-center gap-1">
+      {!!modules.length && (
+        <Menu
+          isOpen={isOpen}
+          onClose={onClose}
+          renderButton={ref => (
+            <button
+              ref={ref}
+              className={clsx('header-button clickable', { active: isOpen })}
+              onClick={onOpen}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+                <rect width="256" height="256" fill="none" />
+                <circle cx="60" cy="60" r="20" />
+                <circle cx="128" cy="60" r="20" />
+                <circle cx="196" cy="60" r="20" />
+                <circle cx="60" cy="128" r="20" />
+                <circle cx="128" cy="128" r="20" />
+                <circle cx="196" cy="128" r="20" />
+                <circle cx="60" cy="196" r="20" />
+                <circle cx="128" cy="196" r="20" />
+                <circle cx="196" cy="196" r="20" />
+              </svg>
+            </button>
+          )}
+          className="modules-menu"
+        >
+          {modules.map(e => (
+            <Link to={e.url} key={e.name}>
+              <div className="module-item clickable hover-neutral">
+                <div className="menu-item-icon">
+                  <FontAwesomeIcon icon={e.icon} />
+                </div>
+                <p className="menu-item-label">{e.name}</p>
+              </div>
+            </Link>
+          ))}
+        </Menu>
+      )}
+
+      {activeModule && (
+        <Link className="module-name clickable" to="/">
+          <div className="module-icon">
+            <FontAwesomeIcon icon={activeModule.icon} />
+          </div>
+          <h3>{activeModule.name}</h3>
+        </Link>
+      )}
+    </div>
+  );
+};

package/src/components/Header/Components/Notifications.tsx

@@ -1,202 +1,202 @@
-import type { Dispatch, FC, SetStateAction } from 'react';
-import type { INotification } from '../../../types/INotifications';
-import type { ISelectData } from '../../../types/ISelect';
-import { useCallback, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { faEllipsisVertical } from '../../../assets/icons';
-import { faBell } from '../../../assets/icons/duotone/faBell';
-import { faBell as faBellLight } from '../../../assets/icons/light/faBell';
-import { faEnvelope } from '../../../assets/icons/light/faEnvelope';
-import { faEnvelopeDot } from '../../../assets/icons/solid/faEnvelopeDot';
-import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
-import { formatDateAndTime } from '../../../utils/dateUtils';
-import { getNotificationValues } from '../../../utils/objectUtils';
-import { NotificationBadge } from '../../Badge/NotificationBadge';
-import { IconButton } from '../../Button/IconButton';
-import { SearchInput } from '../../Inputs/SearchInput';
-import { Loader } from '../../Loader/Loader';
-import { Menu } from '../../Menu/Menu';
-
-export interface INotificationsProps {
-  notificationCount: number;
-  notifications: INotification[];
-  isLoading: boolean;
-  menuControl: { isOpen: boolean; onClose: () => void; onOpen: () => void };
-  seen: boolean | null;
-  setSeen: Dispatch<SetStateAction<boolean | null>>;
-  markAsSeen: (uuid: string) => void;
-  markAllAsSeen: () => void;
-}
-
-export const Notifications: FC<INotificationsProps> = ({
-  notificationCount,
-  notifications = [],
-  isLoading,
-  menuControl,
-  seen,
-  setSeen,
-  markAsSeen,
-  markAllAsSeen,
-}) => {
-  const { t } = useTranslation();
-  const { isOpen, onClose, onOpen } = menuControl;
-  const {
-    isOpen: isOpenOptions,
-    onClose: onCloseOptions,
-    onOpen: onOpenOptions,
-  } = useIsMenuOpen();
-
-  const seenOptions: ISelectData[] = [
-    { label: t('NotificationsAll'), value: null },
-    { label: t('NotificationsUnread'), value: false },
-    { label: t('NotificationsRead'), value: true },
-  ];
-
-  const [filteredNotifications, setFilteredNotifications] = useState<INotification[]>([]);
-
-  useEffect(() => {
-    setFilteredNotifications(notifications);
-  }, [notifications]);
-
-  const onSearch = useCallback(
-    (e: string) =>
-      setFilteredNotifications(
-        !e
-          ? notifications
-          : notifications.filter(notification => {
-              const title = t(`NTitle${notification.event}`);
-              const description = t(`NContent${notification.event}`, {
-                ...getNotificationValues(t, notification.values),
-              });
-
-              const searchContent = `${title} ${description}`.toLowerCase();
-              const searchWords = e.toLowerCase().trim().split(/\s+/);
-
-              return searchWords.every(word => searchContent.includes(word));
-            })
-      ),
-    [notifications, t]
-  );
-
-  return (
-    <Menu
-      isOpen={isOpen}
-      onClose={onClose}
-      placement="bottom-right"
-      size="m"
-      className="header-user-menu"
-      renderButton={ref => (
-        <NotificationBadge
-          number={notificationCount}
-          className="header-btn-badge"
-          size="s"
-        >
-          <IconButton
-            ref={ref}
-            icon={!!notificationCount ? faBell : faBellLight}
-            onClick={onOpen}
-            className="header-button notification-button"
-            active={isOpen}
-            variant="solid"
-          />
-        </NotificationBadge>
-      )}
-    >
-      <div className="notifications">
-        <div className="notifications-content-header">
-          <h3>{t('Notifications')}</h3>
-          <SearchInput onSearch={onSearch} />
-        </div>
-        <div className="notifications-options">
-          <div className="flex gap-2">
-            {seenOptions.map(({ label, value }) => (
-              <div
-                key={label}
-                className={clsx('link fs-13', {
-                  inactive: seen !== value,
-                })}
-                onClick={() => setSeen(value)}
-              >
-                {label}
-              </div>
-            ))}
-          </div>
-          <Menu
-            isOpen={isOpenOptions}
-            onClose={onCloseOptions}
-            placement="bottom-right"
-            size="m"
-            renderButton={ref => (
-              <IconButton
-                ref={ref}
-                icon={faEllipsisVertical}
-                onClick={onOpenOptions}
-                className="header-button notification-button"
-                active={isOpenOptions}
-                size="s"
-              />
-            )}
-            items={[{ label: t('MarkAllAsRead'), onClick: markAllAsSeen }]}
-          />
-        </div>
-        <Loader isLoading={isLoading}>
-          <div className="notifications-container">
-            {!!filteredNotifications.length ? (
-              filteredNotifications.map(notification => (
-                <div
-                  key={notification.uuid}
-                  className={clsx('notification', { seen: notification.seen })}
-                >
-                  <div className="notification-header">
-                    <div>
-                      <p className="title">{t(`NTitle${notification.event}`)}</p>
-                      <p className="date">{formatDateAndTime(notification.createdAt)}</p>
-                    </div>
-                    <IconButton
-                      // tooltip={t('MarkAsRead')}
-                      icon={notification.seen ? faEnvelope : faEnvelopeDot}
-                      disabled={notification.seen}
-                      onClick={() => markAsSeen(notification.uuid)}
-                      size="s"
-                    />
-                  </div>
-                  <p className="desc">
-                    <Trans
-                      i18nKey={`NContent${notification.event}`}
-                      values={getNotificationValues(t, notification.values)}
-                      t={t}
-                      components={notification.values?.reduce(
-                        (obj, e) =>
-                          e.url
-                            ? {
-                                ...obj,
-                                [e.key]: (
-                                  <Link
-                                    to={e.url}
-                                    className="link"
-                                    onClick={() =>
-                                      !notification.seen && markAsSeen(notification.uuid)
-                                    }
-                                  />
-                                ),
-                              }
-                            : obj,
-                        {
-                          bold: <span className="bold" />,
-                        }
-                      )}
-                    />
-                  </p>
-                </div>
-              ))
-            ) : (
-              <p className="text-center fs-13 pt-2">{t('NoNewNotifications')}</p>
-            )}
-          </div>
-        </Loader>
-      </div>
-    </Menu>
-  );
-};
+import type { Dispatch, FC, SetStateAction } from 'react';
+import type { INotification } from '../../../types/INotifications';
+import type { ISelectData } from '../../../types/ISelect';
+import { useCallback, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { faEllipsisVertical } from '../../../assets/icons';
+import { faBell } from '../../../assets/icons/duotone/faBell';
+import { faBell as faBellLight } from '../../../assets/icons/light/faBell';
+import { faEnvelope } from '../../../assets/icons/light/faEnvelope';
+import { faEnvelopeDot } from '../../../assets/icons/solid/faEnvelopeDot';
+import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
+import { formatDateAndTime } from '../../../utils/dateUtils';
+import { getNotificationValues } from '../../../utils/objectUtils';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { IconButton } from '../../Button/IconButton';
+import { SearchInput } from '../../Inputs/SearchInput';
+import { Loader } from '../../Loader/Loader';
+import { Menu } from '../../Menu/Menu';
+
+export interface INotificationsProps {
+  notificationCount: number;
+  notifications: INotification[];
+  isLoading: boolean;
+  menuControl: { isOpen: boolean; onClose: () => void; onOpen: () => void };
+  seen: boolean | null;
+  setSeen: Dispatch<SetStateAction<boolean | null>>;
+  markAsSeen: (uuid: string) => void;
+  markAllAsSeen: () => void;
+}
+
+export const Notifications: FC<INotificationsProps> = ({
+  notificationCount,
+  notifications = [],
+  isLoading,
+  menuControl,
+  seen,
+  setSeen,
+  markAsSeen,
+  markAllAsSeen,
+}) => {
+  const { t } = useTranslation();
+  const { isOpen, onClose, onOpen } = menuControl;
+  const {
+    isOpen: isOpenOptions,
+    onClose: onCloseOptions,
+    onOpen: onOpenOptions,
+  } = useIsMenuOpen();
+
+  const seenOptions: ISelectData[] = [
+    { label: t('NotificationsAll'), value: null },
+    { label: t('NotificationsUnread'), value: false },
+    { label: t('NotificationsRead'), value: true },
+  ];
+
+  const [filteredNotifications, setFilteredNotifications] = useState<INotification[]>([]);
+
+  useEffect(() => {
+    setFilteredNotifications(notifications);
+  }, [notifications]);
+
+  const onSearch = useCallback(
+    (e: string) =>
+      setFilteredNotifications(
+        !e
+          ? notifications
+          : notifications.filter(notification => {
+              const title = t(`NTitle${notification.event}`);
+              const description = t(`NContent${notification.event}`, {
+                ...getNotificationValues(t, notification.values),
+              });
+
+              const searchContent = `${title} ${description}`.toLowerCase();
+              const searchWords = e.toLowerCase().trim().split(/\s+/);
+
+              return searchWords.every(word => searchContent.includes(word));
+            })
+      ),
+    [notifications, t]
+  );
+
+  return (
+    <Menu
+      isOpen={isOpen}
+      onClose={onClose}
+      placement="bottom-right"
+      size="m"
+      className="header-user-menu"
+      renderButton={ref => (
+        <NotificationBadge
+          number={notificationCount}
+          className="header-btn-badge"
+          size="s"
+        >
+          <IconButton
+            ref={ref}
+            icon={!!notificationCount ? faBell : faBellLight}
+            onClick={onOpen}
+            className="header-button notification-button"
+            active={isOpen}
+            variant="solid"
+          />
+        </NotificationBadge>
+      )}
+    >
+      <div className="notifications">
+        <div className="notifications-content-header">
+          <h3>{t('Notifications')}</h3>
+          <SearchInput onSearch={onSearch} />
+        </div>
+        <div className="notifications-options">
+          <div className="flex gap-2">
+            {seenOptions.map(({ label, value }) => (
+              <div
+                key={label}
+                className={clsx('link fs-13', {
+                  inactive: seen !== value,
+                })}
+                onClick={() => setSeen(value)}
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+          <Menu
+            isOpen={isOpenOptions}
+            onClose={onCloseOptions}
+            placement="bottom-right"
+            size="m"
+            renderButton={ref => (
+              <IconButton
+                ref={ref}
+                icon={faEllipsisVertical}
+                onClick={onOpenOptions}
+                className="header-button notification-button"
+                active={isOpenOptions}
+                size="s"
+              />
+            )}
+            items={[{ label: t('MarkAllAsRead'), onClick: markAllAsSeen }]}
+          />
+        </div>
+        <Loader isLoading={isLoading}>
+          <div className="notifications-container">
+            {!!filteredNotifications.length ? (
+              filteredNotifications.map(notification => (
+                <div
+                  key={notification.uuid}
+                  className={clsx('notification', { seen: notification.seen })}
+                >
+                  <div className="notification-header">
+                    <div>
+                      <p className="title">{t(`NTitle${notification.event}`)}</p>
+                      <p className="date">{formatDateAndTime(notification.createdAt)}</p>
+                    </div>
+                    <IconButton
+                      // tooltip={t('MarkAsRead')}
+                      icon={notification.seen ? faEnvelope : faEnvelopeDot}
+                      disabled={notification.seen}
+                      onClick={() => markAsSeen(notification.uuid)}
+                      size="s"
+                    />
+                  </div>
+                  <p className="desc">
+                    <Trans
+                      i18nKey={`NContent${notification.event}`}
+                      values={getNotificationValues(t, notification.values)}
+                      t={t}
+                      components={notification.values?.reduce(
+                        (obj, e) =>
+                          e.url
+                            ? {
+                                ...obj,
+                                [e.key]: (
+                                  <Link
+                                    to={e.url}
+                                    className="link"
+                                    onClick={() =>
+                                      !notification.seen && markAsSeen(notification.uuid)
+                                    }
+                                  />
+                                ),
+                              }
+                            : obj,
+                        {
+                          bold: <span className="bold" />,
+                        }
+                      )}
+                    />
+                  </p>
+                </div>
+              ))
+            ) : (
+              <p className="text-center fs-13 pt-2">{t('NoNewNotifications')}</p>
+            )}
+          </div>
+        </Loader>
+      </div>
+    </Menu>
+  );
+};

package/src/components/Header/Components/UserMenu.tsx

@@ -1,52 +1,52 @@
-import type { FC } from 'react';
-import type { IHeaderUserMenuProps } from '../../../types/IHeader';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleUser } from '../../../assets/icons/duotone/faCircleUser';
-import { NotificationBadge } from '../../Badge/NotificationBadge';
-import { Menu } from '../../Menu/Menu';
-import { Tooltip } from '../../Tooltip/Tooltip';
-
-export const UserMenu: FC<IHeaderUserMenuProps> = ({
-  isOpen,
-  setIsOpen,
-  userName,
-  organizationName,
-  menuItems,
-  inviteCount,
-  HeaderUserMenuDialogs,
-  controls,
-  refetchOrganizationInvites,
-}) => (
-  <>
-    <Menu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      placement="bottom-right"
-      size="m"
-      className="header-user-menu"
-      items={menuItems}
-      renderButton={ref => (
-        <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
-          <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
-          <NotificationBadge number={inviteCount} className="user-notif-badge" size="s">
-            <div className="user-info">
-              {userName && <p className="user-name">{userName}</p>}
-              {organizationName && (
-                <Tooltip
-                  label={(organizationName?.length || 0) > 20 ? organizationName : ''}
-                  position="bottom"
-                >
-                  <p className="org-name">{organizationName}</p>
-                </Tooltip>
-              )}
-            </div>
-          </NotificationBadge>
-        </button>
-      )}
-    />
-    <HeaderUserMenuDialogs
-      controls={controls}
-      refetchOrganizationInvites={refetchOrganizationInvites}
-    />
-  </>
-);
+import type { FC } from 'react';
+import type { IHeaderUserMenuProps } from '../../../types/IHeader';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleUser } from '../../../assets/icons/duotone/faCircleUser';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { Menu } from '../../Menu/Menu';
+import { Tooltip } from '../../Tooltip/Tooltip';
+
+export const UserMenu: FC<IHeaderUserMenuProps> = ({
+  isOpen,
+  setIsOpen,
+  userName,
+  organizationName,
+  menuItems,
+  inviteCount,
+  HeaderUserMenuDialogs,
+  controls,
+  refetchOrganizationInvites,
+}) => (
+  <>
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      placement="bottom-right"
+      size="m"
+      className="header-user-menu"
+      items={menuItems}
+      renderButton={ref => (
+        <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
+          <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
+          <NotificationBadge number={inviteCount} className="user-notif-badge" size="s">
+            <div className="user-info">
+              {userName && <p className="user-name">{userName}</p>}
+              {organizationName && (
+                <Tooltip
+                  label={(organizationName?.length || 0) > 20 ? organizationName : ''}
+                  position="bottom"
+                >
+                  <p className="org-name">{organizationName}</p>
+                </Tooltip>
+              )}
+            </div>
+          </NotificationBadge>
+        </button>
+      )}
+    />
+    <HeaderUserMenuDialogs
+      controls={controls}
+      refetchOrganizationInvites={refetchOrganizationInvites}
+    />
+  </>
+);