@scbt-ecom/ui 0.4.2 → 0.4.3

package/lib/shared/ui/formControlElements/inputSliderControl/model/helpers/getStepByVariant.ts

@@ -1,29 +0,0 @@
-import { type TSliderVariants } from '../types'
-
-const getStepCredit = (value: number) => {
-  const step = 1000
-
-  const firstStep = value < 100_000
-  const secondStep = value >= 100_000 && value < 500_000
-  const max = value >= 1_000_000
-
-  switch (true) {
-    case firstStep:
-      return 1000
-    case secondStep:
-      return 10_000
-    case max:
-      return 100_000
-    default:
-      return step
-  }
-}
-
-export const getStepByVariant = (value: number, variant: TSliderVariants) => {
-  const variants = {
-    years: 1,
-    credit: getStepCredit(value)
-  }
-
-  return variants[variant]
-}

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

@@ -1,4 +0,0 @@
-export { getMinMaxTextSlider } from './getInputSliderSuffix'
-export { formatNumber } from './formatNumber'
-export { getInputSliderSuffix } from './getInputSliderSuffix'
-export { getStepByVariant } from './getStepByVariant'

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

@@ -1 +0,0 @@
-export type TSliderVariants = 'years' | 'credit'

package/lib/shared/ui/formControlElements/inputSliderControl/model/useSlider.ts

@@ -1,26 +0,0 @@
-import { getInputSliderSuffix } from './helpers'
-import { type TSliderVariants } from './types'
-
-export const useSlider = () => {
-  const getSuffixText = (value: number, variant: TSliderVariants) => {
-    return getInputSliderSuffix(variant, value)
-  }
-
-  const handleBlur = (value: number, min: number, max: number, onChange: (...event: unknown[]) => void) => {
-    if (value > max) {
-      onChange(max)
-    }
-    if (value < min) {
-      onChange(min)
-    }
-  }
-
-  const handleChange = (onChange: (...event: unknown[]) => void, val?: number) => {
-    if (val === undefined) {
-      return
-    }
-    onChange(val)
-  }
-
-  return { getSuffixText, handleBlur, handleChange }
-}

package/lib/shared/ui/formControlElements/inputSliderControl/ui/SliderControl.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-import { type IInputSliderCommonProps } from '../InputSliderControl'
-import { cn } from '$/shared/utils'
-
-export interface ISliderControllProps extends IInputSliderCommonProps {
-  classes?: TSliderControlClasses
-  onValueChange?: (value: number[]) => void
-  value: number[]
-}
-
-export type TSliderControlClasses = {
-  sliderWrapper?: string
-  sliderRoot?: string
-  spanLeft?: string
-  spanRight?: string
-  sliderTrack?: string
-  sliderThumb?: string
-  sliderRange?: string
-}
-
-export const SliderControl = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, ISliderControllProps>(
-  ({ min, max, classes, ...props }, ref) => {
-    return (
-      <div className={cn('absolute bottom-[-7px] w-full px-4', classes?.sliderWrapper)}>
-        <SliderPrimitive.Root
-          ref={ref}
-          className={cn('relative flex h-4 w-full touch-none select-none items-center', classes?.sliderRoot)}
-          min={min}
-          max={max}
-          {...props}
-        >
-          <SliderPrimitive.Track
-            className={cn(
-              'relative h-[2px] w-full grow overflow-hidden rounded-full bg-color-blue-grey-500',
-              classes?.sliderTrack
-            )}
-          >
-            <SliderPrimitive.Range className={cn('absolute h-full bg-color-primary-default', classes?.sliderRange)} />
-          </SliderPrimitive.Track>
-          <SliderPrimitive.Thumb className='ring-offset-background block h-4 w-4 cursor-pointer rounded-full bg-color-primary-default transition-colors hover:before:absolute hover:before:left-1/2 hover:before:top-1/2 hover:before:h-8 hover:before:w-8 hover:before:-translate-x-1/2 hover:before:-translate-y-1/2 hover:before:rounded-full hover:before:bg-color-primary-tr-hover hover:before:content-[""] focus:outline-none focus:before:bg-color-primary-tr-pressed disabled:pointer-events-none disabled:opacity-50' />
-        </SliderPrimitive.Root>
-      </div>
-    )
-  }
-)
-SliderPrimitive.Slider.displayName = SliderPrimitive.Root.displayName

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

@@ -1 +0,0 @@
-export { SliderControl } from './SliderControl'

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 type * from './classes-types'
-export type * from './props-types'

package/lib/shared/ui/formControlElements/model/message-view-animation.ts

@@ -1,6 +0,0 @@
-export const animation = {
-  initial: { height: 0, opacity: 0, transformOrigin: 'center bottom' },
-  animate: { height: 'auto', opacity: 1, transformOrigin: 'center bottom' },
-  exit: { height: 0, opacity: 0, transformOrigin: 'center bottom' },
-  transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
-}

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

@@ -1,31 +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' | 'className'
->
-export type TTextareaCommonProps = Omit<React.ComponentProps<'textarea'>, 'name' | 'size' | 'type' | 'defaultValue' | 'className'>
-
-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
-  onClickIcon?: (...args: unknown[]) => unknown
-  onKeyDownIcon?: (event: React.KeyboardEvent) => unknown
-}
-
-// # 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,76 +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
-  isSlider?: boolean
-  absolute?: boolean
-}
-
-export const FieldAttachment = ({
-  badge,
-  isSlider,
-  icon,
-  error,
-  isTextarea = false,
-  classes,
-  swapPosition,
-  onClickIcon,
-  onKeyDownIcon,
-  absolute = false
-}: IFieldAttachmentProps) => {
-  const interactiveIconAttr = (onClickIcon || onKeyDownIcon) && {
-    role: 'button',
-    tabIndex: 0,
-    onClick: onClickIcon,
-    onKeyDown: onKeyDownIcon
-  }
-
-  return (
-    <>
-      {error ? (
-        <Icon name='info/warningCircle' className={cn('mr-4 size-6 text-icon-secondary-default', { 'm-0 size-5': isTextarea })} />
-      ) : (
-        <>
-          {(badge || icon) && (
-            <div
-              className={cn(
-                'mr-4 flex items-center gap-4',
-                { 'm-0': isTextarea },
-                { 'flex-row-reverse': swapPosition },
-                { 'absolute right-0 top-1/2 ml-1 -translate-y-1/2': absolute },
-                classes?.attachmentWrapper
-              )}
-            >
-              {icon && (
-                <span
-                  {...interactiveIconAttr}
-                  className={cn(
-                    'flex size-6 items-center justify-center',
-                    { 'size-5': isTextarea },
-                    { 'group-focus-within:[&_svg]:text-icon-blue-grey-800': isSlider },
-                    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,37 +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 min-w-[360px] 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
-  intent?: 'clear' | 'filled' | null
-}
-
-export const FieldContainer = ({ size, intent = 'filled', classes, children }: IFieldContainerProps) => {
-  return <div className={cn(fieldContainerConfig({ size, intent }), classes?.container)}>{children}</div>
-}

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

@@ -1,33 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type { TFieldWrapperClasses } from '../model'
-import { Label } from './Label'
-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, ...props }: IFieldWrapperProps<V>) => {
-  return (
-    <div
-      className={cn(
-        'relative flex items-center justify-between 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 },
-        classes?.field
-      )}
-    >
-      <Label {...props} />
-      {children}
-    </div>
-  )
-}

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

@@ -1,32 +0,0 @@
-import { type TFieldWrapperClasses } from '../model'
-import { cn } from '$/shared/utils'
-
-interface ILabelProps<V> {
-  label: string
-  fieldId: string
-  value: V
-  classes?: Partial<TFieldWrapperClasses>
-  isTextarea?: boolean
-  disabled?: boolean
-}
-
-export const Label = <V,>({ disabled, fieldId, label, value, classes, isTextarea = false }: ILabelProps<V>) => {
-  return (
-    <label
-      htmlFor={fieldId}
-      className={cn(
-        'desk-body-regular-l pointer-events-none absolute left-4 top-2/4 -translate-y-1/2 text-color-tetriary transition-all duration-15',
-        { '!top-2 !translate-y-0 !bg-color-transparent [&&]:desk-body-regular-s': value && !isTextarea },
-        {
-          'group-focus-within:desk-body-regular-s group-focus-within:top-2 group-focus-within:translate-y-0 group-focus-within:bg-color-transparent':
-            !isTextarea
-        },
-        { 'desk-body-regular-s top-2 translate-y-0': isTextarea },
-        { 'text-color-disabled': disabled },
-        classes?.label
-      )}
-    >
-      {label}
-    </label>
-  )
-}

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

@@ -1,41 +0,0 @@
-'use client'
-
-import type { FieldError } from 'react-hook-form'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { motion } from 'framer-motion'
-import { animation } from '../model/message-view-animation'
-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
-
-  const MotionElement = motion(Element)
-
-  return (
-    <MotionElement className={cn(messageViewConfig({ intent, disabled }), className)} {...animation} {...props}>
-      {text}
-    </MotionElement>
-  )
-}

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,41 +0,0 @@
-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]
-
-  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('text-inherit inline-block size-6 select-none fill-current', className)}
-      focusable='false'
-      viewBox={viewBox}
-      aria-hidden
-      data-axis={axis}
-      {...props}
-    >
-      <use href={`/sprites/${filePath}#${iconName}`} />
-    </svg>
-  )
-}

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

@@ -1,177 +0,0 @@
-export interface SpritesMap {
-  arrows: 'arrowCircle' | 'arrowLink' | 'arrowRight'
-  brandLogos: 'logoBlack' | 'logoBusiness' | 'logoGray' | 'logoInsurance' | 'logoMain' | 'logoWhite'
-  files: 'border' | 'borderError' | 'documentFilled' | 'documentOutline' | 'upload'
-  general: 'calendar' | 'check' | 'close' | 'edit' | 'hiddenEye' | 'plus' | 'showEye'
-  info: 'warningCircle'
-  social: 'classmates' | 'telegram' | 'vk'
-}
-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: {
-      border: {
-        viewBox: '0 0 476 64',
-        width: 476,
-        height: 64
-      },
-      borderError: {
-        viewBox: '0 0 476 64',
-        width: 476,
-        height: 64
-      },
-      documentFilled: {
-        viewBox: '0 0 22 28',
-        width: 22,
-        height: 28
-      },
-      documentOutline: {
-        viewBox: '0 0 22 28',
-        width: 22,
-        height: 28
-      },
-      upload: {
-        viewBox: '0 0 23 20',
-        width: 23,
-        height: 20
-      }
-    }
-  },
-  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
-      },
-      edit: {
-        viewBox: '0 0 19 19',
-        width: 19,
-        height: 19
-      },
-      hiddenEye: {
-        viewBox: '0 0 20 18',
-        width: 20,
-        height: 18
-      },
-      plus: {
-        viewBox: '0 0 16 16',
-        width: 16,
-        height: 16
-      },
-      showEye: {
-        viewBox: '0 0 20 14',
-        width: 20,
-        height: 14
-      }
-    }
-  },
-  info: {
-    filePath: 'info.svg',
-    items: {
-      warningCircle: {
-        viewBox: '0 0 20 20',
-        width: 20,
-        height: 20
-      }
-    }
-  },
-  social: {
-    filePath: 'social.svg',
-    items: {
-      classmates: {
-        viewBox: '0 0 9 15',
-        width: 9,
-        height: 15
-      },
-      telegram: {
-        viewBox: '0 0 15 13',
-        width: 15,
-        height: 13
-      },
-      vk: {
-        viewBox: '0 0 16 9',
-        width: 16,
-        height: 9
-      }
-    }
-  }
-}