@scbt-ecom/ui 0.0.30 → 0.0.31

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

@@ -1,132 +0,0 @@
-'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,
-  ...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(
-                      'w-full h-[56px] desk-body-regular-l text-color-dark transition-all bg-color-transparent outline-none pt-5 px-4 rounded-md z-10',
-                      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
-                    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(
-                  'absolute top-14 w-full  data-[closed]:scale-95 data-[closed]:opacity-0 transition-all scrollHidden p-2 rounded-md bg-color-white border-solid border border-blue-grey-700 mt-2 flex flex-col z-10 empty:invisible'
-                )}
-              >
-                <div className='p-2 customScrollbar-y overflow-x-hidden !max-h-[246px]'>
-                  {suggestionsOptions && suggestionsOptions?.length > 0 ? (
-                    <>
-                      {suggestionsOptions?.map(({ value: suggestionValue, additionalText, isDisabled }) => (
-                        <ComboboxOption
-                          disabled={isDisabled}
-                          key={suggestionValue}
-                          value={suggestionValue ?? ''}
-                          className='cursor-pointer px-3 py-3 flex items-center justify-between gap-2 hover:bg-color-blue-grey-200 rounded-sm data-[focus]:bg-color-blue-grey-200 data-[disabled]:bg-color-blue-grey-100 data-[disabled]:text-color-disabled data-[disabled]:pointer-events-none'
-                        >
-                          <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='text-color-tetriary desk-body-regular-m'>
-                      Ничего не найдено
-                    </ComboboxOption>
-                  )}
-                </div>
-              </ComboboxOptions>
-            </Combobox>
-          </FieldContainer>
-        )
-      }}
-    />
-  )
-}

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

@@ -1,25 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,25 +0,0 @@
-'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 }
-}

package/lib/shared/ui/formControlElements/model/classes-types.ts

@@ -1,22 +0,0 @@
-export type TFieldWrapperClasses = {
-  field: string
-  label: string
-}
-
-export type TFieldAttachmentClasses = {
-  badge: string
-  icon: string
-  attachmentWrapper: string
-}
-
-export type TFieldContainerClasses = {
-  container: string
-}
-
-export type TInputCommonClasses = {
-  input: string
-  message: string
-}
-
-export type TAdditionalInputPrimitiveClasses = TFieldWrapperClasses & TFieldContainerClasses & TInputCommonClasses
-export type TAdditionalInputClassesWithAttachment = TAdditionalInputPrimitiveClasses & TFieldAttachmentClasses

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

@@ -1,2 +0,0 @@
-export * from './classes-types'
-export * from './props-types'

package/lib/shared/ui/formControlElements/model/props-types.ts

@@ -1,26 +0,0 @@
-import type * as React from 'react'
-import type { Control, FieldValues, Path } from 'react-hook-form'
-import type { TFieldContainerConfig } from '../ui/FieldContainer'
-
-export type TInputCommonProps = Omit<React.ComponentProps<'input'>, 'name' | 'placeholder' | 'size' | 'type' | 'defaultValue'>
-export type TTextareaCommonProps = Omit<React.ComponentProps<'textarea'>, 'name' | 'size' | 'type' | 'defaultValue'>
-
-type TFieldControlledProps<T extends FieldValues> = {
-  name: Path<T>
-  control: Control<T>
-  label: string
-  helperText?: string
-}
-
-export type TFieldContainerSize = 'sm' | 'md' | 'lg' | 'full'
-export type TFieldAttachment = {
-  badge?: string
-  icon?: React.ReactElement
-  swapPosition?: boolean
-}
-
-// # Required props on controlled INPUTS - [maskInput, baseInput, dadata]
-export type TControlledInputProps<T extends FieldValues> = TFieldContainerConfig & TFieldAttachment & TFieldControlledProps<T>
-
-// # Required props on controlled INPUTS - [checkbox, radio]
-export type TControlledInputPrimitiveProps<T extends FieldValues> = TInputCommonProps & TFieldControlledProps<T>

package/lib/shared/ui/formControlElements/ui/FieldAttachment.tsx

@@ -1,66 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Badge } from '../../Badge'
-import { Icon } from '../../icon/Icon'
-import type { TFieldAttachmentClasses } from '../model/classes-types'
-import type { TFieldAttachment } from '../model/props-types'
-import { cn } from '$/shared/utils'
-
-interface IFieldAttachmentProps extends TFieldAttachment {
-  classes?: Partial<TFieldAttachmentClasses>
-  error?: boolean
-  isTextarea?: boolean
-  swapPosition?: boolean
-  onClickIcon?: (...args: unknown[]) => unknown
-  onKeyDownIcon?: (event: React.KeyboardEvent) => unknown
-}
-
-export const FieldAttachment = ({
-  badge,
-  icon,
-  error,
-  isTextarea = false,
-  classes,
-  swapPosition,
-  onClickIcon,
-  onKeyDownIcon
-}: IFieldAttachmentProps) => {
-  const interactiveIconAttr = (onClickIcon || onKeyDownIcon) && {
-    role: 'button',
-    tabIndex: 0,
-    onClick: onClickIcon,
-    onKeyDown: onKeyDownIcon
-  }
-
-  return (
-    <>
-      {error ? (
-        <Icon name='info/warningCircle' className={cn('text-icon-secondary-default size-6 mr-4', { 'm-0 size-5': isTextarea })} />
-      ) : (
-        <>
-          {(badge || icon) && (
-            <div
-              className={cn(
-                'flex items-center gap-4 mr-4',
-                { 'm-0': isTextarea },
-                { 'flex-row-reverse': swapPosition },
-                classes?.attachmentWrapper
-              )}
-            >
-              {icon && (
-                <span
-                  {...interactiveIconAttr}
-                  className={cn('size-6 flex justify-center items-center', { 'size-5': isTextarea }, classes?.icon)}
-                >
-                  {icon}
-                </span>
-              )}
-              {badge && <Badge className={cn('bg-color-positive', classes?.badge)}>{badge}</Badge>}
-            </div>
-          )}
-        </>
-      )}
-    </>
-  )
-}

package/lib/shared/ui/formControlElements/ui/FieldContainer.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { TFieldContainerClasses } from '../model/classes-types'
-import { cn } from '$/shared/utils'
-
-const fieldContainerConfig = cva('relative flex flex-col group', {
-  variants: {
-    intent: {
-      clear: '!w-full min-w-[140px]',
-      filled: ''
-    },
-    size: {
-      sm: 'w-[360px]',
-      md: 'w-[520px]',
-      lg: 'w-[720px]',
-      full: 'w-full'
-    }
-  },
-  defaultVariants: {
-    size: 'full',
-    intent: 'filled'
-  }
-})
-
-export type TFieldContainerConfig = VariantProps<typeof fieldContainerConfig>
-
-interface IFieldContainerProps extends TFieldContainerConfig {
-  classes?: Partial<TFieldContainerClasses>
-  children: React.ReactNode
-}
-
-export const FieldContainer = ({ size, intent, classes, children }: IFieldContainerProps) => {
-  return <div className={cn(fieldContainerConfig({ size, intent }), classes?.container)}>{children}</div>
-}

package/lib/shared/ui/formControlElements/ui/FieldWrapper.tsx

@@ -1,55 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type { TFieldWrapperClasses } from '../model'
-import { cn } from '$/shared/utils'
-
-interface IFieldWrapperProps<V> {
-  children: React.ReactElement
-  label: string
-  fieldId: string
-  value: V
-  error?: boolean
-  classes?: Partial<TFieldWrapperClasses>
-  disabled?: boolean
-  isTextarea?: boolean
-}
-
-export const FieldWrapper = <V,>({
-  children,
-  error,
-  disabled,
-  classes,
-  fieldId,
-  label,
-  value,
-  isTextarea = false
-}: IFieldWrapperProps<V>) => {
-  return (
-    <div
-      className={cn(
-        'relative border-solid transition-colors rounded-sm border border-transparent bg-color-blue-grey-100 group-focus-within:border-blue-grey-800  focus:outline-blue-grey-800 hover:bg-color-blue-grey-200 active:bg-color-blue-grey-100 flex items-center justify-between',
-        { '!border-negative': error },
-        { '!bg-color-blue-grey-100': disabled },
-        classes?.field
-      )}
-    >
-      <label
-        htmlFor={fieldId}
-        className={cn(
-          'absolute top-2/4 -translate-y-1/2 left-4 desk-body-regular-l text-color-tetriary pointer-events-none transition-all duration-15 ',
-          { 'top-2 bg-color-transparent translate-y-0 desk-body-regular-s': value && !isTextarea },
-          {
-            'group-focus-within:top-2 group-focus-within:bg-color-transparent group-focus-within:translate-y-0 group-focus-within:desk-body-regular-s':
-              !isTextarea
-          },
-          { 'top-2 desk-body-regular-s translate-y-0': isTextarea },
-          classes?.label
-        )}
-      >
-        {label}
-      </label>
-      {children}
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/ui/MessageView.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import type { FieldError } from 'react-hook-form'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '$/shared/utils'
-
-const messageViewConfig = cva('desk-body-regular-m mt-2', {
-  variants: {
-    intent: {
-      simple: 'text-color-tetriary',
-      error: 'text-color-negative'
-    },
-    disabled: {
-      true: 'text-color-disabled',
-      false: ''
-    }
-  },
-  defaultVariants: {
-    intent: 'simple'
-  }
-})
-
-export interface IMessageViewProps extends VariantProps<typeof messageViewConfig> {
-  as?: 'div' | 'span' | 'p'
-  text?: string | FieldError['message']
-  className?: string
-}
-
-export const MessageView = ({ intent, as: Element = 'p', disabled, text, className, ...props }: IMessageViewProps) => {
-  if (!text) return null
-
-  return (
-    <Element className={cn(messageViewConfig({ intent, disabled }), className)} {...props}>
-      {text}
-    </Element>
-  )
-}

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

@@ -1,4 +0,0 @@
-export { FieldAttachment } from './FieldAttachment'
-export { MessageView } from './MessageView'
-export { FieldWrapper } from './FieldWrapper'
-export { FieldContainer } from './FieldContainer'

package/lib/shared/ui/icon/Icon.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { SPRITES_META, type SpritesMap } from './sprite.gen'
-import { cn } from '$/shared/utils'
-
-export type IconName<Key extends keyof SpritesMap> = `${Key}/${SpritesMap[Key]}`
-export type TAllowedIcons = { [Key in keyof SpritesMap]: IconName<Key> }[keyof SpritesMap]
-
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-  name: TAllowedIcons
-}
-
-const getIconMeta = <Key extends keyof SpritesMap>(name: IconName<Key>) => {
-  const [spriteName, iconName] = name.split('/') as [Key, SpritesMap[Key]]
-  const {
-    filePath,
-    items: {
-      [iconName]: { viewBox, width, height }
-    }
-  } = SPRITES_META[spriteName]
-  // eslint-disable-next-line no-nested-ternary
-  const axis = width === height ? 'xy' : width > height ? 'x' : 'y'
-
-  return { filePath, iconName, viewBox, axis }
-}
-
-export const Icon = ({ name, className, ...props }: IconProps) => {
-  const { viewBox, filePath, iconName, axis } = getIconMeta(name)
-
-  return (
-    <svg
-      className={cn('select-none fill-current inline-block text-inherit size-6', className)}
-      focusable='false'
-      viewBox={viewBox}
-      aria-hidden
-      data-axis={axis}
-      {...props}
-    >
-      <use href={`sprites/${filePath}#${iconName}`} />
-    </svg>
-  )
-}