@scbt-ecom/ui 0.4.1 → 0.4.2

package/lib/shared/ui/formControlElements/inputControlUploader/model/hooks/useUploader.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { type DropzoneOptions, type FileRejection, useDropzone } from 'react-dropzone'
+import { FilesErrorCode } from '../helpers'
+import { Notification } from '$/shared/ui/'
+
+export type TUseUploader = {
+  controlledFiles: File[]
+  dropzoneOptions: DropzoneOptions
+  onValueChange: (f: File[]) => void
+}
+
+export const useUploader = ({ dropzoneOptions, controlledFiles, onValueChange }: TUseUploader) => {
+  const [filesStatus, setFilesStatus] = useState<Record<string, 'loading' | 'success' | 'error'>>({})
+
+  const removeFile = (index: number) => {
+    const updatedFiles = controlledFiles.filter((_, idx) => idx !== index)
+    onValueChange(updatedFiles)
+  }
+
+  const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader()
+      setFilesStatus((prev) => ({ ...prev, [file.name]: 'loading' }))
+
+      reader.onload = () => {
+        setFilesStatus((prev) => ({ ...prev, [file.name]: 'success' }))
+      }
+
+      reader.readAsArrayBuffer(file)
+    })
+
+    switch (rejectedFiles[0]?.errors[0]?.code) {
+      case FilesErrorCode.FileInvalidType:
+        Notification({
+          intent: 'error',
+          text: 'Неверный формат файла. Загрузите в формате jpg/png/pdf'
+        })
+        break
+      case FilesErrorCode.FileTooLarge:
+        Notification({
+          intent: 'error',
+          text: `Файл слишком большой. Максимальный размер ${dropzoneOptions.maxSize} МБ`
+        })
+        break
+      case FilesErrorCode.TooManyFiles:
+        Notification({
+          intent: 'error',
+          text: `Вы загрузили слишком много файлов. Максимальное количество ${dropzoneOptions.maxFiles}`
+        })
+        break
+      default:
+        break
+    }
+
+    const updatedFiles = [...controlledFiles, ...acceptedFiles]
+
+    onValueChange(updatedFiles)
+  }
+
+  const dropzoneState = useDropzone({
+    onDrop,
+    ...dropzoneOptions
+  })
+
+  return { filesStatus, removeFile, dropzoneState }
+}

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

@@ -0,0 +1 @@
+export { defaultDropzoneOptions, FilesErrorCode } from './helpers'

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

@@ -0,0 +1,22 @@
+export type TClassesUploaderMain = {
+  wrapperMainContent: string
+  borderContent: string
+  wrapperTextContent: string
+  uploaderIcon: string
+  selectFileText: string
+  selectFileTextSpan: string
+  uploaderInput: string
+  message: string
+}
+
+export type TClassesUploaderFiles = {
+  filesWrapperContent: string
+  fileWrapperContent: string
+  fileContent: string
+  fileDeleteIcon: string
+  fileText: string
+  fileButtonDeleteWrapper: string
+  fileButtonDelete: string
+}
+
+export type TClassesUploader = TClassesUploaderFiles & TClassesUploaderMain

package/lib/shared/ui/formControlElements/inputControlUploader/ui/File.tsx

@@ -0,0 +1,35 @@
+import { type TClassesUploader } from '../model/types'
+import { Filename } from './Filename'
+import { Icon } from '$/shared/ui/icon'
+import { Loader } from '$/shared/ui/Loader'
+import { cn } from '$/shared/utils'
+
+interface IFileProps {
+  filesStatus: {
+    [key: string]: 'loading' | 'success' | 'error'
+  }
+  removeFile: (index: number) => void
+  classes?: TClassesUploader
+  file: File
+  index: number
+}
+
+export const File = ({ filesStatus, removeFile, classes, file, index }: IFileProps) => {
+  const fileSizeMb = file.size / 1024 / 1024
+
+  return (
+    <li key={file.name} className={cn('flex h-6 items-center justify-between p-1', classes?.fileWrapperContent)}>
+      <div className={cn('flex items-center gap-2', classes?.fileContent)}>
+        {filesStatus[file.name] === 'loading' && <Loader size='sm' />}
+        {filesStatus[file.name] === 'success' && <Icon name='general/check' className='text-icon-positive-default' />}
+        <Filename file={file} classes={classes} />
+      </div>
+      <div className={cn('flex items-center gap-2', classes?.fileButtonDeleteWrapper)}>
+        <p className='desk-body-regular-m text-color-blue-grey-600'>{`${fileSizeMb.toFixed(1)} MB`}</p>
+        <button className={cn('cursor-pointer', classes?.fileButtonDelete)} onClick={() => removeFile(index)}>
+          <Icon name='general/close' className={cn('text-icon-blue-grey-600', classes?.fileDeleteIcon)} />
+        </button>
+      </div>
+    </li>
+  )
+}

package/lib/shared/ui/formControlElements/inputControlUploader/ui/Filename.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react'
+import { type TClassesUploader } from '../model/types'
+import { Hint } from '$/shared/ui/Hint'
+import { cn } from '$/shared/utils'
+
+interface IFileNameProps {
+  file: File
+  classes?: TClassesUploader
+}
+
+export const Filename = ({ file, classes }: IFileNameProps) => {
+  const fileRef = useRef<HTMLParagraphElement>(null)
+  const [isOverflow, setIsOverflow] = useState(false)
+
+  useEffect(() => {
+    if (fileRef.current) {
+      setIsOverflow(fileRef.current.clientWidth > 300)
+    }
+  }, [file])
+
+  return (
+    <>
+      {isOverflow ? (
+        <Hint
+          triggerElement={
+            <p ref={fileRef} className={cn('desk-body-regular-m max-w-[300px] truncate text-color-dark')}>
+              {file.name}
+            </p>
+          }
+        >
+          {file.name}
+        </Hint>
+      ) : (
+        <p ref={fileRef} className={cn('desk-body-regular-m text-color-dark', classes?.fileText)}>
+          {file.name}
+        </p>
+      )}
+    </>
+  )
+}

package/lib/shared/ui/formControlElements/inputControlUploader/ui/Files.tsx

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react'
+import { type TClassesUploader } from '../model/types'
+import { File } from './File'
+import { cn } from '$/shared/utils'
+
+interface IUploaderContentProps extends HTMLAttributes<HTMLDivElement> {
+  controlledFiles: File[]
+  filesStatus: {
+    [key: string]: 'loading' | 'success' | 'error'
+  }
+  removeFile: (index: number) => void
+  classes?: TClassesUploader
+}
+
+export const Files = ({ controlledFiles, filesStatus, classes, removeFile }: IUploaderContentProps) => {
+  const isFilesExist = controlledFiles && controlledFiles.length > 0
+
+  if (isFilesExist) {
+    return (
+      <ul className={cn('flex max-w-[476px] flex-col gap-1 px-1', classes?.filesWrapperContent)}>
+        {controlledFiles.map((file, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <File key={index} file={file} index={index} filesStatus={filesStatus} removeFile={removeFile} classes={classes} />
+        ))}
+      </ul>
+    )
+  }
+
+  return null
+}

package/lib/shared/ui/formControlElements/inputControlUploader/ui/Input.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type Ref } from 'react'
+import { type DropzoneRootProps } from 'react-dropzone'
+import { type FieldError, type FieldValues, type Path } from 'react-hook-form'
+import { type TClassesUploader } from '../model/types'
+import { Icon } from '$/shared/ui/icon'
+import { cn } from '$/shared/utils'
+
+export interface IFileInputProps<T extends FieldValues> {
+  dropzoneState: DropzoneRootProps
+  disabled?: boolean
+  error?: FieldError
+  classes?: Partial<TClassesUploader>
+  name?: Path<T>
+}
+
+export const Input = forwardRef(function Input<T extends FieldValues>(
+  { dropzoneState, classes, disabled, error, name }: IFileInputProps<T>,
+  ref: Ref<HTMLDivElement>
+) {
+  const dropzoneProps = dropzoneState.getRootProps()
+  return (
+    <div
+      className={cn(
+        'flex h-[64px] w-[476px] rounded-sm bg-[length:100%_100%] bg-no-repeat hover:border hover:border-primary-hover hover:bg-color-primary-tr-hover focus-visible:border focus-visible:border-primary-hover focus-visible:bg-color-primary-tr-hover focus-visible:outline-none active:border active:border-primary-hover active:bg-color-primary-tr-pressed [&:not(:hover)(:focus-visible)(:active)(:disabled)]:bg-[url("../../static/files/border.svg")]',
+        classes?.borderContent,
+        { 'bg-color-primary-light-default opacity-50': disabled },
+        { '[&:not(:hover)(:focus-visible)(:active)(:disabled)]:bg-[url("../../static/files/borderError.svg")]': error }
+      )}
+      ref={ref}
+      {...dropzoneProps}
+    >
+      <div className={cn('flex h-full w-full items-center justify-center gap-2', classes?.wrapperTextContent)}>
+        <Icon name='files/upload' className={cn('text-icon-primary-default', classes?.uploaderIcon)} />
+        <p className={cn('desk-body-regular-l select-none text-icon-primary-default', classes?.wrapperTextContent)}>
+          Выберите файл
+          <span className={cn('text-icon-blue-grey-600', classes?.selectFileTextSpan)}> или перетащите сюда</span>
+        </p>
+      </div>
+      <input
+        name={name}
+        ref={dropzoneState.inputRef}
+        disabled={disabled}
+        {...dropzoneState.getInputProps()}
+        className={cn(classes?.uploaderInput)}
+      />
+    </div>
+  )
+})

package/lib/shared/ui/formControlElements/inputControlUploader/ui/Uploader.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import { type DropzoneOptions } from 'react-dropzone'
+import { type FieldError, type FieldValues, type Path } from 'react-hook-form'
+import { MessageView } from '../../ui'
+import { defaultDropzoneOptions } from '../model'
+import { useUploader } from '../model/hooks/useUploader'
+import { type TClassesUploader } from '../model/types'
+import { Files } from './Files'
+import { Input } from './Input'
+import { cn } from '$/shared/utils'
+
+export interface IUploaderProps<T extends FieldValues> extends React.HTMLAttributes<HTMLDivElement> {
+  controlledFiles: File[]
+  dropzoneOptions: DropzoneOptions
+  helperText?: string
+  onValueChange: (f: File[]) => void
+  disabled?: boolean
+  error?: FieldError | undefined
+  classes?: Partial<TClassesUploader>
+  name: Path<T>
+}
+
+export const Uploader = React.forwardRef(function InputControl<T extends FieldValues>(
+  {
+    dropzoneOptions = defaultDropzoneOptions,
+    controlledFiles,
+    onValueChange,
+    helperText,
+    disabled,
+    error,
+    classes,
+    name
+  }: IUploaderProps<T>,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const { filesStatus, removeFile, dropzoneState } = useUploader({
+    dropzoneOptions,
+    controlledFiles,
+    onValueChange
+  })
+
+  return (
+    <>
+      <div className={cn('relative mb-3 w-[476px]', classes?.wrapperMainContent)}>
+        <Input ref={ref} name={name} classes={classes} error={error} disabled={disabled} dropzoneState={dropzoneState} />
+        <MessageView
+          className={cn(classes?.message)}
+          intent={error?.message ? 'error' : 'simple'}
+          text={error?.message || helperText}
+          disabled={disabled}
+        />
+      </div>
+      <Files filesStatus={filesStatus} removeFile={removeFile} controlledFiles={controlledFiles} />
+    </>
+  )
+})

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

@@ -0,0 +1,3 @@
+export { Input } from './Input'
+export { Uploader } from './Uploader'
+export { Files } from './Files'

package/lib/shared/ui/formControlElements/inputCurrencyControl/InputCurrencyControl.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { Controller, type FieldValues } from 'react-hook-form'
+import { NumericFormat } from 'react-number-format'
+import { type TControlledInputProps, type TInputCommonProps } from '../model'
+import { FieldContainer, FieldWrapper, MessageView } from '../ui'
+import { currencyOptionsList, getDelimiterForCurrency } from './model/helpers'
+import { useInputCurrency } from './model/useInputCurrency'
+import { MenuTrigger, OptionList } from './ui'
+import { useClickOutside } from '$/shared/hooks'
+import { cn } from '$/shared/utils'
+
+export type TCurrencyVariant = 'euro' | 'dollars' | 'rubles' | 'yuan' | 'dirhams'
+export interface ICurrencyOption {
+  ruName: string
+  engName: string
+  currency: TCurrencyVariant
+}
+
+export interface InputCurrencyControlProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
+  classes?: any // TODO ADD CLASSES AND CONNECT WITH BACKEND API TO GET CURRENCY
+  defaultCurrency?: TCurrencyVariant
+}
+
+export const InputCurrencyControl = <T extends FieldValues>({
+  label,
+  size = 'full',
+  helperText,
+  control,
+  classes,
+  disabled,
+  defaultCurrency = 'rubles',
+  ...props
+}: InputCurrencyControlProps<T>) => {
+  const inputId = React.useId()
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const { menuIsOpen, currentCurrencyOption, onSelectOption, onToggleMenu, onCloseMenu } = useInputCurrency(defaultCurrency)
+
+  useClickOutside(containerRef, onCloseMenu)
+
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field: { onChange, ref, value }, fieldState: { error } }) => (
+        <FieldContainer size={size} classes={classes}>
+          <FieldWrapper
+            fieldId={inputId}
+            label={label}
+            classes={classes}
+            disabled={disabled}
+            value={value}
+            error={!!error?.message}
+          >
+            <div ref={containerRef} className='relative flex w-full items-center'>
+              <NumericFormat
+                thousandsGroupStyle='wan'
+                thousandSeparator=' '
+                prefix={getDelimiterForCurrency(currentCurrencyOption.currency)}
+                getInputRef={ref}
+                allowNegative={false}
+                id={inputId}
+                aria-invalid={error?.message ? 'true' : 'false'}
+                className={cn(
+                  'desk-body-regular-l h-[56px] w-full rounded-md bg-color-transparent px-4 pt-5 text-color-dark outline-none transition-all',
+                  classes?.input
+                )}
+                disabled={disabled}
+                value={value?.toString()}
+                onChange={onChange}
+                {...props}
+              />
+
+              <MenuTrigger onToggleMenu={onToggleMenu} currentCurrencyOption={currentCurrencyOption} />
+              <OptionList menuIsOpen={menuIsOpen} optionsList={currencyOptionsList} onSelectOption={onSelectOption} />
+            </div>
+          </FieldWrapper>
+
+          <MessageView
+            className={cn(classes?.message)}
+            intent={error?.message ? 'error' : 'simple'}
+            text={error?.message || helperText}
+            disabled={disabled}
+          />
+        </FieldContainer>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { InputCurrencyControl, type InputCurrencyControlProps } from './InputCurrencyControl'

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

@@ -0,0 +1,46 @@
+import type { ICurrencyOption, TCurrencyVariant } from '../InputCurrencyControl'
+
+export const getDelimiterForCurrency = (currency: TCurrencyVariant) => {
+  switch (currency) {
+    case 'euro':
+      return '\u20AC '
+    case 'dollars':
+      return '$ '
+    case 'rubles':
+      return '\u20BD '
+    case 'yuan':
+      return '¥ '
+    case 'dirhams':
+      return 'د.إ '
+    default:
+      return ''
+  }
+}
+
+export const currencyOptionsList: ICurrencyOption[] = [
+  {
+    ruName: 'Евро',
+    engName: 'Eur',
+    currency: 'euro'
+  },
+  {
+    ruName: 'Доллар США',
+    engName: 'USD',
+    currency: 'dollars'
+  },
+  {
+    ruName: 'Российский рубль',
+    engName: 'RUB',
+    currency: 'rubles'
+  },
+  {
+    ruName: 'Китайский Юань',
+    engName: 'CNY',
+    currency: 'yuan'
+  },
+  {
+    ruName: 'Дирхам ОАЭ',
+    engName: 'AED',
+    currency: 'dirhams'
+  }
+]

package/lib/shared/ui/formControlElements/inputCurrencyControl/model/useInputCurrency.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { type ICurrencyOption, type TCurrencyVariant } from '../InputCurrencyControl'
+import { currencyOptionsList } from './helpers'
+
+type TUseInputCurrencyReturn = {
+  menuIsOpen: boolean
+  currentCurrencyOption: ICurrencyOption
+  onSelectOption: (option: ICurrencyOption) => void
+  onToggleMenu: () => void
+  onCloseMenu: () => void
+}
+
+export const useInputCurrency = (defaultCurrency?: TCurrencyVariant): TUseInputCurrencyReturn => {
+  const [menuIsOpen, setMenuIsOpen] = React.useState(false)
+  const [currentCurrencyOption, setCurrencyOption] = React.useState<ICurrencyOption>(
+    () => currencyOptionsList?.find((option) => option?.currency === defaultCurrency) || currencyOptionsList[0]
+  )
+  const onSelectOption = (option: ICurrencyOption) => {
+    setCurrencyOption(option)
+    setMenuIsOpen(false)
+  }
+
+  const onToggleMenu = () => setMenuIsOpen((prev) => !prev)
+  const onCloseMenu = () => setMenuIsOpen(false)
+
+  return {
+    menuIsOpen,
+    currentCurrencyOption,
+    onSelectOption,
+    onToggleMenu,
+    onCloseMenu
+  }
+}

package/lib/shared/ui/formControlElements/inputCurrencyControl/ui/MenuTrigger.tsx

@@ -0,0 +1,20 @@
+import { type ICurrencyOption } from '../InputCurrencyControl'
+import { Icon } from '$/shared/ui'
+
+interface IMenuTriggerProps {
+  onToggleMenu: () => void
+  currentCurrencyOption: ICurrencyOption
+}
+
+export const MenuTrigger = ({ onToggleMenu, currentCurrencyOption }: IMenuTriggerProps) => {
+  return (
+    <button
+      type='button'
+      onClick={onToggleMenu}
+      className='desk-body-regular-l flex items-center gap-1 border-l border-solid border-blue-grey-500 pl-2 pr-4'
+    >
+      <span className='uppercase text-color-tetriary'>{currentCurrencyOption.engName}</span>
+      <Icon name='arrows/arrowRight' className='rotate-90 text-icon-blue-grey-700' />
+    </button>
+  )
+}

package/lib/shared/ui/formControlElements/inputCurrencyControl/ui/OptionList.tsx

@@ -0,0 +1,29 @@
+import { type ICurrencyOption } from '../InputCurrencyControl'
+import { cn } from '$/shared/utils'
+
+interface IOptionListProps {
+  optionsList: ICurrencyOption[]
+  menuIsOpen: boolean
+  onSelectOption: (option: ICurrencyOption) => void
+}
+
+export const OptionList = ({ optionsList, menuIsOpen, onSelectOption }: IOptionListProps) => {
+  return (
+    <div
+      className={cn(
+        'invisible absolute top-[64px] z-10 h-[208px] w-full scale-0 rounded-sm bg-color-white p-1 opacity-0 shadow-sm transition-all',
+        { 'opacity-1 scale-1 visible': menuIsOpen }
+      )}
+    >
+      {optionsList?.map((option) => (
+        <div
+          key={option.engName}
+          onClick={() => onSelectOption(option)}
+          className='desk-body-regular-l flex cursor-pointer items-center gap-2 rounded-sm bg-color-white p-2 hover:bg-color-blue-grey-100'
+        >
+          <span>{option.ruName}</span> <span className='uppercase'>({option.engName})</span>
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { MenuTrigger } from './MenuTrigger'
+export { OptionList } from './OptionList'