@inceptionbg/iui 2.0.5 → 2.0.6

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

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { rootDir } from '../../../utils/RootDir';
+
+export const useDialogObserver = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  useEffect(() => {
+    const observer = new MutationObserver(mutationsList => {
+      if (mutationsList.find(mutation => mutation.type === 'childList')) {
+        const isDialogInRoot = rootDir.getElementsByClassName('iui-dialog').length > 0;
+        setIsDialogOpen(isDialogInRoot);
+      }
+    });
+
+    observer.observe(rootDir, { childList: true });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isDialogOpen;
+};

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

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { Link } from 'react-router';
+import { Menu } from '../../Menu/Menu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
+
+interface Props {
+  modules: { name: string; icon: IconDefinition; disabled?: boolean; url: string }[];
+  activeModule: { name: string; icon: IconDefinition } | null;
+}
+
+export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
+  const { isMenuOpen, onMenuOpen, onMenuClose } = useIsMenuOpen();
+
+  return (
+    <div className="flex align-center gap-1">
+      {!!modules.length && (
+        <Menu
+          isOpen={isMenuOpen}
+          onClose={onMenuClose}
+          // id="headerModuleSelect"
+          renderButton={ref => (
+            <button ref={ref} className="header-button clickable" onClick={onMenuOpen}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+                <rect width="256" height="256" fill="none" />
+                <circle fill="var(--neutral-500)" cx="60" cy="60" r="20" />
+                <circle fill="var(--neutral-500)" cx="128" cy="60" r="20" />
+                <circle fill="var(--neutral-500)" cx="196" cy="60" r="20" />
+                <circle fill="var(--neutral-500)" cx="60" cy="128" r="20" />
+                <circle fill="var(--neutral-500)" cx="128" cy="128" r="20" />
+                <circle fill="var(--neutral-500)" cx="196" cy="128" r="20" />
+                <circle fill="var(--neutral-500)" cx="60" cy="196" r="20" />
+                <circle fill="var(--neutral-500)" cx="128" cy="196" r="20" />
+                <circle fill="var(--neutral-500)" cx="196" cy="196" r="20" />
+              </svg>
+            </button>
+          )}
+          items={modules.map(e => ({ ...e, label: e.name }))}
+          className="grid fr-2 p-2"
+          classNameItem="module-item hover-neutral"
+        />
+      )}
+
+      {activeModule && (
+        <Link className="module-name clickable" to="/">
+          <div className="module-icon">
+            <FontAwesomeIcon icon={activeModule.icon} />
+          </div>
+          <h3>{activeModule.name}</h3>
+        </Link>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+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';
+
+interface Props {
+  useHeaderUserContext: () => IHeaderUserMenuProps;
+}
+
+export const UserMenu: FC<Props> = ({ useHeaderUserContext }) => {
+  const { isOpen, setIsOpen, userName, organizationName, menuItems, showBadge } =
+    useHeaderUserContext();
+
+  return (
+    <>
+      <Menu
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement="bottom-right"
+        size="m"
+        items={menuItems}
+        renderButton={ref => (
+          <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
+            {showBadge && <div className="user-badge" />}
+            <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
+            <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>
+          </button>
+        )}
+      />
+    </>
+  );
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import { UserMenu } from './Components/UserMenu';
+import { ModuleSelect } from './Components/ModuleSelect';
+import { IHeaderUserMenuProps } from '../../types/IHeader';
+
+interface Props {
+  customTitle?: string;
+  modulesProps?: ComponentProps<typeof ModuleSelect>;
+  // actions: {
+  //   icon: IconDefinition;
+  // };
+  userMenuProps: {
+    HeaderUserProvider: ({ children }: { children: ReactNode }) => React.JSX.Element;
+    useHeaderUserContext: () => IHeaderUserMenuProps;
+  };
+  children?: ReactNode;
+}
+
+export const Header: FC<Props> = ({
+  customTitle,
+  modulesProps,
+  userMenuProps: { HeaderUserProvider, useHeaderUserContext },
+  children,
+}) => (
+  <div className="iui-header">
+    {modulesProps && <ModuleSelect {...modulesProps} />}
+    {customTitle && <h3 className="p-3">{customTitle}</h3>}
+    <div className="flex gap-2 align-center">
+      {children}
+      {/* {!hideNotifications && <Notifications />} */}
+      <HeaderUserProvider>
+        <UserMenu useHeaderUserContext={useHeaderUserContext} />
+      </HeaderUserProvider>
+    </div>
+  </div>
+);

package/src/components/Helper/Collapse.tsx

@@ -0,0 +1,52 @@
+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>
+  );
+};

package/src/components/Inputs/Checkbox.tsx

@@ -0,0 +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>
+);

package/src/components/Inputs/CurrencyInput.tsx

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

package/src/components/Inputs/DateInput/DateInput.tsx

@@ -0,0 +1,176 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, useEffect, useRef, useState } from 'react';
+import { Calendar } from 'react-calendar';
+import { Menu } from '../../Menu/Menu';
+import { InputWrapper } from '../InputWrapper';
+import { DatePartInput } from './components/DatePartInput';
+import { faCalendarPlus } from '../../../assets/icons/light/faCalendarPlus';
+import dayjs from 'dayjs';
+import { IMenuPlacement } from '../../../types/IMenu';
+import i18next from 'i18next';
+import { formatDateYMD } from '../../../utils/DateUtils';
+
+export interface IDateInputProps {
+  label?: string;
+  date?: string;
+  setDate: (date: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
+  isClearable?: boolean;
+  className?: string;
+  calendarPlacement?: IMenuPlacement;
+}
+
+export const DateInput: FC<IDateInputProps> = ({
+  label,
+  date,
+  setDate,
+  required,
+  disabled,
+  autoFocus,
+  error,
+  helperText,
+  errorText,
+  isClearable = true,
+  className,
+  calendarPlacement,
+}) => {
+  const [day, setDay] = useState(date?.split('-')[2] ?? '');
+  const [month, setMonth] = useState(date?.split('-')[1] ?? '');
+  const [year, setYear] = useState(date?.split('-')[0] ?? '');
+
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+
+  const inputsRef = useRef<HTMLDivElement>(null);
+  const dayRef = useRef<HTMLInputElement>(null);
+  const monthRef = useRef<HTMLInputElement>(null);
+  const yearRef = useRef<HTMLInputElement>(null);
+
+  const maxDay = year && month ? new Date(+year, +month, 0).getDate() : 31;
+
+  useEffect(() => {
+    if (!date) {
+      setYear('');
+      setMonth('');
+      setDay('');
+    } else if (
+      ![dayRef.current, monthRef.current, yearRef.current].includes(
+        document.activeElement as HTMLInputElement
+      )
+    ) {
+      setYear(date.split('-')[0] ?? '');
+      setMonth(date.split('-')[1] ?? '');
+      setDay(date.split('-')[2] ?? '');
+    }
+  }, [date]);
+
+  return (
+    <InputWrapper
+      label={label}
+      focus={isCalendarOpen}
+      required={required}
+      className={className}
+      disabled={disabled}
+      onClearInput={
+        isClearable && (day || month || year) && !disabled
+          ? () => {
+              setDay('');
+              setMonth('');
+              setYear('');
+              setDate('');
+            }
+          : undefined
+      }
+      helperText={helperText}
+      error={error}
+      errorText={errorText}
+    >
+      <div className="date-input">
+        <Menu
+          isOpen={isCalendarOpen}
+          onClose={() => setIsCalendarOpen(false)}
+          placement={calendarPlacement ?? 'bottom-left'}
+          renderButton={ref => (
+            <div
+              ref={ref}
+              className="calendar-btn"
+              onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
+            >
+              <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
+            </div>
+          )}
+        >
+          <Calendar
+            value={
+              date && dayjs(date, 'YYYY-MM-DD', true).isValid()
+                ? new Date(date)
+                : new Date()
+            }
+            onChange={e => {
+              const newDate = formatDateYMD(e as Date);
+              setDate(newDate);
+              setIsCalendarOpen(false);
+            }}
+            locale={
+              i18next.language === 'sr_RS_Latn'
+                ? 'sr-Latn-RS'
+                : i18next.language === 'sr_RS_Cyrl'
+                ? 'sr-RS'
+                : i18next.language
+            }
+            formatShortWeekday={(locale, date) =>
+              new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
+            }
+          />
+        </Menu>
+        <div ref={inputsRef} className="inputs" onClick={() => dayRef.current?.focus()}>
+          <DatePartInput
+            ref={dayRef}
+            value={day}
+            setValue={setDay}
+            setDate={setDate}
+            values={{ day, month, year }}
+            required={required || !!month || !!year}
+            disabled={disabled}
+            autoFocus={autoFocus}
+            max={maxDay}
+            part="day"
+            nextInput={monthRef.current}
+          />
+          <span>.</span>
+          <DatePartInput
+            ref={monthRef}
+            value={month}
+            setValue={setMonth}
+            setDate={setDate}
+            values={{ day, month, year }}
+            required={required || !!day || !!year}
+            disabled={disabled}
+            max={12}
+            part="month"
+            previousInput={dayRef.current}
+            nextInput={yearRef.current}
+          />
+          <span>.</span>
+          <DatePartInput
+            ref={yearRef}
+            value={year}
+            setValue={setYear}
+            setDate={setDate}
+            values={{ day, month, year }}
+            required={required || !!day || !!month}
+            disabled={disabled}
+            min={1500}
+            max={2500}
+            part="year"
+            previousInput={monthRef.current}
+          />
+        </div>
+      </div>
+    </InputWrapper>
+  );
+};