@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Dialog/components/DialogFooter.tsx

@@ -1,100 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ButtonHTMLAttributes, FC } from 'react';
-import type { IInfoType } from '../../../types/IInfo';
-import type { IButtonColor } from '../../Button/Button';
-import type { ISplitAction } from '../../Button/SplitButton';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../Button/Button';
-import { SplitButton } from '../../Button/SplitButton';
-
-export interface IDialogFooterActions {
-  confirmButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    color?: IButtonColor;
-    isKeyboardDisabled?: boolean;
-    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-    splitActions?: ISplitAction[];
-  };
-  cancelButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    hidden?: boolean;
-  };
-  additionalButton?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-    color?: IButtonColor;
-  };
-}
-
-interface Props extends IDialogFooterActions {
-  onClose: () => void;
-  isForm?: boolean;
-  type?: IInfoType;
-}
-
-export const DialogFooter: FC<Props> = ({
-  confirmButton,
-  cancelButton,
-  additionalButton,
-  onClose,
-  isForm,
-  type,
-}) => {
-  const { t } = useTranslation();
-  const ConfirmButton = confirmButton?.splitActions ? SplitButton : Button;
-
-  return (
-    <div className="iui-dialog-actions">
-      {additionalButton && (
-        <Button
-          {...additionalButton}
-          onClick={e => {
-            e.stopPropagation();
-            additionalButton.onClick!();
-            !additionalButton.keepOpen && onClose();
-          }}
-          variant="simple"
-          className="mr-auto"
-        />
-      )}
-      {!cancelButton?.hidden && (
-        <Button
-          label={cancelButton?.label ?? t('Close')}
-          icon={cancelButton?.icon}
-          variant="outlined"
-          onClick={e => {
-            e.stopPropagation();
-            cancelButton?.onClick?.();
-            onClose();
-          }}
-          type="button"
-        />
-      )}
-      {confirmButton && (
-        <ConfirmButton
-          label={confirmButton.label || t('Confirm')}
-          icon={confirmButton.icon}
-          variant="solid"
-          type={confirmButton.type ?? (isForm ? 'submit' : 'button')}
-          onClick={e => {
-            e.stopPropagation();
-            confirmButton.onClick?.();
-            !confirmButton.keepOpen && !isForm && onClose();
-          }}
-          color={(confirmButton.color ?? type === 'danger') ? 'danger' : undefined}
-          disabled={confirmButton.disabled}
-          splitActions={confirmButton.splitActions}
-        />
-      )}
-    </div>
-  );
-};

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

@@ -1,17 +0,0 @@
-import type { FC } from 'react';
-import { PillBadge } from '../../Badge/PillBadge';
-
-export const EnvBadge: FC = () => {
-  // @ts-ignore
-  const env = import.meta.env.VITE_ENV ?? globalThis.environment;
-  const isTest = env.includes('TEST');
-  const isUAT = env.includes('UAT');
-
-  if (!isTest && !isUAT) {
-    return null;
-  }
-
-  return (
-    <PillBadge label={isTest ? 'Test' : 'UAT'} color="warning" className="env-badge" />
-  );
-};

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

@@ -1,68 +0,0 @@
-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,204 +0,0 @@
-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 {
-  faBell as faBellLight,
-  faEllipsisVertical,
-  faEnvelope,
-} from '@inceptionbg/icons';
-import clsx from 'clsx';
-import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { faBell } from '../../../assets/icons/duotone/faBell';
-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 +0,0 @@
-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}
-    />
-  </>
-);

package/src/components/Header/Header.tsx

@@ -1,45 +0,0 @@
-import type { ComponentProps, FC, ReactElement, ReactNode } from 'react';
-import type { IHeaderUserMenuProps } from '../../types/IHeader';
-import type { INotificationsProps } from './Components/Notifications';
-import { EnvBadge } from './Components/EnvBadge';
-import { ModuleSelect } from './Components/ModuleSelect';
-import { Notifications } from './Components/Notifications';
-import { UserMenu } from './Components/UserMenu';
-
-interface Props {
-  customAppProps?: {
-    title?: string;
-    logo?: ReactElement;
-  };
-  modulesProps?: ComponentProps<typeof ModuleSelect>;
-  // actions: { icon: IconDefinition };
-  userMenuProps: IHeaderUserMenuProps;
-  notificationsProps?: INotificationsProps;
-  children?: ReactNode;
-}
-
-export const Header: FC<Props> = ({
-  customAppProps,
-  modulesProps,
-  userMenuProps,
-  notificationsProps,
-  children,
-}) => (
-  <div className="iui-header">
-    <div className="flex align-center gap-2">
-      {modulesProps && <ModuleSelect {...modulesProps} />}
-      {customAppProps && (
-        <div className="flex align-center gap-2 ml-2">
-          {customAppProps?.logo}
-          {customAppProps?.title && <h3>{customAppProps.title}</h3>}
-        </div>
-      )}
-      <EnvBadge />
-    </div>
-    <div className="flex align-center gap-2 ">
-      {children}
-      {notificationsProps && <Notifications {...notificationsProps} />}
-      <UserMenu {...userMenuProps} />
-    </div>
-  </div>
-);

package/src/components/Helper/Collapse.tsx

@@ -1,53 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-
-interface Props {
-  isOpen: boolean;
-  children: ReactNode;
-  keepContentInDom?: boolean;
-  className?: string;
-}
-
-export const Collapse: FC<Props> = ({
-  isOpen,
-  children,
-  keepContentInDom,
-  className,
-}) => {
-  const [height, setHeight] = useState<number>();
-  const [isVisible, setIsVisible] = useState(isOpen);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    isOpen && setIsVisible(true);
-  }, [isOpen]);
-
-  useEffect(() => {
-    const observer = new ResizeObserver(entries => {
-      const newHeight = Math.ceil(entries[0].contentRect.height);
-      setHeight(newHeight);
-    });
-
-    let observerRefValue: HTMLDivElement;
-    if (ref.current) {
-      observerRefValue = ref.current;
-      observer.observe(observerRefValue);
-    }
-
-    return () => {
-      observerRefValue && observer.unobserve(observerRefValue);
-    };
-  }, [ref]);
-
-  return (
-    <div
-      className={clsx('iui-collapse', className)}
-      style={{ maxHeight: isOpen ? height : 0 }}
-      onTransitionEnd={() => !isOpen && setIsVisible(false)}
-    >
-      <div ref={ref}>{(keepContentInDom || isVisible) && children}</div>
-    </div>
-  );
-};

package/src/components/Inputs/Checkbox.tsx

@@ -1,53 +0,0 @@
-import type { FC, ReactNode, Ref } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { faCheck } from '../../assets/icons/solid/faCheck';
-import { faMinus } from '../../assets/icons/solid/faMinus';
-import { Tooltip } from '../Tooltip/Tooltip';
-
-export interface ICheckboxProps {
-  label?: string;
-  value?: boolean | 'middle';
-  setValue: (checked: boolean) => void;
-  required?: boolean;
-  disabled?: boolean;
-  className?: string;
-  tooltip?: string;
-  children?: ReactNode;
-  ref?: Ref<HTMLLabelElement>;
-}
-
-export const Checkbox: FC<ICheckboxProps> = ({
-  label,
-  value = false,
-  setValue,
-  required,
-  disabled,
-  className,
-  tooltip,
-  children,
-  ref,
-}) => (
-  <Tooltip label={tooltip || ''}>
-    <label ref={ref} className={clsx('iui-checkbox', className, { disabled })}>
-      <div className={clsx('box', { selected: value })}>
-        {value && (
-          <FontAwesomeIcon
-            icon={value === 'middle' ? faMinus : faCheck}
-            height={14}
-            width={14}
-          />
-        )}
-        <input
-          required={required}
-          disabled={disabled}
-          className="fake-input"
-          type="checkbox"
-          checked={value && value !== 'middle'}
-          onChange={() => setValue(!value)}
-        />
-      </div>
-      {label ? <p>{label}</p> : children}
-    </label>
-  </Tooltip>
-);