@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Header/Header.tsx

@@ -1,37 +1,45 @@
-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>
-);
+import type { ComponentProps, FC, ReactElement, 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 {
+  customAppProps?: {
+    title?: string;
+    logo?: ReactElement;
+  };
+  modulesProps?: ComponentProps<typeof ModuleSelect>;
+  // actions: { icon: IconDefinition };
+  userMenuProps: IHeaderUserMenuProps;
+  notificationsProps?: INotificationsProps;
+  children?: ReactNode;
+}
+
+export const Header: FC<Props> = ({
+  customAppProps,
+  modulesProps,
+  userMenuProps,
+  notificationsProps,
+  children,
+}) => (
+  <div className="iui-header">
+    <div className="flex align-center gap-2">
+      {modulesProps && <ModuleSelect {...modulesProps} />}
+      {customAppProps && (
+        <div className="flex align-center gap-2 ml-2">
+          {customAppProps?.logo}
+          {customAppProps?.title && <h3>{customAppProps.title}</h3>}
+        </div>
+      )}
+      <EnvBadge />
+    </div>
+    <div className="flex align-center gap-2 ">
+      {children}
+      {notificationsProps && <Notifications {...notificationsProps} />}
+      <UserMenu {...userMenuProps} />
+    </div>
+  </div>
+);

package/src/components/Helper/Collapse.tsx

@@ -1,53 +1,53 @@
-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>
-  );
-};
+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 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>
-);
+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,124 +1,124 @@
-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}
-    />
-  );
-};
+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}
+    />
+  );
+};