@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Accordions/Accordions.tsx

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

package/src/components/Alert/Alert.tsx

@@ -1,31 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { infoIcons } from '../../utils/icons';
-
-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

@@ -1,16 +0,0 @@
-import type { FC } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import clsx from 'clsx';
-
-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

@@ -1,29 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import clsx from 'clsx';
-
-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

@@ -1,13 +0,0 @@
-import type { FC } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import clsx from 'clsx';
-
-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

@@ -1,56 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-
-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 !== 'solid',
-    })}
-    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

@@ -1,51 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
-import type { IButtonColor, IButtonVariant } from './Button';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-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;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  className?: string;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export const IconButton: FC<IIconButtonProps> = ({
-  icon,
-  onClick,
-  variant = 'simple',
-  color = 'primary',
-  size = 'm',
-  disabled,
-  active,
-  tooltip,
-  type = 'button',
-  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={type}
-      {...buttonProps}
-    >
-      <FontAwesomeIcon icon={icon} />
-    </button>
-  </Tooltip>
-);

package/src/components/Button/SplitButton.tsx

@@ -1,91 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
-import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-import { useMemo } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { faCaretDown } from '../../assets/icons/solid/faCaretDown';
-import { useIsMenuOpen } from '../../hooks/useIsMenuOpen';
-import { Menu } from '../Menu/Menu';
-
-export type ISplitAction = Pick<IMenuItem, 'label' | 'onClick'> &
-  Partial<Pick<IMenuItem, 'icon' | 'active' | 'disabled' | 'hidden'>>;
-
-export interface IButtonProps {
-  label: string;
-  icon?: IconDefinition;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  splitActions?: ISplitAction[];
-  menuPlacement?: IMenuPlacement;
-  variant?: 'solid' | 'outlined';
-  size?: 'xs' | 's' | 'm' | 'l';
-  disabled?: boolean;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  className?: string;
-  fullWidth?: boolean;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export const SplitButton: FC<IButtonProps> = ({
-  label,
-  icon,
-  onClick,
-  splitActions,
-  menuPlacement = 'bottom-right',
-  variant = 'solid',
-  size = 'm',
-  disabled,
-  type = 'button',
-  className,
-  fullWidth,
-  buttonProps,
-  ref,
-}) => {
-  const { isOpen, onClose, onOpen } = useIsMenuOpen();
-
-  const filteredActions = useMemo(
-    () => splitActions?.filter(action => !action.hidden),
-    [splitActions]
-  );
-
-  return (
-    <button
-      ref={ref}
-      disabled={disabled}
-      className={clsx('iui-btn iui-split-btn', variant, size, className, {
-        primary: variant === 'solid',
-        neutral: variant !== 'solid',
-      })}
-      onClick={onClick}
-      type={type}
-      {...buttonProps}
-    >
-      <div className={clsx('iui-btn-content', { 'full-width': fullWidth })}>
-        {icon && <FontAwesomeIcon icon={icon} />}
-        <div className="iui-btn-label">{label}</div>
-      </div>
-      {!!filteredActions?.length && (
-        <Menu
-          isOpen={isOpen}
-          onClose={onClose}
-          placement={menuPlacement}
-          renderButton={ref => (
-            <div
-              className={clsx('btn-actions', { active: isOpen })}
-              ref={ref}
-              onMouseOver={e => e.stopPropagation()}
-              onClick={e => {
-                e.stopPropagation();
-                onOpen();
-              }}
-            >
-              <FontAwesomeIcon icon={faCaretDown} />
-            </div>
-          )}
-          items={filteredActions}
-        />
-      )}
-    </button>
-  );
-};

package/src/components/Dashboard/Dashboard.tsx

@@ -1,9 +0,0 @@
-import type { 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

@@ -1,44 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { faCircleInfo, faTriangleExclamation } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { Loader } from '../Loader/Loader';
-
-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

@@ -1,36 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC } from 'react';
-import { faArrowUpRightFromSquare, faLink } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTranslation } from 'react-i18next';
-import { DashboardWidget } from '../DashboardWidget';
-
-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/Dialog.tsx

@@ -1,178 +0,0 @@
-import type { FC, KeyboardEventHandler, ReactNode } from 'react';
-import type { IInfoType } from '../../types/IInfo';
-import type { ILocalPopupControl } from '../../types/IPopup';
-import type { IDialogFooterActions } from './components/DialogFooter';
-import { useRef } from 'react';
-import { faXmark } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { useBackgroundClose } from '../../hooks/useBackgroundClose';
-import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
-import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
-import { infoIcons } from '../../utils/icons';
-import { onPopupKeyDown } from '../../utils/popupUtils';
-import { rootDir } from '../../utils/rootDir';
-import { IconButton } from '../Button/IconButton';
-import { Loader } from '../Loader/Loader';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { DialogFooter } from './components/DialogFooter';
-
-type BaseProps = {
-  title?: string;
-  titleEl?: ReactNode;
-  desc?: string;
-  descEl?: ReactNode;
-  onFormSubmit?: () => void;
-  onCloseCallback?: () => void;
-  isLoading?: boolean;
-  footer?: IDialogFooterActions;
-  isKeyboardDisabled?: boolean;
-  noBackgroundClick?: boolean;
-  noOverflow?: boolean;
-  type?: IInfoType;
-  size?: 'm' | 'l' | 'xl';
-  className?: string;
-  classNameContent?: string;
-  children?: ReactNode;
-};
-
-export type ImperativeDialogProps = {
-  control: ILocalPopupControl;
-  isOpen?: never;
-  onClose?: undefined;
-};
-export type DeclarativeDialogProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  control?: never;
-};
-
-type Props = BaseProps & (ImperativeDialogProps | DeclarativeDialogProps);
-
-export const Dialog: FC<Props> = ({
-  title,
-  titleEl,
-  desc,
-  descEl,
-  onFormSubmit,
-  onCloseCallback,
-  isLoading,
-  footer,
-  isKeyboardDisabled,
-  noBackgroundClick,
-  noOverflow,
-  type,
-  size = 'm',
-  className,
-  classNameContent,
-  children,
-  ...rest
-}) => {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
-    ...rest,
-    onCloseCallback,
-  });
-
-  const focusableElements = useGetFocusableElements({
-    elementRef,
-    isOpen,
-  });
-
-  useBackgroundClose({
-    portalRef: elementRef,
-    disabled: noBackgroundClick || !isOpen,
-    handleClose: onClose,
-  });
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
-    !isKeyboardDisabled &&
-      onPopupKeyDown(event, {
-        onClose,
-        enter: {
-          onAction: () => {
-            footer?.confirmButton?.onClick?.();
-            !footer?.confirmButton?.keepOpen && onClose();
-          },
-          disabled: !footer?.confirmButton?.onClick,
-        },
-        focusableElements,
-      });
-  };
-
-  return isOpen
-    ? createPortal(
-        <div
-          ref={elementRef}
-          className="iui-dialog"
-          aria-label="popup"
-          onKeyDown={onKeyDown}
-          tabIndex={-1}
-        >
-          <Loader isLoading={!!isLoading}>
-            <ConditionalWrapper
-              condition={!!onFormSubmit}
-              wrapper={children => (
-                <form
-                  ref={formRef}
-                  onSubmit={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onFormSubmit?.();
-                    !footer?.confirmButton?.keepOpen && onClose();
-                  }}
-                >
-                  {children}
-                </form>
-              )}
-            >
-              <div className={clsx('iui-dialog-container', size, type, className)}>
-                <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 ? <h4>{title}</h4> : titleEl}
-                      <IconButton
-                        icon={faXmark}
-                        onClick={onClose}
-                        color="neutral"
-                        size="l"
-                        className="close-icon"
-                        buttonProps={{ tabIndex: -1 }}
-                      />
-                    </div>
-                    {desc ? <p className="iui-dialog-desc">{desc}</p> : descEl}
-                  </div>
-                </div>
-                {children && (
-                  <div
-                    className={clsx('iui-dialog-content', classNameContent, {
-                      'no-overflow': noOverflow,
-                    })}
-                  >
-                    {children}
-                  </div>
-                )}
-                {footer && (
-                  <DialogFooter
-                    {...footer}
-                    onClose={onClose}
-                    isForm={!!onFormSubmit}
-                    type={type}
-                  />
-                )}
-              </div>
-            </ConditionalWrapper>
-          </Loader>
-        </div>,
-        rootDir
-      )
-    : null;
-};