@inceptionbg/iui 2.0.5 → 2.0.6

package/src/components/Accordions/Accordions.tsx

@@ -0,0 +1,64 @@
+import { FC, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { ITab } from '../../types/ITab';
+import { Collapse } from '../Helper/Collapse';
+import { faArrowsToLine } from '../../assets/icons/light/faArrowsToLine';
+import { faArrowsUpDown } from '../../assets/icons/light/faArrowsUpDown';
+
+interface Props {
+  tabs: ITab[];
+  initialValue?: string;
+  compact?: boolean;
+  keepContentInDom?: boolean;
+  className?: string;
+}
+export const Accordions: FC<Props> = ({
+  tabs: allTabs,
+  initialValue,
+  compact,
+  keepContentInDom,
+  className,
+}) => {
+  const tabs = allTabs.filter(tab => !tab.hidden);
+  const [selected, setSelected] = useState(initialValue || '');
+
+  return tabs.length > 0 ? (
+    <div className={className}>
+      <div className="iui-accordions">
+        {tabs.map(tab => (
+          <div
+            key={tab.value}
+            className={clsx('iui-accordion', {
+              selected: selected === tab.value,
+              compact,
+            })}
+          >
+            <div
+              className={clsx('summary clickable', {
+                disabled: tab.disabled,
+              })}
+              onClick={
+                tab.disabled
+                  ? undefined
+                  : () => setSelected(selected === tab.value ? '' : tab.value)
+              }
+            >
+              <div className="flex center">
+                {tab.icon && <FontAwesomeIcon icon={tab.icon} className="iui-icon" />}
+                {tab.label}
+              </div>
+              <FontAwesomeIcon
+                icon={tab.value === selected ? faArrowsToLine : faArrowsUpDown}
+                className="collapse-icon"
+              />
+            </div>
+            <Collapse isOpen={selected === tab.value} keepContentInDom={keepContentInDom}>
+              <div className="p-4">{tab.component}</div>
+            </Collapse>
+          </div>
+        ))}
+      </div>
+    </div>
+  ) : null;
+};

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { FC, ReactNode } from 'react';
+import { infoIcons } from '../../utils/icons';
+import { IInfoType } from '../../types/IInfo';
+
+export interface IAlertProps {
+  text?: string;
+  severity: IInfoType;
+  fitContent?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Alert: FC<IAlertProps> = ({
+  text,
+  severity,
+  fitContent,
+  className,
+  children,
+}) => (
+  <div
+    className={clsx('iui-alert', severity, className, {
+      'width-fit': fitContent,
+    })}
+  >
+    <FontAwesomeIcon icon={infoIcons[severity]} />
+    {text && <p>{text}</p>}
+    {children}
+  </div>
+);

package/src/components/Badge/DotBadge.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import { FC } from 'react';
+import { IInfoType } from '../../types/IInfo';
+
+interface Props {
+  label: string;
+  color: IInfoType | 'gray';
+  className?: string;
+}
+
+export const DotBadge: FC<Props> = ({ label, color, className }) => (
+  <div className="flex align-center gap-2">
+    <div className={clsx('iui-dot-badge', color, className)} />
+    {label}
+  </div>
+);

package/src/components/Badge/NotificationBadge.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import { FC, ReactNode } from 'react';
+import { IInfoType } from '../../types/IInfo';
+
+interface Props {
+  number?: number;
+  className?: string;
+  size?: 's' | 'm';
+  children?: ReactNode;
+  color?: IInfoType | 'primary';
+}
+
+export const NotificationBadge: FC<Props> = ({
+  number,
+  className,
+  size = 'm',
+  children,
+  color = 'primary',
+}) =>
+  !!number && number > 0 ? (
+    <div className="iui-badge-parent">
+      {children}
+      <div className={clsx('iui-badge', color, className, size)}>
+        {number > 99 ? '99+' : number}
+      </div>
+    </div>
+  ) : (
+    children
+  );

package/src/components/Badge/PillBadge.tsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { IInfoType } from '../../types/IInfo';
+import { FC } from 'react';
+
+interface Props {
+  label: string;
+  color: IInfoType | 'gray';
+  className?: string;
+}
+
+export const PillBadge: FC<Props> = ({ label, color, className }) => (
+  <div className={clsx('iui-pill-badge', color, className)}>{label}</div>
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
+import clsx from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export type IButtonColor = 'primary' | 'neutral' | 'danger';
+export type IButtonVariant = 'solid' | 'outlined' | 'simple';
+
+export interface IButtonProps {
+  label: string;
+  icon?: IconDefinition;
+  iconEnd?: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  variant?: IButtonVariant;
+  color?: IButtonColor;
+  size?: 'xs' | 's' | 'm' | 'l';
+  disabled?: boolean;
+  active?: boolean;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  className?: string;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+export const Button: FC<IButtonProps> = ({
+  label,
+  icon,
+  iconEnd,
+  onClick,
+  variant = 'solid',
+  color,
+  size = 'm',
+  disabled,
+  active,
+  type = 'button',
+  className,
+  buttonProps,
+  ref,
+}) => (
+  <button
+    ref={ref}
+    disabled={disabled}
+    className={clsx('iui-btn iui-text-btn', variant, color, size, className, {
+      active,
+      primary: !color && variant === 'solid',
+      neutral: !color && variant === 'outlined',
+    })}
+    onClick={onClick}
+    type={type}
+    {...buttonProps}
+  >
+    {icon && <FontAwesomeIcon icon={icon} />}
+    <div className="iui-btn-label">{label}</div>
+    {iconEnd && <FontAwesomeIcon icon={iconEnd} />}
+  </button>
+);

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,49 @@
+import { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
+import clsx from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IButtonColor, IButtonVariant } from './Button';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface IIconButtonProps {
+  icon: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  variant?: IButtonVariant;
+  color?: IButtonColor;
+  size?: 's' | 'm' | 'l';
+  disabled?: boolean;
+  active?: boolean;
+  tooltip?: string;
+  className?: string;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+export const IconButton: FC<IIconButtonProps> = ({
+  icon,
+  onClick,
+  variant = 'simple',
+  color = 'primary',
+  size = 'm',
+  disabled,
+  active,
+  tooltip,
+  className,
+  buttonProps,
+  ref,
+}) => (
+  <Tooltip label={tooltip} disabled={disabled}>
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={clsx('iui-btn iui-icon-btn', variant, color, size, className, {
+        active,
+      })}
+      onClick={onClick}
+      type={buttonProps?.type || onClick ? 'button' : 'submit'}
+      {...buttonProps}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  </Tooltip>
+);

package/src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+
+export const Dashboard: FC<{ children: ReactNode }> = ({ children }) => (
+  <div className="page-container">
+    <div className="page-content">
+      <div className="widget-container">{children}</div>
+    </div>
+  </div>
+);

package/src/components/Dashboard/DashboardWidget.tsx

@@ -0,0 +1,44 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { FC, ReactNode } from 'react';
+import { Loader } from '../Loader/Loader';
+import { faCircleInfo, faTriangleExclamation } from '../../assets/icons';
+
+const Icons = {
+  warning: faTriangleExclamation,
+  info: faCircleInfo,
+};
+interface Props {
+  title: string;
+  icon?: any;
+  type?: 'warning' | 'info';
+  span?: 2 | 3 | 4;
+  isLoading?: boolean;
+  children: ReactNode;
+}
+export const DashboardWidget: FC<Props> = ({
+  title,
+  icon,
+  type,
+  span,
+  isLoading,
+  children,
+}) => (
+  <Loader isLoading={!!isLoading}>
+    <div
+      className={clsx('dashboard-widget', type, {
+        [`grid-span${span}`]: !!span,
+      })}
+    >
+      <div className="flex gap-3 mb-3">
+        {icon && (
+          <div className="widget-icon">
+            <FontAwesomeIcon icon={icon || Icons[type!]} />
+          </div>
+        )}
+        <h1>{title}</h1>
+      </div>
+      {children}
+    </div>
+  </Loader>
+);

package/src/components/Dashboard/FastLinksWidget/FastLinksWidget.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { useTranslation } from 'react-i18next';
+import { DashboardWidget } from '../DashboardWidget';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLink } from '../../../assets/icons/light/faLink';
+import { faArrowUpRightFromSquare } from '../../../assets/icons/light/faArrowUpRightFromSquare';
+
+interface Props {
+  links: {
+    icon?: IconDefinition;
+    label: string;
+    onClick: () => void;
+  }[];
+}
+
+export const FastLinksWidget: FC<Props> = ({ links }) => {
+  const { t } = useTranslation();
+
+  return (
+    <DashboardWidget title={t('FastLinks')} icon={faLink}>
+      <div className="short-links-widget mt-4">
+        <ul>
+          {links.map((l, i) => (
+            <li onClick={l.onClick} className="clickable" key={`short-links-${i}`}>
+              <FontAwesomeIcon
+                icon={l.icon || faArrowUpRightFromSquare}
+                className="mr-3"
+              />
+              {l.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </DashboardWidget>
+  );
+};

package/src/components/Dialog/DeleteItemDialog.tsx

@@ -0,0 +1,52 @@
+import { Dispatch, FC, SetStateAction, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from './Dialog';
+import { faTrashCan } from '../../assets/icons';
+
+interface Props {
+  textId: string;
+  itemUuid: string;
+  setItemUuid: Dispatch<SetStateAction<string>>;
+  reloadItems: () => void;
+  deleteItemFunction: (itemUuid: string) => Promise<any>;
+}
+
+export const DeleteItemDialog: FC<Props> = ({
+  textId,
+  itemUuid,
+  setItemUuid,
+  reloadItems,
+  deleteItemFunction,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { t } = useTranslation();
+
+  const handOnDelete = () => {
+    setIsLoading(true);
+    deleteItemFunction(itemUuid)
+      .then(() => {
+        reloadItems();
+        setItemUuid('');
+      })
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <Dialog
+      isOpen={!!itemUuid}
+      onClose={() => setItemUuid('')}
+      title={t(`Delete${textId}Title`)}
+      desc={t(`Delete${textId}Desc`)}
+      isLoading={isLoading}
+      type="info"
+      confirmButton={{
+        label: t('Delete'),
+        icon: faTrashCan,
+        keepOpen: true,
+        onClick: handOnDelete,
+      }}
+    />
+  );
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,226 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { FC, ReactNode, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { rootDir } from '../../utils/RootDir';
+import { Button, IButtonColor, IButtonVariant } from '../Button/Button';
+import { Loader } from '../Loader/Loader';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { useDialogKeyboard } from './hooks/useDialogKeyboard';
+import { faXmark } from '../../assets/icons';
+import { IconButton } from '../Button/IconButton';
+import { infoIcons } from '../../utils/icons';
+import { IInfoType } from '../../types/IInfo';
+import { useBackgroundClose } from '../../hooks/useBackgroundClose';
+
+interface Props {
+  title?: string;
+  titleEl?: ReactNode;
+  desc?: string;
+  descEl?: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  isLoading?: boolean;
+  confirmButton?: {
+    label?: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    onFormSubmit?: () => void;
+    disabled?: boolean;
+    keepOpen?: boolean;
+    isKeyboardDisabled?: boolean;
+  };
+  cancelButton?: {
+    label?: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+  };
+  additionalButton?: {
+    label: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    disabled?: boolean;
+    keepOpen?: boolean;
+    color?: IButtonColor;
+    variant?: IButtonVariant;
+  };
+  hideActionButtons?: boolean;
+  isKeyboardDisabled?: boolean;
+  noBackgroundClick?: boolean;
+  noOverflow?: boolean;
+  type?: IInfoType;
+  size?: 'm' | 'l' | 'xl';
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Dialog: FC<Props> = ({
+  title,
+  titleEl,
+  desc,
+  descEl,
+  isOpen,
+  onClose,
+  isLoading,
+  confirmButton,
+  cancelButton,
+  additionalButton,
+  isKeyboardDisabled,
+  hideActionButtons,
+  noBackgroundClick,
+  noOverflow,
+  type,
+  size = 'm',
+  className,
+  children,
+}) => {
+  const { t } = useTranslation();
+
+  const portalRef = useRef<HTMLDivElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleClose = useCallback(() => {
+    portalRef.current?.classList.add('closing');
+    setTimeout(onClose, 200);
+  }, [portalRef, onClose]);
+
+  useDialogKeyboard({
+    isOpen,
+    isDisabled: isKeyboardDisabled,
+    onClose: handleClose,
+    submit: {
+      onEnter: () => {
+        if (confirmButton) {
+          if (confirmButton.onFormSubmit) {
+            formRef.current?.requestSubmit();
+          } else {
+            confirmButton.onClick?.();
+            !confirmButton.keepOpen && handleClose();
+          }
+        } else {
+          cancelButton?.onClick ? cancelButton.onClick() : handleClose();
+        }
+      },
+      isDisabled: !confirmButton?.disabled && !confirmButton?.isKeyboardDisabled,
+    },
+  });
+
+  useBackgroundClose({
+    portalRef,
+    disabled: noBackgroundClick || !isOpen,
+    handleClose,
+  });
+
+  return isOpen
+    ? createPortal(
+        <div ref={portalRef} className="iui-dialog">
+          <Loader isLoading={!!isLoading}>
+            <div className={clsx('iui-dialog-container', size, type, className)}>
+              <ConditionalWrapper
+                condition={!!confirmButton?.onFormSubmit}
+                wrapper={children => (
+                  <form
+                    ref={formRef}
+                    onSubmit={e => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      confirmButton?.onFormSubmit?.();
+                      !confirmButton?.keepOpen && handleClose();
+                    }}
+                  >
+                    {children}
+                  </form>
+                )}
+              >
+                <div
+                  className={clsx('iui-dialog-content', {
+                    'no-overflow': noOverflow,
+                  })}
+                >
+                  <div className="iui-dialog-header">
+                    {type && (
+                      <FontAwesomeIcon
+                        icon={infoIcons[type]}
+                        className={clsx('dialog-type-icon', type)}
+                      />
+                    )}
+                    <div className="full-width">
+                      <div className="iui-dialog-title">
+                        {title ? <h1>{title}</h1> : titleEl}
+                        <IconButton
+                          icon={faXmark}
+                          onClick={handleClose}
+                          color="neutral"
+                          size="l"
+                          className="close-icon"
+                        />
+                      </div>
+                      {desc ? <p className="iui-dialog-desc">{desc}</p> : descEl}
+                    </div>
+                  </div>
+                  {children}
+                </div>
+                {!hideActionButtons && (
+                  <div className="iui-dialog-actions">
+                    <Button
+                      label={
+                        cancelButton?.label || (confirmButton ? t('Cancel') : t('Close'))
+                      }
+                      icon={cancelButton?.icon}
+                      variant={confirmButton ? 'outlined' : 'solid'}
+                      onClick={e => {
+                        e.stopPropagation();
+                        cancelButton?.onClick ? cancelButton.onClick() : handleClose();
+                      }}
+                      type="button"
+                    />
+                    {additionalButton && (
+                      <Button
+                        label={additionalButton.label}
+                        icon={additionalButton.icon}
+                        onClick={
+                          !!additionalButton.onClick
+                            ? e => {
+                                e.stopPropagation();
+                                additionalButton.onClick!();
+                                !additionalButton.keepOpen && handleClose();
+                              }
+                            : undefined
+                        }
+                        type="button"
+                        variant={additionalButton.variant ?? 'outlined'}
+                        color={additionalButton.color}
+                        disabled={additionalButton.disabled}
+                      />
+                    )}
+                    {confirmButton && (
+                      <Button
+                        label={confirmButton.label || 'Potvrdi'}
+                        icon={confirmButton.icon}
+                        variant="solid"
+                        type={confirmButton.onFormSubmit ? 'submit' : 'button'}
+                        onClick={
+                          !!confirmButton.onClick
+                            ? e => {
+                                e.stopPropagation();
+                                confirmButton.onClick!();
+                                !confirmButton.keepOpen && handleClose();
+                              }
+                            : undefined
+                        }
+                        color={type === 'danger' ? 'danger' : undefined}
+                        disabled={confirmButton.disabled}
+                      />
+                    )}
+                  </div>
+                )}
+              </ConditionalWrapper>
+            </div>
+          </Loader>
+        </div>,
+        rootDir
+      )
+    : null;
+};

package/src/components/Dialog/hooks/useDialogKeyboard.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { IKeyboardAction } from '../../../types/IKeyboard';
+
+export const useDialogKeyboard = ({
+  isOpen,
+  onClose,
+  submit,
+  isDisabled,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  submit: {
+    onEnter: () => void;
+    isDisabled?: boolean;
+  };
+  isDisabled?: boolean;
+}) => {
+  useEffect(() => {
+    if (isOpen && !isDisabled) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const actions: IKeyboardAction[] = [
+          { key: 'Enter', onAction: submit.onEnter!, disabled: submit.isDisabled },
+          { key: 'Escape', onAction: onClose },
+        ];
+
+        actions.forEach(item => {
+          if (!item.disabled && item.key === event.key) {
+            event.preventDefault();
+            event.stopPropagation();
+            item.onAction();
+          }
+        });
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen, submit, onClose, isDisabled]);
+};