dinocollab-core 1.0.1 → 1.0.2

package/src/lab/table-grid/item-actions.tsx

@@ -1,138 +0,0 @@
-import React, { Component, ComponentType, ReactNode } from 'react'
-import { Box, colors, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemProps, ListItemText, styled } from '@mui/material'
-import EditIcon from '@mui/icons-material/Edit'
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
-import { ClosePopover, GlobalModalState, MapGlobalModalContext, PopoverGlobal } from '../../api-context'
-
-export type TableGridItemActionType = 'Edit' | 'Delete'
-
-const mapIcons: { [key in TableGridItemActionType]: ReactNode } = {
-  Edit: <EditIcon fontSize='small' color='primary' />,
-  Delete: <DeleteOutlineIcon fontSize='small' color='error' />
-}
-
-export interface TableGridItemActionsProps<T> {
-  value: T
-}
-
-type FormRenderFunc<T> = (value: T) => React.ReactNode
-
-interface ListItemDef<T> {
-  name: string
-  icon?: ReactNode
-  /** Whether this item should trigger a close action when clicked. @default true */
-  closableOnClick?: boolean
-  /** Handler called when item is clicked */
-  onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, value: T) => void
-  listItemProps?: ListItemProps
-  /**
-   * Optional custom ReactNode to override the entire ListItem UI.
-   * If provided, this will be rendered instead of the default ListItem structure
-   * (icon + text + click behavior).
-   */
-  override?: ComponentType<{ onClose?: ClosePopover }>
-}
-
-export interface TableGridItemActionsConfig<T> {
-  formEdit?: FormRenderFunc<T>
-  formDelete?: FormRenderFunc<T>
-  buttonEditConfig?: GlobalModalState
-  buttonDeleteConfig?: GlobalModalState
-  menuList?: {
-    before?: SingleOrArray<ListItemDef<T>>
-    after?: ListItemDef<T>
-  }
-}
-
-interface IProps<T> extends TableGridItemActionsProps<T>, TableGridItemActionsConfig<T> {}
-
-export function CreateTableGridItemActions<T>() {
-  class TableGridItemActions extends Component<IProps<T>> {
-    render() {
-      if (!this.isVisible()) return <></>
-      return (
-        <Wrap>
-          <IconButton
-            size='small'
-            onClick={(e) => {
-              PopoverGlobal.Api.open({
-                anchorEl: e.currentTarget,
-                popoverProps: { anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },
-                content: (
-                  <List>
-                    {this.renderItems(this.props.menuList?.before)}
-                    {this.renderItemWithForm('Edit', this.props.formEdit, this.props.buttonEditConfig)}
-                    {this.renderItemWithForm('Delete', this.props.formDelete, this.props.buttonEditConfig ?? { backdropActivated: true })}
-                    {this.renderItems(this.props.menuList?.after)}
-                  </List>
-                )
-              })
-            }}
-          >
-            <MoreVertIcon fontSize='small' />
-          </IconButton>
-        </Wrap>
-      )
-    }
-
-    isVisible = () => {
-      return !!this.props.formEdit || !!this.props.formDelete
-    }
-
-    renderItems = (value?: SingleOrArray<ListItemDef<T>>) => {
-      if (!value) return <></>
-      const list = Array.isArray(value) ? value : [value]
-      return list.map((item, index) => {
-        const key = item.name + index
-        const { override: Override } = item
-        if (Override) return <Override key={key} onClose={PopoverGlobal.Api.close} />
-        return (
-          <ListItem
-            key={key}
-            disablePadding
-            sx={{ minWidth: '170px' }}
-            onClick={(e) => {
-              if (item.closableOnClick !== false) PopoverGlobal.Api.close()
-              item.onClick && item.onClick(e, this.props.value)
-            }}
-            {...item.listItemProps}
-          >
-            <ListItemButton>
-              <ListItemIcon>{item.icon}</ListItemIcon>
-              <ListItemText primary={item.name} />
-            </ListItemButton>
-          </ListItem>
-        )
-      })
-    }
-
-    renderItemWithForm = (name: TableGridItemActionType, form?: FormRenderFunc<T>, globalState?: GlobalModalState) => {
-      if (!form) return <></>
-      return MapGlobalModalContext((context) => (
-        <ListItem
-          disablePadding
-          sx={{ minWidth: '170px' }}
-          onClick={() => {
-            PopoverGlobal.Api.close()
-            context.show({ renderContent: () => form(this.props.value), ...globalState })
-          }}
-        >
-          <ListItemButton>
-            <ListItemIcon>{mapIcons[name]}</ListItemIcon>
-            <ListItemText primary={name} />
-          </ListItemButton>
-        </ListItem>
-      ))
-    }
-  }
-  return TableGridItemActions
-}
-
-const Wrap = styled(Box)({
-  background: colors.common.white,
-  borderRadius: '6px',
-  '& > .MuiButtonBase-root': {
-    borderRadius: '6px'
-  }
-})

package/src/lab/table-grid/toolbar-pannel.tsx

@@ -1,98 +0,0 @@
-import React, { Component } from 'react'
-import { Box, BoxProps, Button, ButtonProps, styled, Tooltip, Typography, TypographyProps } from '@mui/material'
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
-import { MapGlobalModalContext } from '../../api-context'
-import CustomBreadcrumbs, { CustomBreadcrumbConfig } from '../../components/custom.breadcrumbs'
-
-interface SectionSlots {
-  before?: React.ReactNode
-  after?: React.ReactNode
-}
-
-export interface ToolbarPannelProps {
-  /** @default true */
-  visible?: boolean
-  searchInclude?: string[]
-  breadcrumbs?: CustomBreadcrumbConfig[]
-  title?: React.ReactNode
-  titleSlots?: SectionSlots
-  formCreate?: React.ReactNode
-  actionSlots?: SectionSlots
-  slots?: {
-    rootProps?: BoxProps
-    buttonCreateProps?: ButtonProps
-  }
-}
-
-class ToolbarPannel extends Component<ToolbarPannelProps> {
-  render() {
-    if (this.props.visible === false) return
-    return (
-      <Wrap {...this.props.slots?.rootProps}>
-        {this.props.titleSlots?.before}
-        {this.renderTitle()}
-        {this.props.titleSlots?.after}
-        <Box sx={{ flex: 1 }} />
-        {this.props.actionSlots?.before}
-        {this.renderButtonCreate()}
-        {this.props.actionSlots?.after}
-      </Wrap>
-    )
-  }
-
-  renderButtonCreate = () => {
-    if (!this.props.formCreate) return <></>
-    return MapGlobalModalContext((context) => (
-      <Tooltip title='Create new'>
-        <Button
-          size='small'
-          onClick={() => context.show({ renderContent: () => this.props.formCreate })}
-          startIcon={<AddCircleOutlineIcon fontSize='small' />}
-          sx={{ fontWeight: 600 }}
-          variant='contained'
-          {...this.props.slots?.buttonCreateProps}
-        >
-          Create
-        </Button>
-      </Tooltip>
-    ))
-  }
-
-  renderTitle = () => {
-    const { title, breadcrumbs } = this.props ?? {}
-    if (breadcrumbs) return <CustomBreadcrumbs value={breadcrumbs} />
-    if (typeof title === 'string') return <Title>{title}</Title>
-    return <>{title}</>
-  }
-}
-
-export default ToolbarPannel
-
-// 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
-})
-
-const Wrap = styled(Box)({
-  height: 'var(--height-toolbar, 56px)',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  padding: '0 6px'
-})

package/src/lab/table-grid/types.ts

@@ -1,68 +0,0 @@
-import { ComponentType, ReactNode } from 'react'
-import { GridProps, RegularBreakpoints } from '@mui/material'
-import { FilterBarParams, FilterState } from '../filter-bar'
-import { ToolbarPannelProps } from './toolbar-pannel'
-import { TableGridItemActionsConfig, TableGridItemActionsProps } from './item-actions'
-
-export interface TableGridItemProps<T = any> {
-  value: T
-}
-
-export type GetSelecterIdFunc<T> = (item: T) => string
-
-export interface PaginationModel {
-  page: number
-  pageSize: number
-}
-
-export interface TableGridFilter<T> extends FilterState<T> {
-  pagination: PaginationModel
-  loading?: boolean
-}
-
-export interface TableGridFlexibleSlots<T> {
-  item?: ComponentType<TableGridItemProps<T>>
-}
-
-export interface TableGridSlots<T> extends TableGridFlexibleSlots<T> {
-  flex?: boolean
-  gridContainer?: GridProps
-  gridItem?: GridProps
-  toolbar?: ComponentType
-  toolbarProps?: ToolbarPannelProps
-  action?: ComponentType<TableGridItemActionsProps<T>>
-  actionProps?: TableGridItemActionsConfig<T>
-}
-
-export interface TableGridInnerSlots<T> extends TableGridSlots<T> {
-  TableGridItem: ComponentType<TableGridItemProps<T>>
-  ToolbarPannel: ComponentType<ToolbarPannelProps>
-}
-
-export interface TableGridParams<T> extends TableGridFlexibleSlots<T> {
-  getSelecterId: GetSelecterIdFunc<T>
-  title?: ReactNode
-  filterBarConfig?: FilterBarParams<T>
-  size?: RegularBreakpoints
-  slots?: TableGridSlots<T>
-}
-
-export interface TableGridData<T> {
-  items?: T[]
-  totalItems?: number
-}
-
-export interface TableGridProps<T> {
-  data: TableGridData<T>
-  filter?: TableGridFilter<T>
-  onFilterChange?: (value: TableGridFilter<T>) => void
-  slots?: TableGridSlots<T>
-}
-
-export interface TableGridReduxState<T> {
-  tableData: TableGridData<T>
-  tableFilter: TableGridFilter<T>
-  tableFilterThunk: TableGridFilter<T>
-}
-
-export type TableGridStateRedux<T, K extends keyof TableGridReduxState<T> = keyof TableGridReduxState<T>> = Pick<TableGridReduxState<T>, K>

package/src/redux/create.hoc-lazy.tsx

@@ -1,80 +0,0 @@
-import React, { Component, PropsWithChildren } from 'react'
-import { IErrorViewDefaultProps, IHocLazyWrapperProps } from './ui.units'
-import { ELazyStatus, DinoReduxDispatch, DinoReduxState, ReturnDispatch } from './types'
-import UIErrorPage from './ui.error-page'
-
-interface IHocLazyBase<TModel> extends DinoReduxState, DinoReduxDispatch<TModel> {}
-
-export interface IOptionBase {
-  ErrorScreen?: React.ComponentType<IErrorViewDefaultProps>
-  LazySpinner: React.ComponentType<PropsWithChildren<IHocLazyWrapperProps>>
-}
-
-export interface IHocLazyOtherProps<TModel> {
-  param?: TModel
-}
-
-export interface IHocLazyOptions<TModel> extends IHocLazyOtherProps<TModel>, Omit<IOptionBase, 'LazySpinner'> {
-  LazySpinner?: React.ComponentType<PropsWithChildren<IHocLazyWrapperProps>>
-}
-
-export const EmptyComponent: React.FC<React.PropsWithChildren<any>> = ({ children }) => <>{children}</>
-
-export const OptionHocLazyDefault: IOptionBase = {
-  LazySpinner: EmptyComponent
-}
-
-const CreateHocLazy = function <TChildProp extends IHocLazyBase<TModel>, TModel = any>(
-  ChildComponent: React.ComponentType<TChildProp>,
-  options?: IHocLazyOptions<TModel>
-) {
-  type TProps = TChildProp & IHocLazyOtherProps<TModel>
-  class HocComponent extends Component<TProps> {
-    optionsMerge: IOptionBase
-    tokenSources?: AbortController
-    fetchSource?: ReturnDispatch
-    constructor(props: TProps) {
-      super(props)
-      this.optionsMerge = Object.assign({}, OptionHocLazyDefault, options) as IOptionBase
-    }
-
-    render() {
-      const { optionsMerge: OptionsMerge } = this
-      switch (this.props.status) {
-        case ELazyStatus.Loading:
-        case ELazyStatus.Loaded:
-          return (
-            <OptionsMerge.LazySpinner loading={this.props.status === ELazyStatus.Loading}>
-              <ChildComponent {...this.props} />
-            </OptionsMerge.LazySpinner>
-          )
-        case ELazyStatus.Error:
-          return <UIErrorPage />
-        default:
-          return <div></div>
-      }
-    }
-
-    initialParam = (): TModel => {
-      const oData = options?.param ?? {}
-      const pData = this.props?.param ?? {}
-      return Object.assign({}, oData, pData) as TModel
-    }
-
-    componentDidMount = () => {
-      if (this.props.fetchData) {
-        const param = this.initialParam()
-        this.tokenSources?.abort()
-        this.tokenSources = new AbortController()
-        this.fetchSource = this.props.fetchData(param, this.tokenSources.signal)
-      }
-    }
-
-    componentWillUnmount() {
-      this.tokenSources?.abort()
-      this.fetchSource?.abort && this.fetchSource.abort()
-    }
-  }
-  return HocComponent
-}
-export default CreateHocLazy

package/src/redux/dino.ts

@@ -1,9 +0,0 @@
-import CreateHocLazy from './create.hoc-lazy'
-
-class DinoReduxBase {
-  createHocLazy = CreateHocLazy
-}
-
-const DinoRedux = new DinoReduxBase()
-
-export default DinoRedux

package/src/redux/index.ts

@@ -1,6 +0,0 @@
-export * from './types'
-
-export { default as DinoRedux } from './dino'
-
-export { default as CreateHocLazy } from './create.hoc-lazy'
-export * from './create.hoc-lazy'

package/src/redux/types.ts

@@ -1,27 +0,0 @@
-export enum ELazyStatus {
-  Loading = 'Loading',
-  Loaded = 'Loaded',
-  Error = 'Error'
-}
-
-export interface DinoReduxState {
-  status: ELazyStatus
-  requestedId?: string
-}
-
-export interface ReturnDispatch {
-  abort?: () => void
-}
-
-export interface DinoReduxDispatch<P = any> {
-  fetchData?: (params?: P, signal?: AbortSignal) => ReturnDispatch
-  setStatus: (status: ELazyStatus) => void
-}
-
-interface Actions<T, Id extends keyof T> {
-  create: (value: Partial<T>, signal?: AbortSignal) => Promise<void>
-  update: (id: T[Id], value: Partial<T>, signal?: AbortSignal) => Promise<void>
-  delete: (id: T[Id], value?: Partial<T>, signal?: AbortSignal) => Promise<void>
-}
-
-export type DinoReduxActions<T, Id extends keyof T, K extends keyof Actions<T, Id> = keyof Actions<T, Id>> = Pick<Actions<T, Id>, K>

package/src/redux/ui.error-page.tsx

@@ -1,62 +0,0 @@
-import React, { FC } from 'react'
-import { Box, BoxProps, Button, ButtonProps, Stack, styled, Typography } from '@mui/material'
-import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
-import Error404Vector from './vector-404.webp'
-
-const UIErrorPage: FC = () => (
-  <Stack sx={{ alignItems: 'center' }}>
-    <WrapImage>
-      <img src={Error404Vector} alt='error-404-vector' />
-    </WrapImage>
-    <Typography variant='subtitle1' component='p' sx={{ textAlign: 'center', mt: '20px' }}>
-      Sorry, page not found or connection to server lost. Please come back later....
-    </Typography>
-    <CustomButton href='/'>Back to home page</CustomButton>
-  </Stack>
-)
-export default UIErrorPage
-
-const WrapImage = styled(({ children, ...props }: BoxProps) => (
-  <Box {...props}>
-    <div>{children}</div>
-  </Box>
-))({
-  width: '100%',
-  maxWidth: '560px',
-  flex: '0 0 auto',
-  '& > div': {
-    width: '100%',
-    paddingBottom: '100%',
-    position: 'relative'
-  },
-  '& img': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-  }
-})
-
-const CustomButton = styled((p: ButtonProps & { href: string }) => {
-  return <Button component='a' color='inherit' variant='contained' size='large' endIcon={<ArrowRightAltIcon fontSize='small' />} {...p} />
-})({
-  backgroundColor: 'var(--color-black)',
-  color: 'var(--color-text-light)',
-  minWidth: '250px',
-  marginTop: '24px',
-  height: '56px',
-  textTransform: 'none',
-  fontWeight: 600,
-  transition: '0.3s',
-  '&:hover': {
-    backgroundColor: 'var(--color-black2)',
-    color: 'var(--color-text-light)'
-  },
-  '& .MuiButton-icon.MuiButton-endIcon': {
-    transition: '0.3s'
-  },
-  '&:hover .MuiButton-icon.MuiButton-endIcon': {
-    marginLeft: '16px'
-  }
-})

package/src/redux/ui.units.tsx

@@ -1,41 +0,0 @@
-import React, { FC, PropsWithChildren } from 'react'
-import { Box, Button, Fade, Stack, styled, Typography } from '@mui/material'
-
-export interface IErrorViewDefaultProps {}
-
-export const ErrorViewDefault: FC<IErrorViewDefaultProps> = () => (
-  <Stack sx={{ height: '100vh', alignItems: 'center', justifyContent: 'center' }}>
-    <Typography variant='h1'>Errors Something</Typography>
-    <Typography variant='subtitle1'>Please try again :{'(('}</Typography>
-    <Button variant='outlined' color='inherit' LinkComponent='a' href='/'>
-      Try again
-    </Button>
-  </Stack>
-)
-
-export interface IHocLazyWrapperProps extends PropsWithChildren {
-  loading?: boolean
-  backdrop?: boolean
-}
-
-export const HocLazyWrapper: FC<IHocLazyWrapperProps> = (props) => (
-  <React.Fragment>
-    {props.children}
-    <Fade in={props.loading === true && props.backdrop !== false} unmountOnExit>
-      <Wrapper />
-    </Fade>
-  </React.Fragment>
-)
-
-const Wrapper = styled(Box)({
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  position: 'fixed',
-  background: 'rgb(0,0,0,0.15)',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  zIndex: 1150
-})

package/src/table/context.tsx

@@ -1,16 +0,0 @@
-import React, { createContext } from 'react'
-import { TCloseModal, TShowModal } from '../api-context'
-
-export interface ITableBaseContext {
-  showModal: TShowModal
-  closeModal: TCloseModal
-}
-
-export const TableBaseContext = createContext<ITableBaseContext>({
-  showModal: () => {},
-  closeModal: () => {}
-})
-
-export const MapTableBaseContext = (context: (context: ITableBaseContext) => React.ReactNode) => (
-  <TableBaseContext.Consumer>{context}</TableBaseContext.Consumer>
-)

package/src/table/create.action-row.tsx

@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import { Box, BoxProps, IconButton, Tooltip } from '@mui/material'
-import EditIcon from '@mui/icons-material/Edit'
-import DeleteIcon from '@mui/icons-material/Delete'
-import { GlobalModalState } from '../api-context'
-import { ITableBaseContext, MapTableBaseContext } from './context'
-import { mergeObjects } from '../utils'
-
-export interface IActionRowProps<T> {
-  value: T
-  formEdit?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
-  formDelete?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
-  after?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
-  before?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
-  wrapProps?: BoxProps
-  buttonEditConfig?: GlobalModalState
-  buttonDeleteConfig?: GlobalModalState
-}
-
-function CreateActionRow<T>(params?: Omit<IActionRowProps<T>, 'value'>) {
-  class ActionRow extends Component<IActionRowProps<T>> {
-    get propsMerge() {
-      return mergeObjects<IActionRowProps<T>>(params, this.props)
-    }
-
-    getButtons = function* (that: ActionRow, thatProps: Omit<IActionRowProps<T>, 'value'>, tableContext: ITableBaseContext) {
-      const beforeFunc = that.props?.before ?? thatProps?.before
-      if (beforeFunc) {
-        yield <React.Fragment key='Before'>{beforeFunc(that.props.value, tableContext)}</React.Fragment>
-      }
-      const editFunc = that.props?.formEdit ?? thatProps?.formEdit
-      const editContent = editFunc ? editFunc(that.props.value, tableContext) : undefined
-      if (editFunc && !!editContent) {
-        yield (
-          <Tooltip title='Edit' arrow key='Edit'>
-            <IconButton
-              color='primary'
-              onClick={() => {
-                tableContext?.showModal({
-                  renderContent: () => editContent || <React.Fragment />,
-                  sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
-                  backdropActivated: true,
-                  ...params?.buttonEditConfig
-                })
-              }}
-            >
-              <EditIcon fontSize='small' />
-            </IconButton>
-          </Tooltip>
-        )
-      }
-      const deleteFunc = that.props?.formDelete ?? thatProps?.formDelete
-      const deleteContent = deleteFunc ? deleteFunc(that.props.value, tableContext) : undefined
-      if (deleteFunc && !!deleteContent) {
-        yield (
-          <Tooltip title='Delete' arrow key='Delete'>
-            <IconButton
-              color='error'
-              onClick={() => {
-                tableContext?.showModal({
-                  renderContent: () => deleteContent || <React.Fragment />,
-                  sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
-                  backdropActivated: true,
-                  ...params?.buttonDeleteConfig
-                })
-              }}
-            >
-              <DeleteIcon fontSize='small' />
-            </IconButton>
-          </Tooltip>
-        )
-      }
-      const afterFunc = that.props?.after ?? thatProps?.after
-      if (afterFunc) {
-        yield <React.Fragment key='After'>{afterFunc(that.props.value, tableContext)}</React.Fragment>
-      }
-    }
-
-    render() {
-      return MapTableBaseContext((context) => (
-        <Box sx={{ display: 'flex', alignItems: 'center', height: '100%' }} {...this.propsMerge.wrapProps}>
-          {Array.from(this.getButtons(this, this.propsMerge, context))}
-        </Box>
-      ))
-    }
-  }
-
-  return ActionRow
-}
-
-export default CreateActionRow