@inceptionbg/iui 2.0.22 → 2.0.24

package/src/components/Inputs/NumberInput.tsx

@@ -1,86 +1,86 @@
-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;
-  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}
-    />
-  );
-};
+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 +1,40 @@
-import { FC, InputHTMLAttributes, Ref, 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;
-  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),
-      }}
-    />
-  );
-};
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+import { 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;
+  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),
+      }}
+    />
+  );
+};

package/src/components/Inputs/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,108 @@
+import type { ChangeEvent, FC, Ref } from 'react';
+import type { ISelectData } from '../../../types/ISelect';
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import ReactSelect from 'react-select';
+import { InputWrapper } from '../InputWrapper';
+import { CustomSelectComponents } from '../Selects/components/CustomSelectComponents';
+import { createSelectStyles } from '../Selects/utils/selectStyles';
+import { countryCodeObj, countryCodeOptions } from './utils/countryCode';
+
+interface Props {
+  label?: string;
+  value?: string;
+  setValue: (value: string) => void;
+  helperText?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+
+export const PhoneInput: FC<Props> = ({
+  label,
+  value,
+  setValue,
+  helperText,
+  placeholder = '6x 123 4567',
+  required = false,
+  disabled = false,
+  className,
+  ref,
+}) => {
+  const [code, setCode] = useState('+381');
+  const [number, setNumber] = useState('');
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (value && value !== `${code}${number}`) {
+      let tempValue = value;
+      if (value.startsWith('0')) {
+        tempValue = `+381${value.slice(1)}`;
+      }
+
+      const valueCode = tempValue.slice(0, 4);
+      const valueNumber = tempValue.slice(4);
+      setCode(countryCodeObj[valueCode]?.phonePrefix ?? code);
+      setNumber(valueNumber);
+    }
+  }, [code, value, number]);
+
+  const setValueHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+
+    if (!value) {
+      setNumber('');
+      setValue('');
+    } else if (new RegExp(`^\\d*$`).test(value) && value !== '0') {
+      setNumber(value);
+      setValue(`${code}${value}`);
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      helperText={helperText}
+      errorText={t('PhoneValidation')}
+      className={clsx('select-wrapper', className)}
+      minWidth={200}
+    >
+      <div className="phone-input">
+        <ReactSelect
+          required={required}
+          isDisabled={disabled}
+          value={code ? { value: code, label: code } : null}
+          onChange={input => {
+            const inputValue = (input as ISelectData)?.value;
+            setCode(inputValue);
+            setValue(number ? `${inputValue}${number}` : '');
+          }}
+          className="phone-code-input"
+          options={countryCodeOptions(t)}
+          isClearable={false}
+          styles={createSelectStyles({ menuWidth: 200, fontSize: 16, size: 'm' })}
+          components={CustomSelectComponents}
+          menuPortalTarget={document.querySelector('body')}
+        />
+        <input
+          ref={ref}
+          placeholder={placeholder}
+          value={number || ''}
+          onChange={setValueHandler}
+          required={required}
+          disabled={disabled}
+          pattern={`^\\d{8,10}$`}
+          spellCheck={false}
+          lang="sr-RS"
+          inputMode="numeric"
+        />
+      </div>
+    </InputWrapper>
+  );
+};

package/src/components/Inputs/PhoneInput/utils/countryCode.ts

@@ -0,0 +1,20 @@
+import type { TFunction } from 'i18next';
+import type { ICountryCode } from '../../../../types/ICountryCode';
+
+export const countryCodes = [
+  { name: 'Serbia', code: 'RS', phonePrefix: '+381' },
+  { name: 'Montenegro', code: 'ME', phonePrefix: '+382' },
+];
+
+export const countryCodeObj: Record<string, ICountryCode> = Object.entries(
+  countryCodes
+).reduce((acc: Record<string, ICountryCode>, [, value]) => {
+  acc[value.phonePrefix] = value;
+  return acc;
+}, {});
+
+export const countryCodeOptions = (t: TFunction) =>
+  countryCodes.map(item => ({
+    label: `${t(item.name)} (${item.phonePrefix})`,
+    value: item.phonePrefix,
+  }));

package/src/components/Inputs/Radio.tsx

@@ -1,59 +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>
-);
+import type { FC, ReactNode, Ref } from 'react';
+import clsx from 'clsx';
+
+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

@@ -1,48 +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>
-);
+import type { FC } from 'react';
+import clsx from 'clsx';
+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

@@ -1,39 +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>
-);
+import type { Dispatch, FC, ReactElement, ReactNode, SetStateAction } from 'react';
+import clsx from 'clsx';
+import { Radio } from './Radio';
+
+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>
+);