@inceptionbg/iui 2.0.4 → 2.0.6

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

@@ -0,0 +1,154 @@
+import clsx from 'clsx';
+import { FC, Ref, RefObject, useEffect, useRef, useState } from 'react';
+
+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: 'dd',
+    regex: `^[0-9]{2}`,
+  },
+  month: {
+    placeholder: 'mm',
+    regex: `^[0-9]{2}`,
+  },
+  year: {
+    placeholder: 'yyyy',
+    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();
+          previousInput?.select();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          nextInput?.select();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          +value < max && setValueHandler(`${value ? +value + 1 : min}`);
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          +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

@@ -0,0 +1,90 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { FC, ReactNode } from 'react';
+import { faCircleXmark } from '../../assets/icons';
+
+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;
+  children: ReactNode;
+}
+export const InputWrapper: FC<Props> = ({
+  label,
+  required,
+  disabled,
+  className,
+  minWidth,
+  endText,
+  endButton,
+  onClearInput,
+  helperText,
+  errorText,
+  error,
+  focus,
+  heightAuto,
+  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
+        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}
+              />
+            )}
+          </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

@@ -0,0 +1,83 @@
+import { 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;
+  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,
+  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}
+      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

@@ -0,0 +1,38 @@
+import { FC, InputHTMLAttributes, useState } from 'react';
+import { faEye } from '../../assets/icons/light/faEye';
+import { faEyeSlash } from '../../assets/icons/light/faEyeSlash';
+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;
+}
+
+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),
+      }}
+    />
+  );
+};

package/src/components/Inputs/Radio.tsx

@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import { FC, ReactNode, Ref } from 'react';
+
+export interface IRadioProps {
+  label?: string;
+  desc?: string;
+  value: string | number | boolean;
+  selected: string | number | boolean | undefined | null;
+  setSelected: (selected: any) => void;
+  required?: boolean;
+  groupName?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+}
+
+export const Radio: FC<IRadioProps> = ({
+  label,
+  desc,
+  value,
+  selected,
+  setSelected,
+  required,
+  groupName,
+  disabled,
+  className,
+  children,
+  ref,
+}) => (
+  <div
+    ref={ref}
+    className={clsx(
+      'iui-radio',
+      className,
+      selected === value ? 'selected' : 'clickable',
+      { disabled }
+    )}
+    onClick={selected !== value && !disabled ? () => setSelected(value) : undefined}
+  >
+    <div className={clsx('icon', { selected: selected === value })}>
+      <div className="dot" />
+      {required && !disabled && !selected && (
+        <input
+          className="fake-input"
+          type="radio"
+          name={groupName}
+          required
+          tabIndex={-1}
+          // onFocus={() => ref?.current?.focus()}
+        />
+      )}
+    </div>
+    <div className="radio-content">
+      {label ? <p className="label">{label}</p> : children}
+      {desc && <p className="desc">{desc}</p>}
+    </div>
+  </div>
+);

package/src/components/Inputs/RadioGroup.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+import { Radio } from './Radio';
+
+interface IRadioGroupProps {
+  name: string;
+  items: {
+    value: string;
+    label: string;
+    desc?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+  }[];
+  selected: string | number | boolean | undefined | null;
+  setSelected: (selected: any) => void;
+  required?: boolean;
+  align?: 'column' | 'row';
+  className?: string;
+}
+
+export const RadioGroup: FC<IRadioGroupProps> = ({
+  name,
+  items,
+  selected,
+  setSelected,
+  required,
+  align = 'column',
+  className,
+}) => (
+  <div className={clsx('radio-group', align, className)}>
+    {items.map(
+      e =>
+        !e.hidden && (
+          <Radio
+            key={e.value}
+            label={e.label}
+            desc={e.desc}
+            value={e.value}
+            disabled={e.disabled}
+            required={required}
+            groupName={name}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        )
+    )}
+  </div>
+);

package/src/components/Inputs/RadioLarge.tsx

@@ -0,0 +1,39 @@
+import { Dispatch, FC, ReactElement, ReactNode, SetStateAction } from 'react';
+import { Radio } from './Radio';
+import clsx from 'clsx';
+
+interface Props {
+  title?: string | ReactElement;
+  desc?: string | ReactElement;
+  value: string;
+  selected: string;
+  setSelected: Dispatch<SetStateAction<any>>;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const RadioLarge: FC<Props> = ({
+  title,
+  desc,
+  value,
+  selected,
+  setSelected,
+  disabled,
+  className,
+  children,
+}) => (
+  <Radio
+    value={value}
+    selected={selected}
+    setSelected={setSelected}
+    disabled={disabled}
+    className={clsx('radio-large', className)}
+  >
+    <div className="full-width">
+      <p className="bold mb-3">{title}</p>
+      <p>{desc}</p>
+      <div>{children}</div>
+    </div>
+  </Radio>
+);

package/src/components/Inputs/SearchInput.tsx

@@ -0,0 +1,40 @@
+import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TextInput } from './TextInput';
+import { faMagnifyingGlass } from '../../assets/icons';
+
+interface IProps {
+  label?: string;
+  onSearch: (searchText: string) => void;
+  onClear?: () => void;
+  className?: string;
+}
+export const SearchInput: FC<IProps> = ({ label, onSearch, onClear, className }) => {
+  const [text, setText] = useState('');
+  const { t } = useTranslation();
+
+  return (
+    <TextInput
+      className={className}
+      inputProps={{
+        'aria-label': 'search',
+        onKeyDown: (e: any) => {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+            onSearch(e.target.value);
+          }
+        },
+      }}
+      label={label}
+      placeholder={t('Search')}
+      value={text}
+      setValue={setText}
+      onClear={onClear}
+      endButton={{
+        icon: faMagnifyingGlass,
+        onClick: () => onSearch(text),
+      }}
+    />
+  );
+};