@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Inputs/PasswordInput.tsx

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

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

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