dinocollab-core 1.0.0

package/src/table/toolbar-pannel.tsx

@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import { GridToolbar, GridToolbarQuickFilter } from '@mui/x-data-grid'
+import { OverridableComponent } from '@mui/material/OverridableComponent'
+import { Box, Button, ButtonProps, styled, SvgIconTypeMap, Typography, TypographyProps } from '@mui/material'
+import { BtnFormCreate } from './ui.buttons'
+import CustomBreadcrumbs, { CustomBreadcrumbConfig } from '../components/custom.breadcrumbs'
+import HelpTooltip from '../components/help-tooltip'
+
+export interface IToolbarPannelOptions {
+  searchInclude?: string[]
+  formCreate?: React.ReactNode
+  afterAction?: React.ReactNode
+  breadcrumbs?: CustomBreadcrumbConfig[]
+}
+
+export interface IToolbarPannelProps extends IToolbarPannelOptions {
+  title?: React.ReactNode
+  afterTitle?: React.ReactNode
+}
+
+class ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {
+  render() {
+    return (
+      <Box sx={{ padding: '0 6px' }}>
+        {this.renderTitle()}
+        <Box sx={{ display: 'flex' }}>
+          <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+            <GridToolbar sx={{ padding: 0 }} />
+            {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}
+            {this.props.afterAction}
+          </Box>
+          <Box sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <GridToolbarQuickFilter fullWidth variant='standard' size='small' debounceMs={800} quickFilterParser={(x: any) => [x]} />
+              {this.renderEndAdornment()}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+
+  renderTitle = () => {
+    const { title, afterTitle, breadcrumbs } = this.props
+
+    const isVisible = !!title || !!breadcrumbs || !!afterTitle
+    if (!isVisible) return <></>
+
+    let titleElm = title
+    if (typeof title === 'string') titleElm = <Title>{title}</Title>
+    if (breadcrumbs) titleElm = <CustomBreadcrumbs value={breadcrumbs} />
+
+    return (
+      <Box sx={{ height: '56px', display: 'flex', alignItems: 'center' }}>
+        {titleElm}
+        {afterTitle}
+      </Box>
+    )
+  }
+
+  renderEndAdornment = () => {
+    if (!this.props.searchInclude || this.props.searchInclude.length <= 0) return <></>
+    return (
+      <HelpTooltip title='The search includes' small>
+        <SeachHelp>
+          {this.props.searchInclude.map((item, index) => (
+            <li key={index}>
+              <Typography variant='body2'>{item}</Typography>
+            </li>
+          ))}
+        </SeachHelp>
+      </HelpTooltip>
+    )
+  }
+}
+
+export default ToolbarPannel
+
+interface IToolBarButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon'> {
+  icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & { muiName: string }
+}
+
+export const ToolBarButton = styled(({ icon: Icon, ...props }: IToolBarButtonProps) => (
+  <Button variant='contained' color='primary' size='small' startIcon={<Icon fontSize='small' />} {...props} />
+))({})
+
+const SeachHelp = styled('ul')({
+  margin: '0 0 0 18px',
+  padding: 0,
+  li: {
+    position: 'relative'
+  },
+  'li::after': {
+    content: '"►"',
+    display: 'inline-block',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    position: 'absolute',
+    left: '-18px'
+  }
+})
+
+const Title = styled((props: TypographyProps) => <Typography noWrap variant='subtitle1' {...props} />)({
+  fontWeight: 700,
+  flex: 1
+})

package/src/table/types.ts

@@ -0,0 +1,50 @@
+import { GridColDef, GridLogicOperator, GridPaginationModel, GridSortDirection, GridValidRowModel } from '@mui/x-data-grid'
+
+export type CustomGridColDef<T extends GridValidRowModel> = {
+  [key in keyof T]?: Omit<GridColDef, 'field'>
+}
+
+export type TableQueryDetail = 'filter' | 'quickSearch' | 'sort' | 'pagination' | undefined
+
+export interface CustomGridSortItem<T> {
+  field: keyof T
+  sort: GridSortDirection
+}
+
+export type CustomGridSortModel<T> = CustomGridSortItem<T>[]
+
+export interface CustomGridFilterItem<T> {
+  id?: number | string
+  field: keyof T
+  value?: any
+  operator: GridLogicOperator
+}
+
+export interface CustomGridFilterModel<T> {
+  items: CustomGridFilterItem<T>[]
+  logicOperator?: GridLogicOperator
+  quickFilterValues?: any[]
+  quickFilterLogicOperator?: GridLogicOperator
+  quickFilterExcludeHiddenColumns?: boolean
+}
+
+export interface TableQueryParams<T> {
+  pagination?: GridPaginationModel
+  filter?: CustomGridFilterModel<T>
+  sort?: CustomGridSortModel<T>
+  loading?: boolean
+  detail?: TableQueryDetail
+}
+
+export interface TableData<T> {
+  items?: T[]
+  rowTotal?: number
+}
+
+export interface TableState<T> {
+  tableData: TableData<T>
+  tableQueryParams: TableQueryParams<T>
+  tableQueryThunk: TableQueryParams<T>
+}
+
+export type TableStateRedux<T, K extends keyof TableState<T> = keyof TableState<T>> = Pick<TableState<T>, K>

package/src/table/ui.buttons.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from 'react'
+import { Button, IconButton, IconButtonProps, Tooltip } from '@mui/material'
+import ViewListIcon from '@mui/icons-material/ViewList'
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import { MapGlobalModalContext, TModalReason } from '../api-context'
+
+export const BtnFormCreate: FC<{ children: React.ReactNode }> = (props) => {
+  return MapGlobalModalContext((context) => (
+    <Tooltip title='Create new'>
+      <Button
+        size='small'
+        onClick={() => context.show({ renderContent: () => props.children })}
+        startIcon={<AddCircleOutlineIcon fontSize='small' />}
+        sx={{ fontWeight: 600 }}
+        variant='contained'
+      >
+        Create
+      </Button>
+    </Tooltip>
+  ))
+}
+
+export interface IBtnFormDetailProps {
+  formDetail: React.ReactNode
+  onOpenModal?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onCloseModal?: (reason?: TModalReason) => void
+}
+
+export const BtnFormDetail: FC<IBtnFormDetailProps> = (props) => {
+  return MapGlobalModalContext((context) => (
+    <Tooltip title='Detail'>
+      <IconButton
+        onClick={(e) => {
+          props.onOpenModal?.(e)
+          context.show({ backdropActivated: true, renderContent: () => props.formDetail, onClose: props.onCloseModal })
+        }}
+      >
+        <ViewListIcon />
+      </IconButton>
+    </Tooltip>
+  ))
+}
+
+interface IBtnDetailProps {
+  onClick?: IconButtonProps['onClick']
+}
+
+export const BtnDetail: FC<IBtnDetailProps> = (props) => (
+  <Tooltip title='Detail'>
+    <IconButton onClick={props.onClick}>
+      <ViewListIcon />
+    </IconButton>
+  </Tooltip>
+)

package/src/table/ui.units.tsx

@@ -0,0 +1,189 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Box, BoxProps, Chip, Divider, IconButton, styled, SxProps, Theme, Tooltip, Typography, TypographyProps } from '@mui/material'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import { dayjsCustom, mergeObjects } from '../utils'
+import { HelpTooltipWrap } from '../components/help-tooltip'
+import CopyToClipboard from '../components/copy-to-clipboard'
+
+//#region CellImageSmall
+interface CellImageSmallProps {
+  value: string
+  imageUri?: string
+  fallbackSrc?: string
+}
+
+export const CellImageSmall: FC<CellImageSmallProps> = (props) => {
+  const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.fallbackSrc)
+  useEffect(() => {
+    setImgSrc(props.imageUri ?? props.fallbackSrc)
+  }, [props.imageUri, props.fallbackSrc])
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', gap: '10px' }}>
+      <ImageSmall src={imgSrc} onError={() => setImgSrc(props.fallbackSrc)} />
+      <Typography variant='body1'>{props.value}</Typography>
+    </Box>
+  )
+}
+
+interface ImageSmallFallbackProps {
+  imageUri?: string
+  imageFallback?: string
+  sx?: SxProps<Theme>
+}
+
+export const ImageSmallFallback: FC<ImageSmallFallbackProps> = (props) => {
+  const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.imageFallback)
+  useEffect(() => {
+    setImgSrc(props.imageUri ?? props.imageFallback)
+  }, [props.imageUri, props.imageFallback])
+  return <ImageSmall src={imgSrc} onError={() => setImgSrc(props.imageFallback)} sx={props.sx} />
+}
+
+const ImageSmall = styled('img')({
+  backgroundRepeat: 'no-repeat',
+  height: '50px',
+  width: '50px',
+  backgroundSize: 'contain',
+  borderRadius: '8px',
+  boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'
+})
+//#endregion
+
+//#region CellBase
+
+export interface CellBaseOptions {
+  openInNewTab?: boolean
+  beforeLine?: boolean
+  copyToClipboard?: boolean
+  imageUrl?: string
+  imageFallbackSrc?: string
+  valueFormatter?: (value?: string) => string
+  wrapProps?: BoxProps
+  typographyProps?: TypographyProps
+}
+
+interface CellBaseProps extends CellBaseOptions {
+  value?: string
+  valueFormatted?: string
+}
+
+export const CellBase: FC<CellBaseProps> = (props) => {
+  const value = props.valueFormatted ?? props.value
+  const isCopyToClipboard = !!props.copyToClipboard && !!value
+  return (
+    <CellBaseWrap title={value} {...props.wrapProps}>
+      {props.imageUrl && <ImageSmallFallback imageUri={props.imageUrl} sx={{ mr: '10px' }} imageFallback={props.imageFallbackSrc} />}
+      <Typography variant='body2' component='span' noWrap sx={{ flex: 1 }} {...props.typographyProps}>
+        {value}
+      </Typography>
+      {value && props.openInNewTab === true && (
+        <Tooltip arrow title='Open new tab'>
+          <IconButton component='a' href={value} target='_blank'>
+            <OpenInNewIcon fontSize='small' sx={{ color: '#1A75E2' }} />
+          </IconButton>
+        </Tooltip>
+      )}
+      {isCopyToClipboard && <CopyToClipboard value={value} />}
+      {value && props.beforeLine === true && <Divider flexItem variant='middle' orientation='vertical' />}
+    </CellBaseWrap>
+  )
+}
+
+const CellBaseWrap = styled(({ children, ...props }: BoxProps) => (
+  <Box {...props}>
+    <div>{children}</div>
+  </Box>
+))({
+  flex: 1,
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  top: 0,
+  left: 0,
+  '& > div': {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0
+  }
+})
+//#endregion
+
+//#region Chips
+export interface CellChipsProps {
+  value?: string
+  separator?: string
+  maximum?: number
+}
+
+export const CellChips: FC<CellChipsProps> = (props) => {
+  if (typeof props.value !== 'string') return props.value ?? <></>
+
+  const list = props.value.split(props?.separator ?? '|').filter((x) => !!x)
+  const displayList = props?.maximum ? list.slice(0, props.maximum) : list
+  const remainingCount = props?.maximum && list.length > props.maximum ? list.length - props.maximum : 0
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', height: '100%' }}>
+      {displayList.map((x, i) => (
+        <CustomChip key={'key' + i} label={x} size='small' />
+      ))}
+      {remainingCount > 0 && (
+        <HelpTooltipWrap
+          title='Artists'
+          content={
+            <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>
+              {list.map((x, i) => (
+                <CustomChip key={'key' + i} label={x} size='small' />
+              ))}
+            </Box>
+          }
+        >
+          <CustomChip key='remaining' label={`+${remainingCount}`} size='small' />
+        </HelpTooltipWrap>
+      )}
+    </Box>
+  )
+}
+
+const CustomChip = styled(Chip)({
+  lineHeight: 1
+})
+//#endregion
+
+//#region Date
+export interface CellDatePropsOwner {
+  formatString?: string
+  showRelative?: boolean
+  typographyProps?: TypographyProps
+  styledGetter?: (value: any) => SxProps<Theme>
+}
+export interface CellDateProps extends CellDatePropsOwner {
+  value: any
+}
+
+export const CellDate: FC<CellDateProps> = (props) => {
+  try {
+    const showRelative = props?.showRelative ?? false
+    const date = dayjsCustom(props.value)
+    const formatted = date.format(props.formatString)
+    const value = showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted
+    const sx = props.styledGetter ? props.styledGetter(props.value) : { flex: 1 }
+    const mergeTypographyProps = mergeObjects<TypographyProps>({}, props.typographyProps ?? {}, { sx })
+    return (
+      <Typography variant='body2' component='span' noWrap {...mergeTypographyProps}>
+        {value}
+      </Typography>
+    )
+  } catch {
+    return (
+      <Typography variant='body2' component='span' noWrap>
+        format invalid
+      </Typography>
+    )
+  }
+}
+//#endregion

package/src/utils/dayjs-config.ts

@@ -0,0 +1,13 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(relativeTime)
+
+// Thiết lập múi giờ mặc định theo trình duyệt
+dayjs.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone)
+
+export default dayjs

package/src/utils/helpers.ts

@@ -0,0 +1,171 @@
+import dayjs from 'dayjs'
+
+export const sleep = (sec: number) => new Promise((res) => setTimeout(res, sec))
+
+export const fetchDelay = async function <TModel>(action: () => Promise<TModel>, sec: number) {
+  const [res] = await Promise.all([action(), sleep(sec)])
+  return res
+}
+
+export const windowScrollToTop = (options?: ScrollToOptions, delay?: number) => {
+  setTimeout(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth', ...options })
+  }, delay || 50)
+}
+
+export const mergeClasses = (...classes: string[]) => {
+  return classes.join(' ')
+}
+
+export const encodeBase64 = (input: string): string => {
+  try {
+    const utf8Bytes = new TextEncoder().encode(input)
+    let binaryString = ''
+    utf8Bytes.forEach((byte) => {
+      binaryString += String.fromCharCode(byte)
+    })
+    return btoa(binaryString)
+  } catch (error) {
+    console.error('Error encoding to base64', error)
+    return ''
+  }
+}
+
+export const decodeBase64 = (encoded: string): string | undefined => {
+  try {
+    const binaryString = atob(encoded)
+    const utf8Bytes = new Uint8Array(binaryString.length)
+    for (let i = 0; i < binaryString.length; i++) {
+      utf8Bytes[i] = binaryString.charCodeAt(i)
+    }
+    return new TextDecoder().decode(utf8Bytes)
+  } catch (error) {
+    console.error('Error decoding base64', error)
+    return
+  }
+}
+
+export const tryParseObject = function <T>(value: any, defaultValue: T): T {
+  try {
+    if (!value) {
+      throw new Error('Value is required!')
+    }
+    return JSON.parse(value)
+  } catch {
+    // console.log(error)
+    return defaultValue
+  }
+}
+
+export const tryParseArray = function <T>(value: any, defaultValue: T[] = []): T[] {
+  try {
+    if (!value) return []
+    const parseValue = JSON.parse(value)
+    return Array.isArray(parseValue) ? parseValue : []
+  } catch {
+    return defaultValue
+  }
+}
+
+export const tryParseIntRequired = function (value: any, defaultValue: number): number {
+  try {
+    if (!value) return defaultValue
+    return parseInt(value)
+  } catch {
+    return defaultValue
+  }
+}
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+const isObject = (obj: any) => {
+  return obj && typeof obj === 'object' && !Array.isArray(obj)
+}
+
+type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] } | undefined
+
+export const mergeObjects = <T>(...objects: DeepPartial<T>[]): T => {
+  return objects.reduce((prev, obj) => {
+    if (!obj) return prev
+    Object.keys(obj).forEach((key) => {
+      if (isObject((prev as any)[key]) && isObject((obj as any)[key])) {
+        ;(prev as any)[key] = mergeObjects((prev as any)[key], (obj as any)[key])
+      } else {
+        ;(prev as any)[key] = (obj as any)[key]
+      }
+    })
+    return prev
+  }, {} as T) as any
+}
+
+//#region Format
+export const formatFileSize = (sizeInKb: number) => {
+  if (sizeInKb < 1024) {
+    return sizeInKb.toFixed(2) + ' Kb'
+  } else if (sizeInKb < 1024 * 1024) {
+    return (sizeInKb / 1024).toFixed(2) + ' Mb'
+  } else if (sizeInKb < 1024 * 1024 * 1024) {
+    return (sizeInKb / (1024 * 1024)).toFixed(2) + ' Gb'
+  } else {
+    return (sizeInKb / (1024 * 1024 * 1024)).toFixed(2) + ' Tb'
+  }
+}
+
+export const formatCurrency = (value?: any, prefix = '$ ', suffix = ''): string => {
+  let parsedValue
+  try {
+    parsedValue = parseFloat(value)
+    if (isNaN(parsedValue)) parsedValue = 0
+  } catch (e) {
+    parsedValue = 0
+  }
+  const roundedValue = parsedValue.toFixed(2)
+  const [integerPart, decimalPart] = roundedValue.split('.')
+  const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+
+  let formattedValue = formattedIntegerPart
+  if (decimalPart !== '00') {
+    formattedValue = `${formattedIntegerPart}.${decimalPart}`
+  }
+  return `${prefix}${formattedValue}${suffix}`
+}
+
+export const formatNumberWithCommas = (number: number): string => {
+  return number.toLocaleString('en-US')
+}
+
+export const formatCapitalizeFirstText = (value: string = '') => {
+  if (!value) return value
+  const [first, ...data] = Array.from(value)
+  return `${first.toUpperCase()}${data.join('')}`
+}
+
+const formatDatetimeStyle = {
+  style1: 'DD/MM/YYYY HH:mm',
+  style2: 'MMMM D, YYYY',
+  style3: 'MM-DD-YYYY'
+}
+
+/**
+ * Formats a datetime string using one of the predefined styles.
+ *
+ * Available format styles:
+ * - style1: DD/MM/YYYY HH:mm → e.g., '25/04/2025 14:30'
+ * - style2: 'MMMM D, YYYY' → e.g., 'April 25, 2025'
+ * - style2: 'MM-DD-YYYY' → e.g., '04-25-2025'
+ * @param value - A datetime string (ISO format or any format parsable by dayjs).
+ * @param format - Format style key: 'style1' or 'style2'. Defaults to 'style1'.
+ * @returns A formatted datetime string, or 'unknown' if the input is invalid or unparsable.
+ */
+export const formatDatetime = (value: string, format: keyof typeof formatDatetimeStyle = 'style1'): string => {
+  try {
+    if (!value) throw new Error()
+    return dayjs(value).format(formatDatetimeStyle[format])
+  } catch (error) {
+    return 'unknown'
+  }
+}
+//#endregion

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './helpers'
+
+export { default as JObject } from './json-object'
+
+export { default as QueryParam } from './query-param'
+
+export { default as dayjsCustom } from './dayjs-config'

package/src/utils/json-object.ts

@@ -0,0 +1,29 @@
+export default class JObject {
+  private value: Record<string, any>
+  constructor(value?: any) {
+    try {
+      if (typeof value === 'string') {
+        this.value = JSON.parse(value ?? '{}')
+      } else {
+        this.value = value ?? {}
+      }
+    } catch (error) {
+      this.value = {}
+    }
+  }
+  static fromJson(value?: any) {
+    return new JObject(value)
+  }
+  toValue = <T extends Record<string, any>, TK extends keyof T = keyof T>(key: TK): T[TK] | undefined => {
+    return this.value[key as any]
+  }
+  toJObject = <T extends Record<string, any>, TK extends keyof T = keyof T>(key: TK): JObject => {
+    return new JObject(this.value[key as any])
+  }
+  setValue = <T extends Record<string, any>, TK extends keyof T = keyof T>(key: TK, value: any) => {
+    this.value[key as any] = value
+  }
+  toObject = <T>(): Partial<T> => {
+    return this.value as T
+  }
+}

package/src/utils/mfe-events.tsx

@@ -0,0 +1,34 @@
+import React, { FC, useEffect } from 'react'
+import { NavigateOptions, useNavigate } from 'react-router-dom'
+export interface MFEventNavigate {
+  to: string
+  options?: NavigateOptions & {
+    target?: '_self' | '_blank'
+  }
+}
+
+export const MFEventProvider: FC = () => {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const handleNavigate = (e: CustomEvent) => {
+      const { to, options } = e.detail as MFEventNavigate
+      if (!to) return
+      if (options?.target === '_blank') {
+        globalThis.open(`${to}`, '_blank')
+        return
+      }
+      navigate(to, options)
+    }
+    globalThis.addEventListener('mfe:navigate', handleNavigate as EventListener)
+    return () => globalThis.removeEventListener('mfe:navigate', handleNavigate as EventListener)
+  }, [navigate])
+  return <></>
+}
+
+export const useMFEvent = () => {
+  const navigate = (params: MFEventNavigate) => {
+    globalThis.dispatchEvent(new CustomEvent('mfe:navigate', { detail: params }))
+  }
+  return { navigate }
+}