@campxdev/shared 1.3.1 → 1.4.0

package/src/components/Input/FormLabel.tsx

@@ -1,14 +1,21 @@
-import { Typography } from '@mui/material'
+import { alpha, styled, Typography, TypographyProps } from '@mui/material'
+
+export default function FormLabel({ label, required, name }) {
+  if (typeof label !== 'string') return label
 
-export default function FormLabel({ label, required }) {
   return (
-    <>
-      {label}
-      {required && (
-        <Typography fontSize={14} component={'span'} color="error">
-          {' *'}
-        </Typography>
-      )}
-    </>
+    <Typography
+      htmlFor={name}
+      component="label"
+      sx={{
+        color: alpha('#121212', 0.5),
+        marginBottom: '2px',
+        '& span': {
+          color: (theme) => theme.palette.error.main,
+        },
+      }}
+    >
+      {label} {required && <span>{' *'}</span>}
+    </Typography>
   )
 }

package/src/components/Input/MultiCheckbox.tsx

@@ -1,12 +1,7 @@
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@mui/material'
+import { Box, FormGroup, FormHelperText } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import FormLabel from './FormLabel'
+import SingleCheckbox from './SingleCheckbox'
 
 interface Props {
   label?: string
@@ -21,7 +16,6 @@ interface Props {
 export default function MultiCheckbox(props: Props) {
   const {
     name,
-    size = 'small',
     control,
     label = '',
     options = [],
@@ -34,45 +28,34 @@ export default function MultiCheckbox(props: Props) {
       name={name}
       control={control}
       render={({ field, fieldState: { error } }) => (
-        <>
-          <FormLabel label={label} required={required} />
-          <FormControl size={size} fullWidth>
-            <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-              {options?.map((item, index) => (
-                <FormControlLabel
-                  name={name}
-                  key={index}
-                  control={
-                    <Checkbox
-                      size="small"
-                      checked={field?.value
-                        ?.map((item: any) => item?.value)
-                        ?.includes(item?.value)}
-                      onChange={(e) => {
-                        let value = field.value || []
-                        if (e.target.checked) {
-                          let newValue = [...value, item]
-                          field.onChange(newValue)
-                        } else {
-                          let filteredValue = value.filter(
-                            (opt: any) => opt?.value !== item.value,
-                          )
-                          field.onChange(filteredValue)
-                        }
-                      }}
-                    />
+        <Box width="100%">
+          <FormLabel label={label} required={required} name={name} />
+          <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
+            {options?.map((item, index) => (
+              <SingleCheckbox
+                name={name}
+                key={index}
+                label={item.label}
+                checked={field?.value
+                  ?.map((item: any) => item?.value)
+                  ?.includes(item?.value)}
+                onChange={(e) => {
+                  let value = field.value || []
+                  if (e.target.checked) {
+                    let newValue = [...value, item]
+                    field.onChange(newValue)
+                  } else {
+                    let filteredValue = value.filter(
+                      (opt: any) => opt?.value !== item.value,
+                    )
+                    field.onChange(filteredValue)
                   }
-                  label={item.label}
-                />
-              ))}
-            </FormGroup>
-          </FormControl>
-          {error && (
-            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
-              {error.message}
-            </Typography>
-          )}
-        </>
+                }}
+              />
+            ))}
+          </FormGroup>
+          {error && <FormHelperText>{error.message}</FormHelperText>}
+        </Box>
       )}
     />
   )

package/src/components/Input/MultiSelect.tsx

@@ -40,7 +40,7 @@ export default function MultiSelect({
         <TextField
           {...params}
           variant="outlined"
-          label={<FormLabel label={label} required={required} />}
+          label={<FormLabel label={label} required={required} name={name} />}
         />
       )}
       ChipProps={{

package/src/components/Input/RadioGroup.tsx

@@ -1,14 +1,52 @@
 import {
-  Checkbox,
+  Box,
   FormControlLabel,
   Radio,
-  Typography,
   RadioGroup as MuiRadioGroup,
-  Box,
   RadioGroupProps,
-  Stack,
+  styled,
 } from '@mui/material'
 import { ReactNode } from 'react'
+import FormLabel from './FormLabel'
+
+const BpIcon = styled('span')(({ theme }) => ({
+  borderRadius: '50%',
+  width: 18,
+  height: 18,
+  border: '1px solid #CBCBCB',
+  backgroundColor: '#f8f8f8',
+  '.Mui-focusVisible &': {
+    outline: '2px auto rgba(19,124,189,.6)',
+    outlineOffset: 2,
+  },
+  'input:hover ~ &': {
+    backgroundColor: '#f8f8f8',
+  },
+  'input:disabled ~ &': {
+    boxShadow: 'none',
+    background: 'rgba(206,217,224,.5)',
+  },
+}))
+
+const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
+  border: '1px solid #609D52',
+  background: '#f8f8f8',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    backgroundColor: '#609D52',
+    content: '""',
+    display: 'block',
+    width: 8,
+    height: 8,
+    margin: '4px',
+    left: '2px',
+    borderRadius: '50%',
+  },
+  'input:hover ~ &': {
+    backgroundColor: '#f8f8f8',
+  },
+}))
 
 interface Props extends RadioGroupProps {
   label: string | ReactNode
@@ -29,29 +67,25 @@ export default function RadioGroup(props: Props) {
     required = false,
     value,
     onChange,
+    ...rest
   } = props
   return (
-    <Box>
-      <Box sx={{ display: 'flex' }}>
-        {typeof label === 'string' ? (
-          <>
-            <Typography variant="subtitle2">{label}</Typography>
-            {required && (
-              <Typography fontSize={14} component={'span'} color="error">
-                {'  *'}
-              </Typography>
-            )}
-          </>
-        ) : (
-          <>{label}</>
-        )}
-      </Box>
-      <MuiRadioGroup value={value} onChange={onChange} row={row} name={name}>
+    <Box width="100%">
+      <FormLabel label={label} name={name} required={required} />
+      <MuiRadioGroup
+        value={value}
+        onChange={onChange}
+        row={row}
+        name={name}
+        {...rest}
+      >
         {options.map((item, index) => (
           <FormControlLabel
             key={index}
             value={item.value}
-            control={<Radio />}
+            control={
+              <Radio checkedIcon={<BpCheckedIcon />} icon={<BpIcon />} />
+            }
             label={item.label}
           />
         ))}

package/src/components/Input/SingleCheckbox.tsx

@@ -1,9 +1,53 @@
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-import { Controller } from 'react-hook-form'
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabel,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
 
-interface Props {
+const BpIcon = styled('span')(({}) => ({
+  borderRadius: 3,
+  width: 18,
+  height: 18,
+  border: '1px solid #CBCBCB',
+  backgroundColor: '#F8F8F8',
+  '.Mui-focusVisible &': {
+    outline: '2px auto rgba(19,124,189,.6)',
+    outlineOffset: 2,
+  },
+  'input:hover ~ &': {
+    backgroundColor: '#F8F8F8',
+  },
+  'input:disabled ~ &': {
+    boxShadow: 'none',
+    background: 'rgba(206,217,224,.5)',
+  },
+}))
+
+const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
+  backgroundColor: '#F8F8F8',
+  border: `1px solid ${theme.palette.primary.main}`,
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    content: '""',
+    display: 'block',
+    width: 8,
+    height: 8,
+    margin: '4px',
+    left: '2px',
+    background: theme.palette.primary.main,
+    borderRadius: '2px',
+  },
+  'input:hover ~ &': {
+    backgroundColor: '#F8F8F8',
+  },
+}))
+
+interface Props extends CheckboxProps {
   disabled?: boolean
-  label: string
+  label: ReactNode
   name?: string
   size?: 'small' | 'medium'
   sx?: any
@@ -12,11 +56,19 @@ interface Props {
 }
 
 export default function SingleCheckbox(props: Props) {
-  const { name, checked, size = 'medium', label = '', sx, onChange } = props
+  const { checked, size = 'medium', label = '', sx, onChange } = props
   return (
     <FormControlLabel
-      sx={{ width: '100%', ...sx }}
-      control={<Checkbox size={size} checked={checked} onChange={onChange} />}
+      control={
+        <Checkbox
+          size={size}
+          checked={checked}
+          onChange={onChange}
+          checkedIcon={<BpCheckedIcon />}
+          icon={<BpIcon />}
+          {...props}
+        />
+      }
       label={label}
     />
   )

package/src/components/Input/SingleSelect.tsx

@@ -1,126 +1,108 @@
+import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
 import {
   FormControl,
-  InputLabel,
   MenuItem,
-  Select,
   SelectProps,
-  Typography,
+  styled,
+  Select,
+  FormHelperText,
+  Box,
 } from '@mui/material'
 import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
 import FormLabel from './FormLabel'
+
 type Props = {
-  name?: string
-  control?: any
   options: Array<{ label: ReactNode; value: any }>
-  label?: string
-  textColor?: string
   onChange?: (value: any) => void
   required?: boolean
-  hookForm?: boolean
   firstItemEmpty?: boolean
+  helperText?: string
 } & SelectProps
 
-export default function SingleSelect(props: Props) {
-  const {
-    name = 'select',
-    options = [],
-    control,
-    label,
-    textColor,
-    onChange,
-    required,
-    hookForm = true,
-    firstItemEmpty = false,
-  } = props
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    '& legend': { display: 'none' },
+    '& .MuiSelect-select': {
+      boxSizing: 'border-box',
+      height: '50px',
+      padding: '14px',
+    },
+    '& .MuiSvgIcon-root': {
+      right: '14px',
+    },
+  },
+}))
 
+const PaperProps = {
+  elevation: 0,
+  sx: {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    border: '1px solid #1212121A',
+    borderTop: 'none',
+    boxShadow: '0px 4px 16px #0000000F',
+    maxHeight: 360,
+    marginTop: '1px',
+    '& .MuiList-root': {
+      minWidth: '240px',
+      padding: 0,
+      '& li': {
+        height: '60px',
+        borderBottom: (theme) => theme.borders.grayLight,
+        ':hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.025)',
+        },
+      },
+      '& > :last-child': {
+        borderBottom: 'none',
+      },
+    },
+  },
+}
+
+export default function SingleSelect({
+  name = 'select',
+  options = [],
+  label,
+  onChange,
+  required,
+  value,
+  helperText,
+  firstItemEmpty = false,
+  ...props
+}: Props) {
   const inputOptions = firstItemEmpty
     ? [{ label: 'All', value: '__empty__' }, ...options]
     : options
 
-  if (!hookForm) {
-    return (
-      <>
-        <FormControl fullWidth sx={props.sx}>
-          <InputLabel id={name}>
-            <FormLabel required={required} label={label} />
-          </InputLabel>
-          <Select
-            multiple={false}
-            variant="outlined"
-            id={name}
-            value={props.value}
-            displayEmpty={firstItemEmpty}
-            fullWidth
-            label={label}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 300 },
-              },
-            }}
-            onChange={props.onChange}
-          >
-            {inputOptions?.map((item, index) => (
-              <MenuItem key={index} value={item.value}>
-                {item.label}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </>
-    )
-  }
-
   return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <>
-          <FormControl fullWidth>
-            <InputLabel id={name}>
-              <FormLabel required={required} label={label} />
-            </InputLabel>
-            <Select
-              multiple={false}
-              error={Boolean(error)}
-              variant="outlined"
-              sx={{ color: textColor }}
-              fullWidth
-              label={label}
-              displayEmpty={firstItemEmpty}
-              MenuProps={{
-                PaperProps: {
-                  sx: { maxHeight: 300 },
-                },
-              }}
-              value={field.value}
-              onChange={(e) => {
-                if (onChange) onChange(e.target.value)
-                field.onChange(e.target.value)
-              }}
-            >
-              {inputOptions?.map((item, index) => (
-                <MenuItem key={index} value={item.value}>
-                  {item.label}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error.message}
-            </Typography>
-          )}
-        </>
-      )}
-    />
+    <Box width="100%">
+      <FormLabel required={required} label={label} name={name} />
+      <StyledFormControl fullWidth>
+        <Select
+          id={name}
+          multiple={false}
+          variant="outlined"
+          value={value}
+          displayEmpty={firstItemEmpty}
+          fullWidth
+          label={label}
+          MenuProps={{
+            PaperProps: PaperProps,
+          }}
+          IconComponent={KeyboardArrowDown}
+          onChange={onChange}
+          {...props}
+        >
+          {inputOptions?.map((item, index) => (
+            <MenuItem key={index} value={item.value}>
+              {item.label}
+            </MenuItem>
+          ))}
+        </Select>
+        {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      </StyledFormControl>
+    </Box>
   )
 }

package/src/components/Input/TextField.tsx

@@ -1,50 +1,46 @@
 import {
+  Box,
+  styled,
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
-  Typography,
 } from '@mui/material'
-import React from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import FieldLabel from './FormLabel'
 
 type MyTextFieldProps = MuiTextFieldProps & {
-  control?: any
-  label?: string
   name?: string
   value?: any
-  hookForm?: boolean
   required?: boolean
-  handleChange?: React.ChangeEventHandler<
-    HTMLTextAreaElement | HTMLInputElement
-  >
 }
 
+const StyledTextField = styled(MuiTextField)(({ theme }) => ({
+  '& label': {
+    display: 'none',
+  },
+  '& legend': {
+    '& span': {
+      display: 'none',
+    },
+  },
+}))
+
 export default function TextField({
   name,
-  control,
   label,
   value,
-  handleChange,
+  onChange,
   required = false,
-  hookForm = true,
   ...rest
 }: MyTextFieldProps) {
   return (
-    <MuiTextField
-      label={
-        <>
-          {label}
-          {required && (
-            <Typography fontSize={14} component={'span'} color="error">
-              {' *'}
-            </Typography>
-          )}
-        </>
-      }
-      value={value}
-      name={name}
-      onChange={handleChange}
-      {...rest}
-    />
+    <Box width="100%">
+      <FieldLabel label={label} required={required} name={name} />
+      <StyledTextField
+        id={name}
+        value={value}
+        name={name}
+        onChange={onChange}
+        {...rest}
+      />
+    </Box>
   )
 }

package/src/components/LoginForm.tsx

@@ -1,34 +1,12 @@
 import { Visibility, VisibilityOff } from '@mui/icons-material'
-import {
-  Alert,
-  Box,
-  Button,
-  IconButton,
-  InputAdornment,
-  Stack,
-  styled,
-} from '@mui/material'
+import { Alert, Box, IconButton, InputAdornment, Stack } from '@mui/material'
 import axiosBase from 'axios'
 import Cookies from 'js-cookie'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
+import ActionButton from './ActionButton'
 import { FormTextField } from './HookForm'
 
-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({ loginUrl }: { loginUrl?: string }) {
   const [showPassword, setShowPassword] = useState(false)
   const { handleSubmit, control } = useForm()
@@ -55,10 +33,9 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
   return (
     <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={'40px'}>
+        <Stack gap={'30px'}>
           <Box>
-            <StyledTextField
-              size="medium"
+            <FormTextField
               control={control}
               name="username"
               label="User ID"
@@ -66,7 +43,7 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
             />
           </Box>
           <Box>
-            <StyledTextField
+            <FormTextField
               control={control}
               name="password"
               label="Password"
@@ -88,7 +65,7 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
               }}
             />
           </Box>
-          <StyledButton type="submit">Login</StyledButton>
+          <ActionButton type="submit">Login</ActionButton>
         </Stack>
       </form>
       {error && (

package/src/components/PageHeader.tsx

@@ -23,6 +23,9 @@ const StyledBox = styled(Box, {
     gap: '1rem',
     alignItems: 'center',
     marginLeft: 'auto',
+    '& .MuiButton-root': {
+      height: '40px',
+    },
   },
 }))