@campxdev/shared 1.1.4 → 1.1.6

package/src/components/ChangePassword.tsx

@@ -1,164 +1,164 @@
-import {
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogTitle,
-  IconButton,
-  InputAdornment,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material'
-import { isDevelopment } from '../constants/isDevelopment'
-import CloseIcon from '@mui/icons-material/Close'
-import { Visibility, VisibilityOff } from '@mui/icons-material'
-import React, { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useModal } from './DrawerWrapper/DrawerWrapper'
-import { FormTextField } from '.'
-import axios, { axiosErrorToast } from '../config/axios'
-import { toast } from 'react-toastify'
-
-export interface DialogProps {
-  open: boolean
-  onClose: any
-}
-
-function ChangePassword(props: DialogProps) {
-  const { onClose, open } = props
-  const handleClose = () => {
-    onClose()
-  }
-  const modal = useModal()
-
-  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()
-        handleClose()
-      } catch (error) {
-        axiosErrorToast(error)
-        setIsLoading(false)
-        reset()
-        handleClose()
-      }
-    } 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 (
-    <Dialog
-      open={open}
-      PaperProps={{
-        sx: {
-          borderRadius: '20px',
-          width: '500px',
-          padding: '20px',
-        },
-      }}
-    >
-      <StyledDialogTitle>
-        <Typography variant="h3">Change Password</Typography>
-        <IconButton onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
-      </StyledDialogTitle>
-      <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={handleClose}>
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              endIcon={
-                isLoading && (
-                  <CircularProgress
-                    style={{ color: 'white' }}
-                    size="30px"
-                    thickness={1.7}
-                  />
-                )
-              }
-            >
-              Submit
-            </Button>
-          </Stack>
-        </Stack>
-      </form>
-    </Dialog>
-  )
-}
-
-const StyledDialogTitle = styled(DialogTitle)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '10px',
-  marginBottom: '20px',
-})
-export default ChangePassword
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogTitle,
+  IconButton,
+  InputAdornment,
+  Stack,
+  styled,
+  Typography,
+} from '@mui/material'
+import { isDevelopment } from '../constants/isDevelopment'
+import CloseIcon from '@mui/icons-material/Close'
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useModal } from './DrawerWrapper/DrawerWrapper'
+import { FormTextField } from '.'
+import axios, { axiosErrorToast } from '../config/axios'
+import { toast } from 'react-toastify'
+
+export interface DialogProps {
+  open: boolean
+  onClose: any
+}
+
+function ChangePassword(props: DialogProps) {
+  const { onClose, open } = props
+  const handleClose = () => {
+    onClose()
+  }
+  const modal = useModal()
+
+  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()
+        handleClose()
+      } catch (error) {
+        axiosErrorToast(error)
+        setIsLoading(false)
+        reset()
+        handleClose()
+      }
+    } 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 (
+    <Dialog
+      open={open}
+      PaperProps={{
+        sx: {
+          borderRadius: '20px',
+          width: '500px',
+          padding: '20px',
+        },
+      }}
+    >
+      <StyledDialogTitle>
+        <Typography variant="h3">Change Password</Typography>
+        <IconButton onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+      </StyledDialogTitle>
+      <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={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              endIcon={
+                isLoading && (
+                  <CircularProgress
+                    style={{ color: 'white' }}
+                    size="30px"
+                    thickness={1.7}
+                  />
+                )
+              }
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
+      </form>
+    </Dialog>
+  )
+}
+
+const StyledDialogTitle = styled(DialogTitle)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px',
+  marginBottom: '20px',
+})
+export default ChangePassword

package/src/components/Chips.tsx

@@ -1,81 +1,81 @@
-import { Chip, Stack, styled } from '@mui/material'
-import { ReactNode, useEffect, useState } from 'react'
-
-type IChip = {
-  label: string
-  value: string
-}
-
-interface ChipsProps {
-  list: { label: string | ReactNode; value: string | number }[]
-  selected: string[] | string | number
-  onSelected: (selected: IChip[] | any) => void
-  direction?: 'row' | 'column'
-  singleSelection?: boolean
-  toggle?: boolean
-}
-
-export default function Chips({
-  list = [],
-  selected: _selected,
-  onSelected,
-  direction = 'row',
-  singleSelection = true,
-  toggle = false,
-}: ChipsProps) {
-  const [selected, setSelected] = useState<any[] | any>([])
-
-  useEffect(() => {
-    setSelected(_selected)
-  }, [_selected])
-
-  const handleChange = (value) => {
-    if (singleSelection) {
-      if (selected === value && !toggle) {
-        setSelected('')
-        onSelected('')
-      } else {
-        setSelected(value)
-        onSelected(value)
-      }
-    } else {
-      if (selected.includes(value)) {
-        setSelected((prev) => prev.filter((item) => item !== value))
-        onSelected(selected.filter((item) => item !== value))
-      } else {
-        setSelected([...selected, value])
-        onSelected([...selected, value])
-      }
-    }
-  }
-
-  const isSelected = (value) =>
-    singleSelection ? selected === value : selected.includes(value)
-
-  return (
-    <Stack gap={'8px'} direction={direction} flexWrap={'wrap'}>
-      {list.map((item, index) => (
-        <StyledChip
-          key={index}
-          color={'primary'}
-          label={item.label}
-          clickable
-          variant={isSelected(item?.value) ? 'outlined' : 'filled'}
-          onClick={() => handleChange(item?.value)}
-        />
-      ))}
-    </Stack>
-  )
-}
-
-const StyledChip = styled(Chip)(({ theme }) => ({
-  minWidth: '100px',
-  '&.MuiButtonBase-root.MuiChip-filled': {
-    background: theme.palette.secondary.light,
-    color: theme.palette.text.primary,
-  },
-  height: '40px',
-  fontSize: '14px',
-  fontWeight: 700,
-  borderRadius: '20px',
-}))
+import { Chip, Stack, styled } from '@mui/material'
+import { ReactNode, useEffect, useState } from 'react'
+
+type IChip = {
+  label: string
+  value: string
+}
+
+interface ChipsProps {
+  list: { label: string | ReactNode; value: string | number }[]
+  selected: string[] | string | number
+  onSelected: (selected: IChip[] | any) => void
+  direction?: 'row' | 'column'
+  singleSelection?: boolean
+  toggle?: boolean
+}
+
+export default function Chips({
+  list = [],
+  selected: _selected,
+  onSelected,
+  direction = 'row',
+  singleSelection = true,
+  toggle = false,
+}: ChipsProps) {
+  const [selected, setSelected] = useState<any[] | any>([])
+
+  useEffect(() => {
+    setSelected(_selected)
+  }, [_selected])
+
+  const handleChange = (value) => {
+    if (singleSelection) {
+      if (selected === value && !toggle) {
+        setSelected('')
+        onSelected('')
+      } else {
+        setSelected(value)
+        onSelected(value)
+      }
+    } else {
+      if (selected.includes(value)) {
+        setSelected((prev) => prev.filter((item) => item !== value))
+        onSelected(selected.filter((item) => item !== value))
+      } else {
+        setSelected([...selected, value])
+        onSelected([...selected, value])
+      }
+    }
+  }
+
+  const isSelected = (value) =>
+    singleSelection ? selected === value : selected.includes(value)
+
+  return (
+    <Stack gap={'8px'} direction={direction} flexWrap={'wrap'}>
+      {list.map((item, index) => (
+        <StyledChip
+          key={index}
+          color={'primary'}
+          label={item.label}
+          clickable
+          variant={isSelected(item?.value) ? 'outlined' : 'filled'}
+          onClick={() => handleChange(item?.value)}
+        />
+      ))}
+    </Stack>
+  )
+}
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  minWidth: '100px',
+  '&.MuiButtonBase-root.MuiChip-filled': {
+    background: theme.palette.secondary.light,
+    color: theme.palette.text.primary,
+  },
+  height: '40px',
+  fontSize: '14px',
+  fontWeight: 700,
+  borderRadius: '20px',
+}))

package/src/components/Detail.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
-
-interface DetailProps {
-  label: string
-  value: string | number
-}
-
-export default function Detail(props: DetailProps) {
-  return (
-    <div>
-      <div>{props.label}</div>
-      <h3>{props.value}</h3>
-    </div>
-  )
-}
+import React from 'react'
+
+interface DetailProps {
+  label: string
+  value: string | number
+}
+
+export default function Detail(props: DetailProps) {
+  return (
+    <div>
+      <div>{props.label}</div>
+      <h3>{props.value}</h3>
+    </div>
+  )
+}

package/src/components/DetailsGrid.tsx

@@ -1,52 +1,52 @@
-import { Box, BoxProps, styled, useTheme } from '@mui/material'
-import LabelValue from './LabelValue'
-import { ReactNode } from 'react'
-
-interface DetailsGridProps {
-  colCount: number
-  inverseLabels?: boolean
-  list: { label: ReactNode; value?: ReactNode }[]
-  noBorder?: boolean
-  space?: number
-}
-
-const StyledGrid = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'noBorder',
-})<{ cols: number; noBorder: boolean; space: number }>(
-  ({ theme, cols, noBorder, space }) => ({
-    padding: noBorder ? '1rem' : '20px',
-    marginTop: noBorder ? 0 : '1rem',
-    border: noBorder ? 'none' : theme.borders.grayLight,
-    display: 'grid',
-    gridTemplateColumns: `repeat(${cols}, 1fr)`,
-    gap: `${space}px`,
-    borderRadius: '10px',
-    [`& > :not(:nth-of-type(${cols}n))`]: {
-      borderRight: theme.borders.grayLight,
-    },
-    '& > :last-child': {
-      borderRight: 'none',
-    },
-  }),
-)
-
-export default function DetailsGrid({
-  colCount,
-  inverseLabels = false,
-  list,
-  noBorder = false,
-  space = 16,
-}: DetailsGridProps) {
-  return (
-    <StyledGrid cols={colCount} space={space} noBorder={noBorder}>
-      {list?.map((item, index) => (
-        <LabelValue
-          reverse={inverseLabels}
-          label={item?.label}
-          value={item?.value}
-          key={index}
-        />
-      ))}
-    </StyledGrid>
-  )
-}
+import { Box, BoxProps, styled, useTheme } from '@mui/material'
+import LabelValue from './LabelValue'
+import { ReactNode } from 'react'
+
+interface DetailsGridProps {
+  colCount: number
+  inverseLabels?: boolean
+  list: { label: ReactNode; value?: ReactNode }[]
+  noBorder?: boolean
+  space?: number
+}
+
+const StyledGrid = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'noBorder',
+})<{ cols: number; noBorder: boolean; space: number }>(
+  ({ theme, cols, noBorder, space }) => ({
+    padding: noBorder ? '1rem' : '20px',
+    marginTop: noBorder ? 0 : '1rem',
+    border: noBorder ? 'none' : theme.borders.grayLight,
+    display: 'grid',
+    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+    gap: `${space}px`,
+    borderRadius: '10px',
+    [`& > :not(:nth-of-type(${cols}n))`]: {
+      borderRight: theme.borders.grayLight,
+    },
+    '& > :last-child': {
+      borderRight: 'none',
+    },
+  }),
+)
+
+export default function DetailsGrid({
+  colCount,
+  inverseLabels = false,
+  list,
+  noBorder = false,
+  space = 16,
+}: DetailsGridProps) {
+  return (
+    <StyledGrid cols={colCount} space={space} noBorder={noBorder}>
+      {list?.map((item, index) => (
+        <LabelValue
+          reverse={inverseLabels}
+          label={item?.label}
+          value={item?.value}
+          key={index}
+        />
+      ))}
+    </StyledGrid>
+  )
+}