@campxdev/shared 1.3.2 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ActionButton.tsx

@@ -8,6 +8,8 @@ interface ActionButtonProps extends ButtonProps {
 export default function ActionButton({ loading, ...props }: ActionButtonProps) {
   return (
     <Button
+      fullWidth
+      sx={{ height: '50px', flexShrink: 'unset' }}
       variant={!props?.variant ? 'contained' : props?.variant}
       endIcon={loading ? <CircularProgress size={20} /> : null}
       disabled={loading}

package/src/components/DropDownButton/DropDownButton.tsx

@@ -14,6 +14,7 @@ import { ReactNode, useState } from 'react'
 import {
   StyledDropDownButton,
   StyledIconButton,
+  StyledMenu,
   StyledMenuItem,
 } from './styles'
 
@@ -53,6 +54,7 @@ const RenderAnchor = ({ button, icon, handleClick, loading, anchor }) => {
     return (
       <StyledDropDownButton
         onClick={handleClick}
+        variant="outlined"
         disabled={loading}
         endIcon={
           loading ? (
@@ -109,20 +111,21 @@ const DropDownButton = ({
         icon={icon}
         handleClick={handleClick}
       />
-      <Menu
-        elevation={2}
+      <StyledMenu
+        elevation={0}
         id="basic-menu"
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
         PaperProps={{
-          elevation: 2,
+          elevation: 0,
         }}
-        MenuListProps={{ sx: { padding: 0 }, ...menuListProps }}
+        MenuListProps={{ ...menuListProps }}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',
         }}
+        transitionDuration={150}
         transformOrigin={{
           vertical: 'top',
           horizontal: 'right',
@@ -130,7 +133,7 @@ const DropDownButton = ({
         {...menuProps}
       >
         <RenderMenuItems menu={menu} handleClose={handleClose} />
-      </Menu>
+      </StyledMenu>
     </>
   )
 }

package/src/components/DropDownButton/styles.tsx

@@ -1,4 +1,4 @@
-import { Button, IconButton, MenuItem, styled } from '@mui/material'
+import { Button, IconButton, Menu, MenuItem, styled } from '@mui/material'
 
 export const StyledIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== 'outlined',
@@ -7,10 +7,9 @@ export const StyledIconButton = styled(IconButton, {
     ...(outlined && {
       border: `1px solid ${theme.palette.primary.main}`,
       borderRadius: '5px',
-      ...(size === 'small' && {
-        height: '50px',
-        width: '50px',
-      }),
+      height: '40px',
+      width: '40px',
+      ...(size === 'small' && {}),
     }),
   }),
 )
@@ -18,6 +17,7 @@ export const StyledIconButton = styled(IconButton, {
 export const StyledMenuItem = styled(MenuItem)(({}) => ({
   display: 'flex',
   alignItems: 'center',
+  height: '60px',
   '& .MuiListItemIcon-root': {
     minWidth: '24px',
   },
@@ -25,11 +25,32 @@ export const StyledMenuItem = styled(MenuItem)(({}) => ({
     height: '18px',
     width: '18px',
   },
-  '& .MuiTypography-root': {
-    fontWeight: 600,
-  },
 }))
 
 export const StyledDropDownButton = styled(Button)(({}) => ({
-  padding: '0 14px',
+  padding: '0 15px',
+  minWidth: '180px',
+  justifyContent: 'space-between',
+}))
+
+export const StyledMenu = styled(Menu)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    border: '1px solid #1212121A',
+    marginTop: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+  },
+  '& .MuiList-root': {
+    minWidth: '240px',
+    padding: 0,
+    '& li': {
+      borderBottom: theme.borders.grayLight,
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.025)',
+      },
+    },
+    '& > :last-child': {
+      borderBottom: 'none',
+    },
+  },
 }))

package/src/components/HookForm/MultiCheckbox.tsx

@@ -1,19 +1,13 @@
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@mui/material'
+import { Box, FormGroup, FormGroupProps, FormHelperText } from '@mui/material'
+import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import { FormLabel, SingleCheckbox } from '../Input'
 
-interface Props {
-  label?: string
+interface Props extends FormGroupProps {
+  label?: ReactNode
   name: string
-  size?: 'small' | 'medium'
   control: any
-  options: Array<{ label: string; value: string }>
+  options: Array<{ label: ReactNode; value: any }>
   required?: boolean
   row?: boolean
 }
@@ -21,12 +15,12 @@ interface Props {
 export default function FormMultiCheckbox(props: Props) {
   const {
     name,
-    size = 'small',
     control,
     label = '',
     options = [],
     required = false,
     row = true,
+    ...rest
   } = props
 
   return (
@@ -34,48 +28,34 @@ export default function FormMultiCheckbox(props: Props) {
       name={name}
       control={control}
       render={({ field, fieldState: { error } }) => (
-        <>
-          <Typography variant="subtitle1">
-            {label}
-            {required && <span style={{ color: 'red' }}>{' *'}</span>}
-          </Typography>
-          <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} name={name} required={required} />
+          <FormGroup row={row} sx={{ flexWrap: 'wrap' }} {...rest}>
+            {options?.map((item, index) => (
+              <SingleCheckbox
+                key={index}
+                name={name}
+                checked={field?.value
+                  ?.map((item: any) => item?.value)
+                  ?.includes(item?.value)}
+                label={item.label}
+                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/HookForm/RadioGroup.tsx

@@ -1,15 +1,7 @@
-import {
-  Box,
-  FormControlLabel,
-  Radio,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps,
-  Stack,
-  Typography,
-} from '@mui/material'
+import { Box, FormHelperText, RadioGroupProps } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import { RadioGroup } from '../Input'
 
 interface Props extends RadioGroupProps {
   label?: ReactNode
@@ -23,84 +15,26 @@ interface Props extends RadioGroupProps {
 }
 
 export default function FormRadioGroup(props: Props) {
-  const {
-    name,
-    control,
-    label,
-    sx,
-    options = [],
-    row = false,
-    required = false,
-    Container,
-  } = props
+  const { name, control, label, options = [], row = false, ...rest } = props
 
   return (
-    <>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <Stack direction={row ? 'row' : 'column'}>
-            {Container ? (
-              <Container style={{ borderColor: error ? 'red' : '' }}>
-                {
-                  <RadioComponent
-                    field={field}
-                    name={name}
-                    label={label}
-                    row={row}
-                    options={options}
-                    required={required}
-                  />
-                }
-              </Container>
-            ) : (
-              <RadioComponent
-                field={field}
-                name={name}
-                label={label}
-                row={row}
-                options={options}
-                required={required}
-              />
-            )}
-            {error && (
-              <Typography
-                variant="subtitle1"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </Stack>
-        )}
-      />
-    </>
-  )
-}
-
-const RadioComponent = ({ label, required, row, options, name, field }) => {
-  return (
-    <>
-      <Box>
-        {label && <FormLabel label={label} required={required} />}
-        <MuiRadioGroup
-          value={field.value}
-          onChange={field.onChange}
-          row={row}
-          name={name}
-        >
-          {options.map((item, index) => (
-            <FormControlLabel
-              key={index}
-              value={item.value}
-              control={<Radio />}
-              label={item.label}
-            />
-          ))}
-        </MuiRadioGroup>
-      </Box>
-    </>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <Box width="100%">
+          <RadioGroup
+            row={row}
+            name={name}
+            label={label}
+            options={options}
+            value={field.value}
+            onChange={field.onChange}
+            {...rest}
+          />
+          {error?.message && <FormHelperText>{error.message}</FormHelperText>}
+        </Box>
+      )}
+    />
   )
 }

package/src/components/HookForm/SingleCheckbox.tsx

@@ -1,46 +1,28 @@
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { CheckboxProps } from '@mui/material'
+import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
+import { SingleCheckbox } from '../Input'
 
-interface Props {
-  label?: string
+interface Props extends CheckboxProps {
+  label?: ReactNode
   name: string
-  size?: 'small' | 'medium'
   control: any
-  sx?: any
 }
 
 export default function FormSingleCheckbox(props: Props) {
-  const { name, size = 'medium', control, label = '', sx } = props
+  const { name, control, label = '', ...rest } = props
   return (
-    <>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <FormControlLabel
-              sx={{ width: '100%', ...sx }}
-              control={
-                <Checkbox
-                  size={size}
-                  checked={field.value}
-                  onChange={field.onChange}
-                />
-              }
-              label={label}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <SingleCheckbox
+          checked={field.value}
+          onChange={field.onChange}
+          label={label}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/HookForm/SingleSelect.tsx

@@ -1,37 +1,21 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectProps,
-  styled,
-  Typography,
-} from '@mui/material'
+import { SelectProps } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import { SingleSelect } from '../Input'
+
 type Props = {
-  name?: string
-  control?: any
+  name: string
+  control: any
   options: Array<{ label: ReactNode; value: any }>
-  label?: string
-  textColor?: string
-  onChange?: (value: any) => void
-  required?: boolean
   firstItemEmpty?: boolean
 } & SelectProps
 
-const StyledFormControl = styled(FormControl)(({ theme }) => ({}))
-
 export default function FormSingleSelect(props: Props) {
   const {
     name = 'select',
     options = [],
     control,
     label,
-    textColor,
-    onChange,
-    required,
     firstItemEmpty = false,
     size = 'medium',
   } = props
@@ -45,49 +29,17 @@ export default function FormSingleSelect(props: Props) {
       name={name}
       control={control}
       render={({ field, fieldState: { error } }) => (
-        <StyledFormControl size={size} fullWidth>
-          <InputLabel id={name}>
-            <FormLabel required={required} label={label} />
-          </InputLabel>
-          <Select
-            multiple={false}
-            size={size}
-            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>
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error.message}
-            </Typography>
-          )}
-        </StyledFormControl>
+        <SingleSelect
+          size={size}
+          label={label}
+          name={name}
+          value={field.value}
+          onChange={field.onChange}
+          options={inputOptions}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
       )}
     />
   )

package/src/components/HookForm/TextField.tsx

@@ -1,11 +1,7 @@
-import {
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  Typography,
-} from '@mui/material'
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material'
 import React from 'react'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import { TextField } from '../Input'
 
 type MyTextFieldProps = MuiTextFieldProps & {
   control?: any
@@ -24,49 +20,21 @@ export default function FormTextField({
   control,
   label,
   value,
-  handleChange,
-  required = false,
-  hookForm = true,
   ...rest
 }: MyTextFieldProps) {
-  if (!hookForm)
-    return (
-      <MuiTextField
-        label={
-          <>
-            {label}
-            {required && (
-              <Typography fontSize={14} component={'span'} color="error">
-                {' *'}
-              </Typography>
-            )}
-          </>
-        }
-        value={value}
-        name={name}
-        onChange={handleChange}
-        {...rest}
-      />
-    )
   return (
     <Controller
       control={control}
       name={name}
-      defaultValue=""
       render={({ field: { onChange, value }, fieldState: { error } }) => (
-        <MuiTextField
-          {...rest}
+        <TextField
           name={name}
-          label={<FormLabel required={required} label={label} />}
-          onChange={(e) => {
-            onChange(e)
-            if (handleChange) {
-              handleChange(e)
-            }
-          }}
+          label={label}
+          onChange={onChange}
           value={value}
           error={error ? true : false}
           helperText={error ? error.message : null}
+          {...rest}
         />
       )}
     />

package/src/components/Input/AutoCompleteSearch.tsx

@@ -49,7 +49,9 @@ export default function AutoCompleteSearch({
         renderInput={(params) => (
           <TextField
             variant="outlined"
-            label={<FormLabel label={label} required={props.required} />}
+            label={
+              <FormLabel label={label} required={props.required} name={name} />
+            }
             {...params}
           />
         )}
@@ -78,7 +80,13 @@ export default function AutoCompleteSearch({
               <TextField
                 error={Boolean(error)}
                 variant="outlined"
-                label={<FormLabel label={label} required={props.required} />}
+                label={
+                  <FormLabel
+                    label={label}
+                    required={props.required}
+                    name={name}
+                  />
+                }
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (

package/src/components/Input/DatePicker.tsx

@@ -28,7 +28,7 @@ export default function FormDatePicker(props: Props) {
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <Box>
         <DatePicker
-          label={<FormLabel label={label} required={required} />}
+          label={<FormLabel label={label} required={required} name={name} />}
           mask="__/__/____"
           inputFormat="DD/MM/yyyy"
           value={value}

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>
   )
 }