@scbt-ecom/ui 0.4.1 → 0.4.2

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

@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import { NumericFormat } from 'react-number-format'
+import type { TAdditionalInputClassesWithAttachment, TControlledInputProps } from '../model'
+import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
+import { formatNumber, getMinMaxTextSlider, getStepByVariant } from './model/helpers'
+import { type TSliderVariants } from './model/types'
+import { useSlider } from './model/useSlider'
+import { SliderControl } from './ui/SliderControl'
+import { cn } from '$/shared/utils'
+
+export interface IInputSliderCommonProps {
+  min: number
+  max: number
+  variant: TSliderVariants
+  step?: number
+}
+
+export interface InputSliderControlProps<T extends FieldValues> extends TControlledInputProps<T>, IInputSliderCommonProps {
+  classes?: Partial<TAdditionalInputClassesWithAttachment> & {
+    spanLeft?: string
+    spanRight?: string
+  }
+  disabled?: boolean
+  onInputChange?: (value?: number) => void
+  leftText?: string
+  rightText?: string
+}
+
+export const InputSliderControl = <T extends FieldValues>({
+  label,
+  size = 'full',
+  helperText,
+  control,
+  classes,
+  badge,
+  icon,
+  disabled,
+  onInputChange,
+  min,
+  max,
+  variant,
+  ...props
+}: InputSliderControlProps<T>) => {
+  const inputId = React.useId()
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  const handleIconClick = () => {
+    if (ref.current) {
+      ref?.current?.focus()
+    }
+  }
+
+  const { handleBlur, handleChange, getSuffixText } = useSlider()
+
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, value }, fieldState: { error } }) => {
+        const [start, end] = getMinMaxTextSlider(variant, min, max)
+        return (
+          <div className='flex flex-col gap-1'>
+            <FieldContainer size={size} classes={classes}>
+              <FieldWrapper
+                fieldId={inputId}
+                label={label}
+                classes={classes}
+                disabled={disabled}
+                value={value}
+                error={!!error?.message}
+              >
+                <>
+                  <NumericFormat
+                    aria-invalid={error?.message ? 'true' : 'false'}
+                    className={cn(
+                      'group/slider desk-title-bold-s h-[56px] w-full rounded-md bg-color-transparent px-4 pt-5 text-color-dark outline-none transition-all',
+                      classes?.input
+                    )}
+                    id={inputId}
+                    onBlur={() => {
+                      handleBlur(value, min, max, onChange)
+                    }}
+                    value={value}
+                    disabled={disabled}
+                    suffix={` ${getSuffixText(value, variant)}`}
+                    thousandsGroupStyle='thousand'
+                    onValueChange={({ floatValue }) => {
+                      handleChange(onChange, floatValue)
+                      if (onInputChange) {
+                        onInputChange(floatValue)
+                      }
+                    }}
+                    thousandSeparator={' '}
+                    allowNegative={false}
+                    getInputRef={ref}
+                    {...props}
+                  />
+                  <SliderControl
+                    onValueChange={(inputValue) => onChange(inputValue[0])}
+                    value={[value]}
+                    min={min}
+                    max={max}
+                    step={getStepByVariant(value, variant)}
+                    variant={variant}
+                  />
+
+                  <div aria-label='edit' onKeyDown={handleIconClick} role='button' tabIndex={0} onClick={handleIconClick}>
+                    <FieldAttachment
+                      onClickIcon={handleIconClick}
+                      onKeyDownIcon={handleIconClick}
+                      isSlider
+                      badge={badge}
+                      icon={icon}
+                      error={!!error?.message}
+                      classes={classes}
+                    />
+                  </div>
+                </>
+              </FieldWrapper>
+
+              <MessageView
+                className={cn(classes?.message)}
+                intent={error?.message ? 'error' : 'simple'}
+                text={error?.message || helperText}
+                disabled={disabled}
+              />
+            </FieldContainer>
+            <div className='flex justify-between'>
+              <span
+                className={cn('desk-body-regular-m text-color-tetriary', classes?.spanLeft)}
+              >{`${formatNumber(min)} ${start}`}</span>
+              <span
+                className={cn('desk-body-regular-m text-color-tetriary', classes?.spanRight)}
+              >{`${formatNumber(max)} ${end}`}</span>
+            </div>
+          </div>
+        )
+      }}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { InputSliderControl, type InputSliderControlProps } from './InputSliderControl'

package/lib/shared/ui/formControlElements/inputSliderControl/model/helpers/dates/getEndWordMonth.ts

@@ -0,0 +1,14 @@
+export function getEndWordMonth(months: number) {
+  const remMonthsDivByTen = months % 10
+
+  switch (true) {
+    case months > 10 && months < 20:
+      return 'месяцев'
+    case remMonthsDivByTen > 1 && remMonthsDivByTen < 5:
+      return 'месяца'
+    case remMonthsDivByTen === 1:
+      return 'месяц'
+    default:
+      return 'месяцев'
+  }
+}

package/lib/shared/ui/formControlElements/inputSliderControl/model/helpers/dates/getYearEnding.ts

@@ -0,0 +1,13 @@
+export function getYearEnding(years: number) {
+  const lastDigit = Math.floor(years) % 10
+  if (years >= 5 && years <= 20) {
+    return 'лет'
+  }
+  if (lastDigit === 1) {
+    return 'год'
+  }
+  if (lastDigit >= 2 && lastDigit <= 4) {
+    return 'года'
+  }
+  return 'лет'
+}

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

@@ -0,0 +1,2 @@
+export { getEndWordMonth } from './getEndWordMonth'
+export { getYearEnding } from './getYearEnding'

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

@@ -0,0 +1,6 @@
+export const formatNumber = (value: number | string) => {
+  if (typeof value === 'number') {
+    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+  }
+  return value.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+}

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

@@ -0,0 +1,20 @@
+import { type TSliderVariants } from '../types'
+import { getYearEnding } from './dates'
+
+export const getInputSliderSuffix = (variant: TSliderVariants, value: number) => {
+  const variants = {
+    years: getYearEnding(value),
+    credit: '₽'
+  }
+
+  return variants[variant]
+}
+
+export const getMinMaxTextSlider = (variant: TSliderVariants, min: number, max: number) => {
+  const variants = {
+    years: [min, max].map(getYearEnding),
+    credit: ['₽', '₽']
+  }
+
+  return variants[variant]
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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,41 @@
+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/index.ts

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