@campxdev/shared 1.2.9 → 1.3.0

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
+    "dev": "react-scripts start",
     "build": "CI=false && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

package/src/components/ActionButton.tsx

@@ -3,26 +3,17 @@ import React from 'react'
 
 interface ActionButtonProps extends ButtonProps {
   loading?: boolean
-  [key: string]: any
-  variant?: any
 }
 
-export default function ActionButton({
-  children,
-  loading,
-  ...props
-}: ActionButtonProps) {
+export default function ActionButton({ loading, ...props }: ActionButtonProps) {
   return (
-    <React.Fragment>
-      <Button
-        variant={!props?.variant ? 'contained' : props?.variant}
-        color="primary"
-        endIcon={loading ? <CircularProgress size={20} /> : null}
-        disabled={loading}
-        {...props}
-      >
-        {children}
-      </Button>
-    </React.Fragment>
+    <Button
+      variant={!props?.variant ? 'contained' : props?.variant}
+      endIcon={loading ? <CircularProgress size={20} /> : null}
+      disabled={loading}
+      {...props}
+    >
+      {props.children}
+    </Button>
   )
 }

package/src/components/ChangePassword.tsx

@@ -1,43 +1,28 @@
+import { Visibility, VisibilityOff } from '@mui/icons-material'
 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 { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { useModal } from './DrawerWrapper/DrawerWrapper'
+import { toast } from 'react-toastify'
 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()
+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
@@ -55,12 +40,10 @@ function ChangePassword(props: DialogProps) {
         toast.success('Password Changed Successfully')
         setIsLoading(false)
         reset()
-        handleClose()
+        close()
       } catch (error) {
         axiosErrorToast(error)
         setIsLoading(false)
-        reset()
-        handleClose()
       }
     } else {
       toast.error('New Password, Confirm Password must be same')
@@ -75,90 +58,66 @@ function ChangePassword(props: DialogProps) {
   ]
 
   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>
-                    ),
-                  }}
-                />
-              </>
-            )
-          })}
+    <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 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>
-      </form>
-    </Dialog>
+      </Stack>
+    </form>
   )
 }
 
-const StyledDialogTitle = styled(DialogTitle)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '10px',
-  marginBottom: '20px',
-})
 export default ChangePassword

package/src/components/DropDownButton/DropDownButton.tsx

@@ -0,0 +1,170 @@
+import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
+import {
+  ButtonProps,
+  CircularProgress,
+  IconButtonProps,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+import {
+  StyledDropDownButton,
+  StyledIconButton,
+  StyledMenuItem,
+} from './styles'
+
+type MenuItem =
+  | {
+      label: string | ReactNode
+      icon?: ReactNode
+      onClick: (props?: any) => any
+    }
+  | { customButton?: ReactNode }
+
+interface DropDownButtonProps {
+  icon?: {
+    icon: ReactNode
+    iconProps?: IconButtonProps
+    outlined?: boolean
+  }
+  button?: {
+    label?: string
+    buttonProps?: ButtonProps
+  }
+  anchor?: (props: { open: () => void }) => ReactNode
+  loading?: boolean
+  menu: MenuItem[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+}
+const defaultIcon = {
+  icon: <MoreVert color="primary" />,
+  outlined: true,
+}
+
+const RenderAnchor = ({ button, icon, handleClick, loading, anchor }) => {
+  if (anchor) return <>{anchor({ open: handleClick })}</>
+
+  if (button)
+    return (
+      <StyledDropDownButton
+        onClick={handleClick}
+        disabled={loading}
+        endIcon={
+          loading ? (
+            <CircularProgress size="20px" thickness={1.7} />
+          ) : (
+            <KeyboardArrowDown />
+          )
+        }
+        {...button?.buttonProps}
+      >
+        {button?.label}
+      </StyledDropDownButton>
+    )
+  if (!button) {
+    return (
+      <StyledIconButton
+        outlined={icon?.outlined ?? false}
+        onClick={handleClick}
+        {...icon.iconProps}
+      >
+        {icon.icon}
+      </StyledIconButton>
+    )
+  }
+}
+
+const DropDownButton = ({
+  button,
+  icon = defaultIcon,
+  menu = [],
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: DropDownButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <RenderAnchor
+        anchor={anchor}
+        loading={loading}
+        button={button}
+        icon={icon}
+        handleClick={handleClick}
+      />
+      <Menu
+        elevation={2}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{ sx: { padding: 0 }, ...menuListProps }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        <RenderMenuItems menu={menu} handleClose={handleClose} />
+      </Menu>
+    </>
+  )
+}
+
+DropDownButton.MenuItem = ({ icon, label, ...props }) => {
+  return (
+    <StyledMenuItem
+      sx={{ minWidth: '120px', width: '100%', ...props?.sx }}
+      {...props}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText>{label}</ListItemText>
+    </StyledMenuItem>
+  )
+}
+
+export default DropDownButton
+
+const RenderMenuItems = ({ menu, handleClose }) => {
+  return (
+    <>
+      {menu.map((item, index) => (
+        <>
+          {item?.customButton ? (
+            item.customButton
+          ) : (
+            <DropDownButton.MenuItem
+              icon={item?.icon}
+              label={item?.label}
+              key={index}
+              onClick={() => {
+                handleClose()
+                item.onClick()
+              }}
+            />
+          )}
+        </>
+      ))}
+    </>
+  )
+}

package/src/components/DropDownButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './DropDownButton'

package/src/components/DropDownButton/styles.tsx

@@ -0,0 +1,29 @@
+import { Button, IconButton, MenuItem, styled } from '@mui/material'
+
+export const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'outlined',
+})<{ outlined?: boolean }>(({ theme, outlined }) => ({
+  ...(outlined && {
+    border: `1px solid ${theme.palette.primary.main}`,
+    borderRadius: '5px',
+  }),
+}))
+
+export const StyledMenuItem = styled(MenuItem)(({}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+  },
+}))
+
+export const StyledDropDownButton = styled(Button)(({}) => ({
+  padding: '0 14px',
+}))

package/src/components/Layout/Header/AppHeader.tsx

@@ -1,6 +1,5 @@
-import { Box, styled, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { ReactNode } from 'react'
-import { Link } from 'react-router-dom'
 import { isDevelopment } from '../../../constants/isDevelopment'
 import { applications } from './applications'
 import AppsMenu from './AppsMenu'
@@ -15,26 +14,15 @@ import {
 } from './assets'
 
 import CogWheelMenu from './CogWheelMenu'
-import HelpWidget from './HelpWidget/HelpWidget'
-import { StyledHeader, StyledImageWrapper } from './styles'
+import HelpWidgetButton from './HelpWidget/HelpWidget'
+import {
+  StyledHeader,
+  StyledImageWrapper,
+  StyledLogosWrapper,
+  StyledRouterLink,
+} from './styles'
 import UserBox from './UserBox'
 
-const StyledLogosWrapper = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-  padding: '10px',
-  transition: 'background ease 0.3s',
-  borderRadius: '5px',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.05)',
-  },
-}))
-
-const StyledLink = styled(Link)(() => ({
-  textDecoration: 'none',
-}))
-
 const imageMap = {
   ums: collegex,
   enroll: enrollx,
@@ -48,9 +36,7 @@ const imageMap = {
 
 interface AppHeaderProps {
   clientLogo: string
-  username: string
-  profileIcon: string
-  permissions?: any
+  fullName: string
   userBoxActions: {
     label: ReactNode
     icon?: ReactNode
@@ -61,9 +47,7 @@ interface AppHeaderProps {
 
 export default function AppHeader({
   clientLogo = imageMap.campx,
-  username,
-  profileIcon,
-  permissions,
+  fullName,
   userBoxActions = [],
   cogWheelMenu = [],
 }: AppHeaderProps) {
@@ -74,14 +58,9 @@ export default function AppHeader({
         <AppLogo clientLogo={clientLogo} />
       </Box>
       <Box className="actions">
-        <HelpWidget />
-        {/* <Notification /> */}
+        <HelpWidgetButton />
         {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-        <UserBox
-          username={username}
-          profileIcon={profileIcon}
-          actions={userBoxActions}
-        />
+        <UserBox fullName={fullName} actions={userBoxActions} />
       </Box>
     </StyledHeader>
   )
@@ -93,7 +72,7 @@ const AppLogo = ({ clientLogo }) => {
     applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
 
   return (
-    <StyledLink to={'/'}>
+    <StyledRouterLink to={'/'}>
       <StyledLogosWrapper>
         <StyledImageWrapper>
           <img src={imageMap[currentApp]} />
@@ -118,6 +97,6 @@ const AppLogo = ({ clientLogo }) => {
           )}
         </StyledImageWrapper>
       </StyledLogosWrapper>
-    </StyledLink>
+    </StyledRouterLink>
   )
 }

package/src/components/Layout/Header/CogWheelMenu.tsx

@@ -1,18 +1,18 @@
 import { SettingsOutlined } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
 import { useHistory } from '../../../hooks/useRouter'
-import MenuButton from '../../MenuButton'
+import DropDownButton from '../../DropDownButton/DropDownButton'
 
 const CogWheelMenu = ({ menu }) => {
   const history = useHistory()
 
   return (
-    <MenuButton
-      anchor={
-        <IconButton color="secondary">
+    <DropDownButton
+      anchor={({ open }) => (
+        <IconButton color="secondary" onClick={open}>
           <SettingsOutlined />
         </IconButton>
-      }
+      )}
       menu={menu?.map((item) => ({
         label: item?.label,
         onClick: () => {
@@ -23,7 +23,7 @@ const CogWheelMenu = ({ menu }) => {
         PaperProps: { sx: { top: '64px !important' } },
         transformOrigin: {
           horizontal: 'center',
-          vertical: 'bottom',
+          vertical: 'top',
         },
       }}
     />