@inceptionbg/iui 2.0.35 → 2.0.36

package/src/components/Pullover/Pullover.tsx

@@ -1,197 +0,0 @@
-import type { FC, KeyboardEventHandler, ReactNode } from 'react';
-import type { ILocalPopupControl } from '../../types/IPopup';
-import type { IDialogFooterActions } from '../Dialog/components/DialogFooter';
-import { useEffect, useRef } from 'react';
-import { faXmark } from '@inceptionbg/icons';
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
-import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
-import { onPopupKeyDown } from '../../utils/popupUtils';
-import { rootDir } from '../../utils/rootDir';
-import { Button } from '../Button/Button';
-import { IconButton } from '../Button/IconButton';
-import { SplitButton } from '../Button/SplitButton';
-import { SearchInput } from '../Inputs/SearchInput';
-import { Loader } from '../Loader/Loader';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-
-interface Props {
-  id?: string;
-  control: ILocalPopupControl;
-  header?: {
-    title: string;
-    onSearch?: (search: string) => void;
-  };
-  isFetching?: boolean;
-  isLoading?: boolean;
-  onFormSubmit?: () => void;
-  onContentClick?: () => void;
-  onCloseCallback?: () => void;
-  footer?: IDialogFooterActions;
-  size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
-  className?: string;
-  contentClassName?: string;
-  portalTarget?: HTMLElement;
-  children: ReactNode;
-}
-export const Pullover: FC<Props> = ({
-  id,
-  control,
-  header,
-  isFetching = false,
-  isLoading = false,
-  onFormSubmit,
-  onContentClick,
-  onCloseCallback,
-  footer,
-  size = 'vw50',
-  className,
-  contentClassName,
-  portalTarget,
-  children,
-}) => {
-  const { t } = useTranslation();
-  const searchRef = useRef<HTMLInputElement>(null);
-
-  const ConfirmButton = footer?.confirmButton?.splitActions ? SplitButton : Button;
-
-  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
-    control,
-    onCloseCallback,
-  });
-
-  const focusableElements = useGetFocusableElements({
-    elementRef,
-    isOpen,
-    autoFocusIndex: header?.onSearch ? 1 : 0,
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        elementRef.current?.classList.add('open');
-        elementRef.current?.focus();
-      });
-    }
-  }, [elementRef, isOpen]);
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
-    onPopupKeyDown(event, {
-      onClose,
-      enter: {
-        onAction: () => {
-          footer?.confirmButton?.onClick?.();
-          !footer?.confirmButton?.keepOpen && onClose();
-        },
-        disabled: !footer?.confirmButton?.onClick,
-      },
-      search: {
-        onAction: () => searchRef.current?.focus(),
-        disabled: !header?.onSearch,
-      },
-      focusableElements,
-    });
-  };
-
-  return isOpen
-    ? createPortal(
-        <div
-          id={id}
-          ref={elementRef}
-          className="pullover"
-          onClick={onClose}
-          aria-label="popup"
-          tabIndex={-1}
-          onKeyDown={onKeyDown}
-        >
-          <div className={clsx('container', size)} onClick={e => e.stopPropagation()}>
-            <div className={clsx('content', className)}>
-              {header && (
-                <div className="pullover-header no-print">
-                  <h3>{header.title}</h3>
-                  <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
-                condition={!!onFormSubmit}
-                wrapper={children => (
-                  <form
-                    className="pullover-form"
-                    onSubmit={e => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onFormSubmit?.();
-                    }}
-                  >
-                    {children}
-                  </form>
-                )}
-              >
-                {/* CONTENT */}
-                {isLoading ? (
-                  <Loader isLoading isFullPage />
-                ) : (
-                  <Loader isLoading={isFetching}>
-                    <div
-                      onClick={onContentClick}
-                      className={clsx('pullover-content', contentClassName)}
-                    >
-                      {children}
-                    </div>
-                  </Loader>
-                )}
-
-                {/* 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"
-                      />
-                    )}
-                    <Button
-                      label={t('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>
-        </div>,
-        portalTarget ?? rootDir
-      )
-    : null;
-};

package/src/components/Router/Router.tsx

@@ -1,52 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-import type { IRoute } from '../../types/IRouter';
-import type { Header } from '../Header/Header';
-import type { Sidebar } from '../Sidebar/Sidebar';
-import { lazy, Suspense } from 'react';
-import { Route, Routes } from 'react-router';
-import { FullScreenLoader, LazyLoader } from '../Loader/Loader';
-import { AppLayout } from '../Wrappers/AppLayout';
-
-const NoAccessPage = lazy(() => import('../../pages/NoAccessPage'));
-const NotFoundPage = lazy(() => import('../../pages/NotFoundPage'));
-
-const commonFullScreenRoutes: IRoute[] = [
-  { path: '/*', element: <NotFoundPage /> },
-  { path: '/no-access', element: <NoAccessPage /> },
-];
-
-interface Props {
-  fullScreenRoutes: IRoute[];
-  appRoutes: IRoute[];
-  header: ComponentProps<typeof Header>;
-  sidebar: ComponentProps<typeof Sidebar>;
-}
-
-export const Router: FC<Props> = ({ fullScreenRoutes, appRoutes, header, sidebar }) => (
-  <Routes>
-    {fullScreenRoutes.concat(commonFullScreenRoutes).map(route => (
-      <Route
-        key={route.path}
-        path={route.path}
-        element={
-          route.element && (
-            <Suspense fallback={<FullScreenLoader isLoading />}>{route.element}</Suspense>
-          )
-        }
-      />
-    ))}
-    {appRoutes.map(route => (
-      <Route
-        key={route.path}
-        path={route.path}
-        element={
-          route.element && (
-            <AppLayout header={header} sidebar={sidebar}>
-              <Suspense fallback={<LazyLoader />}>{route.element}</Suspense>
-            </AppLayout>
-          )
-        }
-      />
-    ))}
-  </Routes>
-);

package/src/components/Sidebar/AddButton.tsx

@@ -1,22 +0,0 @@
-import type { FC } from 'react';
-import { useNavigate } from 'react-router';
-import { faPlus } from '../../assets/icons/solid/faPlus';
-import { IconButton } from '../Button/IconButton';
-
-interface Props {
-  link: string;
-}
-export const AddButton: FC<Props> = ({ link }) => {
-  const navigate = useNavigate();
-  return (
-    <IconButton
-      className="add-button"
-      icon={faPlus}
-      size="s"
-      onClick={e => {
-        e.preventDefault();
-        navigate(link);
-      }}
-    />
-  );
-};

package/src/components/Sidebar/Sidebar.tsx

@@ -1,85 +0,0 @@
-import type { FC } from 'react';
-import type { IOrgLogo } from '../../utils/logoUtils';
-import type { ISidebarItem } from './types/ISidebar';
-import { Fragment, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { faAngleLeft } from '../../assets/icons/solid/faAngleLeft';
-import { orgLogo } from '../../utils/logoUtils';
-import { IconButton } from '../Button/IconButton';
-import { SidebarItem } from './SidebarItem';
-
-export interface ISidebarProps {
-  items: ISidebarItem[][];
-  logo?: IOrgLogo;
-  customLogo?: string;
-  appVersion?: string;
-}
-export const Sidebar: FC<ISidebarProps> = ({ items, logo, customLogo, appVersion }) => {
-  const [itemsList, setItemsList] = useState<ISidebarItem[][]>([]);
-  const [collapsed, setCollapsed] = useState(false);
-  const [openedMenu, setOpenedMenu] = useState('');
-
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    // Filter out hidden items & items without visible content
-    const newItems = items.map(list =>
-      list.filter(
-        item => !item.hidden && (item.to || item.content?.some(item => !item.hidden))
-      )
-    );
-    setItemsList(newItems);
-  }, [items, setItemsList]);
-
-  return (
-    <div ref={sidebarRef} className={clsx('iui-sidebar', { collapsed })}>
-      {/* ////// TOGGLE ////// */}
-      <IconButton
-        icon={faAngleLeft}
-        className={clsx('iui-collapse-btn', {
-          'fa-flip-horizontal': collapsed,
-          collapsed,
-        })}
-        size="s"
-        onClick={() => setCollapsed(!collapsed)}
-      />
-
-      <div className="iui-sidebar-content">
-        {/* ////// SIDEBAR ITEMS ////// */}
-        <div className="iui-sidebar-items">
-          {itemsList.map((e, i) => (
-            <Fragment key={i}>
-              {i > 0 && !!e.length && <hr />}
-              {e.map(
-                item =>
-                  !item.hidden && (
-                    <SidebarItem
-                      {...item}
-                      key={item.label}
-                      menu={
-                        item.content
-                          ? { content: item.content, openedMenu, setOpenedMenu }
-                          : undefined
-                      }
-                    />
-                  )
-              )}
-            </Fragment>
-          ))}
-        </div>
-      </div>
-      {/* ////// FOOTER ////// */}
-      <div className={clsx('sidebar-footer', { collapsed })}>
-        {(logo ?? customLogo) && (
-          <img
-            className="sidebar-logo"
-            // src={!!organization?.reseller ? orgLogo[organization?.reseller] : logo}
-            src={customLogo || orgLogo[logo || 'INC']}
-            alt="logo"
-          />
-        )}
-        {appVersion && <p>{appVersion}</p>}
-      </div>
-    </div>
-  );
-};

package/src/components/Sidebar/SidebarItem.tsx

@@ -1,84 +0,0 @@
-import type { FC } from 'react';
-import type { ISidebarItem } from './types/ISidebar';
-import { faChevronDown } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { Link, useLocation } from 'react-router';
-import { Collapse } from '../Helper/Collapse';
-import { Tooltip } from '../Tooltip/Tooltip';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { AddButton } from './AddButton';
-
-export const SidebarItem: FC<ISidebarItem> = ({ label, icon, to, badge, menu }) => {
-  const { pathname } = useLocation();
-
-  return (
-    <>
-      <ConditionalWrapper
-        condition={!!to}
-        wrapper={children => <Link to={to!}>{children}</Link>}
-      >
-        <div
-          onClick={
-            menu
-              ? () => menu.setOpenedMenu(label !== menu.openedMenu ? label : '')
-              : undefined
-          }
-          className={clsx('iui-sidebar-item item-only clickable', {
-            active:
-              to === pathname ||
-              (menu?.content.find(e => e.to === pathname) && label !== menu?.openedMenu),
-          })}
-        >
-          <FontAwesomeIcon icon={icon!} className="sidebar-item-icon" />
-          <p className="sidebar-item-label">{label}</p>
-          {!!badge && <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>}
-          {menu && (
-            <FontAwesomeIcon
-              icon={faChevronDown}
-              className={clsx('sidebar-expand-icon', {
-                rotate: label === menu.openedMenu,
-              })}
-            />
-          )}
-        </div>
-      </ConditionalWrapper>
-
-      {menu && (
-        <Collapse isOpen={menu.openedMenu === label}>
-          {menu.content.map(
-            ({ hidden, label, to, primary, badge, addUrl, tooltip }) =>
-              !hidden && (
-                <ConditionalWrapper
-                  key={label}
-                  condition={!!to}
-                  wrapper={children => <Link to={to!}>{children}</Link>}
-                >
-                  <Tooltip
-                    label={tooltip!}
-                    disabled={!tooltip}
-                    position="right"
-                    singleLine
-                  >
-                    <div
-                      className={clsx('iui-sidebar-item sub-item', {
-                        clickable: !!to,
-                        active: to === pathname,
-                        primary,
-                      })}
-                    >
-                      <p className="sidebar-item-label">{label}</p>
-                      {!!badge && (
-                        <div className="sidebar-badge">{badge > 99 ? '99+' : badge}</div>
-                      )}
-                      {!!addUrl && <AddButton link={addUrl} />}
-                    </div>
-                  </Tooltip>
-                </ConditionalWrapper>
-              )
-          )}
-        </Collapse>
-      )}
-    </>
-  );
-};

package/src/components/Sidebar/types/ISidebar.ts

@@ -1,28 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-
-export interface ISidebarItem {
-  label: string;
-  icon?: IconDefinition;
-  to?: string;
-  content?: ISidebarSubItem[];
-  menu?: {
-    content: ISidebarSubItem[];
-    openedMenu: string;
-    setOpenedMenu: (label: string) => void;
-  };
-  hidden?: boolean;
-  badge?: number;
-  addUrl?: string;
-}
-
-export interface ISidebarSubItem {
-  label: string;
-  to?: string;
-  content?: ISidebarItem[];
-  hidden?: boolean;
-  tooltip?: string;
-  badge?: number;
-  addUrl?: string;
-  primary?: boolean;
-  collapsed?: boolean;
-}