@campxdev/shared 1.4.19 → 1.4.21

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

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,34 +1,34 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from '@mui/material'
-import useConfirm from './useConfirm'
-
-const PopupConfirm = () => {
-  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
-  return (
-    <Dialog
-      sx={{ zIndex: 1600 }}
-      keepMounted
-      maxWidth="sm"
-      fullWidth
-      open={isOpen}
-      transitionDuration={150}
-    >
-      <DialogTitle>Confirm</DialogTitle>
-      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="primary" onClick={proceed}>
-          Ok
-        </Button>
-        <Button color="secondary" variant="outlined" onClick={cancel}>
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-export default PopupConfirm
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+import useConfirm from './useConfirm'
+
+const PopupConfirm = () => {
+  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
+  return (
+    <Dialog
+      sx={{ zIndex: 1600 }}
+      keepMounted
+      maxWidth="sm"
+      fullWidth
+      open={isOpen}
+      transitionDuration={150}
+    >
+      <DialogTitle>Confirm</DialogTitle>
+      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="primary" onClick={proceed}>
+          Ok
+        </Button>
+        <Button color="secondary" variant="outlined" onClick={cancel}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+export default PopupConfirm

package/src/components/PopupConfirm/index.tsx

@@ -1 +1 @@
-export { default } from './PopupConfirm'
+export { default } from './PopupConfirm'

package/src/components/PopupConfirm/useConfirm.ts

@@ -1,47 +1,47 @@
-import { ReactNode, useContext, useEffect, useState } from 'react'
-import { ConfirmContext } from './ConfirmContextProvider'
-
-export default function useConfirm(): {
-  isConfirmed: (prompt?: string) => Promise<boolean>
-  prompt?: ReactNode
-  isOpen?: boolean
-  proceed?: () => void
-  cancel?: () => void
-} {
-  const { confirm, setConfirm } = useContext(ConfirmContext)
-  const [needsCleanup, setNeedsCleanup] = useState(false)
-
-  const isConfirmed = (prompt) => {
-    setNeedsCleanup(true)
-    const promise = new Promise((resolve, reject) => {
-      setConfirm({
-        prompt,
-        isOpen: true,
-        proceed: resolve,
-        cancel: reject,
-      })
-    })
-    return promise.then(
-      () => {
-        setConfirm({ ...confirm, isOpen: false })
-        return true
-      },
-      () => {
-        setConfirm({ ...confirm, isOpen: false })
-        return false
-      },
-    )
-  }
-
-  useEffect(() => {
-    return () => {
-      if (confirm.cancel && needsCleanup) {
-        confirm.cancel()
-      }
-    }
-  }, [confirm, needsCleanup])
-  return {
-    ...confirm,
-    isConfirmed,
-  }
-}
+import { ReactNode, useContext, useEffect, useState } from 'react'
+import { ConfirmContext } from './ConfirmContextProvider'
+
+export default function useConfirm(): {
+  isConfirmed: (prompt?: string) => Promise<boolean>
+  prompt?: ReactNode
+  isOpen?: boolean
+  proceed?: () => void
+  cancel?: () => void
+} {
+  const { confirm, setConfirm } = useContext(ConfirmContext)
+  const [needsCleanup, setNeedsCleanup] = useState(false)
+
+  const isConfirmed = (prompt) => {
+    setNeedsCleanup(true)
+    const promise = new Promise((resolve, reject) => {
+      setConfirm({
+        prompt,
+        isOpen: true,
+        proceed: resolve,
+        cancel: reject,
+      })
+    })
+    return promise.then(
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return true
+      },
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return false
+      },
+    )
+  }
+
+  useEffect(() => {
+    return () => {
+      if (confirm.cancel && needsCleanup) {
+        confirm.cancel()
+      }
+    }
+  }, [confirm, needsCleanup])
+  return {
+    ...confirm,
+    isConfirmed,
+  }
+}

package/src/components/Row.tsx

@@ -1,24 +1,24 @@
-import { Box, SxProps } from '@mui/material'
-import { ReactNode } from 'react'
-
-export default function Row({
-  gap,
-  children,
-  sx,
-}: {
-  gap: number
-  children: ReactNode
-  sx?: SxProps
-}) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: `${gap}px`,
-        ...sx,
-      }}
-    >
-      {children}
-    </Box>
-  )
-}
+import { Box, SxProps } from '@mui/material'
+import { ReactNode } from 'react'
+
+export default function Row({
+  gap,
+  children,
+  sx,
+}: {
+  gap: number
+  children: ReactNode
+  sx?: SxProps
+}) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: `${gap}px`,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/Spinner.tsx

@@ -1,18 +1,18 @@
-import { CircularProgress } from '@mui/material'
-
-function Spinner({ height = '200px' }: { height?: string | number }) {
-  return (
-    <div
-      style={{
-        justifyContent: 'center',
-        alignItems: 'center',
-        height,
-        display: 'flex',
-      }}
-    >
-      <CircularProgress />
-    </div>
-  )
-}
-
-export default Spinner
+import { CircularProgress } from '@mui/material'
+
+function Spinner({ height = '200px' }: { height?: string | number }) {
+  return (
+    <div
+      style={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height,
+        display: 'flex',
+      }}
+    >
+      <CircularProgress />
+    </div>
+  )
+}
+
+export default Spinner