@scbt-ecom/ui 0.4.1 → 0.4.2

package/lib/shared/ui/formControlElements/calendarControl/ui/index.ts

@@ -0,0 +1,4 @@
+export { DaysOfWeek } from './DaysOfWeek'
+export { Navigation } from './Navigation'
+export { DaysOfMonth } from './DaysOfMonth'
+export { Header } from './Header'

package/lib/shared/ui/formControlElements/comboboxControl/ComboboxControl.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import * as React from 'react'
+import { type Control, Controller, type FieldValues, type Path } from 'react-hook-form'
+import Select, { type DropdownIndicatorProps, type MultiValueRemoveProps, type OptionProps } from 'react-select'
+import { FieldContainer, MessageView } from '../ui'
+import { Label } from '../ui/Label'
+import { selectClassNames } from './model/selectClassnames'
+import {
+  type TComboboxControlClasses,
+  type TComboboxOptionClasses,
+  type TDropdownIndicatorClasses,
+  type TMultiValueRemoveClasses
+} from './model/types'
+import { ComboboxOption, DropdownIndicator, MultiValueRemove } from './ui'
+import { cn } from '$/shared/utils'
+
+type TSelectVariant = 'primary' | 'secondary'
+
+export interface SelectOption<ValueType> {
+  value: ValueType
+  label: string
+}
+
+export interface IComboboxControlProps<T extends FieldValues, ValueType> {
+  name: Path<T>
+  control: Control<T>
+  options: SelectOption<ValueType>[]
+  label: string
+  size?: 'sm' | 'md' | 'lg' | 'full'
+  helperText?: string
+  marker?: boolean
+  variant?: TSelectVariant
+  isClearable?: boolean
+  defaultValue?: ValueType
+  noOptionsMessage?: string
+  disabled?: boolean
+  isMulti?: boolean
+  placeholder?: string
+  onClickIcon?: (...args: unknown[]) => unknown
+  onKeyDownIcon?: (event: React.KeyboardEvent) => unknown
+  isSearchable?: boolean
+  classes?: Partial<TComboboxControlClasses>
+  customChange?: (...args: unknown[]) => void
+}
+
+export const ComboboxControl = <T extends FieldValues, ValueType>({
+  options,
+  control,
+  defaultValue,
+  variant = 'primary',
+  isClearable = false,
+  label,
+  disabled,
+  placeholder = 'Выберите несколько значений',
+  helperText,
+  noOptionsMessage = 'Нет результатов поиска',
+  size = 'full',
+  classes,
+  isMulti = false,
+  isSearchable,
+  customChange,
+  ...props
+}: IComboboxControlProps<T, ValueType>) => {
+  const selectId = React.useId()
+
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, ref, name, value }, fieldState: { error } }) => {
+        return (
+          <FieldContainer classes={classes} size={size}>
+            <div
+              className={cn(
+                'relative flex rounded-sm border border-solid border-transparent bg-color-blue-grey-100 transition-colors hover:bg-color-blue-grey-200 focus:outline-blue-grey-800 active:bg-color-blue-grey-100 group-focus-within:border-blue-grey-800',
+                { '!border-negative': error },
+                { '!bg-color-blue-grey-100': disabled }
+              )}
+            >
+              {!isMulti && <Label disabled={disabled} classes={classes} fieldId={selectId} label={label} value={value} />}
+              <Select
+                inputId={selectId}
+                placeholder={isMulti ? placeholder : ''}
+                classNamePrefix={variant}
+                instanceId={name}
+                hideSelectedOptions={false}
+                closeMenuOnSelect={!isMulti}
+                components={{
+                  Option: (props: OptionProps) => (
+                    <ComboboxOption {...props} classes={classes as Partial<TComboboxOptionClasses>} />
+                  ),
+                  MultiValueRemove: (props: MultiValueRemoveProps) => (
+                    <MultiValueRemove {...props} classes={classes as Partial<TMultiValueRemoveClasses>} />
+                  ),
+                  DropdownIndicator: (props: DropdownIndicatorProps) => (
+                    <DropdownIndicator {...props} classes={classes as Partial<TDropdownIndicatorClasses>} />
+                  )
+                }}
+                classNames={selectClassNames(isMulti, disabled, classes)}
+                isSearchable={isSearchable}
+                ref={ref}
+                isDisabled={disabled}
+                isMulti={isMulti}
+                defaultValue={defaultValue}
+                isClearable={isClearable}
+                noOptionsMessage={() => noOptionsMessage}
+                options={options}
+                value={options.find((option) => (option as SelectOption<ValueType>).value === value)}
+                onChange={(option) => {
+                  if (customChange) {
+                    customChange(option)
+                  }
+                  if (isMulti) {
+                    onChange((option as SelectOption<ValueType>[])?.map((c) => c.value))
+                  } else {
+                    onChange((option as SelectOption<ValueType>)?.value)
+                  }
+                }}
+                {...props}
+              />
+            </div>
+            <MessageView
+              className={cn(classes?.message)}
+              intent={error?.message ? 'error' : 'simple'}
+              text={error?.message || helperText}
+              disabled={disabled}
+            />
+          </FieldContainer>
+        )
+      }}
+    />
+  )
+}

package/lib/shared/ui/formControlElements/comboboxControl/index.ts

@@ -0,0 +1 @@
+export { ComboboxControl, type IComboboxControlProps } from './ComboboxControl'

package/lib/shared/ui/formControlElements/comboboxControl/model/selectClassnames.ts

@@ -0,0 +1,51 @@
+import { type MenuProps, type OptionProps } from 'react-select'
+import { type TComboboxControlClassesCommon } from './types'
+import { cn } from '$/shared/utils'
+
+export const selectClassNames = (isMulti: boolean, disabled?: boolean, classes?: Partial<TComboboxControlClassesCommon>) => ({
+  dropdownIndicator: () => cn('absolute top-1/2 right-4 !p-0 -translate-y-1/2', classes?.dropdownIndicator),
+  indicatorsContainer: () => cn('', classes?.indicatorsContainer),
+  input: () =>
+    cn(
+      'desk-body-regular-l !p-0 !m-0 z-10 rounded-md bg-color-transparent text-color-dark outline-none transition-all',
+      classes?.inputCombobox
+    ),
+  valueContainer: () => cn('desk-body-regular-l mr-7 gap-2 !p-0', classes?.valueContainer),
+  control: () =>
+    cn(
+      'p-4 !min-h-[56px] !bg-color-transparent !border-transparent transition-colors !shadow-[0px_0px_0px_0px_rgba(0,0,0,0)]',
+      {
+        'p-0 pt-5 pl-4': !isMulti
+      },
+      classes?.controlCombobox
+    ),
+  container: () => cn('w-full !static', classes?.containerCombobox),
+  menuList: () => {
+    return cn('scrollHidden !customScrollbar-y !max-h-[246px] flex flex-col gap-[2px] overflow-x-hidden p-2', classes?.menuList)
+  },
+  menu: (state: MenuProps) => {
+    return cn(
+      'absolute !p-0 top-14 transition-all z-10 mt-2 flex w-full flex-col rounded-md border border-solid border-blue-grey-700 bg-color-white p-2 transition-all empty:invisible  !shadow-[0px_0px_0px_0px_rgba(0,0,0,0)]',
+      { 'scale-100 visible opacity-100': state.selectProps.menuIsOpen },
+      { 'scale-95 invisible opacity-0': !state.selectProps.menuIsOpen },
+      classes?.menuCombobox
+    )
+  },
+  group: () => cn('bg-color-positive z-10', classes?.groupCombobox),
+  option: (state: OptionProps) =>
+    cn(
+      'flex !pl-10 cursor-pointer bg-color-initial text-color-initial items-center justify-between gap-2 active:!bg-color-blue-grey-200 rounded-sm px-3 py-3 hover:!bg-color-blue-grey-200 data-[disabled]:pointer-events-none data-[disabled]:!bg-color-blue-grey-100 data-[selected=true]:!bg-color-negative data-[disabled]:!text-color-disabled focus:!bg-color-blue-grey-200  active:!bg-color-blue-grey-200 hover:text-color-primary-hover',
+      { '!pl-2': !isMulti },
+      { '!bg-color-primary-tr-focus !text-color-primary-hover': state.isSelected },
+      { '!bg-color-primary-tr-focus !text-color-primary-hover': state.isFocused },
+      classes?.optionCombobox
+    ),
+  noOptionsMessage: () => cn('!desk-body-regular-m !text-color-tetriary', classes?.noOptionsMessage),
+  singleValue: () => cn('!m-0', classes?.singleValue),
+  multiValue: () => cn('!bg-color-blue-grey-300 truncate max-w-[300px] !rounded-sm px-[8px] !m-0 py-[5px]', classes?.multiValue),
+  multiValueLabel: () => cn('[&&]:desk-body-regular-l !p-0 pl-[6px] !text-color-secondary', classes?.multiValueLabel),
+  multiValueRemove: () => cn('hover:!bg-color-transparent', classes?.multiValueRemove),
+  placeholder: () =>
+    cn('!text-icon-blue-grey-600 !desk-body-regular-l', { '!text-color-disabled': disabled }, classes?.placeholderCombobox),
+  indicatorSeparator: () => cn('!hidden', classes?.indicatorSeparator)
+})

package/lib/shared/ui/formControlElements/comboboxControl/model/types.ts

@@ -0,0 +1,42 @@
+import { type TAdditionalInputPrimitiveClasses } from '../../model'
+
+export type TComboboxControlClasses = Partial<TComboboxControlClassesCommon> &
+  Partial<TAdditionalInputPrimitiveClasses> &
+  Partial<TComboboxChildClasses> & {}
+
+export type TComboboxControlClassesCommon = {
+  messageCombobox: string
+  selectWrapper: string
+  dropdownIndicator: string
+  indicatorsContainer: string
+  inputCombobox: string
+  valueContainer: string
+  controlCombobox: string
+  containerCombobox: string
+  menuList: string
+  menuCombobox: string
+  groupCombobox: string
+  menuPortal: string
+  optionCombobox: string
+  noOptionsMessage: string
+  singleValue: string
+  multiValue: string
+  multiValueLabel: string
+  multiValueRemove: string
+  placeholderCombobox: string
+  indicatorSeparator?: string
+}
+
+export type TComboboxChildClasses = TMultiValueRemoveClasses | TComboboxOptionClasses | TDropdownIndicatorClasses
+
+export type TMultiValueRemoveClasses = {
+  multiRemoveIcon: string
+}
+export type TComboboxOptionClasses = {
+  optionCustom: string
+  checkboxIsMulti: string
+  checkboxIsMultiIcon: string
+}
+export type TDropdownIndicatorClasses = {
+  indicatorIcon: string
+}

package/lib/shared/ui/formControlElements/comboboxControl/ui/ComboboxOption.tsx

@@ -0,0 +1,38 @@
+import { components, type OptionProps } from 'react-select'
+import { type TComboboxOptionClasses } from '../model/types'
+import { Icon } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+interface IComboboxOptionProps<Option> extends OptionProps<Option> {
+  classes?: Partial<TComboboxOptionClasses>
+  isSelected: boolean
+}
+
+export const ComboboxOption = <Option,>({ isSelected, classes, ...props }: IComboboxOptionProps<Option>) => {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (props.innerProps.onClick) {
+      props.innerProps.onClick(event)
+    }
+  }
+
+  return (
+    <div className={cn('relative flex cursor-pointer items-center', classes?.optionCustom)}>
+      {props.isMulti && (
+        <span
+          onClick={handleClick}
+          className={cn(
+            'absolute left-1 flex size-6 items-center justify-center rounded-sm border-2 border-blue-grey-700',
+            { 'border-none bg-color-primary-default': isSelected },
+            classes?.checkboxIsMulti
+          )}
+        >
+          <Icon
+            name='general/check'
+            className={cn('size-5 text-icon-white', { invisible: !isSelected }, classes?.checkboxIsMultiIcon)}
+          />
+        </span>
+      )}
+      <components.Option isSelected={isSelected} {...props} />
+    </div>
+  )
+}

package/lib/shared/ui/formControlElements/comboboxControl/ui/DropdownIndicator.tsx

@@ -0,0 +1,23 @@
+import { components, type DropdownIndicatorProps } from 'react-select'
+import { type TDropdownIndicatorClasses } from '../model/types'
+import { Icon } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+interface IDropdownIndicatorProps<Option> extends DropdownIndicatorProps<Option> {
+  classes?: Partial<TDropdownIndicatorClasses>
+}
+
+export const DropdownIndicator = <Option,>({ classes, ...props }: IDropdownIndicatorProps<Option>) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <Icon
+        name='arrows/arrowRight'
+        className={cn(
+          'size-6 rotate-90 text-icon-blue-grey-600 transition-all',
+          { '-rotate-90': props.selectProps.menuIsOpen },
+          classes?.indicatorIcon
+        )}
+      />
+    </components.DropdownIndicator>
+  )
+}

package/lib/shared/ui/formControlElements/comboboxControl/ui/MultiValueRemove.tsx

@@ -0,0 +1,16 @@
+import { components, type MultiValueRemoveProps } from 'react-select'
+import { type TMultiValueRemoveClasses } from '../model/types'
+import { Icon } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+interface IMultiValueRemoveProps extends MultiValueRemoveProps {
+  classes?: Partial<TMultiValueRemoveClasses>
+}
+
+export const MultiValueRemove = ({ classes, ...props }: IMultiValueRemoveProps) => {
+  return (
+    <components.MultiValueRemove {...props}>
+      <Icon name='general/close' className={cn('size-4 text-icon-blue-grey-800', classes?.multiRemoveIcon)} />
+    </components.MultiValueRemove>
+  )
+}

package/lib/shared/ui/formControlElements/comboboxControl/ui/index.ts

@@ -0,0 +1,3 @@
+export { ComboboxOption } from './ComboboxOption'
+export { DropdownIndicator } from './DropdownIndicator'
+export { MultiValueRemove } from './MultiValueRemove'

package/lib/shared/ui/formControlElements/dadata/DadataInputControl.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
+import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TInputCommonProps } from '../model'
+import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
+import type { TDadataBaseUrl, TDadataType } from './model/types'
+import { useDadata } from './model/useDadata'
+import { cn } from '$/shared/utils'
+
+type TDadataClasses = Partial<TAdditionalInputClassesWithAttachment> & {
+  options?: string
+  indentMargin?: string
+}
+
+export interface IDadataInputControlProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
+  classes?: TDadataClasses
+  dadataType?: TDadataType
+  dadataBaseUrl?: TDadataBaseUrl
+}
+
+export const DadataInputControl = <T extends FieldValues>({
+  control,
+  helperText,
+  classes,
+  size = 'full',
+  label,
+  disabled,
+  dadataType = 'fio',
+  dadataBaseUrl = 'cache',
+  badge,
+  icon,
+  swapPosition,
+  onClickIcon,
+  onKeyDownIcon,
+
+  ...props
+}: IDadataInputControlProps<T>) => {
+  const { setQuery, suggestionsOptions } = useDadata(dadataType, dadataBaseUrl)
+  const inputId = React.useId()
+  // TODO: Пофиксить при нажатие на enter очищается инпут, если нет опшенов
+
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, ref, name, value }, fieldState: { error } }) => {
+        return (
+          <FieldContainer size={size} classes={classes}>
+            <Combobox value={value} onChange={onChange}>
+              <FieldWrapper
+                fieldId={inputId}
+                label={label}
+                classes={classes}
+                disabled={disabled}
+                value={value}
+                error={!!error?.message}
+              >
+                <>
+                  <ComboboxInput
+                    className={cn(
+                      'desk-body-regular-l z-10 h-[56px] w-full rounded-md bg-color-transparent px-4 pt-5 text-color-dark outline-none transition-all',
+                      classes?.input
+                    )}
+                    ref={ref}
+                    name={name}
+                    value={value} // TODO: capitalize
+                    displayValue={(currentValue: string) => {
+                      return currentValue
+                    }}
+                    onChange={(event) => {
+                      onChange(event.target.value)
+                      setQuery(event.target.value)
+                    }}
+                  />
+                  {/* //TODO: Пока проблемы с реализацией на других полях  */}
+                  {/* {suggestionsOptions && debounceQuery && (
+                    <span className='absolute desk-body-regular-l text-color-blue-grey-600 left-[16px] top-[28px] capitalize group-focus-within:visible'>
+                      {suggestionsOptions[0]?.value}
+                    </span>
+                  )} */}
+                  <FieldAttachment
+                    onClickIcon={onClickIcon}
+                    onKeyDownIcon={onKeyDownIcon}
+                    badge={badge}
+                    icon={icon}
+                    error={!!error?.message}
+                    classes={classes}
+                    swapPosition={swapPosition}
+                  />
+                </>
+              </FieldWrapper>
+              <MessageView
+                className={cn(classes?.message)}
+                intent={error?.message ? 'error' : 'simple'}
+                text={error?.message || helperText}
+                disabled={disabled}
+              />
+              <ComboboxOptions
+                transition
+                className={cn(
+                  'scrollHidden absolute top-14 z-10 mt-2 flex w-full flex-col rounded-md border border-solid border-blue-grey-700 bg-color-white p-2 transition-all empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0'
+                )}
+              >
+                <div className='customScrollbar-y !max-h-[246px] overflow-x-hidden p-2'>
+                  {suggestionsOptions && suggestionsOptions?.length > 0 ? (
+                    <>
+                      {suggestionsOptions?.map(({ value: suggestionValue, additionalText, isDisabled }) => (
+                        <ComboboxOption
+                          disabled={isDisabled}
+                          key={suggestionValue}
+                          value={suggestionValue ?? ''}
+                          className='flex cursor-pointer items-center justify-between gap-2 rounded-sm px-3 py-3 hover:bg-color-blue-grey-200 data-[disabled]:pointer-events-none data-[disabled]:bg-color-blue-grey-100 data-[focus]:bg-color-blue-grey-200 data-[disabled]:text-color-disabled'
+                        >
+                          <div className='flex flex-col gap-1'>
+                            <p className='desk-body-regular-l'>{suggestionValue}</p>
+
+                            {additionalText && <span className='desk-body-regular-s text-color-tetriary'>{additionalText}</span>}
+                          </div>
+                        </ComboboxOption>
+                      ))}
+                    </>
+                  ) : (
+                    <ComboboxOption value='' className='desk-body-regular-m text-color-tetriary'>
+                      Ничего не найдено
+                    </ComboboxOption>
+                  )}
+                </div>
+              </ComboboxOptions>
+            </Combobox>
+          </FieldContainer>
+        )
+      }}
+    />
+  )
+}

package/lib/shared/ui/formControlElements/dadata/index.ts

@@ -0,0 +1 @@
+export { DadataInputControl, type IDadataInputControlProps } from './DadataInputControl'

package/lib/shared/ui/formControlElements/dadata/model/api.ts

@@ -0,0 +1,25 @@
+import { getDadataBaseUrl, getDataByDadataType } from './helpers'
+import type { TDadataBaseUrl, TDadataType } from './types'
+
+export const fetchSuggestions = async (searchText: string, dadataType: TDadataType, dadataBaseUrl: TDadataBaseUrl) => {
+  try {
+    const response = await fetch(`${getDadataBaseUrl(dadataBaseUrl)}/${dadataType}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      body: JSON.stringify({ query: searchText })
+    })
+
+    if (!response.ok) throw new Error('error')
+    const data = await response.json()
+
+    const formattedData = getDataByDadataType(dadataType, data)
+
+    return formattedData
+  } catch (error) {
+    console.error(error)
+    return []
+  }
+}

package/lib/shared/ui/formControlElements/dadata/model/helpers.ts

@@ -0,0 +1,76 @@
+import type {
+  IDadataAutoOption,
+  IDadataCacheOption,
+  IDadataCacheSuggestion,
+  IDadataConstantsAutoSuggestion,
+  IDadataConstantsCountrySuggestion,
+  IDadataCountryOption,
+  IDadataOrganizationOption,
+  TDadataBaseUrl,
+  TDadataReturn,
+  TDadataSuggestionType,
+  TDadataType
+} from './types'
+import { DADATA_BASE_CACHE_URL, DADATA_BASE_CONSTANTS_URL } from '$/shared/constants'
+
+export const getDadataBaseUrl = (baseUrl: TDadataBaseUrl) => {
+  switch (baseUrl) {
+    case 'cache':
+      return DADATA_BASE_CACHE_URL
+    case 'constants':
+      return DADATA_BASE_CONSTANTS_URL
+    default:
+      return DADATA_BASE_CACHE_URL
+  }
+}
+
+export const getDataByDadataType = <T>(dadataType: TDadataType, data: TDadataReturn<T>) => {
+  switch (dadataType) {
+    case 'country':
+      return (data as IDadataConstantsCountrySuggestion).matches
+    case 'auto':
+      return (data as IDadataConstantsAutoSuggestion).matches
+    default:
+      return (data as IDadataCacheSuggestion<T>).suggestions
+  }
+}
+
+export const getOptionsByDadataType = <T>(dadataType: TDadataType, suggestions: TDadataSuggestionType<T>) => {
+  switch (dadataType) {
+    case 'country':
+      return (suggestions as IDadataCountryOption[])?.map((suggestion) => {
+        return {
+          value: suggestion?.country_name,
+          label: suggestion?.country_name
+        }
+      })
+
+    case 'auto':
+      return (suggestions as IDadataAutoOption[])?.map((suggestion) => {
+        return {
+          value: suggestion?.model_mark,
+          label: suggestion?.model_mark
+        }
+      })
+
+    case 'party':
+      return (suggestions as IDadataOrganizationOption[])?.map((suggestion) => {
+        return {
+          value: suggestion?.value,
+          label: suggestion?.value,
+          additionalText: `ИНН: ${suggestion?.data?.inn}`
+        }
+      })
+    case 'fio':
+    case 'address':
+      return (suggestions as IDadataCacheOption<T>[])?.map((suggestion) => {
+        return {
+          value: suggestion?.value,
+          label: suggestion?.value
+        }
+      })
+
+    default:
+      return []
+  }
+}

package/lib/shared/ui/formControlElements/dadata/model/types.ts

@@ -0,0 +1,52 @@
+export type TDadataType = 'address' | 'fio' | 'country' | 'auto' | 'party'
+export type TDadataBaseUrl = 'cache' | 'constants'
+
+export type TDadataOption = {
+  value: string
+  additionalText?: string
+  isDisabled?: boolean
+}
+
+// # constants suggestions COUNTRY
+export interface IDadataCountryOption {
+  id: number
+  country_name: string
+}
+export interface IDadataConstantsCountrySuggestion {
+  matches: IDadataCountryOption[]
+}
+
+// # constants suggestions AUTO
+export interface IDadataAutoOption {
+  id: number
+  mark: string
+  model: string
+  model_mark: string
+  year_max: string
+  year_min: string
+}
+export interface IDadataConstantsAutoSuggestion {
+  matches: IDadataAutoOption[]
+}
+
+// # Default dadata suggestions [FIO, ADDRESS]
+export interface IDadataCacheOption<T> {
+  value: string
+  unrestricted_value: string
+  data: T
+}
+export interface IDadataCacheSuggestion<T> {
+  suggestions: IDadataCacheOption<T>[]
+}
+
+// #  dadata suggestions organization (party)
+export interface IDadataOrganizationOption {
+  value: string
+  unrestricted_value: string
+  data: {
+    inn: 'string'
+  }
+}
+
+export type TDadataReturn<T> = IDadataConstantsCountrySuggestion | IDadataCacheSuggestion<T> | IDadataConstantsAutoSuggestion
+export type TDadataSuggestionType<T> = IDadataCountryOption[] | IDadataCacheOption<T>[] | IDadataAutoOption[]

package/lib/shared/ui/formControlElements/dadata/model/useDadata.ts

@@ -0,0 +1,25 @@
+'use client'
+
+import * as React from 'react'
+import { fetchSuggestions } from './api'
+import { getOptionsByDadataType } from './helpers'
+import type { TDadataBaseUrl, TDadataOption, TDadataType } from './types'
+import { useDebounceValue } from '$/shared/hooks'
+
+export const useDadata = (dadataType: TDadataType, dadataBaseUrl: TDadataBaseUrl) => {
+  const [query, setQuery] = React.useState('')
+  const [suggestionsOptions, setSuggestionsOptions] = React.useState<TDadataOption[] | null>(null)
+  const debounceQuery = useDebounceValue(query, 300)
+
+  React.useEffect(() => {
+    if (debounceQuery) {
+      const handleSearch = async () => {
+        const suggestions = await fetchSuggestions(debounceQuery, dadataType, dadataBaseUrl)
+        setSuggestionsOptions(getOptionsByDadataType(dadataType, suggestions))
+      }
+      handleSearch()
+    }
+  }, [debounceQuery, dadataType, dadataBaseUrl])
+
+  return { setQuery, suggestionsOptions, debounceQuery }
+}