dinocollab-core 1.0.0 → 1.0.2

package/src/components/custom.breadcrumbs.tsx

@@ -1,67 +0,0 @@
-import React, { FC } from 'react'
-import { Box, Breadcrumbs, styled, Typography, TypographyProps } from '@mui/material'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
-
-export interface CustomBreadcrumbConfig {
-  label: string
-  url?: string
-  propsGetter?: () => TypographyProps
-  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-}
-
-interface IProps {
-  value?: CustomBreadcrumbConfig[]
-}
-
-const CustomBreadcrumbs: FC<IProps> = (props) => {
-  const list = props.value ?? []
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, x: CustomBreadcrumbConfig) => {
-    e.preventDefault()
-    e.stopPropagation()
-    x.onClick && x.onClick(e)
-  }
-
-  const getItemProps = (item: CustomBreadcrumbConfig): TypographyProps => {
-    if (item.propsGetter) return item.propsGetter()
-    return item.url ? ({ component: 'a', href: item.url } as TypographyProps) : {}
-  }
-
-  return (
-    <Breadcrumbs>
-      {list.map((x, i) => {
-        const isClick = !!x.onClick || !!x.url
-        return (
-          <WrapTypography
-            key={'key' + i}
-            {...getItemProps(x)}
-            onClick={x.onClick ? (e: any) => handleClick(e, x) : undefined}
-            className={isClick ? 'clickable' : ''}
-          >
-            {i < 1 && <ArrowBackIosIcon sx={{ fontSize: '16px', mb: '3px', color: '#000' }} />}
-            <Typography variant='subtitle1' sx={{ fontWeight: 600 }} noWrap>
-              <span>{x.label}</span>
-            </Typography>
-          </WrapTypography>
-        )
-      })}
-    </Breadcrumbs>
-  )
-}
-
-export default CustomBreadcrumbs
-
-const WrapTypography = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none',
-  '&.clickable': {
-    cursor: 'pointer'
-  },
-  '& .MuiTypography-root': {
-    color: 'var(--color-title)'
-  },
-  '&.clickable:hover .MuiTypography-root': {
-    textDecoration: 'underline'
-  }
-})

package/src/components/help-tooltip.tsx

@@ -1,75 +0,0 @@
-import React, { FC, PropsWithChildren, ReactNode } from 'react'
-import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material'
-import { SxProps, Theme, TooltipProps, TypographyProps, styled, tooltipClasses } from '@mui/material'
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
-
-interface IProps {
-  title: string
-  small?: boolean
-  sxIcon?: SxProps<Theme>
-}
-
-const HelpTooltip: FC<PropsWithChildren<IProps>> = (props) => (
-  <HtmlTooltip
-    arrow
-    placement='bottom'
-    title={
-      <Stack sx={{ gap: '6px', py: '6px', minWidth: '200px', maxWidth: '400px ' }}>
-        <TooltipHeaderText>{props.title}</TooltipHeaderText>
-        <Divider />
-        <Box sx={{ p: '6px 12px' }}>{props.children}</Box>
-      </Stack>
-    }
-  >
-    <Box sx={{ cursor: 'default', ...props.sxIcon }}>
-      <IconButton size='small'>
-        <HelpOutlineIcon fontSize={props.small ? 'small' : 'medium'} sx={{ color: 'rgb(25,103,210)' }} />
-      </IconButton>
-    </Box>
-  </HtmlTooltip>
-)
-
-export default HelpTooltip
-
-interface IHelpTooltipWrapProps {
-  content: ReactNode
-  title: string
-  children: React.ReactNode
-}
-
-export const HelpTooltipWrap: FC<IHelpTooltipWrapProps> = (props) => (
-  <HtmlTooltip
-    arrow
-    placement='bottom'
-    title={
-      <Stack sx={{ gap: '6px', py: '6px', minWidth: '200px', maxWidth: '400px ' }}>
-        <TooltipHeaderText>{props.title}</TooltipHeaderText>
-        <Divider />
-        <Box sx={{ p: '6px 12px' }}>{props.content}</Box>
-      </Stack>
-    }
-  >
-    <Box sx={{ cursor: 'default' }}>{props.children}</Box>
-  </HtmlTooltip>
-)
-
-const TooltipHeaderText = styled((props: TypographyProps) => <Typography variant='subtitle1' {...props} />)({
-  color: '#0095ff',
-  fontWeight: 700,
-  padding: '0 10px'
-})
-
-const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: '#fff',
-    color: '#3c3c3c',
-    maxWidth: 500,
-    minHeight: 120,
-    fontSize: theme.typography.pxToRem(12),
-    borderRadius: '8px',
-    boxShadow: 'rgba(0, 0, 0, 0.08) 0px 6px 30px'
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: '#fff'
-  }
-}))

package/src/components/image-with-fallback.tsx

@@ -1,51 +0,0 @@
-import React, { Fragment, ReactNode, useEffect, useState } from 'react'
-import { useDebounce } from '../hooks'
-
-export interface ImageWithFallbackPropsOwner {
-  src?: string
-  alt?: string
-  fallbackSrc: string
-  loading?: ReactNode
-  debounceDelay?: number
-}
-
-type ImgProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof ImageWithFallbackPropsOwner>
-
-export interface ImageWithFallbackProps extends ImgProps, ImageWithFallbackPropsOwner {}
-
-const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({ src, fallbackSrc, alt, loading, debounceDelay = 0, ...props }) => {
-  const debouncedSrc = useDebounce(src, debounceDelay)
-  const debouncedFallbackSrc = useDebounce(fallbackSrc, debounceDelay)
-
-  const effectiveSrc = debounceDelay > 0 ? debouncedSrc : src
-  const effectiveFallbackSrc = debounceDelay > 0 ? debouncedFallbackSrc : fallbackSrc
-
-  const [isLoading, setLoading] = useState(true)
-  const [imgSrc, setImgSrc] = useState(effectiveSrc ?? effectiveFallbackSrc)
-
-  useEffect(() => {
-    setImgSrc(effectiveSrc ?? effectiveFallbackSrc)
-    setLoading(true)
-  }, [effectiveSrc, effectiveFallbackSrc])
-
-  const loadingElement = isLoading && loading ? loading : <></>
-
-  return (
-    <Fragment>
-      {loadingElement}
-      <img
-        {...props}
-        src={imgSrc}
-        alt={alt}
-        onLoadStart={() => setLoading(true)}
-        onLoad={() => setLoading(false)}
-        onError={() => {
-          setImgSrc(fallbackSrc)
-          setLoading(false)
-        }}
-      />
-    </Fragment>
-  )
-}
-
-export default ImageWithFallback

package/src/components/index.tsx

@@ -1 +0,0 @@
-export {}

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

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

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

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

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

@@ -1,55 +0,0 @@
-## 🧩 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 }] }
-  })
-})
-```