@inceptionbg/iui 2.0.15 → 2.0.17

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

@@ -0,0 +1,208 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+  type FC,
+} from 'react';
+import { INotification } from '../../../types/INotifications';
+import { Menu } from '../../Menu/Menu';
+import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
+import { IconButton } from '../../Button/IconButton';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { faBell } from '../../../assets/icons/duotone/faBell';
+import { faBell as faBellLight } from '../../../assets/icons/light/faBell';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import clsx from 'clsx';
+import { formatDateAndTime } from '../../../utils/dateUtils';
+import { faEnvelope } from '../../../assets/icons/light/faEnvelope';
+import { faEnvelopeDot } from '../../../assets/icons/solid/faEnvelopeDot';
+import { SearchInput } from '../../Inputs/SearchInput';
+import { Loader } from '../../Loader/Loader';
+import { ISelectData } from '../../../types/ISelect';
+import { faEllipsisVertical } from '../../../assets/icons';
+import { getNotificationValues } from '../../../utils/objectUtils';
+
+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

@@ -4,6 +4,7 @@ import { faCircleUser } from '../../../assets/icons/duotone/faCircleUser';
 import { Tooltip } from '../../Tooltip/Tooltip';
 import { Menu } from '../../Menu/Menu';
 import { IHeaderUserMenuProps } from '../../../types/IHeader';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
 
 export const UserMenu: FC<IHeaderUserMenuProps> = ({
   isOpen,
@@ -11,8 +12,7 @@ export const UserMenu: FC<IHeaderUserMenuProps> = ({
   userName,
   organizationName,
   menuItems,
-  showBadge,
-
+  inviteCount,
   HeaderUserMenuDialogs,
   controls,
   refetchOrganizationInvites,
@@ -27,19 +27,20 @@ export const UserMenu: FC<IHeaderUserMenuProps> = ({
       items={menuItems}
       renderButton={ref => (
         <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
-          {showBadge && <div className="user-badge" />}
           <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
-          <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 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>
       )}
     />

package/src/components/Header/Header.tsx

@@ -2,14 +2,14 @@ import { ComponentProps, FC, ReactNode } from 'react';
 import { UserMenu } from './Components/UserMenu';
 import { ModuleSelect } from './Components/ModuleSelect';
 import { IHeaderUserMenuProps } from '../../types/IHeader';
+import { INotificationsProps, Notifications } from './Components/Notifications';
 
 interface Props {
   customTitle?: string;
   modulesProps?: ComponentProps<typeof ModuleSelect>;
-  // actions: {
-  //   icon: IconDefinition;
-  // };
+  // actions: { icon: IconDefinition };
   userMenuProps: IHeaderUserMenuProps;
+  notificationsProps?: INotificationsProps;
   children?: ReactNode;
 }
 
@@ -17,6 +17,7 @@ export const Header: FC<Props> = ({
   customTitle,
   modulesProps,
   userMenuProps,
+  notificationsProps,
   children,
 }) => (
   <div className="iui-header">
@@ -24,7 +25,7 @@ export const Header: FC<Props> = ({
     {customTitle && <h3 className="ml-3">{customTitle}</h3>}
     <div className="flex gap-2 align-center">
       {children}
-      {/* {!hideNotifications && <Notifications />} */}
+      {notificationsProps && <Notifications {...notificationsProps} />}
       <UserMenu {...userMenuProps} />
     </div>
   </div>

package/src/components/Inputs/NumberInput.tsx

@@ -11,6 +11,7 @@ export interface INumberInputProps {
   placeholder?: string;
   endText?: string;
   isClearable?: boolean;
+  onClear?: () => void;
   helperText?: string;
   errorText?: string;
   error?: boolean;
@@ -32,6 +33,7 @@ export const NumberInput: FC<INumberInputProps> = ({
   placeholder,
   endText,
   isClearable,
+  onClear,
   helperText,
   errorText,
   error,
@@ -64,6 +66,7 @@ export const NumberInput: FC<INumberInputProps> = ({
       disabled={disabled}
       endText={endText}
       isClearable={isClearable}
+      onClear={onClear}
       placeholder={
         placeholder ? placeholder : decimalPlaces ? `0.${'0'.repeat(decimalPlaces)}` : '0'
       }

package/src/components/Inputs/Selects/components/SelectWrapper.tsx

@@ -68,34 +68,34 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
     formatOptionLabel,
   };
 
-  const renderSelect = () => {
-    switch (variant) {
-      case 'basic':
-        return <ReactSelect {...commonProps} options={props.options} />;
-      case 'async':
-        return (
-          <AsyncPaginate
-            {...commonProps}
-            loadOptions={props.loadOptions}
-            defaultOptions={props.defaultData ?? true}
-          />
-        );
-      case 'async-creatable':
-        return (
-          <AsyncCreatableSelect
-            {...commonProps}
-            loadOptions={props.loadOptions}
-            defaultOptions={props.defaultData ?? true}
-            onCreateOption={props.onCreate}
-            formatCreateLabel={(inputValue: string) => (
-              <p>{`${t('FreeText')} "${inputValue}"`}</p>
-            )}
-          />
-        );
-      default:
-        return null;
-    }
-  };
+  // const renderSelect = () => {
+  //   switch (variant) {
+  //     case 'basic':
+  //       return <ReactSelect {...commonProps} options={props.options} />;
+  //     case 'async':
+  //       return (
+  //         <AsyncPaginate
+  //           {...commonProps}
+  //           loadOptions={props.loadOptions}
+  //           defaultOptions={props.defaultData ?? true}
+  //         />
+  //       );
+  //     case 'async-creatable':
+  //       return (
+  //         <AsyncCreatableSelect
+  //           {...commonProps}
+  //           loadOptions={props.loadOptions}
+  //           defaultOptions={props.defaultData ?? true}
+  //           onCreateOption={props.onCreate}
+  //           formatCreateLabel={(inputValue: string) => (
+  //             <p>{`${t('FreeText')} "${inputValue}"`}</p>
+  //           )}
+  //         />
+  //       );
+  //     default:
+  //       return null;
+  //   }
+  // };
 
   return (
     <InputWrapper
@@ -109,7 +109,26 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
       minWidth={minWidth}
       heightAuto
     >
-      {renderSelect()}
+      {/* {renderSelect()} */}
+      {variant === 'async' ? (
+        <AsyncPaginate
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? true}
+        />
+      ) : variant === 'async-creatable' ? (
+        <AsyncCreatableSelect
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? true}
+          onCreateOption={props.onCreate}
+          formatCreateLabel={(inputValue: string) => (
+            <p>{`${t('FreeText')} "${inputValue}"`}</p>
+          )}
+        />
+      ) : (
+        <ReactSelect {...commonProps} options={props.options} />
+      )}
       {required && !disabled && (
         <input
           className="fake-input"

package/src/components/Inputs/TextInput.tsx

@@ -91,6 +91,7 @@ export const TextInput: FC<ITextInputProps> = ({
         disabled={disabled}
         onAnimationStart={() => setIsAutoFill(true)}
         pattern={pattern}
+        spellCheck={inputProps?.spellCheck ?? false}
         {...inputProps}
       />
     </InputWrapper>

package/src/components/List/ListItem.tsx

@@ -37,7 +37,7 @@ export const ListItem: FC<IListItem> = ({
 
   return (
     <div
-      className={clsx('iui-list-item', { active, disabled })}
+      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
       onClick={e => {
         e.stopPropagation();
         onClick?.();

package/src/components/Loader/ProgressBar.tsx

@@ -27,7 +27,7 @@ export const ProgressBar: FC<Props> = ({ progress, label }) => {
           {
             '--progress-clip': `${now}%`,
             '--progress-text': `'${now}%'`,
-          } as CSSProperties
+          } as CSSProperties & { [key: string]: string }
         }
       >
         <div

package/src/components/Menu/Menu.tsx

@@ -8,6 +8,7 @@ import { MenuItem } from './MenuItem';
 import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
 
 interface Props {
+  id?: string;
   isOpen: boolean;
   onClose: () => void;
   renderButton: (ref: RefObject<any>) => ReactNode;
@@ -19,6 +20,7 @@ interface Props {
 }
 
 export const Menu: FC<Props> = ({
+  id,
   isOpen,
   onClose,
   renderButton,
@@ -47,6 +49,7 @@ export const Menu: FC<Props> = ({
       {isOpen
         ? createPortal(
             <div
+              id={id}
               ref={portalRef}
               className="portal-background"
               onClick={e => e.stopPropagation()}

package/src/components/Pullover/Pullover.tsx

@@ -13,6 +13,8 @@ import { onPopupKeyDown } from '../../utils/popupUtils';
 import { ILocalPopupControl } from '../../types/IPopup';
 import { Loader } from '../Loader/Loader';
 import { SplitButton } from '../Button/SplitButton';
+import { IconButton } from '../Button/IconButton';
+import { faXmark } from '../../assets/icons';
 
 interface Props {
   id?: string;
@@ -108,13 +110,16 @@ export const Pullover: FC<Props> = ({
               {header && (
                 <div className="pullover-header no-print">
                   <h3>{header.title}</h3>
-                  {header.onSearch && (
-                    <SearchInput
-                      ref={searchRef}
-                      onSearch={header.onSearch}
-                      className="search-input"
-                    />
-                  )}
+                  <div className="flex gap-2">
+                    {header.onSearch && (
+                      <SearchInput
+                        ref={searchRef}
+                        onSearch={header.onSearch}
+                        className="search-input"
+                      />
+                    )}
+                    <IconButton icon={faXmark} onClick={onClose} color="neutral" />
+                  </div>
                 </div>
               )}
               <ConditionalWrapper
@@ -147,40 +152,34 @@ export const Pullover: FC<Props> = ({
                 )}
 
                 {/* FOOTER */}
-                {footer && (
-                  <div className={clsx('pullover-footer no-print', className)}>
-                    {footer.additionalButton && (
-                      <Button
-                        {...footer.additionalButton}
-                        disabled={
-                          footer.additionalButton.disabled || isFetching || isLoading
-                        }
-                        variant="simple"
-                        className="mr-auto"
-                      />
-                    )}
+                <div className={clsx('pullover-footer no-print', className)}>
+                  {footer?.additionalButton && (
                     <Button
-                      label={t('Cancel')}
-                      variant="outlined"
-                      onClick={onClose}
-                      disabled={isFetching || isLoading}
+                      {...footer.additionalButton}
+                      disabled={
+                        footer.additionalButton.disabled || isFetching || isLoading
+                      }
+                      variant="simple"
+                      className="mr-auto"
                     />
-                    {footer.confirmButton && (
-                      <ConfirmButton
-                        {...footer.confirmButton}
-                        label={footer.confirmButton.label ?? t('Confirm')}
-                        disabled={
-                          footer.confirmButton.disabled || isFetching || isLoading
-                        }
-                        type={
-                          (footer.confirmButton.type ?? onFormSubmit)
-                            ? 'submit'
-                            : 'button'
-                        }
-                      />
-                    )}
-                  </div>
-                )}
+                  )}
+                  <Button
+                    label={t(footer ? 'Cancel' : 'Close')}
+                    variant="outlined"
+                    onClick={onClose}
+                    disabled={isFetching || isLoading}
+                  />
+                  {footer?.confirmButton && (
+                    <ConfirmButton
+                      {...footer.confirmButton}
+                      label={footer.confirmButton.label ?? t('Confirm')}
+                      disabled={footer.confirmButton.disabled || isFetching || isLoading}
+                      type={
+                        (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
+                      }
+                    />
+                  )}
+                </div>
               </ConditionalWrapper>
             </div>
           </div>