@scbt-ecom/ui 0.4.2 → 0.4.3

package/lib/shared/ui/formControlElements/editorControl/EditorControl.tsx

@@ -1,82 +0,0 @@
-import { useEffect } from 'react'
-import Bold from '@tiptap/extension-bold'
-import Code from '@tiptap/extension-code'
-import Document from '@tiptap/extension-document'
-import History from '@tiptap/extension-history'
-import Italic from '@tiptap/extension-italic'
-import Paragraph from '@tiptap/extension-paragraph'
-import Placeholder from '@tiptap/extension-placeholder'
-import Strike from '@tiptap/extension-strike'
-import Subscript from '@tiptap/extension-subscript'
-import Superscript from '@tiptap/extension-superscript'
-import Text from '@tiptap/extension-text'
-import Underline from '@tiptap/extension-underline'
-import { EditorContent, useEditor } from '@tiptap/react'
-import { Controls } from './components/conrols'
-import { Menu } from './components/menu'
-import { cn } from '$/shared/utils'
-
-export interface IEditorControlProps {
-  value: string
-  setValue: (value: string) => void
-  placeholder?: string
-  className?: string
-}
-
-export const EditorControl = ({ value, setValue, placeholder, className }: IEditorControlProps) => {
-  const editor = useEditor({
-    extensions: [
-      Document,
-      Paragraph,
-      Text,
-      Placeholder.configure({
-        placeholder,
-        emptyNodeClass:
-          'first:before:text-grey first:before:float-left first:before:h-0 first:before:content-[attr(data-placeholder)] first:before:pointer-events-none'
-      }),
-      Bold,
-      Italic,
-      Underline,
-      Strike,
-      Subscript,
-      Superscript,
-      Code,
-      History
-    ],
-    editorProps: {
-      attributes: {
-        class: 'h-full flex flex-col gap-8 outline-none rounded p-4'
-      }
-    },
-    autofocus: true,
-    onUpdate: ({ editor }) => {
-      setValue(editor.getHTML())
-    },
-    content: value || '',
-    immediatelyRender: false
-  })
-
-  useEffect(() => {
-    if (editor && value !== undefined && value !== editor.getHTML()) {
-      editor.commands.setContent(value || '')
-    }
-  }, [editor, value])
-
-  if (!editor) {
-    return <div className='grow px-24'>NO EDITOR</div>
-  }
-
-  return (
-    <div
-      className={cn(
-        'relative mt-10 flex h-[700px] grow cursor-text flex-col rounded-md border border-transparent transition-colors hover:border-blue-grey-700',
-        { 'border-blue-grey-700': editor.isFocused },
-        className
-      )}
-    >
-      {editor && <Menu editor={editor} />}
-      <EditorContent editor={editor} className='flex-1 px-4' />
-      <Controls editor={editor} />
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/editorControl/components/conrols.tsx

@@ -1,136 +0,0 @@
-import { type Editor } from '@tiptap/core'
-import { Icon } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-type Props = {
-  editor: Editor
-}
-
-export const Controls = ({ editor }: Props) => {
-  return (
-    <div
-      onMouseDown={(event) => event.preventDefault()}
-      onClick={() => editor.commands.focus()}
-      className={cn(
-        'divide-grey/20 rounded-7 bg-white mt-auto flex h-[40px] w-full cursor-text items-center divide-x p-4 opacity-0 transition-opacity',
-        { 'cursor-default opacity-100': editor.isFocused }
-      )}
-    >
-      {editor.isFocused && (
-        <>
-          <div className='flex items-center gap-2 px-8 first:pl-0 last:pr-0'>
-            <section title='Отменить'>
-              <span className='size-32'>
-                <button
-                  type='button'
-                  onClick={() => editor.chain().focus().undo().run()}
-                  disabled={!editor.can().undo()}
-                  className={cn('rounded-7 text-grey pointer-events-none size-32 p-4 transition-colors', {
-                    'text-main hover:bg-grey/20 pointer-events-auto': editor.can().undo()
-                  })}
-                >
-                  <Icon name='arrows/arrowRight' className='size-full scale-y-[-1]' />
-                </button>
-              </span>
-            </section>
-            <section title='Вернуть'>
-              <span className='size-32'>
-                <button
-                  type='button'
-                  onClick={() => editor.chain().focus().redo().run()}
-                  disabled={!editor.can().redo()}
-                  className={cn('rounded-7 text-grey pointer-events-none size-32 p-4 transition-colors', {
-                    'text-main hover:bg-grey/20 pointer-events-auto': editor.can().redo()
-                  })}
-                >
-                  <Icon name='arrows/arrowRight' className='size-full scale-[-1]' />
-                </button>
-              </span>
-            </section>
-          </div>
-          <div className='flex items-center gap-2 px-8 first:pl-0 last:pr-0'>
-            <section title='Полужирный'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleBold().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('bold')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-            <section title='Курсив'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleItalic().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('italic')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-            <section title='Подчеркнутый'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleUnderline().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('underline')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-          </div>
-          <div className='flex items-center gap-2 px-8 first:pl-0 last:pr-0'>
-            <section title='Зачеркнутый'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleStrike().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('strike')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-            <section title='Нижний регистр'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleSubscript().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('subscript')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-            <section title='Верхний регистр'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleSuperscript().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('superscript')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-            <section title='Код'>
-              <button
-                type='button'
-                onClick={() => editor.chain().focus().toggleCode().run()}
-                className={cn('rounded-7 text-grey hover:bg-grey/20 hover:text-main size-32 p-4 transition-colors', {
-                  'bg-grey/20 text-main': editor.isActive('code')
-                })}
-              >
-                <Icon name='arrows/arrowRight' className='size-4' />
-              </button>
-            </section>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/lib/shared/ui/formControlElements/editorControl/components/menu.tsx

@@ -1,107 +0,0 @@
-import { BubbleMenu, type Editor } from '@tiptap/react'
-import { Icon } from '$/shared/ui'
-import { cn } from '$/shared/utils'
-
-type Props = {
-  editor: Editor
-}
-
-export const Menu = ({ editor }: Props) => {
-  return (
-    <BubbleMenu
-      editor={editor}
-      tippyOptions={{ duration: 100 }}
-      className='bg-white flex items-center rounded-md border border-blue-grey-700 p-2'
-    >
-      <div className='flex items-center gap-2 px-2 first:pl-0 last:pr-0'>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().undo().run()}
-          disabled={!editor.can().undo()}
-          className={cn('text-grey size-24 rounded-sm p-2 transition-colors', {
-            'text-main hover:bg-grey/20': editor.can().undo()
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-full scale-y-[-1]' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().redo().run()}
-          disabled={!editor.can().redo()}
-          className={cn('text-grey size-24 rounded-sm p-2 transition-colors', {
-            'text-main hover:bg-grey/20': editor.can().redo()
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-full scale-[-1]' />
-        </button>
-      </div>
-      <div className='flex items-center gap-2 px-2 first:pl-0 last:pr-0'>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('bold')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('italic')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('underline')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-      </div>
-      <div className='flex items-center gap-2 px-2 first:pl-0 last:pr-0'>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('strike')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleSubscript().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('subscript')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleSuperscript().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('superscript')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-        <button
-          type='button'
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          className={cn('text-grey hover:bg-grey/20 hover:text-main size-24 rounded-sm p-2 transition-colors', {
-            'bg-grey/20 text-main': editor.isActive('code')
-          })}
-        >
-          <Icon name='arrows/arrowRight' className='size-4' />
-        </button>
-      </div>
-    </BubbleMenu>
-  )
-}

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

@@ -1,60 +0,0 @@
-export { EditorControl, type IEditorControlProps } from './EditorControl'
-// 'use client'
-
-// /* eslint-disable react/no-unstable-nested-components */
-// import { Controller, type FieldValues } from 'react-hook-form'
-// import { BlockNoteView } from '@blocknote/mantine'
-// import { useCreateBlockNote } from '@blocknote/react'
-// import '@blocknote/core/fonts/inter.css'
-// import '@blocknote/mantine/style.css'
-// import type { TControlledInputProps } from '../model'
-// import { FieldContainer } from '../ui'
-
-// export interface IEditorControlProps<T extends FieldValues> extends TControlledInputProps<T> {
-//   classes?: any
-// }
-
-// export const EditorControl = <T extends FieldValues>({ control, classes, size = 'full', ...props }: IEditorControlProps<T>) => {
-//   const editor = useCreateBlockNote({
-//     initialContent: [
-//       {
-//         type: 'paragraph',
-//         content: 'Welcome to this demo!'
-//       },
-//       {
-//         type: 'paragraph'
-//       },
-//       {
-//         type: 'bulletListItem',
-//         content: 'Link'
-//       }
-//     ]
-//   })
-
-//   console.log(editor, '@editor')
-
-//   const changeFn = async (change) => {
-//     // Converts the editor's contents from Block objects to HTML and store to state.
-//     const html = await editor.blocksToHTMLLossy(editor.document)
-//     change(html)
-//   }
-
-//   return (
-//     <Controller
-//       control={control}
-//       name={props.name}
-//       render={({ field: { onChange, ref: controlledRef, value }, fieldState: { error } }) => {
-//         console.log(value, '@value')
-
-//         return (
-//           <FieldContainer size={size} classes={classes}>
-//             <div className='mt-10 w-[600px] rounded-md border border-warm-grey-200 px-3 py-4'>
-//               <BlockNoteView theme='light' editor={editor} onChange={() => changeFn(onChange)} ref={controlledRef} />
-//             </div>
-//             <div>{value}</div>
-//           </FieldContainer>
-//         )
-//       }}
-//     />
-//   )
-// }

package/lib/shared/ui/formControlElements/editorControl/ui/RemoveBlockButton.tsx

@@ -1,23 +0,0 @@
-import { type SideMenuProps, useBlockNoteEditor, useComponentsContext } from '@blocknote/react'
-import { Icon } from '$/shared/ui'
-
-export const RemoveBlockButton = (props: SideMenuProps) => {
-  const editor = useBlockNoteEditor()
-
-  const Components = useComponentsContext()!
-
-  return (
-    <Components.SideMenu.Button
-      label='Remove block'
-      icon={
-        <Icon
-          name='general/close'
-          className='text-icon-negative-default'
-          onClick={() => {
-            editor.removeBlocks([props.block])
-          }}
-        />
-      }
-    />
-  )
-}

package/lib/shared/ui/formControlElements/editorControl/ui/ResetBlockType.tsx

@@ -1,17 +0,0 @@
-import { type DragHandleMenuProps, useBlockNoteEditor, useComponentsContext } from '@blocknote/react'
-
-export function ResetBlockTypeItem(props: DragHandleMenuProps) {
-  const editor = useBlockNoteEditor()
-
-  const Components = useComponentsContext()!
-
-  return (
-    <Components.Generic.Menu.Item
-      onClick={() => {
-        editor.updateBlock(props.block, { type: 'paragraph' })
-      }}
-    >
-      Reset Type
-    </Components.Generic.Menu.Item>
-  )
-}

package/lib/shared/ui/formControlElements/inputControl/InputControl.tsx

@@ -1,87 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Controller, type FieldValues } from 'react-hook-form'
-import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TInputCommonProps } from '../model'
-import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
-import { useInputPassword } from './model/hooks'
-import { cn } from '$/shared/utils'
-
-export interface InputControlProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
-  classes?: Partial<TAdditionalInputClassesWithAttachment>
-  variant?: 'base' | 'password'
-}
-
-export const InputControl = <T extends FieldValues>({
-  label,
-  size = 'full',
-  helperText,
-  control,
-  classes,
-  badge,
-  icon,
-  swapPosition,
-  disabled,
-  variant,
-  onClickIcon,
-  onKeyDownIcon,
-  ...props
-}: InputControlProps<T>) => {
-  const inputId = React.useId()
-  const isPassport = variant === 'password'
-  const { displayPasswordIcon, passportIsVisible, handleShowPassword } = useInputPassword(onClickIcon)
-
-  return (
-    <Controller
-      control={control}
-      name={props.name}
-      render={({ field: { onChange, ref: controlledRef, value }, fieldState: { error } }) => {
-        return (
-          <FieldContainer size={size} classes={classes}>
-            <FieldWrapper
-              fieldId={inputId}
-              label={label}
-              classes={classes}
-              disabled={disabled}
-              value={value}
-              error={!!error?.message}
-            >
-              <>
-                <input
-                  ref={controlledRef}
-                  aria-invalid={error?.message ? 'true' : 'false'}
-                  type={isPassport && !passportIsVisible ? 'password' : 'text'}
-                  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
-                  )}
-                  id={inputId}
-                  value={value}
-                  onChange={onChange}
-                  disabled={disabled}
-                  {...props}
-                />
-                <FieldAttachment
-                  onClickIcon={isPassport ? handleShowPassword : onClickIcon}
-                  onKeyDownIcon={onKeyDownIcon}
-                  badge={badge}
-                  icon={isPassport ? displayPasswordIcon() : 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}
-            />
-          </FieldContainer>
-        )
-      }}
-    />
-  )
-}

package/lib/shared/ui/formControlElements/inputControl/model/hooks.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import { Icon } from '../../../icon/Icon'
-
-export const useInputPassword = (onClickIcon?: (...args: unknown[]) => unknown) => {
-  const [passportIsVisible, setPassportIsVisible] = React.useState(false)
-
-  const handleShowPassword = () => {
-    setPassportIsVisible((prev) => !prev)
-    if (onClickIcon) {
-      onClickIcon()
-    }
-  }
-
-  const displayPasswordIcon = React.useCallback(() => {
-    switch (passportIsVisible) {
-      case true:
-        return <Icon name='general/hiddenEye' className='size-5 text-icon-blue-grey-600' />
-      case false:
-        return <Icon name='general/showEye' className='size-5 text-icon-blue-grey-600' />
-      default:
-        return <Icon name='general/hiddenEye' className='size-5 text-icon-blue-grey-600' />
-    }
-  }, [passportIsVisible])
-
-  return { passportIsVisible, handleShowPassword, displayPasswordIcon }
-}

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

@@ -1,47 +0,0 @@
-'use client'
-
-import { type DropzoneOptions } from 'react-dropzone'
-import { Controller, type FieldValues } from 'react-hook-form'
-import { type TControlledInputProps } from '../model'
-import { defaultDropzoneOptions } from './model'
-import { type TClassesUploader } from './model/types'
-import { Uploader } from './ui'
-
-export interface IInputControlUploaderProps<T extends FieldValues> extends TControlledInputProps<T> {
-  dropzoneOptions?: DropzoneOptions
-  disabled?: boolean
-  classes?: Partial<TClassesUploader>
-}
-
-export const InputControlUploader = <T extends FieldValues>({
-  control,
-  disabled,
-  helperText,
-  classes,
-  dropzoneOptions = defaultDropzoneOptions,
-  ...props
-}: IInputControlUploaderProps<T>) => {
-  return (
-    <Controller
-      control={control}
-      name={props.name}
-      render={({ field: { onChange, ref, value: controlledFiles }, fieldState: { error } }) => {
-        return (
-          <Uploader
-            error={error}
-            helperText={helperText}
-            disabled={disabled}
-            classes={classes}
-            ref={ref}
-            controlledFiles={controlledFiles}
-            onValueChange={(file) => {
-              onChange(file)
-            }}
-            dropzoneOptions={dropzoneOptions}
-            {...props}
-          />
-        )
-      }}
-    />
-  )
-}

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

@@ -1,18 +0,0 @@
-import { type DropzoneOptions } from 'react-dropzone'
-
-export const defaultDropzoneOptions: DropzoneOptions = {
-  maxSize: 4 * 1024 * 1024,
-  multiple: true,
-  accept: {
-    'image/jpeg': [],
-    'image/png': [],
-    'application/pdf': []
-  }
-}
-
-export const FilesErrorCode = {
-  FileInvalidType: 'file-invalid-type',
-  FileTooLarge: 'file-too-large',
-  FileTooSmall: 'file-too-small',
-  TooManyFiles: 'too-many-files'
-} as const

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

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