@campxdev/shared 0.6.18 → 0.6.19

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

@@ -1,98 +1,98 @@
-import {
-  alpha,
-  AppBar,
-  Box,
-  IconButton,
-  ListItemText,
-  styled,
-  Typography,
-  Link,
-} from '@mui/material'
-
-export const StyledImageWrapper = styled('div')`
-  width: auto;
-  height: 24px;
-  & img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-`
-
-export const StyledItemText = styled(ListItemText)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  transition: '0.2s ease',
-}))
-
-export const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  backgroundColor: 'white',
-  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
-}))
-
-export const StyledHeader = styled(Box)(({ theme }) => ({
-  boxShadow: '0px 2px 10px #0000001a',
-  backgroundColor: 'white',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  '& .actions': {
-    marginRight: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '14px',
-  },
-}))
-
-export const StyledUser = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '5px',
-  transition: 'background 0.2s ease',
-  padding: '5px 16px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '&:hover': {
-    background: theme.palette.secondary.light,
-  },
-}))
-
-export const StyledIconButton = styled(IconButton)({
-  padding: '20px',
-  backgroundColor: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '0px',
-})
-
-export const StyledLink = styled(Link)({
-  textDecoration: 'none',
-})
-
-export const StyledDescription = styled(Typography)(({ theme }) => ({
-  fontSize: '12px',
-  fontWeight: 600,
-  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
-}))
-
-export const StyledMenuItem = styled(Box)({
-  height: '64px',
-  width: '380px',
-  padding: '40px 20px',
-  transition: 'background ease 0.3s',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.03)',
-  },
-  display: 'flex',
-  alignItems: 'center',
-  gap: '20px',
-})
-
-export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-  '&:last-of-type': {
-    border: 'none',
-  },
-  padding: '8px 0px',
-}))
+import {
+  alpha,
+  AppBar,
+  Box,
+  IconButton,
+  ListItemText,
+  styled,
+  Typography,
+  Link,
+} from '@mui/material'
+
+export const StyledImageWrapper = styled('div')`
+  width: auto;
+  height: 24px;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`
+
+export const StyledItemText = styled(ListItemText)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  transition: '0.2s ease',
+}))
+
+export const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'white',
+  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
+}))
+
+export const StyledHeader = styled(Box)(({ theme }) => ({
+  boxShadow: '0px 2px 10px #0000001a',
+  backgroundColor: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  '& .actions': {
+    marginRight: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px',
+  },
+}))
+
+export const StyledUser = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '5px',
+  transition: 'background 0.2s ease',
+  padding: '5px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '&:hover': {
+    background: theme.palette.secondary.light,
+  },
+}))
+
+export const StyledIconButton = styled(IconButton)({
+  padding: '20px',
+  backgroundColor: 'black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0px',
+})
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+})
+
+export const StyledDescription = styled(Typography)(({ theme }) => ({
+  fontSize: '12px',
+  fontWeight: 600,
+  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
+}))
+
+export const StyledMenuItem = styled(Box)({
+  height: '64px',
+  width: '380px',
+  padding: '40px 20px',
+  transition: 'background ease 0.3s',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  gap: '20px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+  '&:last-of-type': {
+    border: 'none',
+  },
+  padding: '8px 0px',
+}))

package/src/components/LayoutWrapper.tsx

@@ -1,25 +1,25 @@
-import {
-  StyledLeftNavContainer,
-  StyledMainContentContainer,
-} from '../layouts/Components/styles'
-import SideNav from './SideNav'
-interface Props {
-  children?: React.ReactNode
-  menu: any[]
-  sideMenuHeader?: React.ReactNode
-}
-
-export default function LayoutWrapper({
-  children,
-  menu,
-  sideMenuHeader,
-}: Props) {
-  return (
-    <>
-      <StyledLeftNavContainer>
-        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
-      </StyledLeftNavContainer>
-      <StyledMainContentContainer>{children}</StyledMainContentContainer>
-    </>
-  )
-}
+import {
+  StyledLeftNavContainer,
+  StyledMainContentContainer,
+} from '../layouts/Components/styles'
+import SideNav from './SideNav'
+interface Props {
+  children?: React.ReactNode
+  menu: any[]
+  sideMenuHeader?: React.ReactNode
+}
+
+export default function LayoutWrapper({
+  children,
+  menu,
+  sideMenuHeader,
+}: Props) {
+  return (
+    <>
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>{children}</StyledMainContentContainer>
+    </>
+  )
+}

package/src/components/LinearProgress.tsx

@@ -1,19 +1,19 @@
-import {
-  BoxProps,
-  styled,
-  Box,
-  LinearProgress as MuiLinearProgress,
-} from '@mui/material'
-
-export const LinearProgress = styled((props: BoxProps) => (
-  <Box {...props}>
-    <MuiLinearProgress color={'inherit'} sx={{ height: '4px' }} />
-  </Box>
-))(({ theme }) => ({
-  width: '100%',
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  zIndex: 400,
-  color: theme.palette.primary.main,
-}))
+import {
+  BoxProps,
+  styled,
+  Box,
+  LinearProgress as MuiLinearProgress,
+} from '@mui/material'
+
+export const LinearProgress = styled((props: BoxProps) => (
+  <Box {...props}>
+    <MuiLinearProgress color={'inherit'} sx={{ height: '4px' }} />
+  </Box>
+))(({ theme }) => ({
+  width: '100%',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 400,
+  color: theme.palette.primary.main,
+}))

package/src/components/ListItemButton.tsx

@@ -1,94 +1,94 @@
-import { ChevronRight } from '@mui/icons-material'
-import {
-  Box,
-  ListItemButton as MuiListItemButton,
-  ListItemButtonProps,
-  ListItemIcon,
-  ListItemText,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-interface Props extends ListItemButtonProps {
-  hasChildren?: boolean
-  isActive?: boolean
-  label: String
-  icon?: any
-}
-
-export const ListItemButton = ({
-  isActive,
-  hasChildren,
-  onClick,
-  label,
-  icon: Icon,
-}: Props) => {
-  return (
-    <StyledListItemButton isActive={isActive} onClick={onClick}>
-      {Icon ? (
-        <ListItemIcon>{<Icon />}</ListItemIcon>
-      ) : (
-        <Box minWidth={16}></Box>
-      )}
-      <ListItemText primary={label} />
-    </StyledListItemButton>
-  )
-}
-
-export const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
-  ({ theme, open }) => ({
-    transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
-    transition: 'transform 0.2s ease-in-out',
-  }),
-)
-
-export const StyledListItemButton = styled(MuiListItemButton)<{
-  isActive: boolean
-  children: ReactNode
-  dropDown?: boolean
-}>(({ theme, isActive, dropDown = false }) => ({
-  gap: '10px',
-  fontWeight: 'bold',
-  backgroundColor: isActive && '#1d1d1d',
-  '&:hover': {
-    backgroundColor: isActive && '#1d1d1d',
-  },
-  '&:after': {
-    content: '""',
-    position: 'absolute',
-    height: '100%',
-    left: 0,
-    top: 0,
-    width: isActive ? '5px' : 0,
-    opacity: isActive ? (dropDown ? 0 : 1) : 0,
-    transition: theme.transitions.create(['opacity', 'width']),
-    background: theme.palette.common.yellow,
-    borderTopRightRadius: '3px',
-    borderBottomRightRadius: '3px',
-  },
-  '&.MuiButton-endIcon, &.MuiButton-startIcon': {
-    transition: theme.transitions.create(['color']),
-
-    '&.MuiSvgIcon-root': {
-      fontSize: 'inherit',
-      transition: 'none',
-    },
-  },
-  '& .MuiSvgIcon-root': {
-    fontSize: theme.typography.pxToRem(20),
-    marginRight: theme.spacing(1),
-    // color: isActive
-    //   ? theme.sidebar.menuItemColorActive
-    //   : theme.sidebar.menuItemIconColor,
-  },
-  '& .MuiTypography-root': {
-    color: theme.palette.common.white,
-  },
-  '& svg': {
-    color: theme.palette.common.white,
-  },
-  '& .MuiListItemIcon-root': {
-    minWidth: 0,
-    maxWidth: '1rem',
-  },
-}))
+import { ChevronRight } from '@mui/icons-material'
+import {
+  Box,
+  ListItemButton as MuiListItemButton,
+  ListItemButtonProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props extends ListItemButtonProps {
+  hasChildren?: boolean
+  isActive?: boolean
+  label: String
+  icon?: any
+}
+
+export const ListItemButton = ({
+  isActive,
+  hasChildren,
+  onClick,
+  label,
+  icon: Icon,
+}: Props) => {
+  return (
+    <StyledListItemButton isActive={isActive} onClick={onClick}>
+      {Icon ? (
+        <ListItemIcon>{<Icon />}</ListItemIcon>
+      ) : (
+        <Box minWidth={16}></Box>
+      )}
+      <ListItemText primary={label} />
+    </StyledListItemButton>
+  )
+}
+
+export const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
+  ({ theme, open }) => ({
+    transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+    transition: 'transform 0.2s ease-in-out',
+  }),
+)
+
+export const StyledListItemButton = styled(MuiListItemButton)<{
+  isActive: boolean
+  children: ReactNode
+  dropDown?: boolean
+}>(({ theme, isActive, dropDown = false }) => ({
+  gap: '10px',
+  fontWeight: 'bold',
+  backgroundColor: isActive && '#1d1d1d',
+  '&:hover': {
+    backgroundColor: isActive && '#1d1d1d',
+  },
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    height: '100%',
+    left: 0,
+    top: 0,
+    width: isActive ? '5px' : 0,
+    opacity: isActive ? (dropDown ? 0 : 1) : 0,
+    transition: theme.transitions.create(['opacity', 'width']),
+    background: theme.palette.common.yellow,
+    borderTopRightRadius: '3px',
+    borderBottomRightRadius: '3px',
+  },
+  '&.MuiButton-endIcon, &.MuiButton-startIcon': {
+    transition: theme.transitions.create(['color']),
+
+    '&.MuiSvgIcon-root': {
+      fontSize: 'inherit',
+      transition: 'none',
+    },
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: theme.typography.pxToRem(20),
+    marginRight: theme.spacing(1),
+    // color: isActive
+    //   ? theme.sidebar.menuItemColorActive
+    //   : theme.sidebar.menuItemIconColor,
+  },
+  '& .MuiTypography-root': {
+    color: theme.palette.common.white,
+  },
+  '& svg': {
+    color: theme.palette.common.white,
+  },
+  '& .MuiListItemIcon-root': {
+    minWidth: 0,
+    maxWidth: '1rem',
+  },
+}))

package/src/components/LoginForm.tsx

@@ -1,103 +1,103 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material'
-import {
-  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'
-
-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 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 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>
-  )
-}
-
-export default LoginForm
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {
+  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'
+
+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 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 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>
+  )
+}
+
+export default LoginForm