@inceptionbg/iui 2.0.5 → 2.0.6

package/src/components/Inputs/TimeInput/TimeInput.tsx

@@ -0,0 +1,81 @@
+import clsx from 'clsx';
+import { FC } from 'react';
+import { InputWrapper } from '../InputWrapper';
+
+export interface ITimeInputProps {
+  time: string;
+  setTime: (newTime: string) => void;
+  label?: string;
+  disabled?: boolean;
+  required?: boolean;
+  isClearable?: boolean;
+  className?: string;
+}
+
+export const TimeInput: FC<ITimeInputProps> = ({
+  time = '00:00',
+  setTime,
+  label,
+  disabled,
+  required,
+  isClearable = true,
+  className,
+}) => {
+  const [hours, minutes] = time.split(':').map(t => t.padStart(2, '0'));
+
+  const handleChange = (e: string, type: 'hh' | 'mm') => {
+    let value = isNaN(+e) || e === '-1' ? '00' : e.replace(/\D/g, '');
+    if (value.length > 2) {
+      value = value.substring(1);
+    }
+
+    if (type === 'hh') {
+      const newHours = Math.min(23, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${newHours}:${minutes}`);
+    } else {
+      const newMinutes = Math.min(59, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${hours}:${newMinutes}`);
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      onClearInput={isClearable && time && !disabled ? () => setTime('00:00') : undefined}
+      className={clsx(className, 'time-input-wrapper')}
+    >
+      <div className="time-input">
+        <input
+          type="number"
+          value={hours}
+          onChange={e => handleChange(e.target.value, 'hh')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+          style={{ textAlign: 'right' }}
+        />
+        <span className="fs-m">:</span>
+        <input
+          type="number"
+          value={minutes}
+          onChange={e => handleChange(e.target.value, 'mm')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+        />
+      </div>
+    </InputWrapper>
+  );
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,53 @@
+import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  isLoading: boolean;
+  isFullPage?: boolean;
+  classNameLoader?: string;
+  children?: ReactElement<{ className: string; children: ReactElement | ReactNode }>;
+}
+
+export const Loader: FC<Props> = ({ isLoading, isFullPage, classNameLoader, children }) =>
+  children ? (
+    Children.map(children, child =>
+      cloneElement(child, {
+        className: clsx(child.props.className, { relative: isLoading }),
+        children: (
+          <>
+            {child.props.children}
+            {isLoading && (
+              <div className={clsx('loader', classNameLoader)}>
+                <span className="spinner" />
+              </div>
+            )}
+          </>
+        ),
+      })
+    )
+  ) : isLoading ? (
+    <div className={`${isFullPage ? 'full-page-loader' : 'empty-loader'} relative`}>
+      <div className={clsx('loader', classNameLoader)}>
+        <span className="spinner" />
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+
+export const FullScreenLoader: FC<{ isLoading: boolean }> = ({ isLoading }) =>
+  isLoading ? (
+    <div className="full-screen-loader">
+      <div className="loader">
+        <span className="spinner" />
+      </div>
+    </div>
+  ) : null;
+
+export const LazyLoader: FC = () => (
+  <div className="lazy-loader">
+    <div className="loader">
+      <span className="spinner" />
+    </div>
+  </div>
+);

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import { FC, ReactNode, RefObject, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { rootDir } from '../../utils/RootDir';
+import { useMenuPosition } from './hooks/useMenuPosition';
+import { useBackgroundClose } from '../../hooks/useBackgroundClose';
+import { MenuItem } from './MenuItem';
+import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  renderButton: (ref: RefObject<any>) => ReactNode;
+  items?: IMenuItem[];
+  placement?: IMenuPlacement;
+  size?: 's' | 'm' | 'l';
+  className?: string;
+  classNameItem?: string;
+  children?: ReactNode;
+}
+
+export const Menu: FC<Props> = ({
+  isOpen,
+  onClose,
+  renderButton,
+  items,
+  placement = 'bottom-left',
+  size,
+  className,
+  classNameItem,
+  children,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<Element>(null);
+
+  const menuStyle = useMenuPosition({
+    isOpen,
+    placement,
+    containerRef,
+    menuRef,
+  });
+
+  useBackgroundClose({ portalRef, disabled: !isOpen, handleClose: onClose });
+
+  return (
+    <>
+      {renderButton(containerRef)}
+      {isOpen
+        ? createPortal(
+            <div ref={portalRef} className="portal-background">
+              <div
+                ref={menuRef}
+                className={clsx('iui-menu', className, size)}
+                style={menuStyle}
+              >
+                {items?.map(item => (
+                  <MenuItem {...item} key={item.label} className={classNameItem} />
+                ))}
+                {children}
+              </div>
+            </div>,
+            rootDir
+          )
+        : null}
+    </>
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,47 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper.js';
+import { Link } from 'react-router';
+import { NotificationBadge } from '../Badge/NotificationBadge.js';
+import { IMenuItem } from '../../types/IMenu.js';
+import { FC } from 'react';
+
+export const MenuItem: FC<IMenuItem> = ({
+  label,
+  icon,
+  iconRotation,
+  onClick,
+  to,
+  badge,
+  disabled,
+  hidden,
+  withDevider,
+  className,
+}) =>
+  hidden ? null : (
+    <div>
+      <ConditionalWrapper
+        condition={!disabled && !!to}
+        wrapper={children => <Link to={to!}>{children}</Link>}
+      >
+        <div
+          className={clsx(className, {
+            'iui-menu-item': !className,
+            clickable: !!onClick || !!to,
+            disabled,
+            'with-devider': withDevider,
+          })}
+          onClick={disabled ? undefined : onClick}
+        >
+          {icon && (
+            <div className="menu-item-icon">
+              <FontAwesomeIcon icon={icon} rotation={iconRotation} />
+            </div>
+          )}
+          <NotificationBadge number={badge} size="s" className="menu-item-badge">
+            <p className="menu-item-label">{label}</p>
+          </NotificationBadge>
+        </div>
+      </ConditionalWrapper>
+    </div>
+  );

package/src/components/Menu/NewMenu.tsx

@@ -0,0 +1,66 @@
+// import '@oddbird/popover-polyfill';
+// import polyfill from 'https://unpkg.com/@oddbird/css-anchor-positioning/fn';
+import '../../styles/components/_menu-v2.scss';
+
+import clsx from 'clsx';
+import { FC, ReactNode, RefObject, useEffect, useRef } from 'react';
+import { MenuItem } from './MenuItem';
+import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
+
+interface Props {
+  id: string;
+  renderButton: (ref: RefObject<any>) => ReactNode;
+  items: IMenuItem[];
+  placement?: IMenuPlacement;
+  size?: 's' | 'm' | 'l';
+  className?: string;
+  classNameItem?: string;
+}
+
+export const MenuV2: FC<Props> = ({
+  id,
+  renderButton,
+  items,
+  placement = 'bottom-left',
+  size,
+  className,
+  classNameItem,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // polyfill();
+    buttonRef.current?.setAttribute('popovertarget', id);
+    buttonRef.current?.style.setProperty('anchor-name', `--${id}`);
+    popoverRef.current?.style.setProperty('position-anchor', `--${id}`);
+  }, [id]);
+
+  return (
+    <>
+      {renderButton(buttonRef)}
+      <div
+        ref={popoverRef}
+        role="menu"
+        // @ts-ignore
+        popover="auto"
+        className={clsx('iui-menu-v2', size, placement)}
+        id={id}
+      >
+        <div className={className}>
+          {items.map(item => (
+            <MenuItem
+              {...item}
+              key={item.label}
+              className={classNameItem}
+              onClick={e => {
+                item.onClick?.(e);
+                !item.keepOpen && popoverRef.current?.hidePopover();
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/Menu/hooks/useMenuPosition.tsx

@@ -0,0 +1,80 @@
+import { RefObject, useCallback, useEffect, useState } from 'react';
+import { IMenuPlacement } from '../../../types/IMenu';
+
+interface Offsets {
+  offsetTop: number;
+  offsetLeft: number;
+}
+
+interface Props {
+  isOpen: boolean;
+  placement: IMenuPlacement;
+  containerRef: RefObject<Element | null>;
+  menuRef: RefObject<Element | null>;
+}
+
+export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Props) => {
+  const [offsets, setOffsets] = useState<Offsets>({
+    offsetLeft: 0,
+    offsetTop: 0,
+  });
+  const [maxHeight, setMaxHeight] = useState<number>();
+
+  const recalculatePosition = useCallback(() => {
+    if (containerRef.current && menuRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const [placementY, placementX] = placement.split('-');
+
+      let offsetTop = containerRect.bottom + 5;
+      // let offsetTop = containerRect.bottom + document.documentElement.scrollTop + 5;
+
+      const offsetLeft =
+        containerRect.left +
+        (placementX === 'right' ? containerRect.width - menuRect.width : 0);
+      // + document.documentElement.scrollLeft;
+
+      if (placementY === 'bottom') {
+        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
+      }
+
+      if (placementY === 'top') {
+        setMaxHeight(
+          window.innerHeight - containerRect.top + 40
+          // - 2 * document.documentElement.scrollTop
+        );
+      }
+
+      // check for space on the bottom
+      if (
+        (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
+        placementY === 'top'
+      ) {
+        offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
+      }
+
+      setOffsets({ offsetTop, offsetLeft });
+    }
+  }, [menuRef, containerRef, placement]);
+
+  useEffect(() => {
+    isOpen
+      ? window.addEventListener('resize', recalculatePosition)
+      : window.removeEventListener('resize', recalculatePosition);
+    // Disable scroll & fix page resize on menu open
+    document.body.style.marginRight =
+      isOpen && window.innerWidth > document.body.clientWidth ? '19px' : '';
+    // document.body.style.overflow = isOpen ? 'hidden' : '';
+
+    recalculatePosition();
+    return () => {
+      window.removeEventListener('resize', recalculatePosition);
+    };
+  }, [isOpen, recalculatePosition]);
+
+  return {
+    top: offsets.offsetTop + 'px',
+    left: offsets.offsetLeft + 'px',
+    maxHeight,
+  };
+};

package/src/components/Pullover/Pullover.tsx

@@ -0,0 +1,89 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { FormWrapper } from '../Wrappers/FormWrapper';
+import { rootDir } from '../../utils/RootDir';
+import { IButtonColor } from '../Button/Button';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  size: 's' | 'm' | 'l' | 'xl';
+  form?: {
+    isLoading: boolean;
+    onSubmit: (data: any) => void;
+    submitLabel?: string;
+    submitDisabled?: boolean;
+  };
+  additionalButtons?: {
+    label: string;
+    icon?: IconDefinition;
+    onClick: () => void;
+    disabled?: boolean;
+    hidden?: boolean;
+    outlined?: boolean;
+    color?: IButtonColor;
+  }[];
+  children: ReactNode;
+}
+
+export const Pullover: FC<Props> = ({
+  isOpen,
+  onClose,
+  size,
+  form,
+  additionalButtons,
+  children,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+
+  const handleClose = useCallback(() => {
+    ref.current?.classList.add('closing');
+    setTimeout(onClose, 200);
+  }, [ref, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        ref.current?.classList.add('open');
+      });
+      const handleClick = (e: KeyboardEvent) => {
+        e.code === 'Escape' && handleClose();
+      };
+      window.addEventListener('keydown', handleClick);
+      return () => window.removeEventListener('keydown', handleClick);
+    }
+  }, [isOpen, handleClose]);
+
+  return isOpen
+    ? createPortal(
+        <div ref={ref} className="pullover" onClick={handleClose}>
+          <div className={`container ${size}`} onClick={e => e.stopPropagation()}>
+            <div className="content">
+              {form ? (
+                <FormWrapper
+                  isLoading={form.isLoading}
+                  submitButton={{
+                    onSubmit: form.onSubmit,
+                    label: form.submitLabel,
+                    disabled: form.submitDisabled,
+                  }}
+                  otherButtons={[
+                    { label: t('Close'), onClick: handleClose },
+                    ...(additionalButtons?.filter(e => !e.hidden) || []),
+                  ]}
+                >
+                  <div className="flex column gap-2 flex-grow">{children}</div>
+                </FormWrapper>
+              ) : (
+                children
+              )}
+            </div>
+          </div>
+        </div>,
+        rootDir
+      )
+    : null;
+};

package/src/components/Router/Router.tsx

@@ -0,0 +1,51 @@
+import { ComponentProps, FC, lazy, Suspense } from 'react';
+import { Route, Routes } from 'react-router';
+import { IRoute } from '../../types/IRouter';
+import { AppLayout } from '../Wrappers/AppLayout';
+import { FullScreenLoader, LazyLoader } from '../Loader/Loader';
+import { Header } from '../Header/Header';
+import { Sidebar } from '../Sidebar/Sidebar';
+
+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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { useNavigate } from 'react-router';
+import { IconButton } from '../Button/IconButton';
+import { faPlus } from '../../assets/icons/solid/faPlus';
+
+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

@@ -0,0 +1,81 @@
+import clsx from 'clsx';
+import { FC, Fragment, useEffect, useRef, useState } from 'react';
+import { SidebarItem } from './SidebarItem';
+import { ISidebarItem } from './types/ISidebar';
+import { faAngleLeft } from '../../assets/icons/solid/faAngleLeft';
+import { IconButton } from '../Button/IconButton';
+
+export interface ISidebarProps {
+  items: ISidebarItem[][];
+  logo?: string;
+  appVersion?: string;
+}
+export const Sidebar: FC<ISidebarProps> = ({ items, logo, 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 && (
+          <img
+            className="sidebar-logo"
+            // src={!!organization?.reseller ? orgLogo[organization?.reseller] : logo}
+            src={logo}
+            alt="logo"
+          />
+        )}
+        {appVersion && <p>{appVersion}</p>}
+      </div>
+    </div>
+  );
+};