@campxdev/shared 1.4.1 → 1.4.3

package/package.json

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

package/src/components/ActionButton.tsx

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

package/src/components/Chips.tsx

@@ -76,6 +76,6 @@ const StyledChip = styled(Chip)(({ theme }) => ({
   },
   height: '40px',
   fontSize: '14px',
-  fontWeight: 700,
+  fontWeight: 600,
   borderRadius: '20px',
 }))

package/src/components/HookForm/MultiSelect.tsx

@@ -1,20 +1,15 @@
-import { Close } from '@mui/icons-material'
-import { Autocomplete, CircularProgress, TextField } from '@mui/material'
-import React from 'react'
+import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
+import { MultiSelect } from '../Input'
 
 interface MultiSelectProps {
-  control?: any
-  label: string
-  name?: string
-  options: { key: string | number; name: any }[]
+  control: any
+  label: ReactNode
+  name: string
+  options: { label: ReactNode; value: any }[]
   placeholder?: string
   loading?: boolean
-  [key: string]: any
-  hookForm?: boolean
-  value?: any
-  onChange?: (value: any) => void
+  required?: boolean
 }
 
 export default function FormMultiSelect({
@@ -23,78 +18,30 @@ export default function FormMultiSelect({
   options,
   label,
   loading,
-  value,
-  onChange,
-  hookForm = true,
+  required,
   ...props
 }: MultiSelectProps) {
-  if (!hookForm) {
-    return (
-      <Autocomplete
-        multiple
-        value={value}
-        loading={loading}
-        fullWidth
-        isOptionEqualToValue={(option, value) => option.key === value.key}
-        onChange={(e, value) => {
-          if (!onChange) return
-          onChange(value)
-        }}
-        options={options || []}
-        getOptionLabel={(option) => option?.name || ''}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label={<FormLabel label={label} required={props.required} />}
-          />
-        )}
-        {...props}
-      />
-    )
-  }
   return (
     <Controller
       control={control}
       name={name}
-      render={({ field, fieldState: { error } }) => (
-        <Autocomplete
-          multiple
-          value={field.value}
-          loading={loading}
-          fullWidth
-          isOptionEqualToValue={(option, value) => option.key === value.key}
-          onChange={(e, value) => {
-            field.onChange(value)
-          }}
-          options={options || []}
-          getOptionLabel={(option) => option?.name || ''}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: (
-                  <React.Fragment>
-                    {loading ? (
-                      <CircularProgress color="inherit" size={20} />
-                    ) : null}
-                    {params.InputProps.endAdornment}
-                  </React.Fragment>
-                ),
-              }}
-              label={<FormLabel label={label} required={props.required} />}
-              error={error ? true : false}
-              helperText={error ? error.message : null}
-            />
-          )}
-          ChipProps={{
-            deleteIcon: <Close />,
-          }}
-          {...props}
-        />
-      )}
+      render={({ field, fieldState: { error } }) => {
+        return (
+          <MultiSelect
+            value={field.value}
+            label={label}
+            onChange={(e) => {
+              field.onChange(e)
+            }}
+            loading={loading}
+            options={options || []}
+            error={!!error}
+            required={required}
+            helperText={error ? error.message : null}
+            {...props}
+          />
+        )
+      }}
     />
   )
 }

package/src/components/HookForm/TextField.tsx

@@ -4,11 +4,9 @@ import { Controller } from 'react-hook-form'
 import { TextField } from '../Input'
 
 type MyTextFieldProps = MuiTextFieldProps & {
-  control?: any
+  control: any
   label?: string
-  name?: string
-  value?: any
-  hookForm?: boolean
+  name: string
   required?: boolean
   handleChange?: React.ChangeEventHandler<
     HTMLTextAreaElement | HTMLInputElement

package/src/components/Input/MultiSelect.tsx

@@ -1,10 +1,18 @@
-import { Close } from '@mui/icons-material'
-import { Autocomplete, TextField } from '@mui/material'
+import { Close, KeyboardArrowDown } from '@mui/icons-material'
+import {
+  alpha,
+  Autocomplete,
+  Checkbox,
+  CircularProgress,
+  Popper,
+  styled,
+} from '@mui/material'
 import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
+import { BpCheckedIcon, BpIcon } from './SingleCheckbox'
+import TextField from './TextField'
 
 interface MultiSelectProps {
-  label: string
+  label: ReactNode
   name?: string
   options: { label: string | ReactNode; value: any }[]
   placeholder?: string
@@ -12,8 +20,53 @@ interface MultiSelectProps {
   value: { label: string | ReactNode; value: any }[]
   onChange: (value: any) => void
   required?: boolean
+  error?: boolean
+  helperText?: string
 }
 
+const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+  '& .MuiAutocomplete-tag': {
+    border: '1px solid #D1D1D1',
+    background: '#F8F8F8',
+    borderRadius: '5px',
+    height: '38px',
+    '& .MuiSvgIcon-root': {
+      fontSize: '15px',
+      marginLeft: '5px',
+      fontWeight: 700,
+      color: theme.palette.secondary.main,
+      '&:hover': {
+        color: alpha(theme.palette.secondary.main, 0.8),
+      },
+    },
+  },
+}))
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    maxHeight: 360,
+    marginTop: '1px',
+    '& .MuiAutocomplete-listbox': {
+      minWidth: '240px',
+      padding: '10px',
+      '& .MuiAutocomplete-option': {
+        padding: '10px',
+        background: 'none',
+        '&.Mui-focused': {
+          background: 'none',
+        },
+      },
+      '& .MuiCheckbox-root': {
+        padding: 0,
+      },
+    },
+  },
+}))
+
 export default function MultiSelect({
   name,
   options,
@@ -22,30 +75,60 @@ export default function MultiSelect({
   value,
   onChange,
   required,
+  error,
+  helperText,
   ...props
 }: MultiSelectProps) {
   return (
-    <Autocomplete
+    <StyledAutocomplete
       multiple
       value={value}
       loading={loading}
       fullWidth
+      getOptionLabel={(option: any) => option?.label || ''}
+      options={options || []}
       onChange={(e, value) => {
         if (!onChange) return
         onChange(value)
       }}
-      options={options || []}
-      getOptionLabel={(option: any) => option?.value || ''}
+      isOptionEqualToValue={(option: any, value: any) =>
+        option.value === value.value
+      }
+      disableCloseOnSelect
+      PopperComponent={StyledPopper}
+      renderOption={(props, option: any, { selected }) => (
+        <li {...props}>
+          <Checkbox
+            icon={<BpIcon />}
+            checkedIcon={<BpCheckedIcon />}
+            style={{ marginRight: 8 }}
+            checked={selected}
+          />
+          {option.label}
+        </li>
+      )}
+      popupIcon={<KeyboardArrowDown />}
+      ChipProps={{ deleteIcon: <Close /> }}
       renderInput={(params) => (
         <TextField
+          error={error}
+          helperText={helperText}
+          label={label}
+          required={required}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {loading ? (
+                  <CircularProgress color="inherit" size={20} />
+                ) : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+          }}
           {...params}
-          variant="outlined"
-          label={<FormLabel label={label} required={required} name={name} />}
         />
       )}
-      ChipProps={{
-        deleteIcon: <Close />,
-      }}
       {...props}
     />
   )

package/src/components/Input/SingleCheckbox.tsx

@@ -6,10 +6,11 @@ import {
 } from '@mui/material'
 import { ReactNode } from 'react'
 
-const BpIcon = styled('span')(({}) => ({
+export const BpIcon = styled('span')(({}) => ({
   borderRadius: 3,
   width: 18,
   height: 18,
+  marginLeft: '2px',
   border: '1px solid #CBCBCB',
   backgroundColor: '#F8F8F8',
   '.Mui-focusVisible &': {
@@ -25,11 +26,12 @@ const BpIcon = styled('span')(({}) => ({
   },
 }))
 
-const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
+export 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))',
+  marginLeft: '2px',
   '&:before': {
     content: '""',
     display: 'block',

package/src/components/Input/SingleSelect.tsx

@@ -22,11 +22,7 @@ type Props = {
 const StyledFormControl = styled(FormControl)(({ theme }) => ({
   '& .MuiInputBase-root': {
     '& legend': { display: 'none' },
-    '& .MuiSelect-select': {
-      boxSizing: 'border-box',
-      height: '50px',
-      padding: '14px',
-    },
+    '& .MuiSelect-select': {},
     '& .MuiSvgIcon-root': {
       right: '14px',
     },
@@ -39,8 +35,6 @@ const PaperProps = {
     borderRadius: '10px',
     borderTopRightRadius: 0,
     borderTopLeftRadius: 0,
-    border: '1px solid #1212121A',
-    borderTop: 'none',
     boxShadow: '0px 4px 16px #0000000F',
     maxHeight: 360,
     marginTop: '1px',

package/src/components/Input/TextField.tsx

@@ -6,12 +6,6 @@ import {
 } from '@mui/material'
 import FieldLabel from './FormLabel'
 
-type MyTextFieldProps = MuiTextFieldProps & {
-  name?: string
-  value?: any
-  required?: boolean
-}
-
 const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   '& label': {
     display: 'none',
@@ -21,6 +15,9 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
       display: 'none',
     },
   },
+  '& .MuiInputAdornment-positionStart': {
+    paddingLeft: '14px',
+  },
 }))
 
 export default function TextField({
@@ -30,7 +27,7 @@ export default function TextField({
   onChange,
   required = false,
   ...rest
-}: MyTextFieldProps) {
+}: MuiTextFieldProps) {
   return (
     <Box width="100%">
       <FieldLabel label={label} required={required} name={name} />

package/src/theme/muiTheme.ts

@@ -187,19 +187,18 @@ const muiTheme = createTheme({
     MuiInputBase: {
       styleOverrides: {
         root: {
-          height: '50px',
+          minHeight: '50px',
           borderRadius: '10px',
           '& input': {
-            padding: '10px 14px',
             fontSize: '15px',
             boxSizing: 'border-box',
-            height: '50px',
+            minHeight: '50px',
           },
           '&.MuiInputBase-sizeSmall': {
             borderRadius: '6px',
-            height: '40px',
-            '& input': { height: '40px' },
-            '& fieldset': { height: '40px' },
+            minHeight: '40px',
+            '& input': { minHeight: '40px' },
+            '& fieldset': { minHeight: '40px' },
           },
         },
       },
@@ -213,7 +212,7 @@ const muiTheme = createTheme({
           },
           '& .MuiOutlinedInput-notchedOutline': {
             top: 1,
-            height: '50px',
+            minHeight: '50px',
             borderColor: alpha(colors.common.black, 0.15),
             '& legend': {
               '& > span': {
@@ -251,6 +250,23 @@ const muiTheme = createTheme({
     MuiFormControl: {
       styleOverrides: {
         root: {
+          '&.MuiTextField-root > .MuiInputBase-root': {
+            padding: 0,
+          },
+          '& .MuiSelect-select': {
+            padding: '14px',
+            '&.MuiInputBase-inputSizeSmall': {
+              padding: '10px 14px',
+            },
+          },
+          '& .MuiAutocomplete-inputRoot.MuiInputBase-root': {
+            padding: '5px',
+            '& > .MuiInputBase-input': {
+              marginLeft: '5px',
+              minHeight: '40px',
+              padding: 0,
+            },
+          },
           '& .MuiFormHelperText-root': {
             fontStyle: 'oblique',
             marginTop: '10px',
@@ -263,37 +279,16 @@ const muiTheme = createTheme({
     },
     MuiAutocomplete: {
       styleOverrides: {
-        tag: {
-          margin: 1,
-        },
+        tag: { margin: 1 },
         root: {
           '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
             { right: 14 },
-          '& .MuiAutocomplete-tag': {
-            border: '1px solid #D1D1D1',
-            background: '#F8F8F8',
-            borderRadius: '5px',
-            height: '38px',
-            '& .MuiSvgIcon-root': {
-              fontSize: '15px',
-              marginLeft: '5px',
-              fontWeight: 700,
-              color: colors.secondary.main,
-              '&:hover': {
-                color: alpha(colors.secondary.main, 0.8),
-              },
-            },
-          },
-          '& .MuiInputBase-root': {
-            padding: '5px',
-          },
         },
         clearIndicator: {
           background: colors.error.lighter,
           borderRadius: '5px',
           color: colors.error.main,
           marginRight: 8,
-
           '&:hover': {
             background: colors.error.lighter,
             color: colors.error.dark,
@@ -301,7 +296,6 @@ const muiTheme = createTheme({
         },
         popupIndicator: {
           color: alpha(colors.common.black, 0.5),
-
           '&:hover': {
             background: colors.primary.lighter,
             color: colors.primary.main,
@@ -528,7 +522,8 @@ const muiTheme = createTheme({
     MuiChip: {
       styleOverrides: {
         root: {
-          fontFamily: SECONDARY_FONT,
+          fontFamily: PRIMARY_FONT,
+          fontWeight: 600,
           fontSize: '14px',
         },
       },