dinocollab-core 1.0.0

package/src/form/create.text-editor.tsx

@@ -0,0 +1,161 @@
+import React, { Component, createRef } from 'react'
+import { Box, BoxProps, IconButton, styled, Tooltip, Typography } from '@mui/material'
+import FullscreenIcon from '@mui/icons-material/Fullscreen'
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
+import { IFormInputBase } from './types'
+import { getErrorMessage } from './helper'
+import TextEditor, { textEditorClasses } from '../components/text-editor'
+
+interface IParams {
+  id: string
+  title: string
+}
+
+function CreateTextEditor<T>(params: IParams) {
+  interface IProps extends IFormInputBase<T> {}
+
+  interface IState {
+    isFullscreen: boolean
+  }
+
+  class Editor extends Component<IProps, IState> {
+    contentRef
+    constructor(props: IProps) {
+      super(props)
+      this.state = {
+        isFullscreen: false
+      }
+      this.contentRef = createRef<HTMLDivElement | null>()
+    }
+
+    componentDidMount() {
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+    }
+
+    handleFullscreenChange = () => {
+      this.setState({ isFullscreen: !!document.fullscreenElement })
+    }
+
+    handleFullscreenToggle = () => {
+      if (this.contentRef.current) {
+        if (!document.fullscreenElement) {
+          this.contentRef.current.requestFullscreen().catch((err) => {
+            console.error(`Error attempting to enable full-screen mode: ${err.message}`)
+          })
+        } else {
+          document.exitFullscreen()
+        }
+      }
+    }
+
+    getWrapClasses = () => {
+      const classes = []
+      if (this.state.isFullscreen) classes.push(textEditorClasses.fullscreen)
+      return classes.join(' ')
+    }
+
+    render() {
+      const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)
+      const dValue = (this.props.name ? this.props.data?.[this.props.name] : '')?.toString() ?? ''
+
+      return (
+        <Box id={params.id} ref={this.contentRef} sx={{ backgroundColor: '#fff' }}>
+          {this.state.isFullscreen && (
+            <WrapTitle>
+              <Typography variant='h4' sx={{ fontWeight: 600, flex: 1, textAlign: 'center' }}>
+                {params.title}
+              </Typography>
+            </WrapTitle>
+          )}
+          <Wrap className={this.getWrapClasses()}>
+            <WrapActions>
+              <Tooltip title={this.state.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'} arrow>
+                <CustomButton sx={{ color: '#06c' }} onClick={this.handleFullscreenToggle}>
+                  {this.state.isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                </CustomButton>
+              </Tooltip>
+            </WrapActions>
+            <WrapTextEditor>
+              <TextEditor
+                defautValue={dValue}
+                name={this.props.name?.toString() ?? ''}
+                readOnly={this.props.disabled}
+                error={errorMessage.error}
+                onBlur={() => {
+                  if (!this.props.name) return
+                  this.props.onBlur?.(this.props.name)
+                }}
+              />
+            </WrapTextEditor>
+          </Wrap>
+        </Box>
+      )
+    }
+  }
+  return Editor
+}
+
+export default CreateTextEditor
+
+const editorHeight = 64
+
+const Wrap = styled(Box)(({ theme }) => ({
+  maxWidth: theme.breakpoints.values.xl,
+  margin: '0 auto',
+  position: 'relative',
+  [`&.${textEditorClasses.fullscreen} .${textEditorClasses.root}`]: {
+    height: `calc(100vh - ${editorHeight + 10}px)`
+  },
+  [`&.${textEditorClasses.fullscreen}`]: {
+    width: '871px'
+  }
+}))
+
+const WrapTitle = styled(Box)({
+  height: `${editorHeight}px`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+})
+
+const WrapActions = styled(({ children, ...props }: BoxProps) => (
+  <Box {...props}>
+    <Box>{children}</Box>
+  </Box>
+))({
+  position: 'sticky',
+  top: '-1px',
+  zIndex: 2,
+  '& > div': {
+    height: 0,
+    display: 'flex',
+    justifyContent: 'right',
+    padding: '0 6px'
+  }
+})
+
+const CustomButton = styled(IconButton)({
+  flex: '0 0 auto',
+  marginTop: '1px',
+  width: '40px',
+  height: '40px'
+})
+
+const WrapTextEditor = styled(Box)({
+  backgroundColor: '#fff',
+  width: '100%',
+  '& .ql-container': {
+    fontFamily: '"Roboto", serif',
+    fontSize: '14px'
+  },
+  '& .ql-toolbar': {
+    position: 'sticky',
+    top: '-1px',
+    backgroundColor: '#fff',
+    zIndex: 1
+  }
+})

package/src/form/dino-form.tsx

@@ -0,0 +1,40 @@
+import FormValidator from './validator'
+import FormModalWrapper from './modal-wrapper'
+import CreateFormBase from './create.form-base'
+import CreateInputFile from './create.input.file'
+import CreateInputBase from './create.input-base'
+import CreateDatePicker from './create.date-picker'
+import CreateTextEditor from './create.text-editor'
+import CreateDateExpired from './create.date-expired'
+import CreateFormComfirm from './create.form-comfirm'
+import CreateSelectSimple from './create.select-simple'
+import CreateSelectWithApi from './create.select-with-api'
+import CreateFormGridLayout from './create.form-grid-layout'
+import CreateAutocompleteChip from './create.autocomplete.chips'
+import { FormBottomBarWrap } from './create.form-grid-layout.units'
+
+class DinoFormBase {
+  //#region Base
+  ModalWrap = FormModalWrapper
+  BottomBarWrap = FormBottomBarWrap
+  FormValidator = FormValidator
+  validator = FormValidator.initial
+  createFormBase = CreateFormBase
+  createFormComfirm = CreateFormComfirm
+  createFormGridLayout = CreateFormGridLayout
+  //#endregion
+
+  //#region Inputs
+  createDateExpired= CreateDateExpired
+  createDatePicker = CreateDatePicker
+  createAutocompleteChip = CreateAutocompleteChip
+  createInput = CreateInputBase
+  createInputFile = CreateInputFile
+  createSelectSimple = CreateSelectSimple
+  createSelectWithApi = CreateSelectWithApi
+  createTextEditor = CreateTextEditor
+  //#endregion
+}
+
+const DinoForm = new DinoFormBase()
+export default DinoForm

package/src/form/helper.ts

@@ -0,0 +1,132 @@
+import { AxiosError } from 'axios'
+import FormValidator, { IModelError, IRuleOption, PartialError } from './validator'
+
+type AnyObject = { [key: string]: any }
+const ObjectAssign = <T extends AnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {
+  if (sources.length < 1) {
+    return model
+  }
+  const temps = sources.filter((x) => x) as T[]
+  return temps.reduce((a, b) => {
+    a = Object.assign(a, b)
+    return a
+  }, model)
+}
+
+const DeepMerge = <T extends AnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {
+  sources = sources.filter((x) => !!x)
+  if (sources.length < 1) {
+    return model
+  }
+  const temps = [model, ...sources].filter((x) => x)
+  const fieldObjects = temps.reduce<string[]>((a, b) => {
+    if (!b) return a
+    const fields = Object.keys(b).filter((x) => typeof b[x] === 'object' && !Array.isArray(b[x]))
+    a.push(...fields)
+    return a
+  }, [])
+
+  const target = ObjectAssign<T>(model, ...temps.slice(1))
+  const temp = target as any
+  const temp2 = temps.slice(1).filter((x) => !!x) as Partial<T>[]
+  for (let index = 0; index < fieldObjects.length; index++) {
+    const element = fieldObjects[index]
+    temp[element] = DeepMerge({}, temp[element], ...temp2.map((x) => x[element]))
+  }
+  return target
+}
+
+export const getErrorMessage = function <TModel>(MessageErrors: PartialError<TModel> | undefined, key?: keyof TModel): IModelError {
+  return MessageErrors && (MessageErrors as any)[key] ? { ...(MessageErrors as any)[key][0], error: true } : { error: false, message: '' }
+}
+
+type ModelBase = {
+  [key: string]: any
+}
+
+export const convertFormDataToJson = function <TModel>(form: FormData): Partial<TModel> {
+  const data = Array.from(form).reduce<Partial<TModel>>((a: any, b: any[]) => {
+    if (!a[b[0]]) {
+      a[b[0]] = b[1]
+    } else if (Array.isArray(a[b[0]])) {
+      a[b[0]].push(b[1])
+    } else {
+      a[b[0]] = [a[b[0]], b[1]]
+    }
+    return a
+  }, {} as any) as any
+
+  Object.keys(data).forEach((key) => {
+    const value = data[key]
+    if (typeof value === 'string' && (value.toString().toLocaleLowerCase() === 'true' || value.toString().toLocaleLowerCase() === 'false')) {
+      data[key] = value.toString().toLocaleLowerCase() === 'true'
+    }
+  })
+  return data
+}
+
+export const SingleValidate = function <TModel, TPartial = TModel>(
+  key: keyof TModel,
+  modelState: TPartial,
+  MessageErrors: PartialError<TModel>,
+  Validator: FormValidator<TPartial>
+) {
+  const messageErrors = Validator.run(modelState) as { [key: string]: any }
+  if (messageErrors) {
+    let errors = (MessageErrors || {}) as { [key: string]: any }
+    const keys = Object.keys(modelState as any)
+      .filter((key) => !!(modelState as any)[key])
+      .filter((key) => ((modelState as any)[key] instanceof File ? !!((modelState as any)[key] as File).size : false))
+    keys.push(key as string)
+    keys.forEach((key) => {
+      if (messageErrors[key]) {
+        errors[key] = messageErrors[key]
+      } else {
+        delete errors[key]
+      }
+    })
+    return errors
+  }
+  return null
+}
+
+export const GetErrorFromResponse = function <TModel>(error: AxiosError, ModelRender: TModel) {
+  const data = error.response?.data as any
+  if (data) {
+    const keys = Object.keys(ModelRender as any)
+    const MessageErrors: PartialError<TModel> | undefined = {}
+    keys.forEach((key) => {
+      const messages = data[key]
+      if (Array.isArray(messages) && messages.length > 0) {
+        ;(MessageErrors as any)[key] = [{ message: messages[0] }]
+      }
+    })
+    return MessageErrors
+  }
+}
+
+export const ClearFieldEmpty = <TModel>(model: Extract<TModel, ModelBase>) => {
+  Object.keys(model).forEach((key: keyof Extract<TModel, ModelBase>) => {
+    if (!model[key]) delete model[key]
+  })
+}
+
+export const ValidateMerge = <TModel>(...validateor: (FormValidator<TModel> | undefined)[]): FormValidator<TModel> => {
+  const configs = validateor.map((x) => x?.configs).filter((x) => !!x)
+
+  let temp: any = Object.assign({}, ...configs)
+
+  for (let index = 0; index < Object.keys(temp).length; index++) {
+    const key = Object.keys(temp)[index]
+    //merge configs
+    temp[key] = DeepMerge({}, ...configs.map((x) => (x ? x[key] : { Rules: [] })))
+    //merge rules
+    temp[key].Rules = configs
+      .map((x) => (x ? x[key] : { Rules: [] }))
+      .reduce<IRuleOption<TModel>[]>((a, b) => {
+        a.push(...(b?.Rules ?? []))
+        return a
+      }, [])
+  }
+  return new FormValidator(temp)
+}

package/src/form/index.ts

@@ -0,0 +1,12 @@
+export * from './types'
+
+export { default as FormValidator } from './validator'
+export * from './validator'
+
+export { default as DinoForm } from './dino-form'
+
+export { getErrorMessage, convertFormDataToJson } from './helper'
+
+export type { ISelectWithApiOption } from './create.select-with-api'
+
+export type { InputBaseImage } from './create.input-base'

package/src/form/modal-wrapper.tsx

@@ -0,0 +1,75 @@
+import React, { FC, PropsWithChildren } from 'react'
+import { Box, Breakpoint, IconButton, Paper, styled, SxProps, Theme, Typography } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import { MapGlobalModalContext } from '../api-context'
+
+interface IProps extends PropsWithChildren {
+  title: string
+  size?: Breakpoint
+  fullHeight?: boolean
+  onCloseClick?: () => void
+  slots?: {
+    sxTopbarProps?: SxProps<Theme>
+    beforeTitle?: JSX.Element
+  }
+}
+const FormModalWrapper: FC<IProps> = (props) => {
+  return MapGlobalModalContext((context) => (
+    <Wrap size={props.size} className={props.fullHeight ? 'full-height' : undefined}>
+      <TopBar sx={props.slots?.sxTopbarProps}>
+        {props.slots?.beforeTitle && (
+          <>
+            {props.slots.beforeTitle}
+            <Box flex={1} />
+          </>
+        )}
+        <Typography component='h3' variant='subtitle1' sx={{ mt: '2px', ml: '8px', fontWeight: 700 }}>
+          {props.title}
+        </Typography>
+        <Box flex={1} />
+        <BtnClose
+          onClick={() => {
+            props.onCloseClick && props.onCloseClick()
+            context.close()
+          }}
+        >
+          <CloseIcon />
+        </BtnClose>
+      </TopBar>
+      {props.children}
+    </Wrap>
+  ))
+}
+
+export default FormModalWrapper
+
+const Wrap = styled(Paper)<{ size?: Breakpoint }>(({ theme, size }) => ({
+  maxHeight: 'calc(100vh - 24px)',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  maxWidth: 'calc(100vw - 24px)',
+  width: theme.breakpoints.values[size ?? 'lg'],
+  [theme.breakpoints.down('sm')]: { width: 'calc(100vw - 24px)' },
+  '&.full-height': {
+    height: 'calc(100vh - 24px)'
+  }
+}))
+
+const BtnClose = styled(IconButton)({
+  flex: '0 0 auto',
+  color: '#3c3c3c',
+  '& svg': { transition: 'all 0.2s' },
+  '&:hover svg': { color: '#ff200c' }
+})
+
+const TopBar = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0 8px 0 8px',
+  gap: '6px',
+  flex: '0 0 auto',
+  boxShadow: 'rgba(145, 158, 171, 0.1) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 0px 24px -4px',
+  height: '48px'
+})

package/src/form/types.ts

@@ -0,0 +1,16 @@
+import { PartialError } from './validator'
+
+export interface IFormBase<TModel> {
+  data?: Partial<TModel>
+  messageErrors: PartialError<TModel>
+  onBlur: (keyName: keyof TModel) => void
+  disabled?: boolean
+}
+
+export interface IFormInputBase<TModel, TSlots = any> extends Partial<IFormBase<TModel>> {
+  name?: keyof TModel
+  label?: React.ReactNode
+  placeholder?: string
+  defaultValue?: any
+  slots?: TSlots
+}

package/src/form/validator.ts

@@ -0,0 +1,202 @@
+import { formatFileSize } from '../utils'
+
+declare type ModelBase = { [key: string]: any }
+
+export enum SingleRuleValidate {
+  Required = 'Required',
+  Regex = 'Regex',
+  RequiredValue = 'RequiredValue',
+  Array = 'Array',
+  Number = 'Number',
+  Email = 'Email',
+  PhoneNumber = 'PhoneNumber',
+  Url = 'Url',
+  File = 'File',
+  FileRequired = 'FileRequired',
+  Custom = 'Custom'
+}
+
+const MessageDefault = {
+  Required: 'The {0} is required',
+  Regex: 'The {0} is not match {1}',
+  RequiredValue: 'the {0} is not equal {1}',
+  Array: 'The {0} is not valid',
+  Number: '{0} must be a number',
+  Email: 'The {0} is not valid',
+  PhoneNumber: 'The {0} is not valid',
+  Url: 'The {0} is not valid',
+  File: 'File size must be less than {1}',
+  FileRequired: 'The {0} is required',
+  Custom: 'Error Custom'
+}
+
+export interface RuleOptions {
+  File: {
+    maxSize: number
+    // toal size of files
+    all?: boolean
+  }
+}
+
+export const MapRuleOptions = <TK extends keyof RuleOptions>(key: TK, options?: RuleOptions[TK]) => options
+
+export interface IRuleOption<TModel = any> {
+  rule: SingleRuleValidate
+  message?: string
+  Value?: RegExp | ((value: any, model: TModel) => boolean) | number | Array<any> | boolean
+  options?: any
+}
+
+interface IConfigValue<TModel = any> {
+  Rules: IRuleOption<TModel>[]
+  label?: string
+}
+
+export interface IModelError {
+  message: string
+  error: boolean
+}
+
+export type IFormValidatorConfig<TModel> = {
+  [key in keyof Extract<TModel, ModelBase>]?: IConfigValue<TModel>
+}
+
+export type PartialError<TModel> = {
+  [key in keyof TModel]?: IRuleOption<TModel>[]
+}
+
+export default class FormValidator<TModel> {
+  configs: IFormValidatorConfig<TModel>
+  constructor(configs: IFormValidatorConfig<TModel>) {
+    this.configs = configs
+  }
+
+  static initial = <T>(configs: IFormValidatorConfig<T>) => new FormValidator(configs)
+
+  AddRules = (key: keyof TModel, ...rule: IRuleOption<TModel>[]) => {
+    let fieldConfig = this.configs[key]
+    if (!fieldConfig) {
+      fieldConfig = { Rules: [] }
+      this.configs[key] = fieldConfig
+    }
+    fieldConfig.Rules.push(...rule)
+    return this
+  }
+
+  Required = (RuleOption: IRuleOption, value: any) => {
+    return value === null || value === undefined || value === ''
+  }
+  Regex = (RuleOption: IRuleOption, value: string, Regex: RegExp) => {
+    if (!value) return false
+    return !(RuleOption.Value as RegExp).test(value)
+  }
+  RequiredValue = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    return value !== RuleOption.Value
+  }
+  Custom = (RuleOption: IRuleOption, value: any, model: any) => {
+    if (typeof RuleOption.Value === 'function') {
+      return RuleOption.Value(value, model)
+    }
+    return true
+  }
+  Array = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    if (typeof RuleOption.Value === 'number') {
+      return Array.isArray(value) ? value.length <= RuleOption.Value : true
+    }
+    return true
+  }
+  Number = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    return isNaN(Number(value))
+  }
+  Email = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+    return !regex.test(value)
+  }
+  PhoneNumber = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    const phoneRegex = /^(\+?\d{1,4}[\s-]?)?((\(\d{1,4}\))|\d{1,4})[\s-]?\d{1,4}[\s-]?\d{1,9}$/
+    return !phoneRegex.test((value ?? '').trim())
+  }
+  Url = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    try {
+      new URL(value)
+      return false
+    } catch (err) {
+      return true
+    }
+  }
+  File = (RuleOption: IRuleOption, value: any) => {
+    if (!value) return false
+    const options = MapRuleOptions('File', RuleOption.options)
+    const files: File[] = Array.isArray(value) ? value : [value]
+    if (!options) return false
+    if (options.all === true) {
+      const size = files.reduce((a, b) => {
+        a += b.size
+        return a
+      }, 0)
+      return size > options.maxSize
+    } else {
+      return files.some((x) => x.size > options.maxSize)
+    }
+  }
+  FileRequired = (RuleOption: IRuleOption, value: any) => {
+    const files: File[] = Array.isArray(value) ? value : [value]
+    return !!files.filter((x) => !!x).some((x) => x.size <= 0)
+  }
+  RenderMessage = (RuleOption: IRuleOption, key: string, label?: string) => {
+    if (!RuleOption.message) {
+      RuleOption.message = MessageDefault[RuleOption.rule].replace('{0}', label ?? key)
+      switch (RuleOption.rule) {
+        case SingleRuleValidate.Regex: {
+          RuleOption.message = RuleOption.message.replace('{1}', (RuleOption.Value as RegExp).source)
+          break
+        }
+        case SingleRuleValidate.RequiredValue: {
+          RuleOption.message = RuleOption.message.replace('{1}', RuleOption.Value?.toString() ?? '')
+          break
+        }
+        case SingleRuleValidate.File: {
+          const options = MapRuleOptions('File', RuleOption.options)
+          if (options?.all === true) {
+            RuleOption.message = `Total file size must be less than ${formatFileSize((options?.maxSize ?? 0) / 1024)}`
+          } else {
+            RuleOption.message = RuleOption.message.replace('{1}', formatFileSize((options?.maxSize ?? 0) / 1024))
+          }
+          break
+        }
+        default:
+          break
+      }
+    }
+    RuleOption.message = RuleOption.message.replace('{0}', key)
+    return RuleOption
+  }
+  run = (model: TModel) => {
+    const keys = Object.keys(this.configs)
+    const data: PartialError<TModel> = {}
+    keys.forEach((key) => {
+      const config = this.configs[key]
+      if (!config) return
+      const tmp = this.Executed(config, (model as any)[key], model)
+      if (tmp.length < 1) return
+      ;(data as any)[key] = tmp.map((x) => this.RenderMessage(x, key, config.label))
+    })
+    return data
+  }
+  Executed = (Config: IConfigValue, valueField: any, model: any) => {
+    return Config.Rules.filter((Value) => {
+      const action = (this as any)[Value.rule.toString()]
+      return action && action(Value, valueField, model)
+    })
+  }
+}
+
+export const CreateFormValidator = <TModel>() => {
+  return new FormValidator<Partial<TModel>>({})
+}

package/src/hooks/index.ts

@@ -0,0 +1,44 @@
+/* eslint-disable react-hooks/exhaustive-deps*/
+import { useEffect, useState } from 'react'
+
+export const useCheckScrolled = () => {
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY > 0
+      if (scrolled !== isScrolled) setIsScrolled(scrolled)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [isScrolled])
+
+  useEffect(() => {
+    const scrolled = window.scrollY > 0
+    if (scrolled !== isScrolled) setIsScrolled(scrolled)
+  }, [])
+
+  return { isScrolled }
+}
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    if (delay <= 0) {
+      setDebouncedValue(value)
+      return
+    }
+
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './api-context'
+export * from './components'
+export * from './form'
+export * from './hooks'
+export * from './redux'
+export * from './table'
+export * from './utils'