@campxdev/shared 1.9.1 → 1.9.3

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,67 +1,67 @@
-import { Box, Button, Dialog, styled, Typography } from '@mui/material'
-import useConfirm from './useConfirm'
-const animatedImage = require('./animation.gif')
-
-const StyledImage = styled((props: any) => (
-  <Box>
-    <img {...props} />
-  </Box>
-))(({ theme }) => ({
-  width: '154px',
-  '> img': {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-  },
-}))
-
-const StyledDialogContent = styled(Box)(({ theme }) => ({
-  height: '360px',
-  width: '570px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-}))
-
-const PopupConfirm = () => {
-  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
-  return (
-    <Dialog
-      PaperProps={{
-        elevation: 2,
-        sx: {
-          borderRadius: '10px',
-        },
-      }}
-      sx={{
-        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
-        zIndex: 1600,
-      }}
-      keepMounted
-      maxWidth="sm"
-      fullWidth
-      open={isOpen}
-      transitionDuration={150}
-    >
-      <StyledDialogContent>
-        <Box sx={{ marginBottom: '20px' }}>
-          <StyledImage src={animatedImage} alt="Upload Image" />
-        </Box>
-
-        <Typography variant="h6" sx={{ minHeight: '30px' }}>
-          {prompt}
-        </Typography>
-        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
-          <Button color="secondary" variant="outlined" onClick={cancel}>
-            No, Cancel
-          </Button>
-          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
-            Yes, I'm. Sure
-          </Button>
-        </Box>
-      </StyledDialogContent>
-    </Dialog>
-  )
-}
-export default PopupConfirm
+import { Box, Button, Dialog, styled, Typography } from '@mui/material'
+import useConfirm from './useConfirm'
+const animatedImage = require('./animation.gif')
+
+const StyledImage = styled((props: any) => (
+  <Box>
+    <img {...props} />
+  </Box>
+))(({ theme }) => ({
+  width: '154px',
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+}))
+
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  height: '360px',
+  width: '570px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+}))
+
+const PopupConfirm = () => {
+  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
+  return (
+    <Dialog
+      PaperProps={{
+        elevation: 2,
+        sx: {
+          borderRadius: '10px',
+        },
+      }}
+      sx={{
+        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+        zIndex: 1600,
+      }}
+      keepMounted
+      maxWidth="sm"
+      fullWidth
+      open={isOpen}
+      transitionDuration={150}
+    >
+      <StyledDialogContent>
+        <Box sx={{ marginBottom: '20px' }}>
+          <StyledImage src={animatedImage} alt="Upload Image" />
+        </Box>
+
+        <Typography variant="h6" sx={{ minHeight: '30px' }}>
+          {prompt}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
+          <Button color="secondary" variant="outlined" onClick={cancel}>
+            No, Cancel
+          </Button>
+          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
+            Yes, I'm. Sure
+          </Button>
+        </Box>
+      </StyledDialogContent>
+    </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/ResetPassword.tsx

@@ -1,107 +1,107 @@
-import { VisibilityOff, Visibility } from '@mui/icons-material'
-import { Stack, InputAdornment, IconButton, Button, Alert } from '@mui/material'
-import React, { useState } from 'react'
-import { FormTextField } from './HookForm'
-import axios from '../config/axios'
-import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
-import { toast } from 'react-toastify'
-
-function ResetPassword() {
-  const searchParams = new URLSearchParams(document.location.search)
-  const { handleSubmit, control } = useForm()
-  const navigate = useNavigate()
-  const [error, setError] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-
-  async function handleResetPassword(values) {
-    const token = searchParams.get('token')
-    values.token = token
-
-    if (values.newPassword == values.confirmNewPassword) {
-      try {
-        await axios
-          .post(`https://api.campx.dev/auth-server/auth/reset-password`, values)
-          .then((res) => {
-            navigate('/login')
-            toast.success('Password Changed Successfully')
-          })
-      } catch (err) {
-        if (
-          values.newPassword.length == 0 &&
-          values.confirmNewPassword.length == 0
-        ) {
-          setError('Please enter valid password')
-        } else if (token == null) {
-          setError('Invalid token')
-        } else {
-          setError(err.response.data.message ?? 'Server Error')
-        }
-      }
-    } else {
-      setError("New Password and Confirm New password doesn't match")
-    }
-  }
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(handleResetPassword)}>
-        <Stack gap={'30px'}>
-          <FormTextField
-            control={control}
-            name="newPassword"
-            label="New Password"
-            type={showPassword ? 'text' : 'password'}
-            required
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
-                    onClick={() => setShowPassword((prev) => !prev)}
-                    edge="end"
-                  >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-
-          <FormTextField
-            control={control}
-            name="confirmNewPassword"
-            label="Confirm Password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            required
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
-                    onClick={() => setShowConfirmPassword((prev) => !prev)}
-                    edge="end"
-                  >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-
-          <Button type="submit">Reset Password</Button>
-        </Stack>
-      </form>
-      {error && (
-        <Alert severity="error" sx={{ marginTop: '20px' }}>
-          {error}
-        </Alert>
-      )}
-    </>
-  )
-}
-
-export default ResetPassword
+import { VisibilityOff, Visibility } from '@mui/icons-material'
+import { Stack, InputAdornment, IconButton, Button, Alert } from '@mui/material'
+import React, { useState } from 'react'
+import { FormTextField } from './HookForm'
+import axios from '../config/axios'
+import { useForm } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+function ResetPassword() {
+  const searchParams = new URLSearchParams(document.location.search)
+  const { handleSubmit, control } = useForm()
+  const navigate = useNavigate()
+  const [error, setError] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  async function handleResetPassword(values) {
+    const token = searchParams.get('token')
+    values.token = token
+
+    if (values.newPassword == values.confirmNewPassword) {
+      try {
+        await axios
+          .post(`https://api.campx.dev/auth-server/auth/reset-password`, values)
+          .then((res) => {
+            navigate('/login')
+            toast.success('Password Changed Successfully')
+          })
+      } catch (err) {
+        if (
+          values.newPassword.length == 0 &&
+          values.confirmNewPassword.length == 0
+        ) {
+          setError('Please enter valid password')
+        } else if (token == null) {
+          setError('Invalid token')
+        } else {
+          setError(err.response.data.message ?? 'Server Error')
+        }
+      }
+    } else {
+      setError("New Password and Confirm New password doesn't match")
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(handleResetPassword)}>
+        <Stack gap={'30px'}>
+          <FormTextField
+            control={control}
+            name="newPassword"
+            label="New Password"
+            type={showPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <FormTextField
+            control={control}
+            name="confirmNewPassword"
+            label="Confirm Password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowConfirmPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <Button type="submit">Reset Password</Button>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </>
+  )
+}
+
+export default ResetPassword

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