@campxdev/shared 1.5.8 → 1.6.0

package/src/components/Breadcrumbs.tsx

@@ -1,72 +1,72 @@
-import ChevronLeft from '@mui/icons-material/ChevronLeft'
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  IconButton,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-
-interface BreadcrumbsProps {
-  links: { to: string; name: string | ReactNode }[]
-  icon?: ReactNode
-}
-
-const StyledStack = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  '& .MuiSvgIcon-root': {
-    fontSize: '28px',
-  },
-  '& .MuiTypography-root': {
-    fontSize: '18px',
-    fontWeight: 600,
-  },
-}))
-
-const StyledLink = styled(Link)(({ theme }) => ({
-  textDecoration: 'none',
-  color: theme.palette.text.primary,
-  transition: 'color 0.2s ease-in-out',
-  fontFamily: 'Poppins',
-  '&:hover': {
-    color: theme.palette.common.yellow,
-  },
-}))
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  padding: 0,
-  marginRight: '5px',
-}))
-
-export default function Breadcrumbs({ links, icon }: BreadcrumbsProps) {
-  const navigate = useNavigate()
-  let linksArray = links.slice(0, -1)
-  let currentPage = links.slice(-1)[0]
-  const backLink = links.slice(-2)[0]
-
-  return (
-    <StyledStack direction={'row'} alignItems="center">
-      {linksArray?.length ? (
-        <StyledIconButton
-          onClick={() => {
-            navigate(backLink.to)
-          }}
-        >
-          {icon ? icon : <ChevronLeft />}
-        </StyledIconButton>
-      ) : null}
-      <MuiBreadcrumbs separator={<Typography variant="h3">/</Typography>}>
-        {linksArray.map((link, index) => (
-          <StyledLink to={link.to} key={index}>
-            {link?.name}
-          </StyledLink>
-        ))}
-        <Typography variant="h3">{currentPage?.name}</Typography>
-      </MuiBreadcrumbs>
-    </StyledStack>
-  )
-}
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import {
+  Breadcrumbs as MuiBreadcrumbs,
+  IconButton,
+  Stack,
+  styled,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+
+interface BreadcrumbsProps {
+  links: { to: string; name: string | ReactNode }[]
+  icon?: ReactNode
+}
+
+const StyledStack = styled(Stack)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  '& .MuiSvgIcon-root': {
+    fontSize: '28px',
+  },
+  '& .MuiTypography-root': {
+    fontSize: '18px',
+    fontWeight: 600,
+  },
+}))
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  textDecoration: 'none',
+  color: theme.palette.text.primary,
+  transition: 'color 0.2s ease-in-out',
+  fontFamily: 'Poppins',
+  '&:hover': {
+    color: theme.palette.common.yellow,
+  },
+}))
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  padding: 0,
+  marginRight: '5px',
+}))
+
+export default function Breadcrumbs({ links, icon }: BreadcrumbsProps) {
+  const navigate = useNavigate()
+  let linksArray = links.slice(0, -1)
+  let currentPage = links.slice(-1)[0]
+  const backLink = links.slice(-2)[0]
+
+  return (
+    <StyledStack direction={'row'} alignItems="center">
+      {linksArray?.length ? (
+        <StyledIconButton
+          onClick={() => {
+            navigate(backLink.to)
+          }}
+        >
+          {icon ? icon : <ChevronLeft />}
+        </StyledIconButton>
+      ) : null}
+      <MuiBreadcrumbs separator={<Typography variant="h3">/</Typography>}>
+        {linksArray.map((link, index) => (
+          <StyledLink to={link.to} key={index}>
+            {link?.name}
+          </StyledLink>
+        ))}
+        <Typography variant="h3">{currentPage?.name}</Typography>
+      </MuiBreadcrumbs>
+    </StyledStack>
+  )
+}

package/src/components/Card.tsx

@@ -1,98 +1,98 @@
-import ChevronRight from '@mui/icons-material/ChevronRight'
-import {
-  Box,
-  Button,
-  Card as MuiCard,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardMedia,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-interface CardProps {
-  title: string | ReactNode
-  subheader?: string | ReactNode
-  children?: ReactNode
-  footer?: {
-    buttonText?: string | ReactNode
-    onClick: () => void
-    endIcon?: ReactNode
-    buttonProps?: any
-  }
-  image?: {
-    url: string
-    height: number
-  }
-  moreActions?: ReactNode
-}
-
-export default function Card({
-  title,
-  subheader,
-  children,
-  footer,
-  image,
-  moreActions,
-}: CardProps) {
-  const handleClick = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    footer?.onClick()
-  }
-
-  return (
-    <StyledCard>
-      <CardMedia component="img" height={image?.height} image={image?.url} />
-      <Box sx={{ position: 'relative', width: '100%' }}>
-        <StyledMoreActions>{moreActions}</StyledMoreActions>
-        <CardHeader title={title} subheader={subheader} />
-      </Box>
-      <CardContent sx={{ height: 'fit-content' }}>{children}</CardContent>
-      {footer && (
-        <StyledCardActions>
-          <Button
-            variant="text"
-            fullWidth
-            onClick={handleClick}
-            endIcon={footer?.endIcon ?? <ChevronRight />}
-            {...footer?.buttonProps}
-            sx={{ fontSize: '14px' }}
-          >
-            {footer?.buttonText ?? 'View'}
-          </Button>
-        </StyledCardActions>
-      )}
-    </StyledCard>
-  )
-}
-
-const StyledMoreActions = styled(Box)(({ theme }) => ({
-  position: 'absolute',
-  right: '10px',
-  top: '15px',
-}))
-
-const StyledCard = styled(MuiCard)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  height: '100%',
-  '& .MuiCardContent-root': {
-    flexGrow: 1,
-  },
-  '& .MuiCardHeader-root': {
-    alignItems: 'baseline',
-    gap: '6px',
-  },
-}))
-
-const StyledCardActions = styled(CardActions)(({ theme }) => ({
-  borderTop: theme.borders.grayLight,
-  '& .MuiButton-root': {
-    justifyContent: 'space-between',
-    height: '40px',
-    padding: '20px',
-  },
-}))
+import ChevronRight from '@mui/icons-material/ChevronRight'
+import {
+  Box,
+  Button,
+  Card as MuiCard,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface CardProps {
+  title: string | ReactNode
+  subheader?: string | ReactNode
+  children?: ReactNode
+  footer?: {
+    buttonText?: string | ReactNode
+    onClick: () => void
+    endIcon?: ReactNode
+    buttonProps?: any
+  }
+  image?: {
+    url: string
+    height: number
+  }
+  moreActions?: ReactNode
+}
+
+export default function Card({
+  title,
+  subheader,
+  children,
+  footer,
+  image,
+  moreActions,
+}: CardProps) {
+  const handleClick = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    footer?.onClick()
+  }
+
+  return (
+    <StyledCard>
+      <CardMedia component="img" height={image?.height} image={image?.url} />
+      <Box sx={{ position: 'relative', width: '100%' }}>
+        <StyledMoreActions>{moreActions}</StyledMoreActions>
+        <CardHeader title={title} subheader={subheader} />
+      </Box>
+      <CardContent sx={{ height: 'fit-content' }}>{children}</CardContent>
+      {footer && (
+        <StyledCardActions>
+          <Button
+            variant="text"
+            fullWidth
+            onClick={handleClick}
+            endIcon={footer?.endIcon ?? <ChevronRight />}
+            {...footer?.buttonProps}
+            sx={{ fontSize: '14px' }}
+          >
+            {footer?.buttonText ?? 'View'}
+          </Button>
+        </StyledCardActions>
+      )}
+    </StyledCard>
+  )
+}
+
+const StyledMoreActions = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  right: '10px',
+  top: '15px',
+}))
+
+const StyledCard = styled(MuiCard)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  '& .MuiCardContent-root': {
+    flexGrow: 1,
+  },
+  '& .MuiCardHeader-root': {
+    alignItems: 'baseline',
+    gap: '6px',
+  },
+}))
+
+const StyledCardActions = styled(CardActions)(({ theme }) => ({
+  borderTop: theme.borders.grayLight,
+  '& .MuiButton-root': {
+    justifyContent: 'space-between',
+    height: '40px',
+    padding: '20px',
+  },
+}))

package/src/components/CardsGrid.tsx

@@ -1,28 +1,28 @@
-import { Box, SxProps } from '@mui/material'
-import React from 'react'
-export default function CardsGrid({
-  cardWidth,
-  gap,
-  children,
-  sx,
-}: {
-  cardWidth: number
-  gap: number
-  children: React.ReactNode
-  sx?: SxProps
-}) {
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        display: 'grid',
-        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
-        alignItems: 'start',
-        gap: `${gap}px`,
-        ...sx,
-      }}
-    >
-      {children}
-    </Box>
-  )
-}
+import { Box, SxProps } from '@mui/material'
+import React from 'react'
+export default function CardsGrid({
+  cardWidth,
+  gap,
+  children,
+  sx,
+}: {
+  cardWidth: number
+  gap: number
+  children: React.ReactNode
+  sx?: SxProps
+}) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
+        alignItems: 'start',
+        gap: `${gap}px`,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/ChangePassword.tsx

@@ -1,123 +1,123 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material'
-import {
-  Button,
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  Stack,
-} from '@mui/material'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-toastify'
-import { FormTextField } from '.'
-import axios, { axiosErrorToast } from '../config/axios'
-import { isDevelopment } from '../constants/isDevelopment'
-
-function ChangePassword({ close }) {
-  const [showPassword, setShowPassword] = useState({
-    oldPassword: false,
-    newPassword: false,
-    confirmPassword: false,
-  })
-  const [isLoading, setIsLoading] = useState(false)
-
-  const { handleSubmit, control, reset } = useForm()
-
-  const onSubmit = async (formData) => {
-    setIsLoading(true)
-    const { oldPassword, newPassword, confirmPassword } = formData
-    if (newPassword === confirmPassword) {
-      try {
-        await axios.post(
-          isDevelopment
-            ? 'https://auth-api.campx.dev/auth/change-password'
-            : 'https://auth-api.campx.in/auth/change-password',
-          {
-            oldPassword,
-            newPassword,
-          },
-        )
-        toast.success('Password Changed Successfully')
-        setIsLoading(false)
-        reset()
-        close()
-      } catch (error) {
-        axiosErrorToast(error)
-        setIsLoading(false)
-      }
-    } else {
-      toast.error('New Password, Confirm Password must be same')
-      setIsLoading(false)
-    }
-  }
-
-  const fields = [
-    { label: 'Old Password', name: 'oldPassword' },
-    { label: 'New Password', name: 'newPassword' },
-    { label: 'Confirm Password', name: 'confirmPassword' },
-  ]
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2} direction="column">
-        {fields.map((item) => {
-          return (
-            <>
-              <FormTextField
-                label={item.label}
-                control={control}
-                name={item.name}
-                type={showPassword[item.name] ? 'text' : 'password'}
-                required
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          setShowPassword((prev) => ({
-                            ...prev,
-                            [item.name]: !prev[item.name],
-                          }))
-                        }
-                        edge="end"
-                      >
-                        {showPassword[item.name] ? (
-                          <VisibilityOff />
-                        ) : (
-                          <Visibility />
-                        )}
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </>
-          )
-        })}
-
-        <Stack direction={'row'} gap={2} sx={{ marginTop: '20px' }}>
-          <Button variant="outlined" onClick={close}>
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            endIcon={
-              isLoading && (
-                <CircularProgress
-                  style={{ color: 'white' }}
-                  size="30px"
-                  thickness={1.7}
-                />
-              )
-            }
-          >
-            Submit
-          </Button>
-        </Stack>
-      </Stack>
-    </form>
-  )
-}
-
-export default ChangePassword
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {
+  Button,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  Stack,
+} from '@mui/material'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { FormTextField } from '.'
+import axios, { axiosErrorToast } from '../config/axios'
+import { isDevelopment } from '../constants/isDevelopment'
+
+function ChangePassword({ close }) {
+  const [showPassword, setShowPassword] = useState({
+    oldPassword: false,
+    newPassword: false,
+    confirmPassword: false,
+  })
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { handleSubmit, control, reset } = useForm()
+
+  const onSubmit = async (formData) => {
+    setIsLoading(true)
+    const { oldPassword, newPassword, confirmPassword } = formData
+    if (newPassword === confirmPassword) {
+      try {
+        await axios.post(
+          isDevelopment
+            ? 'https://auth-api.campx.dev/auth/change-password'
+            : 'https://auth-api.campx.in/auth/change-password',
+          {
+            oldPassword,
+            newPassword,
+          },
+        )
+        toast.success('Password Changed Successfully')
+        setIsLoading(false)
+        reset()
+        close()
+      } catch (error) {
+        axiosErrorToast(error)
+        setIsLoading(false)
+      }
+    } else {
+      toast.error('New Password, Confirm Password must be same')
+      setIsLoading(false)
+    }
+  }
+
+  const fields = [
+    { label: 'Old Password', name: 'oldPassword' },
+    { label: 'New Password', name: 'newPassword' },
+    { label: 'Confirm Password', name: 'confirmPassword' },
+  ]
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2} direction="column">
+        {fields.map((item) => {
+          return (
+            <>
+              <FormTextField
+                label={item.label}
+                control={control}
+                name={item.name}
+                type={showPassword[item.name] ? 'text' : 'password'}
+                required
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        size="small"
+                        onClick={() =>
+                          setShowPassword((prev) => ({
+                            ...prev,
+                            [item.name]: !prev[item.name],
+                          }))
+                        }
+                        edge="end"
+                      >
+                        {showPassword[item.name] ? (
+                          <VisibilityOff />
+                        ) : (
+                          <Visibility />
+                        )}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </>
+          )
+        })}
+
+        <Stack direction={'row'} gap={2} sx={{ marginTop: '20px' }}>
+          <Button variant="outlined" onClick={close}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            endIcon={
+              isLoading && (
+                <CircularProgress
+                  style={{ color: 'white' }}
+                  size="30px"
+                  thickness={1.7}
+                />
+              )
+            }
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Stack>
+    </form>
+  )
+}
+
+export default ChangePassword