@inceptionbg/iui 2.0.34 → 2.0.36

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

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

package/src/components/Inputs/SearchInput.tsx

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

package/src/components/Inputs/Selects/Select.tsx

@@ -1,17 +0,0 @@
-import type { FC } from 'react';
-import type {
-  AsyncSelectProps,
-  BasicSelectProps,
-  CreatableSelectProps,
-} from '../../../types/ISelect';
-import { SelectWrapper } from './components/SelectWrapper';
-
-export const Select: FC<Omit<BasicSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="basic" />
-);
-export const SelectAsyncPaginate: FC<Omit<AsyncSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="async" />
-);
-export const SelectCreatable: FC<Omit<CreatableSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="async-creatable" />
-);

package/src/components/Inputs/Selects/components/CustomSelectComponents.tsx

@@ -1,19 +0,0 @@
-import type { GroupBase, SelectComponentsConfig } from 'react-select';
-import { faChevronDown, faCircleXmark } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { components } from 'react-select';
-
-export const CustomSelectComponents: Partial<
-  SelectComponentsConfig<unknown, boolean, GroupBase<unknown>>
-> = {
-  DropdownIndicator: props => (
-    <components.DropdownIndicator {...props}>
-      <FontAwesomeIcon icon={faChevronDown} className="icon" />
-    </components.DropdownIndicator>
-  ),
-  ClearIndicator: props => (
-    <components.ClearIndicator {...props}>
-      <FontAwesomeIcon icon={faCircleXmark} className="icon" />
-    </components.ClearIndicator>
-  ),
-};

package/src/components/Inputs/Selects/components/SelectWrapper.tsx

@@ -1,118 +0,0 @@
-import type {
-  AsyncSelectProps,
-  BasicSelectProps,
-  CreatableSelectProps,
-} from '../../../../types/ISelect';
-import { forwardRef, useRef } from 'react';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import ReactSelect from 'react-select';
-import { AsyncPaginate } from 'react-select-async-paginate';
-import AsyncCreatableSelect from 'react-select/async-creatable';
-import { InputWrapper } from '../../InputWrapper';
-import { createSelectStyles } from '../utils/selectStyles';
-import { CustomSelectComponents } from './CustomSelectComponents';
-
-export type ISelectProps = BasicSelectProps | AsyncSelectProps | CreatableSelectProps;
-
-export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef) => {
-  const ref = useRef(null);
-  const { t } = useTranslation();
-
-  const {
-    variant,
-    label,
-    required,
-    disabled,
-    helperText,
-    error,
-    errorText,
-    className,
-    minWidth,
-    menuWidth,
-    value,
-    isMulti,
-    onChange,
-    placeholder = `${t('Choose')}...`,
-    isClearable = true,
-    isOpen,
-    onMenuOpen,
-    onMenuClose,
-    openDirection = 'auto',
-    formatOptionLabel,
-    autoFocus,
-    closeMenuOnSelect,
-    noOptionsMessage,
-    size,
-  } = props;
-
-  const commonProps = {
-    value: value ?? (isMulti ? [] : null),
-    components: CustomSelectComponents,
-    onChange,
-    placeholder,
-    styles: createSelectStyles({ menuWidth, fontSize: size === 's' ? 12 : 16, size }),
-    isDisabled: disabled,
-    isOptionDisabled: (option: any) => option.disabled,
-    isClearable,
-    isMulti,
-    menuIsOpen: isOpen,
-    menuPlacement: openDirection,
-    menuPortalTarget: document.querySelector('body'),
-    ref: forwardedRef ?? ref,
-    autoFocus,
-    noOptionsMessage: () => noOptionsMessage || 'Nema opcija',
-    onMenuOpen,
-    onMenuClose,
-    closeMenuOnSelect: closeMenuOnSelect ?? !isMulti,
-    formatOptionLabel,
-  };
-
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      helperText={helperText}
-      error={error}
-      errorText={errorText}
-      className={clsx('select-wrapper', size, className)}
-      minWidth={minWidth}
-      heightAuto
-    >
-      {variant === 'async' ? (
-        <AsyncPaginate
-          {...commonProps}
-          loadOptions={props.loadOptions}
-          defaultOptions={props.defaultData ?? false}
-          cacheUniqs={props.refresh}
-        />
-      ) : variant === 'async-creatable' ? (
-        <AsyncCreatableSelect
-          {...commonProps}
-          loadOptions={props.loadOptions}
-          defaultOptions={props.defaultData ?? false}
-          onCreateOption={props.onCreate}
-          formatCreateLabel={(inputValue: string) => (
-            <p>{`${t('FreeText')} "${inputValue}"`}</p>
-          )}
-        />
-      ) : (
-        <ReactSelect {...commonProps} options={props.options} />
-      )}
-      {required && !disabled && (
-        <input
-          className="fake-input"
-          required
-          tabIndex={-1}
-          autoComplete="off"
-          value={(isMulti ? commonProps.value[0]?.value : commonProps.value?.value) ?? ''}
-          onChange={() => {}}
-          // onFocus={() =>
-          //   ((forwardedRef as MutableRefObject<any>) ?? ref).current?.focus()
-          // }
-        />
-      )}
-    </InputWrapper>
-  );
-});

package/src/components/Inputs/Selects/utils/selectStyles.ts

@@ -1,101 +0,0 @@
-import type { StylesConfig } from 'react-select';
-
-export const createSelectStyles = ({
-  fontSize = 16,
-  menuWidth,
-  size,
-}: {
-  fontSize?: number;
-  size?: 's' | 'm';
-  menuWidth?: 'fit-content' | 'max-content' | number;
-}) =>
-  ({
-    control: provided => ({
-      ...provided,
-      border: 'none',
-      borderWidth: 0,
-      boxShadow: 'none',
-      width: '100%',
-      minHeight: size === 's' ? 12 : 36,
-    }),
-    container: provided => ({
-      ...provided,
-      width: '100%',
-    }),
-    valueContainer: provided => ({
-      ...provided,
-      fontSize,
-      padding: size === 's' ? '0 4px 0 8px' : '6px 0 6px 12px',
-      gap: 4,
-      width: '100%',
-    }),
-    singleValue: provided => ({
-      ...provided,
-      margin: 0,
-    }),
-    multiValue: provided => ({
-      ...provided,
-      backgroundColor: 'unset',
-      border: '1px solid var(--neutral-300)',
-      borderRadius: 8,
-      margin: 0,
-      overflow: 'hidden',
-    }),
-    multiValueLabel: (provided, state) => ({
-      ...provided,
-      padding: state.isDisabled ? '4px 8px' : provided.padding,
-    }),
-    multiValueRemove: (provided, state) => ({
-      ...provided,
-      display: state.isDisabled ? 'none' : provided.display,
-      boxSizing: 'content-box',
-      color: 'var(--text-disabled)',
-    }),
-    menu: provided => ({
-      ...provided,
-      width: menuWidth || '100%',
-      minWidth: '100%',
-      borderRadius: 8,
-      boxShadow: `0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0px 3px 14px 2px rgba(0, 0, 0, 0.12);`,
-    }),
-    menuPortal: provided => ({ ...provided, zIndex: 1001 }),
-    input: provided => ({
-      ...provided,
-      padding: 0,
-      margin: 0,
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      fontSize,
-      padding: size === 's' ? 4 : provided.padding,
-      backgroundColor: state.isSelected
-        ? 'var(--primary) !important'
-        : state.isFocused
-          ? '#eee !important'
-          : 'inherit',
-    }),
-    noOptionsMessage: provided => ({
-      ...provided,
-      fontSize,
-      fontStyle: 'italic',
-      textAlign: 'left',
-      cursor: 'default',
-    }),
-    placeholder: provided => ({
-      ...provided,
-      whiteSpace: 'nowrap',
-      fontStyle: 'italic',
-      color: '#00000050',
-      fontWeight: 400,
-      userSelect: 'none',
-      margin: 0,
-    }),
-    indicatorSeparator: () => ({ display: 'none' }),
-    dropdownIndicator: (provided, state) => ({
-      ...provided,
-      padding: size === 's' ? '4px' : provided.padding,
-      transition: 'all .2s ease',
-      transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
-    }),
-  }) as StylesConfig;

package/src/components/Inputs/TextAreaInput.tsx

@@ -1,68 +0,0 @@
-import type { FC, InputHTMLAttributes, Ref } from 'react';
-import { useState } from 'react';
-import clsx from 'clsx';
-import { InputWrapper } from './InputWrapper';
-
-export interface ITextAreaInputProps {
-  label: string;
-  value?: string;
-  setValue: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  rows?: number;
-  resize?: boolean;
-  placeholder?: string;
-  helperText?: string;
-  errorText?: string;
-  className?: string;
-  inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
-  error?: boolean;
-  ref?: Ref<HTMLTextAreaElement>;
-}
-
-export const TextAreaInput: FC<ITextAreaInputProps> = ({
-  label,
-  value,
-  setValue,
-  required,
-  disabled,
-  autoFocus,
-  rows = 4,
-  resize,
-  placeholder,
-  helperText,
-  errorText,
-  className,
-  inputProps,
-  error,
-  ref,
-}) => {
-  const [isAutoFill, setIsAutoFill] = useState(false);
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      helperText={helperText}
-      errorText={errorText}
-      className={className}
-      error={error}
-      heightAuto
-    >
-      <textarea
-        ref={ref}
-        autoFocus={autoFocus}
-        onFocus={() => isAutoFill && setIsAutoFill(false)}
-        className={clsx({ resize })}
-        placeholder={required && placeholder ? `${placeholder} *` : placeholder}
-        value={value || ''}
-        onChange={e => setValue(e.target.value)}
-        rows={rows}
-        required={required}
-        disabled={disabled}
-        onAnimationStart={() => setIsAutoFill(true)}
-        {...inputProps}
-      />
-    </InputWrapper>
-  );
-};