@campxdev/shared 0.5.20 → 0.5.22

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/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/Row/index.tsx

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

package/src/components/SearchBar/SearchBar.tsx

@@ -1,53 +1,53 @@
-import { Search, Tune } from '@mui/icons-material'
-import { Box, InputAdornment, styled, TextField } from '@mui/material'
-import { useState } from 'react'
-
-interface SearchBarProps {
-  onSearch: (v: string) => void
-  filters?: {
-    onClick: () => void
-  }
-}
-
-export default function SearchBar({ onSearch, filters }: SearchBarProps) {
-  const [search, setSearch] = useState('')
-  return (
-    <Box sx={{ display: 'flex', gap: '20px' }}>
-      <TextField
-        sx={{ maxWidth: '600px' }}
-        label="Search"
-        value={search}
-        onChange={(e) => {
-          setSearch(e.target.value)
-          onSearch(e.target.value)
-        }}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <Search />
-            </InputAdornment>
-          ),
-        }}
-      />
-      {filters && (
-        <StyledButtonWrapper onClick={filters?.onClick}>
-          <Tune />
-        </StyledButtonWrapper>
-      )}
-    </Box>
-  )
-}
-
-const StyledButtonWrapper = styled(Box)(({ theme }) => ({
-  width: '52px',
-  border: theme.borders.grayLight,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  '&:active': {
-    border: `1px solid ${theme.palette.primary.main}`,
-  },
-  transition: 'border 0.1s ease-in-out',
-}))
+import { Search, Tune } from '@mui/icons-material'
+import { Box, InputAdornment, styled, TextField } from '@mui/material'
+import { useState } from 'react'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  filters?: {
+    onClick: () => void
+  }
+}
+
+export default function SearchBar({ onSearch, filters }: SearchBarProps) {
+  const [search, setSearch] = useState('')
+  return (
+    <Box sx={{ display: 'flex', gap: '20px' }}>
+      <TextField
+        sx={{ maxWidth: '600px' }}
+        label="Search"
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value)
+          onSearch(e.target.value)
+        }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <Search />
+            </InputAdornment>
+          ),
+        }}
+      />
+      {filters && (
+        <StyledButtonWrapper onClick={filters?.onClick}>
+          <Tune />
+        </StyledButtonWrapper>
+      )}
+    </Box>
+  )
+}
+
+const StyledButtonWrapper = styled(Box)(({ theme }) => ({
+  width: '52px',
+  border: theme.borders.grayLight,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  '&:active': {
+    border: `1px solid ${theme.palette.primary.main}`,
+  },
+  transition: 'border 0.1s ease-in-out',
+}))

package/src/components/SearchBar/index.tsx

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

package/src/components/SideMenuHeader.tsx

@@ -1,29 +1,29 @@
-import { KeyboardBackspace } from "@mui/icons-material";
-import { Box, styled as styledMui, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-
-const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
-  height: "60px",
-  display: "flex",
-  gap: "8px",
-  alignItems: "center",
-  cursor: "pointer",
-  background: "#1d1d1d",
-}));
-
-export const SideMenuHeader = ({ title, path }) => {
-  const navigate = useNavigate();
-
-  return (
-    <StyledSideMenuHeader
-      onClick={() => {
-        navigate(path);
-      }}
-    >
-      <KeyboardBackspace />
-      <Typography variant="h3" color={"white"}>
-        {title}
-      </Typography>
-    </StyledSideMenuHeader>
-  );
-};
+import { KeyboardBackspace } from '@mui/icons-material'
+import { Box, styled as styledMui, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+
+const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
+  height: '60px',
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  cursor: 'pointer',
+  background: '#1d1d1d',
+}))
+
+export const SideMenuHeader = ({ title, path }) => {
+  const navigate = useNavigate()
+
+  return (
+    <StyledSideMenuHeader
+      onClick={() => {
+        navigate(path)
+      }}
+    >
+      <KeyboardBackspace />
+      <Typography variant="h3" color={'white'}>
+        {title}
+      </Typography>
+    </StyledSideMenuHeader>
+  )
+}