dinocollab-core 1.0.0

package/src/api-context/global-modal.tsx

@@ -0,0 +1,109 @@
+import React, { Component } from 'react'
+import { Backdrop, Box, Modal, SxProps, styled } from '@mui/material'
+
+export interface GlobalModalState {
+  sx?: SxProps
+  sxWrap?: SxProps
+  /** @default true */
+  backdropActivated?: boolean
+  onClose?: (reason?: TModalReason) => void
+  renderContent?: () => React.ReactNode
+}
+
+export type TModalReason = 'backdropClick' | 'escapeKeyDown'
+
+interface GlobalModalProps {}
+
+export type TShowModal = (value: GlobalModalState) => void
+
+export type TCloseModal = (event?: {}, reason?: TModalReason) => void
+
+export interface IGlobalModalContext {
+  show: TShowModal
+  close: TCloseModal
+}
+
+export const GlobalModalContext = React.createContext<IGlobalModalContext>({
+  close: () => {
+    console.warn('GlobalModal provider not found!')
+  },
+  show: () => {
+    console.warn('GlobalModal provider not found!')
+  }
+})
+
+export interface IMapGlobalModal {
+  context: IGlobalModalContext
+}
+
+export const MapGlobalModalContext = (context: (state: IGlobalModalContext) => React.ReactNode) => (
+  <GlobalModalContext.Consumer>{context}</GlobalModalContext.Consumer>
+)
+
+class GlobalModal extends Component<React.PropsWithChildren<GlobalModalProps>, GlobalModalState> implements IGlobalModalContext {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  show: TShowModal = (value) => {
+    this.setState(value)
+  }
+
+  close: TCloseModal = (_, reason) => {
+    if (reason === 'backdropClick' && this.state.backdropActivated === false) return
+    this.setState({ renderContent: undefined })
+  }
+
+  render() {
+    return (
+      <GlobalModalContext.Provider value={this}>
+        {this.props.children}
+        <Modal
+          open={!!this.state.renderContent}
+          onClose={this.close}
+          slots={{ backdrop: Backdrop }}
+          slotProps={{ backdrop: { timeout: 300 } }}
+          sx={this.state.sx}
+        >
+          <Wrapper sx={this.state.sxWrap}>{this.renderContent()}</Wrapper>
+        </Modal>
+      </GlobalModalContext.Provider>
+    )
+  }
+
+  renderContent = (): React.ReactNode => {
+    return this.state.renderContent ? this.state.renderContent() : <></>
+  }
+}
+export default GlobalModal
+
+const Wrapper = styled(Box)({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  outline: 'none'
+})
+
+export interface IApiGlobalModalContextProps {
+  contextGlobalModal: IGlobalModalContext
+}
+
+export const withApiGlobalModalContext = <P extends IApiGlobalModalContextProps>(Component: React.ComponentType<P>) => {
+  return (props: Omit<P, keyof IApiGlobalModalContextProps>) => {
+    return (
+      <GlobalModal>
+        {MapGlobalModalContext((context) => (
+          <Component {...(props as P)} contextGlobalModal={context} />
+        ))}
+      </GlobalModal>
+    )
+  }
+}
+
+export const withApiGlobalModalConsumerContext = <P extends IApiGlobalModalContextProps>(Component: React.ComponentType<P>) => {
+  return (props: Omit<P, keyof IApiGlobalModalContextProps>) => {
+    return MapGlobalModalContext((context) => <Component {...(props as P)} contextGlobalModal={context} />)
+  }
+}

package/src/api-context/index.ts

@@ -0,0 +1,13 @@
+export { default as ApiPopover } from './popover'
+export * from './popover'
+
+export { default as AlertGlobal } from './alert-global'
+export * from './alert-global'
+
+export { default as DrawerGlobal } from './drawer-global'
+
+export { default as GlobalModal } from './global-modal'
+export * from './global-modal'
+
+export { default as PopoverGlobal } from './popover-global'
+export * from './popover-global'

package/src/api-context/popover-global.tsx

@@ -0,0 +1,107 @@
+import React, { Component, PropsWithChildren } from 'react'
+import { Popover, PopoverProps, PopoverVirtualElement } from '@mui/material'
+import { ContentDefault } from './ui.units'
+
+export interface PopoverGlobalState {
+  anchorEl?: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null
+  popoverProps?: Omit<PopoverProps, 'open'>
+  content: React.ReactNode
+}
+
+export type OpenPopover = (value: PopoverGlobalState) => void
+
+export type ClosePopover = (reason?: 'backdropClick' | 'escapeKeyDown') => void
+
+export interface PopoverGlobalContext {
+  open: OpenPopover
+  close: ClosePopover
+}
+
+export const PopoverGlobalApi: PopoverGlobalContext = {
+  open: () => {
+    console.warn('PopoverGlobal provider not found!')
+  },
+  close: () => {
+    console.warn('PopoverGlobal provider not found!')
+  }
+}
+
+export const PopoverGlobalContext = React.createContext<PopoverGlobalContext>(PopoverGlobalApi)
+
+export const MapPopoverGlobalContext = (context: (state: PopoverGlobalContext) => React.ReactNode) => (
+  <PopoverGlobalContext.Consumer>{context}</PopoverGlobalContext.Consumer>
+)
+
+interface IProps extends PropsWithChildren {}
+
+export class PopoverGlobalProvider extends Component<IProps, PopoverGlobalState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { anchorEl: null, content: <ContentDefault /> }
+  }
+
+  componentDidMount() {
+    PopoverGlobalApi.open = this.openPopover
+    PopoverGlobalApi.close = this.closePopover
+  }
+
+  render() {
+    return (
+      <PopoverGlobalContext.Provider value={{ open: this.openPopover, close: this.closePopover }}>
+        {this.props.children}
+        <Popover
+          sx={{ '& .MuiPaper-root.MuiPaper-elevation': { overflow: 'hidden' } }}
+          anchorEl={this.state.anchorEl}
+          open={Boolean(this.state.anchorEl)}
+          onClose={(_, reason) => this.closePopover(reason)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          disableScrollLock
+          {...this.state.popoverProps}
+        >
+          {this.state.content}
+        </Popover>
+      </PopoverGlobalContext.Provider>
+    )
+  }
+
+  openPopover: OpenPopover = (option) => {
+    clearTimeout(this.timer)
+    this.setState({ ...option })
+  }
+
+  timer: any
+  closePopover: ClosePopover = () => {
+    clearTimeout(this.timer)
+    this.setState({ anchorEl: null }, () => {
+      this.timer = setTimeout(() => {
+        this.setState({ content: <ContentDefault /> })
+      }, 500)
+    })
+  }
+}
+
+export interface IPopoverGlobalContextProps {
+  contextPopover: PopoverGlobalContext
+}
+
+export const withPopoverGlobalContext = <P extends IPopoverGlobalContextProps>(Component: React.ComponentType<P>) => {
+  return (props: Omit<P, keyof IPopoverGlobalContextProps>) => {
+    return (
+      <PopoverGlobalProvider>
+        {MapPopoverGlobalContext((context) => (
+          <Component {...(props as P)} contextPopover={context} />
+        ))}
+      </PopoverGlobalProvider>
+    )
+  }
+}
+
+const PopoverGlobal = {
+  Provider: PopoverGlobalProvider,
+  Api: PopoverGlobalApi,
+  Context: PopoverGlobalContext,
+  mapContext: MapPopoverGlobalContext
+}
+
+export default PopoverGlobal

package/src/api-context/popover.tsx

@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import { Popover, PopoverProps, PopoverVirtualElement } from '@mui/material'
+import { ContentDefault } from './ui.units'
+
+export interface IPopoverOptions {
+  anchorEl?: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null
+  popoverProps?: Omit<PopoverProps, 'open'>
+  content: React.ReactNode
+}
+
+export type TShowPopover = (option: IPopoverOptions) => void
+
+export type TClosePopover = (reason?: 'backdropClick' | 'escapeKeyDown') => void
+
+export interface IApiPopoverContext {
+  showPopover: TShowPopover
+  closePopover: TClosePopover
+}
+
+export const ApiPopoverContext = React.createContext<IApiPopoverContext>({
+  showPopover: () => {
+    console.warn('ApiPopover provider not found!')
+  },
+  closePopover: () => {
+    console.warn('ApiPopover provider not found!')
+  }
+})
+
+export const MapApiPopoverContext = (context: (state: IApiPopoverContext) => React.ReactNode) => (
+  <ApiPopoverContext.Consumer>{context}</ApiPopoverContext.Consumer>
+)
+
+interface IProps {}
+interface IState extends IPopoverOptions {}
+type TProps = React.PropsWithChildren<IProps>
+class ApiPopover extends Component<TProps, IState> implements IApiPopoverContext {
+  constructor(props: any) {
+    super(props)
+    this.state = { anchorEl: null, content: <ContentDefault /> }
+  }
+  render() {
+    return (
+      <ApiPopoverContext.Provider value={this}>
+        {this.props.children}
+        <Popover
+          sx={{ '& .MuiPaper-root.MuiPaper-elevation': { overflow: 'hidden' } }}
+          anchorEl={this.state.anchorEl}
+          open={Boolean(this.state.anchorEl)}
+          onClose={(_, reason) => this.closePopover(reason)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          disableScrollLock
+          {...this.state.popoverProps}
+        >
+          {this.state.content}
+        </Popover>
+      </ApiPopoverContext.Provider>
+    )
+  }
+  showPopover = (option: IPopoverOptions) => {
+    clearTimeout(this.timer)
+    this.setState({ ...option })
+  }
+  timer: any
+  closePopover: TClosePopover = () => {
+    clearTimeout(this.timer)
+    this.setState({ anchorEl: null }, () => {
+      this.timer = setTimeout(() => {
+        this.setState({ content: <ContentDefault /> })
+      }, 500)
+    })
+  }
+}
+export default ApiPopover
+
+export interface IApiPopoverContextProps {
+  contextPopover: IApiPopoverContext
+}
+export const withApiPopoverContext = <P extends IApiPopoverContextProps>(Component: React.ComponentType<P>) => {
+  return (props: Omit<P, keyof IApiPopoverContextProps>) => {
+    return (
+      <ApiPopover>
+        {MapApiPopoverContext((context) => (
+          <Component {...(props as P)} contextPopover={context} />
+        ))}
+      </ApiPopover>
+    )
+  }
+}

package/src/api-context/ui.units.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react'
+import { Box, Typography } from '@mui/material'
+
+export const ContentDefault: FC = () => (
+  <Box sx={{ p: '9px 12px', m: '12px', backgroundColor: 'rgba(0,0,0,0.1)' }}>
+    <Typography variant='caption' sx={{ fontWeight: 600, fontStyle: 'italic' }}>
+      Content
+    </Typography>
+  </Box>
+)

package/src/components/copy-to-clipboard.tsx

@@ -0,0 +1,86 @@
+import React, { Component, ComponentType } from 'react'
+import { Box, ButtonProps, IconButton, Tooltip, TooltipProps } from '@mui/material'
+import copy from 'clipboard-copy'
+import DoneIcon from '@mui/icons-material/Done'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+
+interface IProps {
+  value: string
+  slots?: {
+    tooltipProps?: Partial<TooltipProps>
+    button?: ComponentType<{ onClick: () => void; copied?: boolean }>
+    buttonProps?: ButtonProps
+  }
+}
+
+interface IState {
+  showTooltip: boolean
+  copied: boolean
+}
+
+class CopyToClipboard extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    this.state = { showTooltip: false, copied: false }
+  }
+
+  render() {
+    const leaveDelay = this.state.copied ? this.debounceTime.time - 200 : 0
+    const { title, ...tooltipProps } = this.props.slots?.tooltipProps ?? {}
+    const titleValue = this.state.copied ? 'Copied to clipboard!' : (title ?? 'Copy to clipboard')
+    return (
+      <Tooltip
+        arrow
+        title={titleValue}
+        leaveDelay={leaveDelay}
+        open={this.state.showTooltip}
+        onOpen={() => this.setState({ showTooltip: true })}
+        onClose={() => this.setState({ showTooltip: false })}
+        {...tooltipProps}
+      >
+        <Box sx={{ display: 'inline-block', flex: '0 0 auto' }}>{this.renderIcon()}</Box>
+      </Tooltip>
+    )
+  }
+
+  renderIcon = () => {
+    if (this.props.slots?.button) {
+      const ButtonComp = this.props.slots.button
+      return <ButtonComp onClick={this.handleClickCopy} copied={this.state.copied} />
+    }
+    const Icon = this.state.copied ? DoneIcon : ContentCopyIcon
+    return (
+      <IconButton onClick={this.handleClickCopy} {...this.props.slots?.buttonProps}>
+        <Icon fontSize='small' sx={{ color: '#606060' }} />
+      </IconButton>
+    )
+  }
+
+  handleClickCopy = () => {
+    this.debounceTime.start()
+    this.onCopy()
+  }
+
+  private debounceTime = {
+    cache: 0 as any,
+    time: 1500,
+    start: () => {
+      this.debounceTime.clear()
+      this.setState({ copied: true }, () => {
+        this.debounceTime.cache = setTimeout(() => {
+          this.setState({ copied: false })
+        }, this.debounceTime.time)
+      })
+    },
+    clear: () => {
+      clearTimeout(this.debounceTime.cache)
+    }
+  }
+
+  private onCopy = () => {
+    copy(this.props.value)
+    this.setState({ showTooltip: true })
+  }
+}
+
+export default CopyToClipboard

package/src/components/custom.breadcrumbs.tsx

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

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

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

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