@scbt-ecom/ui 0.4.0 → 0.4.2

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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/index.ts

@@ -0,0 +1,14 @@
+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 { InputSliderControl, type InputSliderControlProps } from './inputSliderControl'
+export { TextareaControl, type ITextareaControlProps } from './TextareaControl'
+export { CalendarControl, type ICalendarControlProps } from './calendarControl'
+export { InputControlUploader, type IInputControlUploaderProps } from './inputControlUploader'
+export { ComboboxControl, type IComboboxControlProps } from './comboboxControl'
+export { EditorControl, type IEditorControlProps } from './editorControl'
+export { InputCurrencyControl, type InputCurrencyControlProps } from './inputCurrencyControl'

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

@@ -0,0 +1,87 @@
+'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/index.ts

@@ -0,0 +1 @@
+export { InputControl, type InputControlProps } from './InputControl'

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

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

@@ -0,0 +1,47 @@
+'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/index.ts

@@ -0,0 +1 @@
+export { InputControlUploader, type IInputControlUploaderProps } from './InputControlUploader'

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

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