@campxdev/shared 0.6.19 → 1.0.0

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

@@ -0,0 +1,136 @@
+import { TimelineItem } from '@mui/lab'
+import { alpha, Box, Card, styled, Typography } from '@mui/material'
+
+export const StyledListItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isActive',
+})<{ isActive: boolean }>(({ theme, isActive }) => ({
+  maxWidth: '400px',
+  height: '85px',
+  display: 'flex',
+  border: theme.borders.grayLight,
+
+  alignItems: 'center',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  ':first-child': {
+    borderTopRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+  },
+  '&:hover': {
+    background: alpha(theme.palette.secondary.main, 0.02),
+  },
+
+  '& .left': {
+    paddingLeft: '10px',
+    marginRight: 'auto',
+    '& .MuiTypography-root': {
+      marginTop: '4px',
+      '& > span': {
+        color: theme.palette.secondary.main,
+      },
+    },
+  },
+  '& .right': {
+    paddingRight: '15px',
+    display: 'flex',
+  },
+  '&:before': {
+    transition: 'all 0.2s ease',
+    content: "''",
+    height: '95%',
+    width: '4px',
+    borderRadius: '2px',
+    background: 'transparent',
+    ...(isActive && {
+      background: theme.palette.common.yellow,
+    }),
+  },
+
+  ...(isActive && {
+    background: alpha(theme.palette.secondary.main, 0.035),
+  }),
+}))
+
+export const StyledRemarksContainer = styled(Box)({
+  height: '170px',
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  marginBottom: '20px ',
+})
+export const StyledLetterBackGround = styled(Box)({
+  width: '60px',
+  height: '60px',
+  display: 'flex',
+  backgroundColor: 'black',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+export const StyledNamecontainer = styled(Box)({
+  display: 'flex',
+  gap: '20px',
+  alignItems: 'center',
+  margin: '25px',
+})
+
+export const StyledLetter = ({ letter }) => {
+  //letter?.split(' ')[0][0]}${letter?.split(' ')[1][0]
+  const value = `${letter?.split(' ')[0][0]}`
+
+  return (
+    <StyledLetterBackGround>
+      <Typography variant="h1" sx={{ color: 'white' }}>
+        {value.toLocaleUpperCase()}
+      </Typography>
+    </StyledLetterBackGround>
+  )
+}
+export const StyledBox = styled(Box)({
+  width: '900px',
+  height: 'calc(80vh - 100px)',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledTimelineBox = styled(Box)({
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  margin: '20px 0',
+  padding: '20px',
+  maxWidth: '600px',
+})
+
+export const StyledTimeLineItem = styled(TimelineItem)(({ theme }) => ({
+  '& .MuiTimelineDot-root': {
+    backgroundColor: theme.palette.secondary,
+  },
+  '&:before': {
+    content: 'none',
+  },
+}))
+
+export const StyledLeftContainer = styled(Box)({
+  maxHeight: 'calc(80vh - 50px)',
+  //  maxHeight: 'calc(80vh - 130px)', 1st default value
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledCardData = styled(Card)({
+  borderRadius: '4px',
+  width: 'auto',
+  backgroundColor: '#1E19F51A',
+  padding: '6px 10px',
+})
+
+export const StyledBoxDetails = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '950px',
+  padding: '20px',
+})

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,95 @@
-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',
+  padding: '8px 20px',
+  backgroundColor: isActive && '#1d1d1d',
+  '&:hover': {
+    backgroundColor: isActive && '#1d1d1d',
+  },
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    height: '100%',
+    left: 0,
+    top: 0,
+    width: isActive ? '6px' : 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