@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Header/Components/UserMenu.tsx

@@ -1,52 +1,52 @@
-import { FC } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleUser } from '../../../assets/icons/duotone/faCircleUser';
-import { Tooltip } from '../../Tooltip/Tooltip';
-import { Menu } from '../../Menu/Menu';
-import { IHeaderUserMenuProps } from '../../../types/IHeader';
-import { NotificationBadge } from '../../Badge/NotificationBadge';
-
-export const UserMenu: FC<IHeaderUserMenuProps> = ({
-  isOpen,
-  setIsOpen,
-  userName,
-  organizationName,
-  menuItems,
-  inviteCount,
-  HeaderUserMenuDialogs,
-  controls,
-  refetchOrganizationInvites,
-}) => (
-  <>
-    <Menu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      placement="bottom-right"
-      size="m"
-      className="header-user-menu"
-      items={menuItems}
-      renderButton={ref => (
-        <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
-          <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
-          <NotificationBadge number={inviteCount} className="user-notif-badge" size="s">
-            <div className="user-info">
-              {userName && <p className="user-name">{userName}</p>}
-              {organizationName && (
-                <Tooltip
-                  label={(organizationName?.length || 0) > 20 ? organizationName : ''}
-                  position="bottom"
-                >
-                  <p className="org-name">{organizationName}</p>
-                </Tooltip>
-              )}
-            </div>
-          </NotificationBadge>
-        </button>
-      )}
-    />
-    <HeaderUserMenuDialogs
-      controls={controls}
-      refetchOrganizationInvites={refetchOrganizationInvites}
-    />
-  </>
-);
+import type { FC } from 'react';
+import type { IHeaderUserMenuProps } from '../../../types/IHeader';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleUser } from '../../../assets/icons/duotone/faCircleUser';
+import { NotificationBadge } from '../../Badge/NotificationBadge';
+import { Menu } from '../../Menu/Menu';
+import { Tooltip } from '../../Tooltip/Tooltip';
+
+export const UserMenu: FC<IHeaderUserMenuProps> = ({
+  isOpen,
+  setIsOpen,
+  userName,
+  organizationName,
+  menuItems,
+  inviteCount,
+  HeaderUserMenuDialogs,
+  controls,
+  refetchOrganizationInvites,
+}) => (
+  <>
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      placement="bottom-right"
+      size="m"
+      className="header-user-menu"
+      items={menuItems}
+      renderButton={ref => (
+        <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
+          <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
+          <NotificationBadge number={inviteCount} className="user-notif-badge" size="s">
+            <div className="user-info">
+              {userName && <p className="user-name">{userName}</p>}
+              {organizationName && (
+                <Tooltip
+                  label={(organizationName?.length || 0) > 20 ? organizationName : ''}
+                  position="bottom"
+                >
+                  <p className="org-name">{organizationName}</p>
+                </Tooltip>
+              )}
+            </div>
+          </NotificationBadge>
+        </button>
+      )}
+    />
+    <HeaderUserMenuDialogs
+      controls={controls}
+      refetchOrganizationInvites={refetchOrganizationInvites}
+    />
+  </>
+);

package/src/components/Header/Header.tsx

@@ -1,36 +1,37 @@
-import { ComponentProps, FC, ReactNode } from 'react';
-import { UserMenu } from './Components/UserMenu';
-import { ModuleSelect } from './Components/ModuleSelect';
-import { IHeaderUserMenuProps } from '../../types/IHeader';
-import { INotificationsProps, Notifications } from './Components/Notifications';
-import { EnvBadge } from './Components/EnvBadge';
-
-interface Props {
-  customTitle?: string;
-  modulesProps?: ComponentProps<typeof ModuleSelect>;
-  // actions: { icon: IconDefinition };
-  userMenuProps: IHeaderUserMenuProps;
-  notificationsProps?: INotificationsProps;
-  children?: ReactNode;
-}
-
-export const Header: FC<Props> = ({
-  customTitle,
-  modulesProps,
-  userMenuProps,
-  notificationsProps,
-  children,
-}) => (
-  <div className="iui-header">
-    <div className="flex align-center gap-2">
-      {modulesProps && <ModuleSelect {...modulesProps} />}
-      {customTitle && <h3 className="ml-3">{customTitle}</h3>}
-      <EnvBadge />
-    </div>
-    <div className="flex align-center gap-2 ">
-      {children}
-      {notificationsProps && <Notifications {...notificationsProps} />}
-      <UserMenu {...userMenuProps} />
-    </div>
-  </div>
-);
+import type { ComponentProps, FC, ReactNode } from 'react';
+import type { IHeaderUserMenuProps } from '../../types/IHeader';
+import type { INotificationsProps } from './Components/Notifications';
+import { EnvBadge } from './Components/EnvBadge';
+import { ModuleSelect } from './Components/ModuleSelect';
+import { Notifications } from './Components/Notifications';
+import { UserMenu } from './Components/UserMenu';
+
+interface Props {
+  customTitle?: string;
+  modulesProps?: ComponentProps<typeof ModuleSelect>;
+  // actions: { icon: IconDefinition };
+  userMenuProps: IHeaderUserMenuProps;
+  notificationsProps?: INotificationsProps;
+  children?: ReactNode;
+}
+
+export const Header: FC<Props> = ({
+  customTitle,
+  modulesProps,
+  userMenuProps,
+  notificationsProps,
+  children,
+}) => (
+  <div className="iui-header">
+    <div className="flex align-center gap-2">
+      {modulesProps && <ModuleSelect {...modulesProps} />}
+      {customTitle && <h3 className="ml-3">{customTitle}</h3>}
+      <EnvBadge />
+    </div>
+    <div className="flex align-center gap-2 ">
+      {children}
+      {notificationsProps && <Notifications {...notificationsProps} />}
+      <UserMenu {...userMenuProps} />
+    </div>
+  </div>
+);

package/src/components/Helper/Collapse.tsx

@@ -1,52 +1,53 @@
-import clsx from 'clsx';
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
-
-interface Props {
-  isOpen: boolean;
-  children: ReactNode;
-  keepContentInDom?: boolean;
-  className?: string;
-}
-
-export const Collapse: FC<Props> = ({
-  isOpen,
-  children,
-  keepContentInDom,
-  className,
-}) => {
-  const [height, setHeight] = useState<number>();
-  const [isVisible, setIsVisible] = useState(isOpen);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    isOpen && setIsVisible(true);
-  }, [isOpen]);
-
-  useEffect(() => {
-    const observer = new ResizeObserver(entries => {
-      const newHeight = Math.ceil(entries[0].contentRect.height);
-      setHeight(newHeight);
-    });
-
-    let observerRefValue: HTMLDivElement;
-    if (ref.current) {
-      observerRefValue = ref.current;
-      observer.observe(observerRefValue);
-    }
-
-    return () => {
-      observerRefValue && observer.unobserve(observerRefValue);
-    };
-  }, [ref]);
-
-  return (
-    <div
-      className={clsx('iui-collapse', className)}
-      style={{ maxHeight: isOpen ? height : 0 }}
-      onTransitionEnd={() => !isOpen && setIsVisible(false)}
-    >
-      <div ref={ref}>{(keepContentInDom || isVisible) && children}</div>
-    </div>
-  );
-};
+import type { FC, ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  isOpen: boolean;
+  children: ReactNode;
+  keepContentInDom?: boolean;
+  className?: string;
+}
+
+export const Collapse: FC<Props> = ({
+  isOpen,
+  children,
+  keepContentInDom,
+  className,
+}) => {
+  const [height, setHeight] = useState<number>();
+  const [isVisible, setIsVisible] = useState(isOpen);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    isOpen && setIsVisible(true);
+  }, [isOpen]);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(entries => {
+      const newHeight = Math.ceil(entries[0].contentRect.height);
+      setHeight(newHeight);
+    });
+
+    let observerRefValue: HTMLDivElement;
+    if (ref.current) {
+      observerRefValue = ref.current;
+      observer.observe(observerRefValue);
+    }
+
+    return () => {
+      observerRefValue && observer.unobserve(observerRefValue);
+    };
+  }, [ref]);
+
+  return (
+    <div
+      className={clsx('iui-collapse', className)}
+      style={{ maxHeight: isOpen ? height : 0 }}
+      onTransitionEnd={() => !isOpen && setIsVisible(false)}
+    >
+      <div ref={ref}>{(keepContentInDom || isVisible) && children}</div>
+    </div>
+  );
+};

package/src/components/Inputs/Checkbox.tsx

@@ -1,53 +1,53 @@
-import clsx from 'clsx';
-import { FC, ReactNode, Ref } from 'react';
-import { Tooltip } from '../Tooltip/Tooltip';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck } from '../../assets/icons/solid/faCheck';
-import { faMinus } from '../../assets/icons/solid/faMinus';
-
-export interface ICheckboxProps {
-  label?: string;
-  value?: boolean | 'middle';
-  setValue: (checked: boolean) => void;
-  required?: boolean;
-  disabled?: boolean;
-  className?: string;
-  tooltip?: string;
-  children?: ReactNode;
-  ref?: Ref<HTMLLabelElement>;
-}
-
-export const Checkbox: FC<ICheckboxProps> = ({
-  label,
-  value = false,
-  setValue,
-  required,
-  disabled,
-  className,
-  tooltip,
-  children,
-  ref,
-}) => (
-  <Tooltip label={tooltip || ''}>
-    <label ref={ref} className={clsx('iui-checkbox', className, { disabled })}>
-      <div className={clsx('box', { selected: value })}>
-        {value && (
-          <FontAwesomeIcon
-            icon={value === 'middle' ? faMinus : faCheck}
-            height={14}
-            width={14}
-          />
-        )}
-        <input
-          required={required}
-          disabled={disabled}
-          className="fake-input"
-          type="checkbox"
-          checked={value && value !== 'middle'}
-          onChange={() => setValue(!value)}
-        />
-      </div>
-      {label ? <p>{label}</p> : children}
-    </label>
-  </Tooltip>
-);
+import type { FC, ReactNode, Ref } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCheck } from '../../assets/icons/solid/faCheck';
+import { faMinus } from '../../assets/icons/solid/faMinus';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface ICheckboxProps {
+  label?: string;
+  value?: boolean | 'middle';
+  setValue: (checked: boolean) => void;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  tooltip?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLLabelElement>;
+}
+
+export const Checkbox: FC<ICheckboxProps> = ({
+  label,
+  value = false,
+  setValue,
+  required,
+  disabled,
+  className,
+  tooltip,
+  children,
+  ref,
+}) => (
+  <Tooltip label={tooltip || ''}>
+    <label ref={ref} className={clsx('iui-checkbox', className, { disabled })}>
+      <div className={clsx('box', { selected: value })}>
+        {value && (
+          <FontAwesomeIcon
+            icon={value === 'middle' ? faMinus : faCheck}
+            height={14}
+            width={14}
+          />
+        )}
+        <input
+          required={required}
+          disabled={disabled}
+          className="fake-input"
+          type="checkbox"
+          checked={value && value !== 'middle'}
+          onChange={() => setValue(!value)}
+        />
+      </div>
+      {label ? <p>{label}</p> : children}
+    </label>
+  </Tooltip>
+);

package/src/components/Inputs/CurrencyInput.tsx

@@ -1,123 +1,124 @@
-import { FC, InputHTMLAttributes, Ref, useState } from 'react';
-import { TextInput } from './TextInput';
-
-export interface ICurrencyInputProps {
-  label?: string;
-  value?: string | number;
-  setValue: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  placeholder?: string;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  className?: string;
-  allowNegative?: boolean;
-  decimalPlaces?: number;
-  align?: 'left' | 'right';
-  endText?: string;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-  isClearable?: boolean;
-  ref?: Ref<HTMLInputElement>;
-}
-
-const formatCurrency = (number?: string | number) => {
-  if (!number) return '';
-
-  const value = number.toString();
-  let [intiger, decimal] = value.split('.');
-  const formatedInt = intiger.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-
-  return decimal
-    ? `${formatedInt},${decimal}`
-    : value.endsWith('.')
-    ? `${formatedInt},`
-    : formatedInt;
-};
-
-export const CurrencyInput: FC<ICurrencyInputProps> = ({
-  value,
-  setValue,
-  label,
-  required,
-  disabled,
-  autoFocus,
-  placeholder,
-  helperText,
-  errorText,
-  error,
-  className,
-  allowNegative,
-  decimalPlaces = 2,
-  align = 'right',
-  endText,
-  inputProps,
-  isClearable,
-  ref,
-}) => {
-  const [formatedInput, setFormatedInput] = useState('');
-
-  const inputElement = document.activeElement as HTMLInputElement;
-
-  const setValueHandler = (e: string) => {
-    const cursorPosition = inputElement.selectionStart;
-    let inputValue = decimalPlaces
-      ? e.replace(/\.$/, ',').replaceAll('.', '').replace(',', '.')
-      : e.replaceAll('.', '');
-
-    if (
-      // Check if the input is valid
-      new RegExp(
-        `^${allowNegative ? '-?' : ''}\\d*${
-          decimalPlaces ? `(?:[.,])?(\\d{1,${decimalPlaces}})?` : ''
-        }$`
-      ).test(inputValue) ||
-      !e
-    ) {
-      const newValue = formatCurrency(inputValue);
-
-      setFormatedInput(newValue);
-      setValue(inputValue);
-
-      // Adjust cursor position
-      setTimeout(() => {
-        const isDotAdded = newValue.length - formatedInput.length > 1;
-
-        const adjustedCursorPosition = isDotAdded
-          ? (cursorPosition as number) + 1
-          : cursorPosition;
-
-        inputElement.setSelectionRange &&
-          inputElement.setSelectionRange(adjustedCursorPosition, adjustedCursorPosition);
-      });
-    }
-  };
-
-  return (
-    <TextInput
-      ref={ref}
-      value={formatCurrency(value)}
-      setValue={setValueHandler}
-      label={label}
-      required={required}
-      disabled={disabled}
-      endText={endText}
-      isClearable={isClearable}
-      placeholder={
-        placeholder ? placeholder : decimalPlaces ? `0,${'0'.repeat(decimalPlaces)}` : '0'
-      }
-      inputProps={{
-        className: `text-${align}`,
-        lang: 'sr-RS',
-        inputMode: 'numeric',
-        ...inputProps,
-      }}
-      className={className}
-      autoFocus={autoFocus}
-      helperText={helperText}
-      errorText={errorText}
-      error={error}
-    />
-  );
-};
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+import { useState } from 'react';
+import { TextInput } from './TextInput';
+
+export interface ICurrencyInputProps {
+  label?: string;
+  value?: string | number;
+  setValue: (value: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  className?: string;
+  allowNegative?: boolean;
+  decimalPlaces?: number;
+  align?: 'left' | 'right';
+  endText?: string;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  isClearable?: boolean;
+  ref?: Ref<HTMLInputElement>;
+}
+
+const formatCurrency = (number?: string | number) => {
+  if (!number) return '';
+
+  const value = number.toString();
+  let [intiger, decimal] = value.split('.');
+  const formatedInt = intiger.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+
+  return decimal
+    ? `${formatedInt},${decimal}`
+    : value.endsWith('.')
+      ? `${formatedInt},`
+      : formatedInt;
+};
+
+export const CurrencyInput: FC<ICurrencyInputProps> = ({
+  value,
+  setValue,
+  label,
+  required,
+  disabled,
+  autoFocus,
+  placeholder,
+  helperText,
+  errorText,
+  error,
+  className,
+  allowNegative,
+  decimalPlaces = 2,
+  align = 'right',
+  endText,
+  inputProps,
+  isClearable,
+  ref,
+}) => {
+  const [formatedInput, setFormatedInput] = useState('');
+
+  const inputElement = document.activeElement as HTMLInputElement;
+
+  const setValueHandler = (e: string) => {
+    const cursorPosition = inputElement.selectionStart;
+    let inputValue = decimalPlaces
+      ? e.replace(/\.$/, ',').replaceAll('.', '').replace(',', '.')
+      : e.replaceAll('.', '');
+
+    if (
+      // Check if the input is valid
+      new RegExp(
+        `^${allowNegative ? '-?' : ''}\\d*${
+          decimalPlaces ? `(?:[.,])?(\\d{1,${decimalPlaces}})?` : ''
+        }$`
+      ).test(inputValue) ||
+      !e
+    ) {
+      const newValue = formatCurrency(inputValue);
+
+      setFormatedInput(newValue);
+      setValue(inputValue);
+
+      // Adjust cursor position
+      setTimeout(() => {
+        const isDotAdded = newValue.length - formatedInput.length > 1;
+
+        const adjustedCursorPosition = isDotAdded
+          ? (cursorPosition as number) + 1
+          : cursorPosition;
+
+        inputElement.setSelectionRange &&
+          inputElement.setSelectionRange(adjustedCursorPosition, adjustedCursorPosition);
+      });
+    }
+  };
+
+  return (
+    <TextInput
+      ref={ref}
+      value={formatCurrency(value)}
+      setValue={setValueHandler}
+      label={label}
+      required={required}
+      disabled={disabled}
+      endText={endText}
+      isClearable={isClearable}
+      placeholder={
+        placeholder ? placeholder : decimalPlaces ? `0,${'0'.repeat(decimalPlaces)}` : '0'
+      }
+      inputProps={{
+        className: `text-${align}`,
+        lang: 'sr-RS',
+        inputMode: 'numeric',
+        ...inputProps,
+      }}
+      className={className}
+      autoFocus={autoFocus}
+      helperText={helperText}
+      errorText={errorText}
+      error={error}
+    />
+  );
+};