dinocollab-core 1.0.0

package/src/components/input-debounce-timer.tsx

@@ -0,0 +1,138 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react'
+import { TextField, InputAdornment, IconButton, Fade, Tooltip, styled, Divider, Box } from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+import CancelIcon from '@mui/icons-material/Cancel'
+
+interface IProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabledTimer?: boolean
+}
+
+const InputDebounceTimer: FC<IProps> = (props) => {
+  const refInput = useRef<HTMLInputElement>(null)
+  const handleClear = () => {
+    props.onChange && props.onChange('')
+    if (refInput.current) refInput.current.value = ''
+  }
+
+  const timer = useRef({ timeout: 700, store: 0 })
+  const handleChangeCallback = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const value = e.target.value
+      clearTimeout(timer.current.store)
+      if (props?.disabledTimer === true) return
+      timer.current.store = setTimeout(() => {
+        props.onChange && props.onChange(value)
+      }, timer.current.timeout) as any
+    },
+    [props]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        clearTimeout(timer.current.store)
+        const value = refInput.current?.value ?? ''
+        props.onChange && props.onChange(value)
+      }
+    },
+    [props]
+  )
+
+  const handleClickSearch = useCallback(() => {
+    clearTimeout(timer.current.store)
+    const value = refInput.current?.value ?? ''
+    props.onChange && props.onChange(value)
+  }, [props])
+
+  useEffect(() => {
+    if (refInput.current) refInput.current.value = props.value ?? ''
+    return () => {}
+  }, [props.value])
+
+  return (
+    <WrapTextField className='theme-white'>
+      <TextField
+        fullWidth
+        variant='outlined'
+        placeholder={props.placeholder}
+        size='small'
+        defaultValue={props.value}
+        onChange={handleChangeCallback}
+        inputRef={refInput}
+        onKeyDown={handleKeyDown}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position='start'>
+              <IconButton type='submit' onClick={handleClickSearch}>
+                <SearchIcon />
+              </IconButton>
+              <Divider flexItem orientation='vertical' sx={{ height: '24px', transform: 'translateY(-50%)', mx: '3px' }} />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position='end'>
+              <Fade in={!!props.value}>
+                <Tooltip title='Clear'>
+                  <IconButton onClick={handleClear}>
+                    <CancelIcon fontSize='small' />
+                  </IconButton>
+                </Tooltip>
+              </Fade>
+            </InputAdornment>
+          )
+        }}
+      />
+    </WrapTextField>
+  )
+}
+
+export default InputDebounceTimer
+
+const WrapTextField = styled(Box)<{ className?: string }>(({ className }) => {
+  const isWhite = className?.includes('theme-white')
+  return {
+    flex: 1,
+    '--input-search-text-color': isWhite ? '#000' : '#ffffff',
+    '--input-search-label-color': isWhite ? '#404040' : '#b0b0b0',
+    '--input-search-bg-color': isWhite ? '#f6f6f6' : 'rgba(255, 255, 255, 0.1)',
+    '--color-primary': '#42a5f5',
+
+    '& .MuiOutlinedInput-root': {
+      color: 'var(--input-search-text-color)',
+      backgroundColor: 'var(--input-search-bg-color)',
+      borderRadius: 8,
+      '& fieldset': {
+        borderColor: 'transparent'
+      },
+      '&:hover fieldset': {
+        borderColor: 'rgba(66, 165, 245, 0.7)' // $color-primary 70%
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: 'var(--color-primary)'
+      }
+    },
+
+    '& .MuiInputBase-input': {
+      color: 'var(--input-search-text-color)'
+    },
+
+    '& .MuiInputLabel-root': {
+      color: 'var(--input-search-label-color)'
+    },
+
+    '& .MuiInputLabel-root.Mui-focused': {
+      color: '#90caf9'
+    },
+
+    '& .MuiInputAdornment-root': {
+      color: 'var(--input-search-text-color)'
+    },
+
+    '& .MuiIconButton-root': {
+      color: 'var(--input-search-text-color)'
+    }
+  }
+})

package/src/components/loading-buttons.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+import { Button, ButtonProps, CircularProgress, Fade, styled } from '@mui/material'
+
+export interface LoadingButtonProps extends ButtonProps {
+  loading?: boolean
+}
+
+export const LoadingButton: FC<LoadingButtonProps> = ({ loading, children, ...props }) => {
+  return (
+    <ButtonCustom {...props} disabled={props.disabled || loading}>
+      <Fade in={!loading}>
+        <span>{children}</span>
+      </Fade>
+      <Fade in={loading}>
+        <div className='LoadingButton-progress'>
+          <CircularProgress size={24} />
+        </div>
+      </Fade>
+    </ButtonCustom>
+  )
+}
+
+const ButtonCustom = styled(Button)({
+  position: 'relative',
+  [`.LoadingButton-progress`]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})

package/src/components/text-editor.preview.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react'
+
+const TextEditorPreview: FC<{ children: string }> = (props) => {
+  const contentRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    // Lấy phần tử template
+    const template = document.createElement('template')
+    template.innerHTML = `
+      <link rel="stylesheet" href="css/quill.snow.css">
+      <div class='ql-editor'>${props.children}</div>
+    `
+
+    // Tạo shadow DOM và chèn nội dung từ template
+    if (contentRef.current) {
+      const shadowRoot = contentRef.current.shadowRoot || contentRef.current.attachShadow({ mode: 'open' })
+
+      shadowRoot.innerHTML = '' // Reset nội dung cũ
+      shadowRoot.appendChild(template.content.cloneNode(true))
+    }
+  }, [props.children])
+
+  return (
+    <>
+      <div ref={contentRef}></div>
+    </>
+  )
+}
+
+export default TextEditorPreview

package/src/components/text-editor.tsx

@@ -0,0 +1,125 @@
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { Component } from 'react'
+import { Box, styled, SxProps, Theme } from '@mui/material'
+/**
+ * yarn add react-quill@2.0.0
+ */
+import ReactQuill from 'react-quill'
+import 'react-quill/dist/quill.snow.css'
+
+export const textEditorClasses = {
+  root: 'DinoTextEditor-root',
+  fullscreen: 'DinoTextEditor-fullscreen'
+}
+
+const EditorToolbar: any = {}
+
+EditorToolbar.formats = [
+  'header',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'blockquote',
+  'list',
+  'bullet',
+  'indent',
+  'link',
+  'image',
+  'align',
+  'color',
+  'background'
+]
+
+EditorToolbar.modules = {
+  toolbar: [
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+    [{ color: [] }, { background: [] }],
+    ['link', 'image'],
+    ['clean']
+  ]
+}
+
+interface IProps {
+  id?: string
+  name: string
+  sx?: SxProps<Theme>
+  readOnly?: boolean
+  defautValue?: string
+  error?: boolean
+  onBlur?: () => void
+}
+
+interface IState {
+  value: string
+}
+
+class TextEditor extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    this.state = { value: props.defautValue ?? '' }
+  }
+  handleChange = (value: string) => {
+    let str = value
+    if (value === '<p><br></p>') str = ''
+    this.setState({ value: str })
+  }
+
+  id = 0
+  render() {
+    const classes = [textEditorClasses.root]
+    if (this.props.error) classes.push('error')
+    return (
+      <Wrapper id={this.props.id} sx={this.props.sx} className={classes.join(' ')}>
+        {!this.props.readOnly && <input key={++this.id} name={this.props.name} defaultValue={this.state.value} hidden />}
+        <ReactQuill
+          readOnly={this.props.readOnly}
+          placeholder='Enter the message'
+          value={this.state.value}
+          modules={EditorToolbar.modules}
+          formats={EditorToolbar.formats}
+          onChange={this.handleChange}
+          onBlur={this.props.onBlur}
+        />
+      </Wrapper>
+    )
+  }
+}
+
+export default TextEditor
+
+export { default as TextEditorPreview } from './text-editor.preview'
+
+const borderColor = '#d32f2f'
+
+const Wrapper = styled(Box)({
+  margin: 0,
+  minHeight: '450px',
+  display: 'flex',
+  '& .quill': { flex: 1 },
+  '& .ql-container': {
+    height: 'calc(100% - 42px)',
+    borderBottomLeftRadius: '6px',
+    borderBottomRightRadius: '6px'
+  },
+  '& .ql-toolbar': {
+    borderTopLeftRadius: '6px',
+    borderTopRightRadius: '6px'
+  },
+  '&.error .ql-toolbar': {
+    borderTopColor: borderColor,
+    borderLeftColor: borderColor,
+    borderRightColor: borderColor
+  },
+  '&.error .ql-container': {
+    borderBottomColor: borderColor,
+    borderLeftColor: borderColor,
+    borderRightColor: borderColor
+  },
+  '&.error .ql-editor.ql-blank::before': {
+    color: borderColor
+  }
+})

package/src/form/README.md

@@ -0,0 +1,55 @@
+## 🧩 Cấu trúc tổng quát
+
+`DinoForm` gồm hai phần chính: các thành phần nền tảng (Base) và các thành phần nhập liệu (Inputs).
+
+### 1. Base (Nền tảng)
+
+| Tên                    | Kiểu                      | Mô tả                                                           |
+| ---------------------- | ------------------------- | --------------------------------------------------------------- |
+| `ModalWrap`            | `React Component`         | Lớp bộc khi dùng chung với GlobalModal, Form từ Table.          |
+| `BottomBarWrap`        | `React Component`         | Component thay thế cho BottomBar của FormBase.                  |
+| `FormValidator`        | `class`                   | Lớp xác thực, cung cấp phương thức tạo schema kiểm tra dữ liệu. |
+| `validator`            | `object`                  | Tạo nhanh FormValidator                                         |
+| `createFormBase`       | `React Component Creator` | Tạo form cơ bản                                                 |
+| `createFormComfirm`    | `React Component Creator` | Tạo hộp thoại xác nhận khi gửi hoặc huỷ biểu mẫu.               |
+| `createFormGridLayout` | `React Component Creator` | Tạo layout dạng lưới để tổ chức các input trong form.           |
+
+---
+
+### 2. Inputs (Thành phần nhập liệu)
+
+| Tên                      | Kiểu                      | Mô tả                                                        |
+| ------------------------ | ------------------------- | ------------------------------------------------------------ |
+| `createInput`            | `React Component Creator` | Input text cơ bản, có thể dùng cho tên, tiêu đề, v.v.        |
+| `createInputFile`        | `React Component Creator` | Input cho phép người dùng chọn và tải lên file.              |
+| `createDatePicker`       | `React Component Creator` | Chọn ngày bằng lịch, tương thích với dayjs.                  |
+| `createAutocompleteChip` | `React Component Creator` | Tạo autocomplete cho phép chọn nhiều giá trị dưới dạng chip. |
+| `createSelectSimple`     | `React Component Creator` | Select tĩnh với danh sách tùy chọn truyền trực tiếp.         |
+| `createSelectWithApi`    | `React Component Creator` | Select động, lấy dữ liệu từ API.                             |
+| `createTextEditor`       | `React Component Creator` | Trình soạn thảo văn bản phong phú (rich text editor).        |
+
+---
+
+## 🛠️ Cách sử dụng
+
+### Tạo form cơ bản `createFormBase`
+
+### Tạo form dạng lưới `createFormGridLayout`
+
+Tạo layout dạng lưới để tổ chức các input trong form.
+
+```ts
+export interface IDataModel {
+  Id: string
+  TextValue: string
+  DateTimeValue: string
+  FileValue: string
+}
+
+export const FormInstance = DinoForm.createFormGridLayout<IDataModel>({
+  configs: [{ key: 'Id', label: 'Id', placeholder: 'Id' }],
+  validate: DinoForm.validator({
+    Id: { Rules: [{ rule: SingleRuleValidate.Required }] }
+  })
+})
+```

package/src/form/create.autocomplete.chips.tsx

@@ -0,0 +1,199 @@
+import React, { Component } from 'react'
+import { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'
+import RemoveIcon from '@mui/icons-material/Remove'
+import { IFormInputBase } from './types'
+import { getErrorMessage } from './helper'
+
+interface IOptions {
+  optionItems?: string[]
+  limitTags?: number
+  separator?: string
+  saveLocalStorageByKey?: string
+}
+
+interface IProps<T> extends IFormInputBase<T, IOptions> {}
+
+interface IState {
+  value: string[]
+  options: string[]
+}
+
+export default function CreateAutocompleteChip<T>(options?: IOptions) {
+  const separator = options?.separator || '|'
+  const limitTags = options?.limitTags || 2
+  const storeItems = options?.saveLocalStorageByKey ? AutocompleteChipStore.initial(options.saveLocalStorageByKey) : undefined
+
+  return class AutocompleteChip extends Component<IProps<T>, IState> {
+    constructor(props: IProps<T>) {
+      super(props)
+      this.state = {
+        value: this.getDefaultValue(),
+        options: this.getSelectOptions()
+      }
+    }
+
+    refInput: HTMLInputElement | null = null
+    render() {
+      const { name } = this.props
+      return (
+        <>
+          <Autocomplete
+            multiple
+            freeSolo
+            limitTags={limitTags}
+            value={this.state.value}
+            onChange={this.handleAddOption}
+            options={this.state.options}
+            renderOption={(props, option) => (
+              <ItemOption {...props} key={option}>
+                <Typography variant='subtitle1' sx={{ flex: 1 }}>
+                  {option}
+                </Typography>
+                {this.isBtnRemoveOption(option) && (
+                  <Tooltip title='Remove option' arrow placement='left'>
+                    <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>
+                      <RemoveIcon fontSize='small' />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </ItemOption>
+            )}
+            renderTags={(tagValue, getTagProps) => {
+              return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)
+            }}
+            renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}
+          />
+          <input
+            ref={(ref) => {
+              this.refInput = ref
+            }}
+            hidden
+            type='text'
+            name={name?.toString()}
+            defaultValue={this.state.value.join(separator)}
+          />
+        </>
+      )
+    }
+
+    handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
+      e.preventDefault()
+      e.stopPropagation()
+      console.log(value)
+      const list = storeItems?.delete(value) ?? []
+      this.setState({ options: list })
+    }
+
+    handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {
+      if (options?.saveLocalStorageByKey) {
+        const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options
+        this.setState({ value: newValue, options })
+      } else {
+        this.setState({ value: newValue })
+      }
+      if (this.refInput) {
+        this.refInput.value = newValue.join(separator)
+      }
+      this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)
+    }
+
+    isBtnRemoveOption = (value: string) => {
+      const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0
+      const selectOptions = options?.optionItems ?? this.props.slots?.optionItems ?? []
+      const isDefault = selectOptions.findIndex((x) => x === value) < 0
+      return isDefault && isSelectedOption
+    }
+
+    getSelectOptions = () => {
+      let items = options?.optionItems ?? []
+      if (options?.saveLocalStorageByKey) {
+        items = storeItems?.getItemsAndMerge(items) ?? []
+      }
+      return items
+    }
+
+    getTextFieldProps = (): TextFieldProps => {
+      const { name, label, placeholder, onBlur, messageErrors } = this.props
+      const eMessage = getErrorMessage(messageErrors, name)
+      return {
+        label,
+        placeholder: placeholder || 'Add new',
+        onBlur: () => {
+          if (!name) return
+          onBlur && onBlur(name)
+        },
+        error: eMessage.error,
+        helperText: eMessage.message
+      }
+    }
+
+    getDefaultValue = (): string[] => {
+      const { name, data } = this.props
+      const value = name ? data?.[name]?.toString() : ''
+      return value?.split(separator).filter((x) => !!x) ?? []
+    }
+  }
+}
+
+const ItemOption = styled('li')({
+  display: 'flex',
+  alignItems: 'center'
+})
+
+type TChipStoreRoot = { [key: string]: string[] }
+
+class AutocompleteChipStore {
+  private storeKeyRoot = 'autocomplete_chip_store'
+  private storeKey: string
+  constructor(key: string, defaultValue?: string[]) {
+    this.storeKey = key
+    if (defaultValue) {
+      this.setChild(defaultValue)
+    }
+  }
+
+  static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)
+
+  private getRoot = (): TChipStoreRoot => {
+    try {
+      const res = window.localStorage.getItem(this.storeKeyRoot)
+      return JSON.parse(res ?? '{}')
+    } catch (error) {
+      return {}
+    }
+  }
+
+  private getChild = (): string[] => {
+    return this.getRoot()[this.storeKey]
+  }
+
+  private setRoot = (value: TChipStoreRoot) => {
+    window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))
+  }
+
+  private setChild = (value: string[]) => {
+    const obj = this.getRoot()
+    obj[this.storeKey] = value
+    this.setRoot(obj)
+  }
+
+  getItemsAndMerge = (value: string[]): string[] => {
+    try {
+      return Array.from(new Set([...this.getChild(), ...value])).sort()
+    } catch (error) {
+      return value
+    }
+  }
+
+  setItems = (options: string[], value: string[]): string[] => {
+    const list = Array.from(new Set([...options, ...value])).sort()
+    this.setChild(list)
+    return list
+  }
+
+  delete = (value: string) => {
+    const list = this.getChild().filter((x) => x !== value)
+    this.setChild(list)
+    return list
+  }
+}