@inceptionbg/iui 2.0.5 → 2.0.7

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,66 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { FC, useMemo, useState } from 'react';
+import { ITab } from '../../types/ITab';
+
+interface Props {
+  tabs: ITab[];
+  initialValue?: string;
+  control?: {
+    value: string;
+    setValue: (value: string) => void;
+  };
+  onChange?: (value: string) => void;
+  noWrap?: boolean;
+  className?: string;
+  classNameContent?: string;
+}
+
+export const Tabs: FC<Props> = ({
+  tabs,
+  initialValue,
+  control,
+  onChange,
+  noWrap,
+  className,
+  classNameContent,
+}) => {
+  const filteredTabs = useMemo(() => tabs.filter(e => !e.hidden), [tabs]);
+
+  const [selected, setSelected] = useState(initialValue || filteredTabs[0].value);
+
+  const activeTab = filteredTabs.find(tab => (control?.value || selected) === tab.value);
+
+  return filteredTabs.length > 0 ? (
+    <div className={className}>
+      <div className="iui-tabs">
+        {filteredTabs.map(tab => (
+          <div
+            key={tab.value}
+            className={clsx('iui-tab clickable', {
+              selected: (control?.value || selected) === tab.value,
+              disabled: tab.disabled,
+              'no-wrap': noWrap,
+            })}
+            onClick={
+              tab.disabled
+                ? undefined
+                : () => {
+                    !!control ? control.setValue(tab.value) : setSelected(tab.value);
+                    onChange?.(tab.value);
+                  }
+            }
+          >
+            {tab.icon && <FontAwesomeIcon icon={tab.icon} />}
+            {tab.label}
+          </div>
+        ))}
+      </div>
+      {activeTab && (
+        <div key={activeTab.value} className={clsx('iui-tab-content', classNameContent)}>
+          {activeTab.component}
+        </div>
+      )}
+    </div>
+  ) : null;
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,133 @@
+import clsx from 'clsx';
+import {
+  cloneElement,
+  Dispatch,
+  FC,
+  ReactElement,
+  Ref,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { rootDir } from '../../utils/RootDir';
+
+export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom';
+
+interface Props {
+  label?: string;
+  position?: TooltipPosition;
+  disabled?: boolean;
+  singleLine?: boolean;
+  className?: string;
+  children: ReactElement;
+  ref?: Ref<HTMLElement> | null;
+}
+
+export const Tooltip: FC<Props> = ({
+  label,
+  position = 'top',
+  disabled,
+  singleLine,
+  className,
+  children,
+  ref,
+}) => {
+  const [newPosition, setNewPosition] = useState<TooltipPosition | ''>('');
+
+  const internalRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!disabled && !!label) {
+      const getContainer = () => {
+        if (ref && 'current' in ref) {
+          return ref.current;
+        }
+        return internalRef.current;
+      };
+
+      const container = getContainer();
+      const tooltip = tooltipRef.current;
+
+      const onMouseEnter = () => {
+        if (container && tooltip) {
+          setAbsolutePosition(container, tooltip, position, setNewPosition);
+          tooltip.classList.add('visible');
+        }
+      };
+      const onMouseLeave = () => tooltip?.classList.remove('visible');
+
+      if (container) {
+        container.addEventListener('mouseenter', onMouseEnter);
+        container.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+          container.removeEventListener('mouseenter', onMouseEnter);
+          container.removeEventListener('mouseleave', onMouseLeave);
+        };
+      }
+    }
+  }, [disabled, label, position, ref]);
+
+  return !!label && !disabled ? (
+    <>
+      {/* @ts-ignore */}
+      {cloneElement(children, { ref: ref || internalRef })}
+      {createPortal(
+        <div
+          ref={tooltipRef}
+          className={clsx('tooltip-container', className, {
+            'no-wrap': singleLine,
+          })}
+        >
+          <div className="tooltip">
+            <div className={clsx('arrow', newPosition || position)} />
+            <div>{label}</div>
+          </div>
+        </div>,
+        rootDir
+      )}
+    </>
+  ) : (
+    children
+  );
+};
+
+const setAbsolutePosition = (
+  containerEl: HTMLElement,
+  targetEl: HTMLDivElement,
+  position: TooltipPosition,
+  setNewPosition: Dispatch<SetStateAction<TooltipPosition | ''>>
+) => {
+  const containerRect = containerEl.getBoundingClientRect();
+  const tooltipRect = targetEl.getBoundingClientRect();
+
+  if (position === 'bottom' || position === 'top') {
+    const bottom = Math.floor(containerRect.bottom + 16);
+    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
+    const leftCenter = Math.floor(
+      containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
+    );
+    const reverse =
+      position === 'top' ? top < 0 : bottom + tooltipRect.height > window.innerHeight;
+
+    setNewPosition(reverse ? (position === 'bottom' ? 'top' : 'bottom') : '');
+
+    targetEl.style.top = `${
+      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top
+    }px`;
+    targetEl.style.left = `${leftCenter}px`;
+  } else if (position === 'right') {
+    targetEl.style.top =
+      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
+      'px';
+    targetEl.style.left = Math.floor(containerRect.right + 16) + 'px';
+  } else if (position === 'left') {
+    targetEl.style.top =
+      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
+      'px';
+    targetEl.style.left = Math.floor(containerRect.left - tooltipRect.width - 16) + 'px';
+  }
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { TreeItem } from './TreeItem';
+import { ITreeItem } from '../../types/ITree';
+
+interface Props {
+  data: ITreeItem[];
+  selectedItemUuid?: string;
+  onClick: (itemUuid: string) => void;
+}
+
+export const Tree: FC<Props> = ({ data, selectedItemUuid, onClick }) => (
+  <div>
+    {data.map(item => (
+      <TreeItem
+        key={item.uuid}
+        item={item}
+        onClick={onClick}
+        selectedItemUuid={selectedItemUuid}
+      />
+    ))}
+  </div>
+);

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,56 @@
+import { FC, useState } from 'react';
+import { ITreeItem } from '../../types/ITree';
+import clsx from 'clsx';
+import { IconButton } from '../Button/IconButton';
+import { Collapse } from '../Helper/Collapse';
+import { faChevronRight } from '../../assets/icons';
+
+interface Props {
+  item: ITreeItem;
+  onClick: (itemUuid: string) => void;
+  selectedItemUuid?: string;
+  className?: string;
+}
+
+export const TreeItem: FC<Props> = ({ item, onClick, selectedItemUuid, className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hasChildren = !!item.children?.length;
+  return (
+    <div className={clsx('tree-item', className)}>
+      <div className="flex align-center">
+        <div className="extendable-icon">
+          {hasChildren && (
+            <IconButton
+              icon={faChevronRight}
+              onClick={() => setIsOpen(!isOpen)}
+              size="s"
+              className={clsx('rotate', { rotate90: isOpen })}
+            />
+          )}
+        </div>
+        <div
+          className={clsx('tree-item-name clickable', {
+            active: selectedItemUuid === item.uuid,
+          })}
+          onClick={() => onClick(item.uuid)}
+        >
+          {item.name}
+        </div>
+      </div>
+      {hasChildren && (
+        <Collapse isOpen={isOpen}>
+          {item.children?.map((child: ITreeItem) => (
+            <TreeItem
+              key={child.uuid}
+              item={child}
+              onClick={onClick}
+              className={clsx('ml-3', className)}
+              selectedItemUuid={selectedItemUuid}
+            />
+          ))}
+        </Collapse>
+      )}
+    </div>
+  );
+};

package/src/components/Wrappers/AppLayout.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import { Header } from '../Header/Header';
+import { Sidebar } from '../Sidebar/Sidebar';
+
+interface Props {
+  header: ComponentProps<typeof Header>;
+  sidebar: ComponentProps<typeof Sidebar>;
+  children: ReactNode;
+}
+
+export const AppLayout: FC<Props> = ({ header, sidebar, children }) => (
+  <div className="app-layout">
+    <Header {...header} />
+    <Sidebar {...sidebar} />
+    <div className="app-content">{children}</div>
+  </div>
+);

package/src/components/Wrappers/ConditionalWrapper.tsx

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  condition: boolean;
+  wrapper: (children: ReactNode) => ReactNode;
+  children: ReactNode;
+}
+
+export const ConditionalWrapper: FC<Props> = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children;

package/src/components/Wrappers/FormWrapper.tsx

@@ -0,0 +1,81 @@
+import { FC, FormEvent, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, IButtonColor, IButtonVariant } from '../Button/Button';
+import { Loader } from '../Loader/Loader';
+
+export interface IFormWrapper {
+  isLoading: boolean;
+  className?: string;
+  submitButton: {
+    label?: string;
+    icon?: any;
+    disabled?: boolean;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: IButtonVariant;
+    color?: IButtonColor;
+  };
+  otherButtons?: {
+    label: string;
+    icon?: any;
+    onClick: () => void;
+    variant?: IButtonVariant;
+    color?: IButtonColor;
+    disabled?: boolean;
+    hidden?: boolean;
+  }[];
+  noAccess?: boolean;
+  children: ReactNode;
+}
+
+export const FormWrapper: FC<IFormWrapper> = ({
+  isLoading,
+  noAccess,
+  submitButton,
+  otherButtons,
+  className,
+  children,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Loader isLoading={isLoading}>
+      <form
+        className={className}
+        onSubmit={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          !submitButton.disabled && submitButton.onSubmit(e);
+        }}
+      >
+        {children}
+        {(!noAccess || otherButtons) && (
+          <div className="iui-form-actions">
+            {otherButtons?.map(
+              e =>
+                !e.hidden && (
+                  <Button
+                    key={e.label}
+                    label={e.label}
+                    icon={e.icon}
+                    disabled={isLoading || e.disabled}
+                    variant={e.variant}
+                    color={e.color}
+                    onClick={e.onClick}
+                  />
+                )
+            )}
+            {!noAccess && (
+              <Button
+                label={submitButton.label ?? t('Save')}
+                icon={submitButton.icon}
+                disabled={isLoading || submitButton.disabled}
+                variant={submitButton.variant}
+                color={submitButton.color}
+              />
+            )}
+          </div>
+        )}
+      </form>
+    </Loader>
+  );
+};

package/src/components/Wrappers/PageLayout.tsx

@@ -0,0 +1,152 @@
+import { FC, ReactNode, useLayoutEffect, useState } from 'react';
+import { IHeaderAction } from '../../types/IHeader';
+import { Button } from '../Button/Button';
+import { Loader } from '../Loader/Loader';
+import { ConditionalWrapper } from './ConditionalWrapper';
+import { IconButton } from '../Button/IconButton';
+import { faArrowLeft } from '../../assets/icons/regular/faArrowLeft';
+import { faEllipsisVertical, faQuestion } from '../../assets/icons';
+import { Trans } from 'react-i18next';
+import { Pullover } from '../Pullover/Pullover';
+import { Alert } from '../Alert/Alert';
+import { Link, useNavigate } from 'react-router';
+import { IMenuItem } from '../../types/IMenu';
+import { Menu } from '../Menu/Menu';
+
+export interface IPageLayoutProps {
+  breadcrumbs?: (string | undefined)[];
+  actions?: IHeaderAction[];
+  moreActions?: IMenuItem[];
+  backButton?: {
+    url?: string;
+    active: boolean;
+  };
+  help?: {
+    title: string;
+    descEl: ReactNode;
+  };
+  noAccess?: boolean;
+  isInitiallyLoading?: boolean;
+  isLoading?: boolean;
+  children?: ReactNode;
+}
+
+export const PageLayout: FC<IPageLayoutProps> = ({
+  breadcrumbs,
+  actions,
+  moreActions,
+  backButton,
+  help,
+  noAccess,
+  isLoading,
+  isInitiallyLoading,
+  children,
+}) => {
+  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+
+  const navigate = useNavigate();
+  const filteredActions = moreActions?.filter(e => !e.hidden);
+
+  useLayoutEffect(() => {
+    noAccess && navigate('/no-access', { replace: true });
+  }, [noAccess, navigate]);
+
+  if (noAccess) {
+    return null;
+  }
+
+  return isInitiallyLoading ? (
+    <Loader isLoading isFullPage />
+  ) : (
+    <Loader isLoading={!!isLoading}>
+      <div className="page-container">
+        {breadcrumbs && (
+          <div className="page-header">
+            <div className="flex align-center gap-2">
+              {backButton?.active && (
+                <IconButton
+                  icon={faArrowLeft}
+                  onClick={() =>
+                    backButton.url ? navigate(backButton.url) : navigate(-1)
+                  }
+                  // outlined
+                  // size="s"
+                />
+              )}
+              {/* ////// BREADCRUMBS ////// */}
+              <h3 className="breadcrumbs">
+                {breadcrumbs.reduce(
+                  (acc: string, e) => (e ? (acc ? `${acc} / ${e}` : e) : acc),
+                  ''
+                )}
+              </h3>
+            </div>
+            {/* ////// ACTIONS ////// */}
+            <div className="flex align-center gap-2">
+              {help && (
+                <>
+                  <IconButton
+                    icon={faQuestion}
+                    onClick={() => setIsHelpOpen(!isHelpOpen)}
+                    variant="outlined"
+                    size="s"
+                  />
+                  <Pullover
+                    isOpen={isHelpOpen}
+                    onClose={() => setIsHelpOpen(false)}
+                    size="m"
+                  >
+                    <Alert severity="info">
+                      <div>
+                        <p className="bold mb-3">{help.title}</p>
+                        <p>{help.descEl}</p>
+                      </div>
+                    </Alert>
+                  </Pullover>
+                </>
+              )}
+              {!!filteredActions?.length && (
+                <Menu
+                  // id="page-more-actions"
+                  isOpen={isMoreActionsOpen}
+                  onClose={() => setIsMoreActionsOpen(false)}
+                  placement="bottom-right"
+                  renderButton={ref => (
+                    <IconButton
+                      ref={ref}
+                      icon={faEllipsisVertical}
+                      active={isMoreActionsOpen}
+                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
+                      variant="outlined"
+                      size="s"
+                    />
+                  )}
+                  items={filteredActions}
+                />
+              )}
+              {actions?.map(
+                action =>
+                  !action.hidden && (
+                    <ConditionalWrapper
+                      key={action.label}
+                      condition={!!action.to}
+                      wrapper={children => <Link to={action.to!}>{children}</Link>}
+                    >
+                      <Button key={action.label} {...action} className="ml-2" />
+                    </ConditionalWrapper>
+                  )
+              )}
+            </div>
+          </div>
+        )}
+        <div className="page-content">
+          <div className="flex-grow">{children}</div>
+          <p className="footer">
+            <Trans i18nKey="FooterText" />
+          </p>
+        </div>
+      </div>
+    </Loader>
+  );
+};

package/src/hooks/useBackgroundClose.ts

@@ -0,0 +1,18 @@
+import { RefObject, useEffect } from 'react';
+
+interface Props {
+  disabled?: boolean;
+  portalRef: RefObject<HTMLDivElement | null>;
+  handleClose: () => void;
+}
+
+export const useBackgroundClose = ({ portalRef, disabled, handleClose }: Props) => {
+  useEffect(() => {
+    if (!disabled) {
+      const portal = portalRef.current;
+      const handleClick = (ev: MouseEvent) => ev.target === portal && handleClose();
+      portal?.addEventListener('click', handleClick);
+      return () => portal?.removeEventListener('click', handleClick);
+    }
+  }, [portalRef, disabled, handleClose]);
+};

package/src/hooks/useIsMenuOpen.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export const useIsMenuOpen = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    isMenuOpen: isOpen,
+    onMenuOpen: () => setIsOpen(true),
+    onMenuClose: () => setTimeout(() => setIsOpen(false)),
+  };
+};

package/src/hooks/useOnEsc.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export const useOnEsc = (onEsc: () => void, disabled?: boolean) => {
+  useEffect(() => {
+    if (!disabled) {
+      const onEscPress = (e: KeyboardEvent) => {
+        e.code === 'Escape' && onEsc();
+      };
+
+      document.body.addEventListener('keyup', onEscPress);
+      return () => document.body.removeEventListener('keyup', onEscPress);
+    }
+  }, [onEsc, disabled]);
+};

package/src/hooks/useZendesk.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+declare global {
+  var zE: {
+    show: () => void;
+    hide: () => void;
+    activate: () => void;
+    setLocale: (locale: string) => void;
+  };
+}
+
+export const useHideZendesk = () => {
+  useEffect(() => {
+    const zendesk = window.zE ?? null;
+    if (zendesk) {
+      //     zendesk.setLocale('sr');
+      zendesk.hide();
+      return () => zendesk.show();
+    }
+  }, []);
+};