@applica-software-guru/react-admin 1.0.33 → 1.0.35

package/src/components/@extended/LoadingButton.jsx

@@ -0,0 +1,228 @@
+import { alpha, styled, useTheme } from '@mui/material/styles'
+
+import MuiLoadingButton from '@mui/lab/LoadingButton'
+import PropTypes from 'prop-types'
+import { forwardRef } from 'react'
+import getColors from '../../themes/getColors'
+import getShadow from '../../themes/getShadow'
+
+function getColorStyle({ variant, theme, color, loadingPosition }) {
+  const colors = getColors(theme, color)
+  const { lighter, main, dark, contrastText } = colors
+
+  const buttonShadow = `${color}Button`
+  const shadows = getShadow(theme, buttonShadow)
+
+  const loadingIndicator = {
+    '& .MuiLoadingButton-loadingIndicator': {
+      color: main,
+    },
+  }
+
+  const loadingColor = {
+    ...(loadingPosition &&
+      loadingPosition !== 'center' && {
+        color: main,
+      }),
+  }
+
+  const commonShadow = {
+    '&::after': {
+      boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`,
+    },
+    '&:active::after': {
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+    },
+  }
+
+  switch (variant) {
+    case 'contained':
+      return {
+        backgroundColor: main,
+        ...(loadingPosition &&
+          loadingPosition !== 'center' && {
+            color: contrastText,
+          }),
+        '& .MuiLoadingButton-loadingIndicator': {
+          color: contrastText,
+        },
+        '&:hover': {
+          backgroundColor: dark,
+          color: contrastText,
+        },
+        ...commonShadow,
+      }
+    case 'light':
+      return {
+        backgroundColor: main,
+        ...(loadingPosition &&
+          loadingPosition !== 'center' && {
+            color: contrastText,
+          }),
+        '& .MuiLoadingButton-loadingIndicator': {
+          color: contrastText,
+        },
+        '&:hover': {
+          backgroundColor: dark,
+          color: contrastText,
+        },
+        ...commonShadow,
+      }
+    case 'shadow':
+      return {
+        boxShadow: shadows,
+        backgroundColor: main,
+        ...(loadingPosition &&
+          loadingPosition !== 'center' && {
+            color: contrastText,
+          }),
+        '& .MuiLoadingButton-loadingIndicator': {
+          color: contrastText,
+        },
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: dark,
+          color: contrastText,
+        },
+        ...commonShadow,
+      }
+    case 'outlined':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: main,
+        ...loadingColor,
+        ...loadingIndicator,
+      }
+    case 'dashed':
+      return {
+        backgroundColor: lighter,
+        borderColor: main,
+        ...loadingColor,
+        ...loadingIndicator,
+        ...commonShadow,
+      }
+    case 'text':
+    default:
+      return {
+        color: main,
+        ...loadingIndicator,
+        ...commonShadow,
+      }
+  }
+}
+
+// ==============================|| STYLED - LOADING BUTTON ||============================== //
+
+const LoadingButtonStyle = styled(MuiLoadingButton, {
+  shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant',
+})(({ theme, variant, shape, color, loading, loadingPosition }) => ({
+  '::after': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: shape === 'rounded' ? '50%' : 4,
+    opacity: 0,
+    transition: 'all 0.5s',
+  },
+
+  ':active::after': {
+    position: 'absolute',
+    borderRadius: shape === 'rounded' ? '50%' : 4,
+    left: 0,
+    top: 0,
+    opacity: 1,
+    transition: '0s',
+  },
+  ...(variant === 'text' && {
+    ...getColorStyle({ variant, theme, color, loadingPosition }),
+    '&.MuiButton-sizeMedium': {
+      height: 36,
+    },
+    '&.MuiButton-sizeSmall': {
+      height: 30,
+    },
+    '&.MuiButton-sizeLarge': {
+      height: 44,
+    },
+  }),
+  ...(shape && {
+    minWidth: 0,
+    '&.MuiButton-sizeMedium': {
+      width: 36,
+      height: 36,
+    },
+    '&.MuiButton-sizeSmall': {
+      width: 30,
+      height: 30,
+    },
+    '&.MuiButton-sizeLarge': {
+      width: 44,
+      height: 44,
+    },
+    ...(shape === 'rounded' && {
+      borderRadius: '50%',
+    }),
+  }),
+
+  ...(variant === 'outlined' && {
+    border: '1px solid',
+  }),
+  ...(variant === 'dashed' && {
+    border: '1px dashed',
+  }),
+  ...((variant === 'contained' || variant === 'shadow') &&
+    !loading && {
+      color: '#fff',
+    }),
+  ...(variant !== 'text' && {
+    ...getColorStyle({ variant, theme, color, loadingPosition }),
+  }),
+
+  '&.Mui-disabled': {
+    ...(variant !== 'text' && {
+      ...getColorStyle({ variant, theme, color, loadingPosition }),
+    }),
+  },
+}))
+
+// ==============================|| EXTENDED - LOADING BUTTON ||============================== //
+
+const LoadingButton = forwardRef(
+  ({ variant = 'text', shape, children, color = 'primary', ...others }, ref) => {
+    const theme = useTheme()
+
+    return (
+      <LoadingButtonStyle
+        ref={ref}
+        variant={variant}
+        shape={shape}
+        theme={theme}
+        loadingPosition={others.loadingPosition}
+        loading={others.loading}
+        color={color}
+        {...others}
+      >
+        {children}
+      </LoadingButtonStyle>
+    )
+  },
+)
+
+LoadingButton.propTypes = {
+  variant: PropTypes.string,
+  shape: PropTypes.string,
+  children: PropTypes.node,
+  color: PropTypes.string,
+}
+
+LoadingButton.displayName = 'LoadingButton'
+
+export default LoadingButton

package/src/components/@extended/Tooltip.jsx

@@ -0,0 +1,67 @@
+import { Box, Tooltip as MuiTooltip, tooltipClasses } from '@mui/material'
+import { styled, useTheme } from '@mui/material/styles'
+
+import PropTypes from 'prop-types'
+import getColors from '../../themes/getColors'
+
+// ==============================|| TOOLTIP - VARIANT ||============================== //
+
+function getVariantStyle({ color, theme, labelColor }) {
+  const colors = getColors(theme, color)
+  const { main, contrastText } = colors
+  let colorValue = color ? color : ''
+
+  if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(colorValue)) {
+    return {
+      [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: main,
+        color: labelColor ? labelColor : contrastText,
+      },
+      [`& .${tooltipClasses.arrow}`]: {
+        color: main,
+      },
+    }
+  } else {
+    return {
+      [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: colorValue,
+        color: labelColor ? labelColor : contrastText,
+        boxShadow: theme.shadows[1],
+      },
+      [`& .${tooltipClasses.arrow}`]: {
+        color: colorValue,
+      },
+    }
+  }
+}
+
+// ==============================|| STYLED - TOOLTIP COLOR ||============================== //
+
+const TooltipStyle = styled(
+  ({ className, ...props }) => <MuiTooltip {...props} classes={{ popper: className }} />,
+  {
+    shouldForwardProp: (prop) => prop !== 'color' && prop !== 'labelColor',
+  },
+)(({ theme, color, labelColor }) => ({
+  ...(color && getVariantStyle({ color, theme, labelColor })),
+}))
+
+// ==============================|| EXTENDED - TOOLTIP ||============================== //
+
+export default function CustomTooltip({ children, arrow, labelColor = '', ...rest }) {
+  const theme = useTheme()
+  return (
+    <Box display="flex">
+      <TooltipStyle arrow={arrow} {...rest} theme={theme} labelColor={labelColor}>
+        {children}
+      </TooltipStyle>
+    </Box>
+  )
+}
+
+CustomTooltip.propTypes = {
+  children: PropTypes.element,
+  arrow: PropTypes.bool,
+  labelColor: PropTypes.string,
+  rest: PropTypes.array,
+}

package/src/components/@extended/Transitions.jsx

@@ -0,0 +1,125 @@
+import PropTypes from 'prop-types'
+import { forwardRef } from 'react'
+
+// material-ui
+import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material'
+
+// ==============================|| TRANSITIONS ||============================== //
+
+const Transitions = forwardRef(
+  ({ children, position = 'top-left', type = 'grow', direction = 'up', ...others }, ref) => {
+    let positionSX = {
+      transformOrigin: '0 0 0',
+    }
+
+    switch (position) {
+      case 'top-right':
+        positionSX = {
+          transformOrigin: 'top right',
+        }
+        break
+      case 'top':
+        positionSX = {
+          transformOrigin: 'top',
+        }
+        break
+      case 'bottom-left':
+        positionSX = {
+          transformOrigin: 'bottom left',
+        }
+        break
+      case 'bottom-right':
+        positionSX = {
+          transformOrigin: 'bottom right',
+        }
+        break
+      case 'bottom':
+        positionSX = {
+          transformOrigin: 'bottom',
+        }
+        break
+      case 'top-left':
+      default:
+        positionSX = {
+          transformOrigin: '0 0 0',
+        }
+        break
+    }
+
+    return (
+      <Box ref={ref}>
+        {type === 'grow' && (
+          <Grow
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 150,
+              exit: 150,
+            }}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Grow>
+        )}
+
+        {type === 'collapse' && (
+          <Collapse {...others} sx={positionSX}>
+            {children}
+          </Collapse>
+        )}
+
+        {type === 'fade' && (
+          <Fade
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 300,
+              exit: 150,
+            }}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Fade>
+        )}
+
+        {type === 'slide' && (
+          <Slide
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 150,
+              exit: 150,
+            }}
+            direction={direction}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Slide>
+        )}
+
+        {type === 'zoom' && (
+          <Zoom {...others}>
+            <Box sx={positionSX}>{children}</Box>
+          </Zoom>
+        )}
+      </Box>
+    )
+  },
+)
+
+Transitions.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.oneOf(['grow', 'fade', 'collapse', 'slide', 'zoom']),
+  position: PropTypes.oneOf([
+    'top-left',
+    'top-right',
+    'top',
+    'bottom-left',
+    'bottom-right',
+    'bottom',
+  ]),
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+}
+
+export default Transitions
+
+export const PopupTransition = forwardRef(function Transition(props, ref) {
+  return <Zoom ref={ref} timeout={200} {...props} />
+})

package/src/components/@extended/index.jsx

@@ -0,0 +1,11 @@
+import AnimateButton from './AnimateButton'
+import Avatar from './Avatar'
+import Breadcrumbs from './Breadcrumbs'
+import Dot from './Dot'
+import IconButton from './IconButton'
+import LoadingButton from './LoadingButton'
+import Tooltip from './Tooltip'
+import Transitions from './Transitions'
+
+export * from './progress'
+export { AnimateButton, Avatar, Breadcrumbs, Dot, IconButton, LoadingButton, Tooltip, Transitions }

package/src/components/@extended/progress/CircularWithLabel.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, CircularProgress, Typography } from '@mui/material'
+
+// ==============================|| PROGRESS - CIRCULAR LABEL ||============================== //
+
+export default function CircularWithLabel({ value, ...others }) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress variant="determinate" value={value} {...others} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography variant="caption" component="div" color="text.secondary">{`${Math.round(
+          value,
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
+
+CircularWithLabel.propTypes = {
+  value: PropTypes.number,
+}

package/src/components/@extended/progress/CircularWithPath.jsx

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, CircularProgress, Typography, circularProgressClasses } from '@mui/material'
+
+// ==============================|| PROGRESS - CIRCULAR PATH ||============================== //
+
+export default function CircularWithPath({
+  value,
+  size,
+  variant,
+  thickness,
+  showLabel,
+  pathColor,
+  sx,
+  ...others
+}) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress
+        variant="determinate"
+        sx={{ color: pathColor ? pathColor : 'grey.200' }}
+        size={size}
+        thickness={thickness}
+        {...others}
+        value={100}
+      />
+      {showLabel && (
+        <Box
+          sx={{
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Typography variant="caption" component="div" color="text.secondary">
+            {value ? `${Math.round(value)}%` : '0%'}
+          </Typography>
+        </Box>
+      )}
+      <CircularProgress
+        variant={variant}
+        sx={{
+          ...sx,
+          position: 'absolute',
+          left: 0,
+          [`& .${circularProgressClasses.circle}`]: {
+            strokeLinecap: 'round',
+          },
+        }}
+        size={size}
+        thickness={thickness}
+        value={value}
+        {...others}
+      />
+    </Box>
+  )
+}
+
+CircularWithPath.propTypes = {
+  value: PropTypes.number,
+  size: PropTypes.number,
+  variant: PropTypes.string,
+  thickness: PropTypes.number,
+  showLabel: PropTypes.bool,
+  pathColor: PropTypes.string,
+  sx: PropTypes.array,
+  others: PropTypes.array,
+}

package/src/components/@extended/progress/LinearWithIcon.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, LinearProgress } from '@mui/material'
+
+// ==============================|| PROGRESS - LINEAR ICON ||============================== //
+
+export default function LinearWithIcon({ icon, value, ...others }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" value={value} {...others} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>{icon}</Box>
+    </Box>
+  )
+}
+
+LinearWithIcon.propTypes = {
+  icon: PropTypes.node,
+  value: PropTypes.number,
+}

package/src/components/@extended/progress/LinearWithLabel.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, LinearProgress, Typography } from '@mui/material'
+
+// ==============================|| PROGRESS - LINEAR WITH LABEL ||============================== //
+
+export default function LinearWithLabel({ value, ...others }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" value={value} {...others} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
+
+LinearWithLabel.propTypes = {
+  value: PropTypes.number,
+}

package/src/components/@extended/progress/index.jsx

@@ -0,0 +1,6 @@
+import CircularWithLabel from './CircularWithLabel'
+import CircularWithPath from './CircularWithPath'
+import LinearWithIcon from './LinearWithIcon'
+import LinearWithLabel from './LinearWithLabel'
+
+export { CircularWithLabel, CircularWithPath, LinearWithIcon, LinearWithLabel }

package/src/components/ActionsMenu.jsx

@@ -0,0 +1,77 @@
+import { IconButton, MenuItem, styled } from '@mui/material'
+import React, { Children, useState } from 'react'
+
+import MenuPopover from './MenuPopover/MenuPopover'
+import { MoreVert } from '@mui/icons-material'
+import PropTypes from 'prop-types'
+
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'variant' && prop !== 'sx',
+  slot: 'root',
+  overridesResolver: (props, styles) => [styles.root],
+})(() => ({
+  textAlign: 'right',
+}))
+
+const StyledMenuPopover = styled(MenuPopover, {
+  name: 'ApplicaActionsMenuPopover',
+  slot: 'root',
+})(({ theme }) => ({
+  '& .MuiMenuItem-root': {
+    padding: 0,
+    margin: 0,
+    backgroundColor: theme.palette.background.paper,
+    '& .MuiButton-startIcon': {
+      marginRight: theme.spacing(0),
+    },
+  },
+}))
+
+const ActionsMenu = ({ children }) => {
+  const [open, setOpen] = useState(null)
+  const handleClick = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setOpen(e.currentTarget)
+  }
+  const handleClose = () => {
+    setOpen(null)
+  }
+
+  if (
+    !children ||
+    React.Children.count(children) === 0 ||
+    (children?.filter && children?.filter((c) => React.isValidElement(c)).length === 0)
+  ) {
+    return null
+  }
+
+  return (
+    <StyledRoot>
+      <IconButton
+        aria-label="more"
+        aria-haspopup="true"
+        onClick={handleClick}
+        color={open ? 'inherit' : 'default'}
+      >
+        <MoreVert />
+      </IconButton>
+      <StyledMenuPopover open={open} onClose={handleClose} arrow="right-top">
+        {Children.map(
+          children,
+          (action, index) =>
+            React.isValidElement(action) && (
+              <MenuItem key={index}>{React.cloneElement(action)}</MenuItem>
+            ),
+        )}
+      </StyledMenuPopover>
+    </StyledRoot>
+  )
+}
+
+ActionsMenu.propTypes = {
+  ...MenuPopover.propTypes,
+  children: PropTypes.node.isRequired,
+}
+
+export default ActionsMenu