@inceptionbg/iui 2.0.35 → 2.0.36

package/src/components/Inputs/TextInput.tsx

@@ -1,100 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC, FocusEventHandler, InputHTMLAttributes, Ref } from 'react';
-import { useState } from 'react';
-import { InputWrapper } from './InputWrapper';
-
-export interface ITextInputProps {
-  id?: string;
-  label?: string;
-  value?: string;
-  setValue?: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  endText?: string;
-  endButton?: {
-    icon: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-  };
-  isClearable?: boolean;
-  onClear?: () => void;
-  autoFocus?: boolean;
-  placeholder?: string;
-  pattern?: string;
-  helperText?: string;
-  errorText?: string;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  error?: boolean;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-  className?: string;
-  ref?: Ref<HTMLInputElement>;
-}
-
-export const TextInput: FC<ITextInputProps> = ({
-  id,
-  label,
-  value,
-  setValue,
-  required,
-  disabled,
-  endText,
-  endButton,
-  isClearable = true,
-  onClear,
-  autoFocus,
-  placeholder,
-  pattern,
-  helperText,
-  errorText,
-  onBlur,
-  onFocus,
-  error,
-  inputProps,
-  className,
-  ref,
-}) => {
-  const [isAutoFill, setIsAutoFill] = useState(false);
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      endText={endText}
-      endButton={endButton}
-      onClearInput={
-        isClearable && value
-          ? () => {
-              setValue?.('');
-              onClear?.();
-            }
-          : undefined
-      }
-      helperText={helperText}
-      errorText={errorText}
-      // error={error || !!(pattern && value && !new RegExp(pattern).test(value))}
-      error={error}
-      className={className}
-    >
-      <input
-        id={id}
-        ref={ref}
-        autoFocus={autoFocus}
-        onFocus={e => {
-          isAutoFill && setIsAutoFill(false);
-          onFocus?.(e);
-        }}
-        onBlur={onBlur}
-        placeholder={placeholder}
-        value={value || ''}
-        onChange={setValue ? e => setValue(e.target.value) : undefined}
-        required={required}
-        disabled={disabled}
-        onAnimationStart={() => setIsAutoFill(true)}
-        pattern={pattern}
-        spellCheck={inputProps?.spellCheck ?? false}
-        {...inputProps}
-      />
-    </InputWrapper>
-  );
-};

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

@@ -1,81 +0,0 @@
-import type { FC } from 'react';
-import clsx from 'clsx';
-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/List/List.tsx

@@ -1,21 +0,0 @@
-import type { FC } from 'react';
-import type { IListItem } from './ListItem';
-import { ListItem } from './ListItem';
-
-interface Props {
-  items?: IListItem[];
-  noItemsMessage?: string;
-}
-
-export const List: FC<Props> = ({ items, noItemsMessage }) => {
-  if (!items || items.length === 0)
-    return noItemsMessage ? <p className="fs-16 new-line">{noItemsMessage}</p> : null;
-
-  return (
-    <div className="iui-list">
-      {items.map(item => (
-        <ListItem key={item.id ?? item.label} {...item} />
-      ))}
-    </div>
-  );
-};

package/src/components/List/ListItem.tsx

@@ -1,70 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC } from 'react';
-import type { IButtonColor } from '../Button/Button';
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { IconButton } from '../Button/IconButton';
-
-export interface IListItemAction {
-  icon: IconDefinition;
-  onClick: () => void;
-  disabled?: boolean;
-  color?: IButtonColor;
-  hidden?: boolean;
-}
-
-export interface IListItem {
-  id?: string;
-  label: string;
-  desc?: string;
-  actions?: IListItemAction[];
-  onClick?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-export const ListItem: FC<IListItem> = ({
-  label,
-  desc,
-  actions,
-  onClick,
-  active,
-  disabled,
-}) => {
-  const filteredActions = useMemo(
-    () => actions?.filter(action => !action.hidden),
-    [actions]
-  );
-
-  return (
-    <div
-      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
-      onClick={e => {
-        e.stopPropagation();
-        onClick?.();
-      }}
-    >
-      <div>
-        <p className="bold">{label}</p>
-        {desc && <div className="iui-list-item-desc">{desc}</div>}
-      </div>
-      {filteredActions && filteredActions.length > 0 && (
-        <div className="iui-list-item-actions">
-          {filteredActions.map((action, index) => (
-            <IconButton
-              key={index}
-              icon={action.icon}
-              onClick={e => {
-                e.stopPropagation();
-                action.onClick();
-              }}
-              size="s"
-              color={action.color}
-              disabled={action.disabled}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/Loader/Loader.tsx

@@ -1,66 +0,0 @@
-import type { FC, ReactElement, ReactNode } from 'react';
-import { Children, 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 SimpleLoader: FC<{ isLoading?: boolean }> = ({ isLoading = true }) =>
-  isLoading ? (
-    <div className="simple-loader">
-      <span className="spinner" />
-    </div>
-  ) : null;
-
-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/Loader/ProgressBar.tsx

@@ -1,41 +0,0 @@
-import type { CSSProperties, FC } from 'react';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  progress?: number;
-  label?: string;
-}
-
-export const ProgressBar: FC<Props> = ({ progress, label }) => {
-  const { t } = useTranslation();
-
-  if (progress === undefined) return null;
-
-  const now = Math.round(Math.min(Math.max(progress, 0), 100)); // Ensure percentage is between 0 and 100
-
-  return (
-    <div className="progress-bar-container">
-      <div className="progress-label">{label ?? t('LoadingProgress')}</div>
-      <div
-        className="progress-bar-bg"
-        role="progressbar"
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={now}
-        style={
-          {
-            '--progress-clip': `${now}%`,
-            '--progress-text': `'${now}%'`,
-          } as CSSProperties & { [key: string]: string }
-        }
-      >
-        <div
-          className={clsx('progress-bar-fill', { loading: now < 100 })}
-          style={{ width: `${now}%` }}
-        />
-        <span className="progress-bar-text">{now}%</span>
-      </div>
-    </div>
-  );
-};

package/src/components/Menu/Menu.tsx

@@ -1,81 +0,0 @@
-import type { FC, ReactNode, RefObject } from 'react';
-import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-import { useRef } from 'react';
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { useBackgroundClose } from '../../hooks/useBackgroundClose';
-import { rootDir } from '../../utils/rootDir';
-import { useMenuPosition } from './hooks/useMenuPosition';
-import { MenuItem } from './MenuItem';
-
-interface Props {
-  id?: string;
-  isOpen: boolean;
-  onClose: () => void;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  items?: IMenuItem[];
-  placement?: IMenuPlacement;
-  size?: 's' | 'm' | 'l';
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Menu: FC<Props> = ({
-  id,
-  isOpen,
-  onClose,
-  renderButton,
-  items,
-  placement = 'bottom-left',
-  size,
-  className,
-  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
-              id={id}
-              ref={portalRef}
-              className="portal-background"
-              onClick={e => e.stopPropagation()}
-            >
-              <div
-                ref={menuRef}
-                className={clsx('iui-menu', className, size)}
-                style={menuStyle}
-              >
-                {items?.map(item => (
-                  <MenuItem
-                    {...item}
-                    key={item.label}
-                    onClick={e => {
-                      item.onClick?.(e);
-                      !item.keepOpen && onClose();
-                    }}
-                  />
-                ))}
-                {children}
-              </div>
-            </div>,
-            rootDir
-          )
-        : null}
-    </>
-  );
-};

package/src/components/Menu/MenuItem.tsx

@@ -1,46 +0,0 @@
-import type { FC } from 'react';
-import type { IMenuItem } from '../../types/IMenu.js';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { Link } from 'react-router';
-import { NotificationBadge } from '../Badge/NotificationBadge.js';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper.js';
-
-export const MenuItem: FC<IMenuItem> = ({
-  label,
-  icon,
-  iconRotation,
-  onClick,
-  to,
-  badge,
-  active,
-  disabled,
-  hidden,
-  withDevider,
-  className,
-}) =>
-  hidden ? null : (
-    <ConditionalWrapper
-      condition={!disabled && !!to}
-      wrapper={children => <Link to={to!}>{children}</Link>}
-    >
-      <div
-        className={clsx('iui-menu-item', className, {
-          clickable: !!onClick || !!to,
-          disabled,
-          active,
-          '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>
-  );

package/src/components/Menu/NewMenu.tsx

@@ -1,63 +0,0 @@
-// import '@oddbird/popover-polyfill';
-// import polyfill from 'https://unpkg.com/@oddbird/css-anchor-positioning/fn';
-import '../../styles/components/_menu-v2.scss';
-import type { FC, ReactNode, RefObject } from 'react';
-import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-import { useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { MenuItem } from './MenuItem';
-
-interface Props {
-  id: string;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  items: IMenuItem[];
-  placement?: IMenuPlacement;
-  size?: 's' | 'm' | 'l';
-  className?: string;
-}
-
-export const MenuV2: FC<Props> = ({
-  id,
-  renderButton,
-  items,
-  placement = 'bottom-left',
-  size,
-  className,
-}) => {
-  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}
-              onClick={e => {
-                item.onClick?.(e);
-                !item.keepOpen && popoverRef.current?.hidePopover();
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,116 +0,0 @@
-import type { RefObject } from 'react';
-import type { IAnyObject } from '../../../types/IBasic';
-import type { IMenuPlacement } from '../../../types/IMenu';
-import { useCallback, useLayoutEffect, useState } from 'react';
-
-interface Offsets {
-  offsetTop: number;
-  offsetLeft: number;
-}
-
-interface Props {
-  isOpen: boolean;
-  placement: IMenuPlacement;
-  containerRef: RefObject<Element | null>;
-  menuRef: RefObject<Element | null>;
-  withMinWidth?: boolean;
-}
-
-export const useMenuPosition = ({
-  isOpen,
-  placement,
-  containerRef,
-  menuRef,
-  withMinWidth,
-}: Props) => {
-  const [offsets, setOffsets] = useState<Offsets>({
-    offsetLeft: 0,
-    offsetTop: 0,
-  });
-  const [maxHeight, setMaxHeight] = useState<number>();
-  const [minWidth, setMinWidth] = useState(200);
-
-  const recalculatePosition = useCallback(() => {
-    if (containerRef.current && menuRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const menuRect = menuRef.current.getBoundingClientRect();
-      let [placementY, placementX] = placement.split('-');
-
-      setMinWidth(containerRect.width);
-
-      let offsetTop = containerRect.bottom + 5;
-
-      let offsetLeft =
-        containerRect.left +
-        (placementX === 'right' ? containerRect.width - menuRect.width : 0);
-      // + document.documentElement.scrollLeft;
-
-      // Check for horizontal overflow and adjust placement
-      if (placementX === 'right' && offsetLeft < 0) {
-        placementX = 'left';
-        offsetLeft = containerRect.left;
-      } else if (
-        placementX === 'left' &&
-        offsetLeft + menuRect.width > window.innerWidth
-      ) {
-        placementX = 'right';
-        offsetLeft = containerRect.left + containerRect.width - menuRect.width;
-      }
-
-      if (placementY === 'bottom') {
-        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
-      }
-
-      if (placementY === 'top') {
-        setMaxHeight(
-          window.innerHeight - containerRect.top + 40
-          // - 2 * document.documentElement.scrollTop
-        );
-      }
-
-      // Check for vertical overflow and adjust placement
-      if (placementY === 'bottom' && offsetTop + menuRect.height > window.innerHeight) {
-        placementY = 'top';
-        offsetTop = containerRect.top - menuRect.height - 5;
-        setMaxHeight(containerRect.top - 20);
-      } else if (placementY === 'top' && offsetTop < 0) {
-        placementY = 'bottom';
-        offsetTop = containerRect.bottom + 5;
-        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
-      }
-
-      // check for space on the bottom
-      if (
-        (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
-        (placement.split('-')[0] === 'top' && placementY !== 'bottom')
-      ) {
-        offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
-      }
-
-      setOffsets({ offsetTop, offsetLeft });
-    }
-  }, [menuRef, containerRef, placement]);
-
-  useLayoutEffect(() => {
-    isOpen
-      ? document.addEventListener('resize', recalculatePosition)
-      : document.removeEventListener('resize', recalculatePosition);
-
-    recalculatePosition();
-    return () => {
-      window.removeEventListener('resize', recalculatePosition);
-    };
-  }, [isOpen, recalculatePosition]);
-
-  const data: IAnyObject = {
-    top: offsets.offsetTop + 'px',
-    left: offsets.offsetLeft + 'px',
-    maxHeight,
-  };
-
-  if (withMinWidth) {
-    data.minWidth = minWidth;
-  }
-
-  return data;
-};

package/src/components/PageComponents/ScrollableContent.tsx

@@ -1,11 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-
-interface Props {
-  className?: string;
-  children: ReactNode;
-}
-
-export const ScrollableContent: FC<Props> = ({ className, children }) => (
-  <div className={clsx('scrollable-content', className)}>{children}</div>
-);