@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Inputs/CurrencyInput.tsx

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

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

@@ -1,184 +0,0 @@
-import type { FC } from 'react';
-import type { IMenuPlacement } from '../../../types/IMenu';
-import { useEffect, useRef, useState } from 'react';
-import { faCalendarPlus } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import dayjs from 'dayjs';
-import { Calendar } from 'react-calendar';
-import { useTranslation } from 'react-i18next';
-import { formatDateYMD } from '../../../utils/dateUtils';
-import { Menu } from '../../Menu/Menu';
-import { InputWrapper } from '../InputWrapper';
-import { DatePartInput } from './components/DatePartInput';
-
-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;
-  onClear?: () => void;
-  className?: string;
-  calendarPlacement?: IMenuPlacement;
-}
-
-export const DateInput: FC<IDateInputProps> = ({
-  label,
-  date,
-  setDate,
-  required,
-  disabled,
-  autoFocus,
-  error,
-  helperText,
-  errorText,
-  isClearable = true,
-  onClear,
-  className,
-  calendarPlacement,
-}) => {
-  const [day, setDay] = useState(date?.split('-')[2] ?? '');
-  const [month, setMonth] = useState(date?.split('-')[1] ?? '');
-  const [year, setYear] = useState(date?.split('-')[0] ?? '');
-  const { i18n } = useTranslation();
-
-  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 (
-    <Menu
-      isOpen={isCalendarOpen}
-      onClose={() => setIsCalendarOpen(false)}
-      placement={calendarPlacement}
-      renderButton={ref => (
-        <div ref={ref} className="full-width">
-          <InputWrapper
-            label={label}
-            focus={isCalendarOpen}
-            required={required}
-            className={className}
-            disabled={disabled}
-            onClearInput={
-              isClearable && (day || month || year) && !disabled
-                ? () => {
-                    setDay('');
-                    setMonth('');
-                    setYear('');
-                    setDate('');
-                    onClear?.();
-                  }
-                : undefined
-            }
-            helperText={helperText}
-            error={error}
-            errorText={errorText}
-          >
-            <div className="date-input">
-              <div
-                className="calendar-btn"
-                onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
-              >
-                <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
-              </div>
-              <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>
-        </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={
-          i18n.language === 'sr_RS_Latn'
-            ? 'sr-Latn-RS'
-            : i18n.language === 'sr_RS_Cyrl'
-              ? 'sr-RS'
-              : i18n.language
-        }
-        formatShortWeekday={(locale, date) =>
-          new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
-        }
-      />
-    </Menu>
-  );
-};

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

@@ -1,159 +0,0 @@
-import type { FC, Ref, RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-
-interface Props {
-  value: string;
-  setValue: (value: string) => void;
-  setDate: (value: string) => void;
-  values: { day: string; month: string; year: string };
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  min?: number;
-  max: number;
-  part: 'day' | 'month' | 'year';
-  previousInput?: HTMLInputElement | null;
-  nextInput?: HTMLInputElement | null;
-  ref?: Ref<HTMLInputElement>;
-}
-
-const options = {
-  day: {
-    placeholder: '31',
-    regex: `^[0-9]{2}`,
-  },
-  month: {
-    placeholder: '12',
-    regex: `^[0-9]{2}`,
-  },
-  year: {
-    placeholder: '2000',
-    regex: `^[0-9]{4}`,
-  },
-};
-
-const measureTextWidth = (text: string, font: string): number => {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  if (!context) return 0;
-
-  context.font = font;
-  const metrics = context.measureText(text ?? '00');
-  return Math.ceil(metrics.width);
-};
-
-export const DatePartInput: FC<Props> = ({
-  value,
-  setValue,
-  setDate,
-  values,
-  required,
-  disabled,
-  autoFocus,
-  min = 1,
-  max,
-  part,
-  previousInput,
-  nextInput,
-  ref,
-}) => {
-  const [isInvalid, setIsInvalid] = useState(false);
-  const localRef = useRef<HTMLInputElement>(null);
-  const inputRef = (ref || localRef) as RefObject<HTMLInputElement>;
-
-  useEffect(() => {
-    if (!value.length) {
-      setIsInvalid(false);
-    } else if ((part === 'year' && value.length !== 4) || +value > max || +value < min) {
-      setIsInvalid(true);
-    } else if (isInvalid) {
-      setIsInvalid(false);
-    }
-  }, [part, min, max, value, isInvalid]);
-
-  const regexTest = `^[0-9]{0,${max.toString().length}}$`;
-
-  const setValueHandler = (newValue: string) => {
-    if (!newValue) {
-      setValue('');
-    } else if (new RegExp(regexTest).test(newValue)) {
-      setValue(newValue);
-      const year = part === 'year' ? newValue : values.year;
-      const month = part === 'month' ? newValue : values.month;
-      const day = part === 'day' ? newValue : values.day;
-
-      if (day && month && year.length === 4) {
-        setDate(
-          `${year}-${month.length === 2 ? month : `0${month}`}-${
-            day.length === 2 ? day : `0${day}`
-          }`
-        );
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const element = inputRef?.current;
-      if (element) {
-        const computedStyle = window.getComputedStyle(element);
-        const font = computedStyle.font;
-
-        const displayValue = value || options[part].placeholder;
-        const measuredWidth = measureTextWidth(displayValue, font);
-        element.style.width = measuredWidth + 'px';
-      }
-    }
-  }, [inputRef, value, part]);
-
-  return (
-    <input
-      ref={inputRef}
-      value={value || ''}
-      onChange={e => setValueHandler(e.target.value)}
-      onClick={e => e.stopPropagation()}
-      onKeyDown={e => {
-        if (e.key === 'ArrowLeft') {
-          e.preventDefault();
-          e.stopPropagation();
-          previousInput?.select();
-        } else if (e.key === 'ArrowRight') {
-          e.preventDefault();
-          e.stopPropagation();
-          nextInput?.select();
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          e.stopPropagation();
-          +value < max && setValueHandler(`${value ? +value + 1 : min}`);
-        } else if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          e.stopPropagation();
-          +value > min && setValueHandler(`${value ? +value - 1 : min}`);
-        }
-      }}
-      onKeyUp={e => {
-        if (part !== 'year' && isFinite(+e.key) && value.length === 2) {
-          nextInput?.select();
-        }
-      }}
-      onFocus={e => e.target.select()}
-      onBlur={() => {
-        if (part !== 'year' && value && value.length < 2) {
-          setValueHandler(value.padStart(2, '0'));
-        }
-      }}
-      required={required}
-      disabled={disabled}
-      autoFocus={autoFocus}
-      min={min}
-      max={max}
-      inputMode="numeric"
-      type="text"
-      tabIndex={part !== 'day' ? -1 : undefined}
-      placeholder={options[part].placeholder}
-      pattern={options[part].regex}
-      className={clsx({ error: isInvalid })}
-    />
-  );
-};

package/src/components/Inputs/InputWrapper.tsx

@@ -1,95 +0,0 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC, ReactNode, Ref } from 'react';
-import { faCircleXmark } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-
-interface Props {
-  label?: string;
-  required?: boolean;
-  disabled?: boolean;
-  className?: string;
-  minWidth?: number;
-  endText?: string;
-  endButton?: {
-    icon: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-  };
-  onClearInput?: () => void;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  focus?: boolean;
-  heightAuto?: boolean;
-  inputFieldRef?: Ref<HTMLDivElement>;
-  children: ReactNode;
-}
-export const InputWrapper: FC<Props> = ({
-  label,
-  required,
-  disabled,
-  className,
-  minWidth,
-  endText,
-  endButton,
-  onClearInput,
-  helperText,
-  errorText,
-  error,
-  focus,
-  heightAuto,
-  inputFieldRef,
-  children,
-}) => {
-  const withEndSection = !!(endText || endButton || onClearInput);
-
-  return (
-    <div
-      className={clsx('iui-input-container', className, {
-        focus,
-        error,
-        disabled,
-      })}
-      style={{ minWidth }}
-    >
-      {label && <p className={clsx('input-label', { required })}>{label}</p>}
-      <div
-        ref={inputFieldRef}
-        className={clsx('iui-input-wrapper-field', {
-          'with-end-section': withEndSection,
-          'height-auto': heightAuto,
-        })}
-      >
-        {children}
-        {withEndSection && (
-          <div className="end-section">
-            {endText && <p>{endText}</p>}
-            {!!onClearInput && (
-              <FontAwesomeIcon
-                icon={faCircleXmark}
-                className="icon"
-                onClick={onClearInput}
-              />
-            )}
-            {endButton && (
-              <FontAwesomeIcon
-                className={clsx('icon', { disabled: endButton.disabled })}
-                icon={endButton.icon}
-                onClick={!endButton.disabled ? endButton.onClick : undefined}
-                role="button"
-                type="button"
-              />
-            )}
-          </div>
-        )}
-      </div>
-      {helperText && (
-        <p className={clsx('helper-text', { 'helper-hidden': errorText })}>
-          {helperText}
-        </p>
-      )}
-      {errorText && <p className="helper-text error-text">{errorText}</p>}
-    </div>
-  );
-};

package/src/components/Inputs/NumberInput.tsx

@@ -1,86 +0,0 @@
-import type { FC, InputHTMLAttributes, Ref } from 'react';
-import { TextInput } from './TextInput';
-
-export interface INumberInputProps {
-  label?: string;
-  value?: string | number;
-  setValue: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  placeholder?: string;
-  endText?: string;
-  isClearable?: boolean;
-  onClear?: () => void;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  className?: string;
-  allowNegative?: boolean;
-  decimalPlaces?: number;
-  align?: 'left' | 'right';
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-  ref?: Ref<HTMLInputElement>;
-}
-
-export const NumberInput: FC<INumberInputProps> = ({
-  value,
-  setValue,
-  label,
-  required,
-  disabled,
-  autoFocus,
-  placeholder,
-  endText,
-  isClearable,
-  onClear,
-  helperText,
-  errorText,
-  error,
-  className,
-  allowNegative,
-  decimalPlaces,
-  align = 'left',
-  inputProps,
-  ref,
-}) => {
-  const setValueHandler = (e: string) => {
-    if (decimalPlaces) {
-      (new RegExp(
-        `^${allowNegative ? '-?' : ''}\\d*(?:[.,])?(\\d{1,${decimalPlaces}})?$`
-      ).test(e) ||
-        !e) &&
-        setValue(e ? e.replaceAll(',', '.') : e);
-    } else {
-      (new RegExp(`^${allowNegative ? '-?' : ''}\\d*$`).test(e) || !e) && setValue(e);
-    }
-  };
-
-  return (
-    <TextInput
-      ref={ref}
-      value={value ? `${value}`.replaceAll('.', ',') : ''}
-      setValue={setValueHandler}
-      label={label}
-      required={required}
-      disabled={disabled}
-      endText={endText}
-      isClearable={isClearable}
-      onClear={onClear}
-      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/PasswordInput.tsx

@@ -1,39 +0,0 @@
-import type { FC, InputHTMLAttributes, Ref } from 'react';
-import { useState } from 'react';
-import { faEye, faEyeSlash } from '@inceptionbg/icons';
-import { TextInput } from './TextInput';
-
-export interface IPasswordInputProps {
-  label?: string;
-  value?: string;
-  setValue?: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  isClearable?: boolean;
-  pattern?: string;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-  newPassword?: boolean;
-  ref?: Ref<HTMLInputElement>;
-}
-
-export const PasswordInput: FC<IPasswordInputProps> = props => {
-  const [showPassword, setShowPassword] = useState(false);
-  return (
-    <TextInput
-      {...props}
-      isClearable={props.isClearable ?? false}
-      inputProps={{
-        type: showPassword ? 'text' : 'password',
-        autoComplete: props.newPassword ? 'new-password' : undefined,
-        ...props.inputProps,
-      }}
-      endButton={{
-        icon: showPassword ? faEyeSlash : faEye,
-        onClick: () => setShowPassword(!showPassword),
-      }}
-    />
-  );
-};