@scbt-ecom/ui 0.0.27 → 0.0.30

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 }
+}

package/{dist/shared/ui/formControlElements/index.d.ts → lib/shared/ui/formControlElements/index.ts}

@@ -1,10 +1,10 @@
-export { InputControl, type InputControlProps } from './InputControl';
-export { InputControlMask, type InputControlMaskProps } from './InputControlMask';
-export { FormControl } from './FormControl';
-export { DadataInputControl, type IDadataInputControlProps } from './dadata';
-export { CheckboxControl, type ICheckboxControlProps } from './CheckboxControl';
-export { RadioControl, type IRadioControlProps, type IRadioGroupOption } from './RadioControl';
-export { SwitchControl, type ISwitchControlProps } from './SwitchControl';
-export { SelectControl, type ISelectControlProps, type ISelectOption } from './SelectControl';
-export { TextareaControl, type ITextareaControlProps } from './TextareaControl';
-export { CalendarControl, type ICalendarControlProps } from './calendarControl';
+export { InputControl, type InputControlProps } from './InputControl'
+export { InputControlMask, type InputControlMaskProps } from './InputControlMask'
+export { FormControl } from './FormControl'
+export { DadataInputControl, type IDadataInputControlProps } from './dadata'
+export { CheckboxControl, type ICheckboxControlProps } from './CheckboxControl'
+export { RadioControl, type IRadioControlProps, type IRadioGroupOption } from './RadioControl'
+export { SwitchControl, type ISwitchControlProps } from './SwitchControl'
+export { SelectControl, type ISelectControlProps, type ISelectOption } from './SelectControl'
+export { TextareaControl, type ITextareaControlProps } from './TextareaControl'
+export { CalendarControl, type ICalendarControlProps } from './calendarControl'

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

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

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

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

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

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

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

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

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

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

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

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

package/{dist/shared/ui/icon/index.d.ts → lib/shared/ui/icon/index.ts}

@@ -1,2 +1,2 @@
-export { Icon, type IconProps, type TAllowedIcons } from './Icon';
-export * from './sprite.gen';
+export { Icon, type IconProps, type TAllowedIcons } from './Icon'
+export * from './sprite.gen'

package/lib/shared/ui/icon/sprite.gen.ts

@@ -0,0 +1,121 @@
+export interface SpritesMap {
+  arrows: 'arrowCircle' | 'arrowLink' | 'arrowRight'
+  brandLogos: 'logoBlack' | 'logoBusiness' | 'logoGray' | 'logoInsurance' | 'logoMain' | 'logoWhite'
+  files: 'documentFilled' | 'documentOutline'
+  general: 'calendar' | 'check' | 'close'
+  info: 'warningCircle'
+}
+export const SPRITES_META: {
+  [Key in keyof SpritesMap]: {
+    filePath: string
+    items: Record<
+      SpritesMap[Key],
+      {
+        viewBox: string
+        width: number
+        height: number
+      }
+    >
+  }
+} = {
+  arrows: {
+    filePath: 'arrows.svg',
+    items: {
+      arrowCircle: {
+        viewBox: '0 0 32 32',
+        width: 32,
+        height: 32
+      },
+      arrowLink: {
+        viewBox: '0 0 24 24',
+        width: 24,
+        height: 24
+      },
+      arrowRight: {
+        viewBox: '0 0 16 17',
+        width: 16,
+        height: 17
+      }
+    }
+  },
+  brandLogos: {
+    filePath: 'brandLogos.svg',
+    items: {
+      logoBlack: {
+        viewBox: '0 0 194 32',
+        width: 194,
+        height: 32
+      },
+      logoBusiness: {
+        viewBox: '0 0 192 32',
+        width: 192,
+        height: 32
+      },
+      logoGray: {
+        viewBox: '0 0 194 32',
+        width: 194,
+        height: 32
+      },
+      logoInsurance: {
+        viewBox: '0 0 193 32',
+        width: 193,
+        height: 32
+      },
+      logoMain: {
+        viewBox: '0 0 192 32',
+        width: 192,
+        height: 32
+      },
+      logoWhite: {
+        viewBox: '0 0 194 32',
+        width: 194,
+        height: 32
+      }
+    }
+  },
+  files: {
+    filePath: 'files.svg',
+    items: {
+      documentFilled: {
+        viewBox: '0 0 22 28',
+        width: 22,
+        height: 28
+      },
+      documentOutline: {
+        viewBox: '0 0 22 28',
+        width: 22,
+        height: 28
+      }
+    }
+  },
+  general: {
+    filePath: 'general.svg',
+    items: {
+      calendar: {
+        viewBox: '0 0 19 20',
+        width: 19,
+        height: 20
+      },
+      check: {
+        viewBox: '0 0 24 24',
+        width: 800,
+        height: 800
+      },
+      close: {
+        viewBox: '0 0 24 24',
+        width: 24,
+        height: 24
+      }
+    }
+  },
+  info: {
+    filePath: 'info.svg',
+    items: {
+      warningCircle: {
+        viewBox: '0 0 20 20',
+        width: 20,
+        height: 20
+      }
+    }
+  }
+}

package/lib/shared/ui/index.ts

@@ -0,0 +1,56 @@
+// # BASE
+export { Section, type ISectionProps } from './Section'
+export { ResponsiveContainer, type IResponsiveContainerProps } from './ResponsiveContainer'
+export { Button, type IButtonProps } from './button'
+export { ButtonIcon, type IButtonIconProps } from './ButtonIcon'
+export { PhoneView } from './PhoneView'
+export { Badge, type IBadgeProps } from './Badge'
+export { Loader, type ILoaderProps } from './Loader'
+export { Skeleton, type ISkeletonProps } from './Skeleton'
+export { Table } from './table'
+
+// # INTERACTIVE
+export { Accordion, type IAccordionProps } from './accordion'
+export { Hint, type IHintProps } from './Hint'
+export { Popover } from './popover'
+export { ProgressBar, type IProgressBarProps } from './ProgressBar'
+export { TabsSwitcher, type ITabsSwitcherProps, type ITabRenderContent } from './TabsSwitcher'
+
+// # TYPOGRAPHY
+export { Heading, type IHeadingProps } from './Heading'
+
+// # ICONS
+export { Icon, type IconProps, type TAllowedIcons } from './icon'
+export { brandLogos, type TBrandLogoVariant } from './brandLogos'
+
+// # NAVIGATION
+export { Breadcrumbs, type IBreadcrumbsProps } from './Breadcrumbs'
+export { CustomLink, type ICustomLinkProps } from './CustomLink'
+
+// # FILes
+export { Document, type IDocumentProps } from './Document'
+
+// # CONTROLLED FORM UI
+export {
+  InputControl,
+  type InputControlProps,
+  InputControlMask,
+  type InputControlMaskProps,
+  FormControl,
+  DadataInputControl,
+  type IDadataInputControlProps,
+  CheckboxControl,
+  type ICheckboxControlProps,
+  RadioControl,
+  type IRadioControlProps,
+  type IRadioGroupOption,
+  SwitchControl,
+  type ISwitchControlProps,
+  SelectControl,
+  type ISelectControlProps,
+  type ISelectOption,
+  TextareaControl,
+  type ITextareaControlProps,
+  CalendarControl,
+  type ICalendarControlProps
+} from './formControlElements'