@campxdev/shared 1.8.50 → 1.9.0

package/src/components/ModalButtons/PopoverButton.tsx

@@ -1,99 +1,99 @@
-import { Grow, Popover, PopoverProps } from '@mui/material'
-import { TransitionProps } from '@mui/material/transitions'
-import { ReactNode, forwardRef, useState } from 'react'
-
-export const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Grow timeout={1000} ref={ref} {...props} />
-})
-
-interface PopoverButtonProps {
-  anchor: (props: { open: (e: any) => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  popoverProps?: Omit<PopoverProps, 'open'>
-  onDialogClose?: () => void
-}
-
-export default function PopoverButton({
-  content,
-  popoverProps,
-  onDialogClose,
-  anchor,
-}: PopoverButtonProps) {
-  const [popperAnchor, setPopperAnchor] = useState(null)
-
-  const onClose = () => {
-    onDialogClose && onDialogClose()
-    setPopperAnchor(null)
-  }
-
-  const onOpen = (e) => {
-    setPopperAnchor(e.currentTarget)
-  }
-
-  return (
-    <>
-      {anchor({
-        open: onOpen,
-      })}
-      <CustomPopover
-        open={Boolean(popperAnchor)}
-        content={content}
-        popoverProps={popoverProps}
-        onClose={onClose}
-        popperAnchor={popperAnchor}
-      />
-    </>
-  )
-}
-
-interface CustomDialogProps {
-  content: (props: { close: () => void }) => ReactNode
-  onClose: () => void
-  open: boolean
-  popoverProps?: Omit<PopoverProps, 'open'>
-  popperAnchor: any
-}
-
-export const CustomPopover = ({
-  onClose,
-  popoverProps,
-  content,
-  open,
-  popperAnchor,
-}: CustomDialogProps) => {
-  return (
-    <>
-      <Popover
-        onClose={onClose}
-        open={open}
-        transitionDuration={140}
-        TransitionComponent={Transition}
-        PaperProps={{
-          ...popoverProps?.PaperProps,
-          elevation: 2,
-          sx: {
-            borderRadius: '10px',
-            border: '1px solid #1212121A',
-            boxShadow: '0px 4px 16px #0000000F',
-          },
-        }}
-        anchorEl={popperAnchor}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        sx={{
-          ...popoverProps?.sx,
-        }}
-        {...popoverProps}
-      >
-        {content({ close: onClose })}
-      </Popover>
-    </>
-  )
-}
+import { Grow, Popover, PopoverProps } from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { ReactNode, forwardRef, useState } from 'react'
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
+
+interface PopoverButtonProps {
+  anchor: (props: { open: (e: any) => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  popoverProps?: Omit<PopoverProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function PopoverButton({
+  content,
+  popoverProps,
+  onDialogClose,
+  anchor,
+}: PopoverButtonProps) {
+  const [popperAnchor, setPopperAnchor] = useState(null)
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setPopperAnchor(null)
+  }
+
+  const onOpen = (e) => {
+    setPopperAnchor(e.currentTarget)
+  }
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <CustomPopover
+        open={Boolean(popperAnchor)}
+        content={content}
+        popoverProps={popoverProps}
+        onClose={onClose}
+        popperAnchor={popperAnchor}
+      />
+    </>
+  )
+}
+
+interface CustomDialogProps {
+  content: (props: { close: () => void }) => ReactNode
+  onClose: () => void
+  open: boolean
+  popoverProps?: Omit<PopoverProps, 'open'>
+  popperAnchor: any
+}
+
+export const CustomPopover = ({
+  onClose,
+  popoverProps,
+  content,
+  open,
+  popperAnchor,
+}: CustomDialogProps) => {
+  return (
+    <>
+      <Popover
+        onClose={onClose}
+        open={open}
+        transitionDuration={140}
+        TransitionComponent={Transition}
+        PaperProps={{
+          ...popoverProps?.PaperProps,
+          elevation: 2,
+          sx: {
+            borderRadius: '10px',
+            border: '1px solid #1212121A',
+            boxShadow: '0px 4px 16px #0000000F',
+          },
+        }}
+        anchorEl={popperAnchor}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        sx={{
+          ...popoverProps?.sx,
+        }}
+        {...popoverProps}
+      >
+        {content({ close: onClose })}
+      </Popover>
+    </>
+  )
+}

package/src/components/ModalButtons/index.tsx

@@ -1,4 +1,4 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }
+import DialogButton from './DialogButton'
+import DrawerButton from './DrawerButton'
+
+export { DialogButton, DrawerButton }

package/src/components/NoDataIllustration.tsx

@@ -1,32 +1,35 @@
-import { Box, Typography } from '@mui/material'
-import Image from './Image'
-import { ReactNode } from 'react'
-
-interface Props {
-  imageSrc: string
-  height?: string
-  message?: string | ReactNode
-}
-
-export default function NoData({
-  imageSrc,
-  height = '300px',
-  message = 'No Data Found',
-}: Props) {
-  return (
-    <Box
-      sx={{
-        marginTop: '20px',
-      }}
-    >
-      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
-      {typeof message === 'string' ? (
-        <Typography marginTop={'20px'} textAlign={'center'}>
-          {message}
-        </Typography>
-      ) : (
-        <>{message}</>
-      )}
-    </Box>
-  )
-}
+import { Box, Typography, styled } from '@mui/material'
+import { ReactNode } from 'react'
+import Image from './Image'
+
+interface Props {
+  imageSrc: string
+  height?: string
+  message?: string | ReactNode
+}
+
+export default function NoData({
+  imageSrc,
+  height = '300px',
+  message = 'No Data Found',
+}: Props) {
+  return (
+    <Box
+      sx={{
+        marginTop: '20px',
+      }}
+    >
+      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
+      {typeof message === 'string' ? (
+        <StyledTypography variant="h6">{message}</StyledTypography>
+      ) : (
+        <>{message}</>
+      )}
+    </Box>
+  )
+}
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  opacity: '0.5',
+  marginTop: '20px',
+  textAlign: 'center',
+}))

package/src/components/PageContent.tsx

@@ -1,12 +1,12 @@
-import { Box, BoxProps, styled } from '@mui/material'
-
-const StyledPageContent = styled(Box)(() => ({
-  paddingLeft: '25px',
-  paddingRight: '25px',
-  marginTop: '16px',
-  paddingBottom: '3rem',
-}))
-
-export function PageContent(props: BoxProps) {
-  return <StyledPageContent {...props}>{props.children}</StyledPageContent>
-}
+import { Box, BoxProps, styled } from '@mui/material'
+
+const StyledPageContent = styled(Box)(() => ({
+  paddingLeft: '25px',
+  paddingRight: '25px',
+  marginTop: '16px',
+  paddingBottom: '3rem',
+}))
+
+export function PageContent(props: BoxProps) {
+  return <StyledPageContent {...props}>{props.children}</StyledPageContent>
+}

package/src/components/PageHeader.tsx

@@ -1,55 +1,55 @@
-import { Box, styled, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-interface PageHeaderProps {
-  title: string | ReactNode
-  subtitle?: string | ReactNode
-  actions?: ReactNode
-  noPadding?: boolean
-}
-
-const StyledBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'noPadding',
-})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
-  minHeight: '40px',
-  padding: noPadding ? 0 : '0 25px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  margin: '1rem 0',
-  flexWrap: 'wrap',
-  '& .actions': {
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center',
-    marginLeft: 'auto',
-    '& .MuiButton-root': {
-      height: '40px',
-    },
-  },
-}))
-
-export default function PageHeader({
-  title,
-  subtitle,
-  actions,
-  noPadding = false,
-}: PageHeaderProps) {
-  return (
-    <StyledBox noPadding={noPadding}>
-      <>
-        {typeof title === 'string' ? (
-          <Typography variant="h1">{title}</Typography>
-        ) : (
-          title
-        )}
-        {typeof subtitle === 'string' ? (
-          <Typography>{subtitle}</Typography>
-        ) : (
-          <Box marginTop={'10px'}>{subtitle}</Box>
-        )}
-      </>
-      <Box className="actions">{actions}</Box>
-    </StyledBox>
-  )
-}
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string | ReactNode
+  subtitle?: string | ReactNode
+  actions?: ReactNode
+  noPadding?: boolean
+}
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
+  minHeight: '40px',
+  padding: noPadding ? 0 : '0 25px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '1rem 0',
+  flexWrap: 'wrap',
+  '& .actions': {
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center',
+    marginLeft: 'auto',
+    '& .MuiButton-root': {
+      height: '40px',
+    },
+  },
+}))
+
+export default function PageHeader({
+  title,
+  subtitle,
+  actions,
+  noPadding = false,
+}: PageHeaderProps) {
+  return (
+    <StyledBox noPadding={noPadding}>
+      <>
+        {typeof title === 'string' ? (
+          <Typography variant="h1">{title}</Typography>
+        ) : (
+          title
+        )}
+        {typeof subtitle === 'string' ? (
+          <Typography>{subtitle}</Typography>
+        ) : (
+          <Box marginTop={'10px'}>{subtitle}</Box>
+        )}
+      </>
+      <Box className="actions">{actions}</Box>
+    </StyledBox>
+  )
+}

package/src/components/PageNotFound.tsx

@@ -1,26 +1,26 @@
-import { Box, Button, Typography } from '@mui/material'
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import { pagenotfound } from '../assets/images'
-
-function PageNotFound() {
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginTop: '50px',
-        }}
-      >
-        <img src={pagenotfound} alt="page not found" width={470} />
-        <Typography variant="h1">Page Not Found.</Typography>
-      </Box>
-    </>
-  )
-}
-
-export default PageNotFound
+import { Box, Button, Typography } from '@mui/material'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { pagenotfound } from '../assets/images'
+
+function PageNotFound() {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginTop: '50px',
+        }}
+      >
+        <img src={pagenotfound} alt="page not found" width={470} />
+        <Typography variant="h1">Page Not Found.</Typography>
+      </Box>
+    </>
+  )
+}
+
+export default PageNotFound

package/src/components/PopupConfirm/ConfirmContextProvider.tsx

@@ -1,40 +1,40 @@
-import { createContext, ReactNode, useState } from 'react'
-import PopupConfirm from './PopupConfirm'
-
-interface ConfirmContextProps {
-  confirm: {
-    prompt: ReactNode
-    isOpen: boolean
-    proceed: () => void
-    cancel: () => void
-  }
-  setConfirm: any
-}
-
-export const ConfirmContext = createContext<ConfirmContextProps>({
-  confirm: {
-    cancel: () => {},
-    proceed: () => {},
-    prompt: 'Are you sure?',
-    isOpen: false,
-  },
-  setConfirm: () => {},
-})
-
-const ConfirmContextProvider = ({ children }) => {
-  const [confirm, setConfirm] = useState({
-    prompt: '',
-    isOpen: false,
-    proceed: null,
-    cancel: null,
-  })
-
-  return (
-    <ConfirmContext.Provider value={{ confirm, setConfirm }}>
-      {children}
-      <PopupConfirm />
-    </ConfirmContext.Provider>
-  )
-}
-
-export default ConfirmContextProvider
+import { createContext, ReactNode, useState } from 'react'
+import PopupConfirm from './PopupConfirm'
+
+interface ConfirmContextProps {
+  confirm: {
+    prompt: ReactNode
+    isOpen: boolean
+    proceed: () => void
+    cancel: () => void
+  }
+  setConfirm: any
+}
+
+export const ConfirmContext = createContext<ConfirmContextProps>({
+  confirm: {
+    cancel: () => {},
+    proceed: () => {},
+    prompt: 'Are you sure?',
+    isOpen: false,
+  },
+  setConfirm: () => {},
+})
+
+const ConfirmContextProvider = ({ children }) => {
+  const [confirm, setConfirm] = useState({
+    prompt: '',
+    isOpen: false,
+    proceed: null,
+    cancel: null,
+  })
+
+  return (
+    <ConfirmContext.Provider value={{ confirm, setConfirm }}>
+      {children}
+      <PopupConfirm />
+    </ConfirmContext.Provider>
+  )
+}
+
+export default ConfirmContextProvider