dinocollab-core 1.0.1 → 1.0.2

package/src/form/validator.ts

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

@@ -1,44 +0,0 @@
-/* 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

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

package/src/lab/create.autocomplete.simple.tsx

@@ -1,57 +0,0 @@
-import { Autocomplete, AutocompleteProps, TextField } from '@mui/material'
-import React, { Component } from 'react'
-import { IFormInputBase } from '../form/types'
-
-interface AutocompleteSimpleModel<O = any> {
-  value: string
-  label?: string
-  other?: O
-}
-
-export type OptionsGetter<T, O = any> = (value: any, model: T) => AutocompleteSimpleModel<O>
-
-interface ISlots<O> {
-  options?: AutocompleteSimpleModel<O>[]
-  autocompleteProps?: AutocompleteProps<any, any, any, any>
-}
-
-interface IProps<T, O> extends IFormInputBase<T>, ISlots<O> {}
-
-interface IState {}
-
-function CreateAutocompleteSimple<T, O = any>(params: ISlots<O>) {
-  class AutocompleteSimple extends Component<IProps<T, O>> {
-    private _cachedSlots: ISlots<O> = {}
-    constructor(props: IProps<T, O>) {
-      super(props)
-      this._cachedSlots = this.mergeSlots(props.slots) ?? {}
-    }
-
-    get slots() {
-      return this._cachedSlots
-    }
-
-    get defaulValue(): string {
-      const { data, name } = this.props
-      return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)
-    }
-
-    mergeSlots = (currentSlots?: ISlots<O>): ISlots<O> => ({
-      options: currentSlots?.options ?? params.options
-    })
-
-    render() {
-      return (
-        <Autocomplete
-          disablePortal
-          options={this.slots.options ?? []}
-          sx={{ width: 300 }}
-          renderInput={(params) => <TextField {...params} label='Movie' />}
-        />
-      )
-    }
-  }
-  return AutocompleteSimple
-}
-
-export default CreateAutocompleteSimple

package/src/lab/create.dino-store.ts

@@ -1,59 +0,0 @@
-import { mergeObjects, QueryParam, tryParseObject } from '../utils'
-
-export interface DinoSubFilter {}
-
-interface DinoQueryModel {
-  meta?: string
-}
-
-interface DinoStoreParams<T> {
-  key: string
-  enableQueryParam?: boolean
-  enableLocalStorage?: boolean
-}
-
-export function DinoStore<T = any>(params: DinoStoreParams<T>) {
-  const storeKey = 'dino_store'
-  class DinoStoreBase {
-    data: Record<string, any> = {}
-    defaultValue: DinoSubFilter = { isTracked: false, listNumber: 0 }
-
-    setStore = (value: any) => {
-      localStorage.setItem(storeKey, JSON.stringify(value))
-    }
-
-    private getStore = () => {
-      const value = localStorage.getItem(storeKey)
-      return tryParseObject(value, {})
-    }
-
-    // setQueryUrl = (value: DinoSubFilter) => {
-    //   let obj: DinoSubFilter | undefined = value
-    //   // if (value.listNumber === this.defaultValue.listNumber && value.isTracked === this.defaultValue.isTracked) obj = undefined
-    //   QueryParam.Patch<DinoQueryModel>({ meta: obj ? JSON.stringify(obj) : undefined })
-    // }
-    // getQueryUrl = (): DinoSubFilter => {
-    //   const obj = QueryParam.Gets<DinoQueryModel>('meta')
-    //   return tryParseObject(obj.meta, {})
-    // }
-    // setLocaStorage = (value: DinoSubFilter) => {
-    //   localStorage.setItem(params.storeKey, JSON.stringify(value))
-    // }
-    // getLocalStorage = () => {
-    //   const value = localStorage.getItem(params.storeKey)
-    //   return tryParseObject(value, {})
-    // }
-    // setAll = (value: DinoSubFilter) => {
-    //   this.setQueryUrl(value)
-    //   this.setLocaStorage(value)
-    // }
-    // getAll = () => {
-    //   const obj1 = this.getQueryUrl()
-    //   const obj2 = this.getLocalStorage()
-    //   return mergeObjects(obj2, obj1)
-    // }
-  }
-  return new DinoStoreBase()
-}
-
-export {}

package/src/lab/create.multi-select-dropdown.tsx

@@ -1,189 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { FormControlLabel, List, ListItem, Popover, styled, TextField, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'
-import { Badge, badgeClasses, Box, BoxProps, Button, ButtonProps, Checkbox } from '@mui/material'
-import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined'
-import { mergeObjects } from '../utils'
-import HelpTooltip from '../components/help-tooltip'
-
-enum ELogic {
-  AND = 'and',
-  OR = 'or'
-}
-
-interface MultiSelectDropdownFilter {
-  logic?: ELogic
-}
-
-interface ISlots {
-  buttonProps?: ButtonProps
-  contentPorps?: BoxProps
-}
-
-interface IProps {
-  options?: string[]
-  value?: string[]
-  onChange?: (value: string[], filter?: MultiSelectDropdownFilter) => void
-  slots?: ISlots
-}
-
-interface IParams extends ISlots {
-  btnText: string
-  options?: string[]
-  placeholder?: string
-}
-
-function CreateMultiSelectDropdown(params: IParams) {
-  const MenuSelectMultiple: FC<IProps> = (props) => {
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-    const [selectedOptions, setSelectedOptions] = useState<string[]>([])
-    const [options, setOptions] = useState<string[]>(props.options ?? params.options ?? [])
-    const [search, setSearch] = useState('')
-    const [filterLogic, setFilterLogic] = useState<ELogic>(ELogic.AND)
-
-    const mergeConfig = {
-      buttonProps: mergeObjects<ButtonProps>(params?.buttonProps, props.slots?.buttonProps),
-      contentProps: props.slots?.contentPorps ?? params?.contentPorps ?? {}
-    }
-
-    const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-
-    const handleClose = (event?: {}, reason?: 'backdropClick' | 'escapeKeyDown') => {
-      setAnchorEl(null)
-    }
-
-    const handleToggle = (value: string) => {
-      setSelectedOptions((prev) => (prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]))
-    }
-
-    const handleClear = () => {
-      setSelectedOptions([])
-      props.onChange && props.onChange([])
-    }
-
-    const handleCancel = () => {
-      setSelectedOptions(props.value ?? [])
-      handleClose()
-    }
-
-    const handleApply = () => {
-      props.onChange && props.onChange(selectedOptions)
-      handleClose()
-    }
-
-    const getOptions = () => {
-      const values = props.value ?? []
-      const list = options.filter((x) => x.toLowerCase().includes(search.toLowerCase())).sort((a, b) => a.localeCompare(b))
-
-      const prioritized = list.filter((x) => values.includes(x))
-      const others = list.filter((x) => !values.includes(x))
-
-      return [...prioritized, ...others]
-    }
-
-    useEffect(() => {
-      if (props.options && props.options.length > 0) setOptions(props.options)
-    }, [props.options])
-
-    useEffect(() => {
-      setSelectedOptions(props.value ?? [])
-    }, [props.value])
-
-    return (
-      <>
-        <Button color='inherit' endIcon={<FilterAltOutlinedIcon />} {...mergeConfig.buttonProps} onClick={handleOpen}>
-          {params.btnText}
-          <ButtonBadge badgeContent={props.value?.length} color='error' overlap='circular' sx={{ transform: 'translateY(-50%) translateX(24px)' }} />
-        </Button>
-        <CustomPopover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
-          <WrapActions className='top'>
-            <TextField
-              size='small'
-              placeholder={params.placeholder ?? 'Search'}
-              fullWidth
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-            <ToggleButtonGroup
-              size='small'
-              exclusive
-              color='primary'
-              value={filterLogic}
-              onChange={(_, value) => {
-                if (value) setFilterLogic(value)
-              }}
-            >
-              <ToggleButton value={ELogic.AND}>AND</ToggleButton>
-              <ToggleButton value={ELogic.OR}>OR</ToggleButton>
-            </ToggleButtonGroup>
-            <HelpTooltip title='Filter Logic' small>
-              <Typography variant='body2' color='text.secondary'>
-                Choose how multiple categories are applied.
-                <br />
-                <strong> AND </strong> requires all selected categories, while
-                <br />
-                <strong> OR </strong> matches any.
-              </Typography>
-            </HelpTooltip>
-          </WrapActions>
-          <Box className='menu-content' {...mergeConfig.contentProps}>
-            <List>
-              {getOptions().map((x) => (
-                <ListItem key={x} sx={{ whiteSpace: 'nowrap' }}>
-                  <FormControlLabel label={x} control={<Checkbox checked={selectedOptions.includes(x)} onChange={() => handleToggle(x)} />} />
-                </ListItem>
-              ))}
-            </List>
-          </Box>
-          <WrapActions>
-            <Button size='small' onClick={handleClear} color='inherit'>
-              Clear
-            </Button>
-            <Box sx={{ flex: 1 }} />
-            <Button size='small' onClick={handleCancel} color='inherit'>
-              Cancel
-            </Button>
-            <Button size='small' variant='contained' onClick={handleApply}>
-              Apply
-            </Button>
-          </WrapActions>
-        </CustomPopover>
-      </>
-    )
-  }
-
-  return MenuSelectMultiple
-}
-
-export default CreateMultiSelectDropdown
-
-const heightItem = 58
-const CustomPopover = styled(Popover)({
-  '.MuiPaper-root': {
-    overflow: 'hidden',
-    position: 'relative',
-    width: '360px'
-  },
-  '.menu-content': {
-    overflowY: 'auto',
-    // minWidth: '300px',
-    maxHeight: `${heightItem * 5}px`,
-    margin: '2px 2px 2px 0'
-  }
-})
-
-const ButtonBadge = styled(Badge)({
-  [`& .${badgeClasses.badge}`]: {
-    top: '-12px',
-    right: '-6px'
-  }
-})
-const WrapActions = styled(Box)({
-  alignItems: 'center',
-  display: 'flex',
-  gap: '6px',
-  height: '58px',
-  padding: '8px 10px',
-  boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'
-})