@inceptionbg/iui 2.0.5 → 2.0.6

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

@@ -0,0 +1,224 @@
+import './select.scss';
+
+import { useState, useRef, useEffect, ChangeEvent, FC, UIEvent } from 'react';
+import clsx from 'clsx';
+import { InputWrapper } from '../InputWrapper';
+
+export interface OptionType {
+  label: string;
+  value: any;
+}
+
+// interface LoadOptionsParams {
+//   inputValue: string;
+//   loadedOptions: OptionType[];
+//   page: number;
+// }
+
+interface LoadOptionsResponse {
+  options: OptionType[];
+  hasMore: boolean;
+}
+
+interface CustomSelectProps {
+  label: string;
+  value?: any;
+  setValue: (option: OptionType | null) => void;
+  required?: boolean;
+  disabled?: boolean;
+  // isMulti?: boolean;
+  isAsync?: boolean;
+  isCreatable?: boolean;
+  options?: OptionType[];
+  loadOptions?: (
+    inputValue: string,
+    loadedOptions: OptionType[],
+    params: { page: number }
+  ) => Promise<LoadOptionsResponse>;
+  onCreateOption?: (inputValue: string) => Promise<OptionType>;
+  placeholder?: string;
+  isClearable: boolean;
+  // minWidth?: number;
+}
+
+export const Select: FC<CustomSelectProps> = ({
+  label,
+  value,
+  setValue,
+  onCreateOption,
+  required,
+  disabled,
+  options = [],
+  loadOptions,
+  isAsync = false,
+  isCreatable = false,
+  isClearable = true,
+  // isMulti,
+  // minWidth,
+  placeholder = 'Select...',
+}) => {
+  const [inputValue, setInputValue] = useState<string | null>(null);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [filteredOptions, setFilteredOptions] = useState<OptionType[]>([]);
+  const [page, setPage] = useState(0);
+  const [index, setIndex] = useState<number | null>(null);
+  const [hasMore, setHasMore] = useState(true);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isAsync) {
+      const filtered = inputValue
+        ? options.filter(opt =>
+            opt.label.toLowerCase().includes(inputValue.toLowerCase())
+          )
+        : options;
+      setFilteredOptions(filtered);
+    }
+  }, [inputValue, options, isAsync]);
+
+  useEffect(() => {
+    if (isAsync && loadOptions) {
+      loadOptions(inputValue ?? '', filteredOptions, { page }).then(
+        ({ options: newOptions, hasMore }) => {
+          setFilteredOptions(prev => [...prev, ...newOptions]);
+          setHasMore(hasMore);
+        }
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page]);
+
+  const handleOptionClick = (option: OptionType) => {
+    setValue(option);
+    setInputValue(null);
+    setTimeout(() => {
+      setIndex(null);
+      setDropdownVisible(false);
+    });
+  };
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    setInputValue(
+      e.target.defaultValue === value?.label
+        ? // @ts-ignore
+          e.nativeEvent?.data ?? ''
+        : inputValue
+    );
+    // setFilteredOptions([]);
+    setPage(0);
+    if (isAsync && loadOptions) {
+      loadOptions(inputValue, [], { page: 0 }).then(({ options, hasMore }) => {
+        setFilteredOptions(options);
+        setHasMore(hasMore);
+      });
+    }
+  };
+
+  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - scrollTop === clientHeight && hasMore) {
+      setPage(prev => prev + 1);
+    }
+  };
+
+  const handleCreate = async () => {
+    if (onCreateOption && inputValue?.trim()) {
+      const newOption = await onCreateOption(inputValue);
+      setFilteredOptions(prev => [newOption, ...prev]);
+      setValue(newOption);
+      setInputValue(null);
+      setDropdownVisible(false);
+    }
+  };
+
+  return (
+    <div
+      className="customSelect"
+      onFocus={() => setDropdownVisible(true)}
+      onBlur={() => {
+        setDropdownVisible(false);
+        setInputValue(null);
+      }}
+    >
+      <InputWrapper
+        label={label}
+        required={required}
+        disabled={disabled}
+        // endText={endText}
+        // endButton={endButton}
+        onClearInput={
+          isClearable && value
+            ? () => {
+                setValue(null);
+                setInputValue('');
+                // setSelectedOption(null);
+              }
+            : undefined
+        }
+        // helperText={helperText}
+        // errorText={errorText}
+        // error={error}
+        // className={className}
+      >
+        <input
+          value={inputValue ?? value?.label ?? ''}
+          onChange={handleInput}
+          required={required}
+          disabled={disabled}
+          // onFocus={e => e.currentTarget.select()}
+          //   autoFocus={autoFocus}
+          placeholder={value?.label || placeholder}
+          onKeyDown={e => {
+            if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              if (index === null || index === 0) {
+                setIndex(filteredOptions.length - 1);
+              } else {
+                setIndex(prev => prev! - 1);
+              }
+            } else if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              if (index === null || index === filteredOptions.length - 1) {
+                setIndex(0);
+              } else {
+                setIndex(prev => prev! + 1);
+                dropdownRef.current?.scrollTo({ top: 20 * ((index ?? 0) + 1) });
+              }
+            } else if (e.key === 'Enter' && index !== null) {
+              e.preventDefault();
+              e.currentTarget.blur();
+              handleOptionClick(options[index]);
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              e.currentTarget.blur();
+            }
+          }}
+        />
+      </InputWrapper>
+
+      {dropdownVisible && (
+        <div ref={dropdownRef} className="dropdown" onScroll={handleScroll}>
+          {filteredOptions.map((option, i) => (
+            <div
+              key={i}
+              className={clsx('option', { hover: index === i })}
+              onMouseDown={() => handleOptionClick(option)}
+            >
+              {option.label}
+            </div>
+          ))}
+          {!filteredOptions.length && <div className="option">No options</div>}
+          {isCreatable &&
+            inputValue &&
+            !filteredOptions.some(opt => opt.label === inputValue) && (
+              <div className="option createOption" onClick={handleCreate}>
+                {`Create ${inputValue}`}
+              </div>
+            )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Inputs/Select2/select.scss

@@ -0,0 +1,43 @@
+.customSelect {
+  position: relative;
+  width: 300px;
+  font-family: sans-serif;
+
+  .inputWrapper {
+    input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+  }
+
+  .dropdown {
+    position: absolute;
+    z-index: 1000;
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #fff;
+    border: var(--border);
+    border-radius: 8px;
+    // border-radius: 0 0 8px 8px;
+    margin-top: 2px;
+  }
+
+  .option {
+    padding: 8px 12px;
+    cursor: pointer;
+
+    &.hover,
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  .createOption {
+    font-weight: bold;
+    color: #007bff;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { SelectWrapper } from './components/SelectWrapper';
+import type {
+  AsyncSelectProps,
+  BasicSelectProps,
+  CreatableSelectProps,
+} from '../../../types/ISelect';
+
+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

@@ -0,0 +1,19 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { GroupBase, components } from 'react-select';
+import { type SelectComponents as ISelectComponents } from 'react-select/dist/declarations/src/components';
+import { faChevronDown, faCircleXmark } from '../../../../assets/icons';
+
+export const CustomSelectComponents: Partial<
+  ISelectComponents<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

@@ -0,0 +1,126 @@
+import { forwardRef, useRef } from 'react';
+import ReactSelect from 'react-select';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import { InputWrapper } from '../../InputWrapper';
+import { CustomSelectComponents } from './CustomSelectComponents';
+import { createSelectStyles } from '../utils/selectStyles';
+import { useTranslation } from 'react-i18next';
+import type {
+  AsyncSelectProps,
+  BasicSelectProps,
+  CreatableSelectProps,
+} from '../../../../types/ISelect';
+
+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,
+    isClearable = true,
+    isOpen,
+    onMenuOpen,
+    onMenuClose,
+    openDirection = 'auto',
+    formatOptionLabel,
+    autoFocus,
+    closeMenuOnSelect,
+    noOptionsMessage,
+  } = props;
+
+  const commonProps = {
+    value: value ?? (isMulti ? [] : null),
+    components: CustomSelectComponents,
+    onChange,
+    placeholder,
+    styles: createSelectStyles({ menuWidth }),
+    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,
+  };
+
+  const renderSelect = () => {
+    switch (variant) {
+      case 'basic':
+        return <ReactSelect {...commonProps} options={props.options} />;
+      case 'async':
+        return (
+          <AsyncPaginate
+            {...commonProps}
+            loadOptions={props.loadOptions}
+            defaultOptions={props.defaultData ?? true}
+          />
+        );
+      case 'async-creatable':
+        return (
+          <AsyncCreatableSelect
+            {...commonProps}
+            loadOptions={props.loadOptions}
+            defaultOptions={props.defaultData ?? true}
+            onCreateOption={props.onCreate}
+            formatCreateLabel={(inputValue: string) => (
+              <p>{`${t('FreeText')} "${inputValue}"`}</p>
+            )}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      helperText={helperText}
+      error={error}
+      errorText={errorText}
+      className={className}
+      minWidth={minWidth}
+      heightAuto
+    >
+      {renderSelect()}
+      {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

@@ -0,0 +1,104 @@
+import { StylesConfig } from 'react-select';
+
+export const createSelectStyles = ({
+  fontSize = 16,
+  menuWidth,
+}: {
+  fontSize?: number;
+  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: '6px 0 6px 12px',
+      // fontSize: /*size === 's' ? 12 : */ 14,
+      // padding: /*size === 's' ? '0 4px' : */ state.isMulti ? '8px 14px' : '10px 14px',
+      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,
+      // height: size === 's' ? 24 : 36,
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      fontSize,
+      // fontSize: /*size === 's' ? 12 : */ 14,
+      // padding: size === 's' ? 4 : provided.padding,
+      backgroundColor: state.isSelected
+        ? 'var(--primary) !important'
+        : state.isFocused
+        ? '#eee !important'
+        : 'inherit',
+    }),
+    noOptionsMessage: provided => ({
+      ...provided,
+      fontSize,
+      // fontSize: /*size === 's' ? 12 : */ 14,
+      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

@@ -0,0 +1,67 @@
+import { FC, InputHTMLAttributes, Ref, useState } from 'react';
+import { InputWrapper } from './InputWrapper';
+import clsx from 'clsx';
+
+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>
+  );
+};

package/src/components/Inputs/TextInput.tsx

@@ -0,0 +1,98 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FC, FocusEventHandler, InputHTMLAttributes, Ref, useState } from 'react';
+import { InputWrapper } from './InputWrapper';
+
+export interface ITextInputProps {
+  id?: string;
+  label?: string;
+  value?: string;
+  setValue?: (value: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  endText?: string;
+  endButton?: {
+    icon: IconDefinition;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+  isClearable?: boolean;
+  onClear?: () => void;
+  autoFocus?: boolean;
+  placeholder?: string;
+  pattern?: string;
+  helperText?: string;
+  errorText?: string;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  error?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  className?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+
+export const TextInput: FC<ITextInputProps> = ({
+  id,
+  label,
+  value,
+  setValue,
+  required,
+  disabled,
+  endText,
+  endButton,
+  isClearable = true,
+  onClear,
+  autoFocus,
+  placeholder,
+  pattern,
+  helperText,
+  errorText,
+  onBlur,
+  onFocus,
+  error,
+  inputProps,
+  className,
+  ref,
+}) => {
+  const [isAutoFill, setIsAutoFill] = useState(false);
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      endText={endText}
+      endButton={endButton}
+      onClearInput={
+        isClearable && value
+          ? () => {
+              setValue?.('');
+              onClear?.();
+            }
+          : undefined
+      }
+      helperText={helperText}
+      errorText={errorText}
+      // error={error || !!(pattern && value && !new RegExp(pattern).test(value))}
+      error={error}
+      className={className}
+    >
+      <input
+        id={id}
+        ref={ref}
+        autoFocus={autoFocus}
+        onFocus={e => {
+          isAutoFill && setIsAutoFill(false);
+          onFocus?.(e);
+        }}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        value={value || ''}
+        onChange={setValue ? e => setValue(e.target.value) : undefined}
+        required={required}
+        disabled={disabled}
+        onAnimationStart={() => setIsAutoFill(true)}
+        pattern={pattern}
+        {...inputProps}
+      />
+    </InputWrapper>
+  );
+};