@campxdev/shared 0.5.21 → 0.5.23

package/src/components/LoginForm.tsx

@@ -1,103 +1,103 @@
-import {Visibility, VisibilityOff} from '@mui/icons-material'
+import { Visibility, VisibilityOff } from '@mui/icons-material'
 import {
-	Alert,
-	Box,
-	Button,
-	IconButton,
-	InputAdornment,
-	Stack,
-	styled,
+  Alert,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  styled,
 } from '@mui/material'
 import axiosBase from 'axios'
 import Cookies from 'js-cookie'
-import {useState} from 'react'
-import {useForm} from 'react-hook-form'
-import {FormTextField} from './HookForm'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { FormTextField } from './HookForm'
 
 const developmentOrigin = window.location.origin + '/campx_dev'
 
-export const StyledTextField = styled(FormTextField)(({theme}) => ({
-	'& .MuiInputBase-root': {
-		minHeight: '60px',
-	},
-	'& .MuiOutlinedInput-input': {
-		padding: '18.5px 14px',
-	},
+export const StyledTextField = styled(FormTextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    minHeight: '60px',
+  },
+  '& .MuiOutlinedInput-input': {
+    padding: '18.5px 14px',
+  },
 }))
 
-export const StyledButton = styled(Button)(({theme}) => ({
-	borderRadius: '10px',
-	height: '60px',
-	fontSize: '18px',
+export const StyledButton = styled(Button)(({ theme }) => ({
+  borderRadius: '10px',
+  height: '60px',
+  fontSize: '18px',
 }))
 
 export function LoginForm() {
-	const [showPassword, setShowPassword] = useState(false)
-	const {handleSubmit, control} = useForm()
-	const [error, setError] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const { handleSubmit, control } = useForm()
+  const [error, setError] = useState('')
 
-	const onSubmit = async (values) => {
-		try {
-			const res = await axiosBase({
-				method: 'POST',
-				url: 'https://auth-api.campx.dev/auth/login',
-				data: values,
-			})
-			Cookies.set('campx_session_key', res.data.cookie)
-			window.location.href = developmentOrigin
-		} catch (err) {
-			// eslint-disable-next-line no-console
-			console.log(err)
-			setError(err.response.data.message ?? 'Server Error')
-		}
-	}
+  const onSubmit = async (values) => {
+    try {
+      const res = await axiosBase({
+        method: 'POST',
+        url: 'https://auth-api.campx.dev/auth/login',
+        data: values,
+      })
+      Cookies.set('campx_session_key', res.data.cookie)
+      window.location.href = developmentOrigin
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      setError(err.response.data.message ?? 'Server Error')
+    }
+  }
 
-	return (
-		<Box sx={{maxWidth: '500px'}} margin='0 auto' padding={'0 1rem'}>
-			<form onSubmit={handleSubmit(onSubmit)}>
-				<Stack gap={'40px'}>
-					<Box>
-						<StyledTextField
-							size='medium'
-							control={control}
-							name='username'
-							label='User ID'
-							required
-						/>
-					</Box>
-					<Box>
-						<StyledTextField
-							control={control}
-							name='password'
-							label='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>
-								),
-							}}
-						/>
-					</Box>
-					<StyledButton type='submit'>Login</StyledButton>
-				</Stack>
-			</form>
-			{error && (
-				<Alert severity='error' sx={{marginTop: '20px'}}>
-					{error}
-				</Alert>
-			)}
-		</Box>
-	)
+  return (
+    <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={'40px'}>
+          <Box>
+            <StyledTextField
+              size="medium"
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+          </Box>
+          <Box>
+            <StyledTextField
+              control={control}
+              name="password"
+              label="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>
+                ),
+              }}
+            />
+          </Box>
+          <StyledButton type="submit">Login</StyledButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
 }
 
 export default LoginForm

package/src/components/MenuButton.tsx

@@ -1,103 +1,103 @@
 import {
-	ListItemIcon,
-	ListItemText,
-	Menu,
-	MenuItem,
-	MenuListProps,
-	MenuProps,
-	styled,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+  styled,
 } from '@mui/material'
-import {cloneElement, ReactNode, useState} from 'react'
+import { cloneElement, ReactNode, useState } from 'react'
 
 interface Props {
-	anchor: any
-	loading?: boolean
-	menu: {
-		label: string | ReactNode
-		icon?: ReactNode
-		onClick: (props?: any) => any
-		component?: ReactNode
-	}[]
-	menuProps?: Omit<MenuProps, 'open'>
-	menuListProps?: MenuListProps
+  anchor: any
+  loading?: boolean
+  menu: {
+    label: string | ReactNode
+    icon?: ReactNode
+    onClick: (props?: any) => any
+    component?: ReactNode
+  }[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
 }
 
 export default function MenuButton({
-	menu,
-	menuProps,
-	menuListProps,
-	loading = false,
-	anchor,
+  menu,
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
 }: Props) {
-	const [anchorEl, setAnchorEl] = useState<any>(null)
-	const open = Boolean(anchorEl)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
 
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget)
-	}
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
 
-	const AnchorEl = cloneElement(anchor, {
-		onClick: handleClick,
-	})
+  const AnchorEl = cloneElement(anchor, {
+    onClick: handleClick,
+  })
 
-	return (
-		<>
-			{AnchorEl}
-			<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}
-			>
-				{menu.map((item, index) => (
-					<StyledMenuItem
-						sx={{minWidth: '120px', width: '100%'}}
-						key={index}
-						onClick={() => {
-							handleClose()
-							item.onClick()
-						}}
-					>
-						{item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-						<ListItemText>{item.label}</ListItemText>
-					</StyledMenuItem>
-				))}
-			</Menu>
-		</>
-	)
+  return (
+    <>
+      {AnchorEl}
+      <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}
+      >
+        {menu.map((item, index) => (
+          <StyledMenuItem
+            sx={{ minWidth: '120px', width: '100%' }}
+            key={index}
+            onClick={() => {
+              handleClose()
+              item.onClick()
+            }}
+          >
+            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+            <ListItemText>{item.label}</ListItemText>
+          </StyledMenuItem>
+        ))}
+      </Menu>
+    </>
+  )
 }
 
-const StyledMenuItem = styled(MenuItem)(({theme}) => ({
-	padding: '10px 20px',
-	display: 'flex',
-	alignItems: 'center',
-	'& .MuiListItemIcon-root': {
-		minWidth: '24px',
-	},
-	'& .MuiSvgIcon-root': {
-		height: '18px',
-		width: '18px',
-	},
-	'& .MuiTypography-root': {
-		fontWeight: 600,
-	},
-	borderBottom: theme.borders.grayLight,
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  padding: '10px 20px',
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+  },
+  borderBottom: theme.borders.grayLight,
 }))

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,85 +1,85 @@
-import {Close} from '@mui/icons-material'
+import { Close } from '@mui/icons-material'
 import {
-	alpha,
-	Box,
-	ButtonProps,
-	Dialog,
-	DialogProps,
-	IconButton,
-	styled,
-	Typography,
+  alpha,
+  Box,
+  ButtonProps,
+  Dialog,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
 } from '@mui/material'
-import {createElement, ReactNode, useState} from 'react'
+import { createElement, ReactNode, useState } from 'react'
 
-const StyledDialogHeader = styled(Box)(({theme}) => ({
-	height: '64px',
-	backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-	display: 'flex',
-	justifyContent: 'space-between',
-	alignItems: 'center',
-	padding: '0.6rem 1rem',
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
 }))
 
-const StyledDialogContent = styled(Box)(({theme}) => ({
-	width: '100%',
-	padding: '1rem',
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  padding: '1rem',
 }))
 
 type ContentProps = {
-	close: () => void
+  close: () => void
 }
 
 interface DrawerButtonProps {
-	button: any
-	content: (props: ContentProps) => ReactNode
-	title: string | ReactNode
-	btnTxt?: string | ReactNode
-	btnProps?: ButtonProps
-	dialogProps?: Omit<DialogProps, 'open'>
+  button: any
+  content: (props: ContentProps) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+  dialogProps?: Omit<DialogProps, 'open'>
 }
 
 export default function DialogButton({
-	button: Button,
-	content,
-	title,
-	btnTxt,
-	btnProps,
-	dialogProps,
+  button: Button,
+  content,
+  title,
+  btnTxt,
+  btnProps,
+  dialogProps,
 }: DrawerButtonProps) {
-	const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false)
 
-	const ButtonEl = (props) => (
-		<Button {...props} {...btnProps}>
-			{btnTxt}
-		</Button>
-	)
+  const ButtonEl = (props) => (
+    <Button {...props} {...btnProps}>
+      {btnTxt}
+    </Button>
+  )
 
-	const MyButton = createElement(ButtonEl, {
-		onClick: () => setOpen(true),
-	})
+  const MyButton = createElement(ButtonEl, {
+    onClick: () => setOpen(true),
+  })
 
-	const onClose = () => {
-		setOpen(false)
-	}
-	return (
-		<>
-			{MyButton}
-			<Dialog
-				PaperProps={{sx: {borderRadius: '10px'}}}
-				fullWidth
-				onClose={onClose}
-				open={open}
-				transitionDuration={200}
-				{...dialogProps}
-			>
-				<StyledDialogHeader>
-					<Typography fontWeight={600}>{title}</Typography>
-					<IconButton onClick={onClose}>
-						<Close />
-					</IconButton>
-				</StyledDialogHeader>
-				<StyledDialogContent>{content({close: onClose})}</StyledDialogContent>
-			</Dialog>
-		</>
-	)
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {MyButton}
+      <Dialog
+        PaperProps={{ sx: { borderRadius: '10px' } }}
+        fullWidth
+        onClose={onClose}
+        open={open}
+        transitionDuration={200}
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <Typography fontWeight={600}>{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
+      </Dialog>
+    </>
+  )
 }

package/src/components/PageContent.tsx

@@ -1,17 +1,17 @@
-import {Box, styled} from '@mui/material'
+import { Box, styled } from '@mui/material'
 import ErrorBoundary from './ErrorBoundary'
 
 const StyledPageContent = styled(Box)(() => ({
-	paddingLeft: '25px',
-	paddingRight: '25px',
-	marginTop: '16px',
-	paddingBottom: '3rem',
+  paddingLeft: '25px',
+  paddingRight: '25px',
+  marginTop: '16px',
+  paddingBottom: '3rem',
 }))
 
 export function PageContent(props) {
-	return (
-		<StyledPageContent style={props.style}>
-			<ErrorBoundary>{props.children}</ErrorBoundary>
-		</StyledPageContent>
-	)
+  return (
+    <StyledPageContent style={props.style}>
+      <ErrorBoundary>{props.children}</ErrorBoundary>
+    </StyledPageContent>
+  )
 }

package/src/components/PageNotFound.tsx

@@ -1,26 +1,26 @@
-import { Box, Button, Typography } from "@mui/material";
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import { pagenotfound } from "../assets/images";
+import { Box, Button, Typography } from '@mui/material'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { pagenotfound } from '../assets/images'
 
 function PageNotFound() {
   return (
     <>
       <Box
         sx={{
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          marginTop: "50px",
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginTop: '50px',
         }}
       >
         <img src={pagenotfound} alt="page not found" width={470} />
         <Typography variant="h1">Page Not Found.</Typography>
       </Box>
     </>
-  );
+  )
 }
 
-export default PageNotFound;
+export default PageNotFound