@campxdev/shared 1.8.50 → 1.9.0

package/src/components/Input/RadioGroup.tsx

@@ -1,104 +1,104 @@
-import {
-  Box,
-  BoxProps,
-  FormControlLabel,
-  FormHelperText,
-  Radio,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps,
-  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
-  name?: string
-  control?: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-  containerProps?: BoxProps
-  error?: boolean
-  helperText?: string | null
-}
-
-export default function RadioGroup(props: Props) {
-  const {
-    name,
-    label,
-    options = [],
-    row = false,
-    required = false,
-    value,
-    onChange,
-    containerProps,
-    error,
-    helperText,
-    ...rest
-  } = props
-  return (
-    <Box width="100%" {...containerProps}>
-      <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 checkedIcon={<BpCheckedIcon />} icon={<BpIcon />} />
-            }
-            label={item.label}
-          />
-        ))}
-      </MuiRadioGroup>
-      {error && <FormHelperText>{helperText}</FormHelperText>}
-    </Box>
-  )
-}
+import {
+  Box,
+  BoxProps,
+  FormControlLabel,
+  FormHelperText,
+  Radio,
+  RadioGroup as MuiRadioGroup,
+  RadioGroupProps,
+  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
+  name?: string
+  control?: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+  containerProps?: BoxProps
+  error?: boolean
+  helperText?: string | null
+}
+
+export default function RadioGroup(props: Props) {
+  const {
+    name,
+    label,
+    options = [],
+    row = false,
+    required = false,
+    value,
+    onChange,
+    containerProps,
+    error,
+    helperText,
+    ...rest
+  } = props
+  return (
+    <Box width="100%" {...containerProps}>
+      <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 checkedIcon={<BpCheckedIcon />} icon={<BpIcon />} />
+            }
+            label={item.label}
+          />
+        ))}
+      </MuiRadioGroup>
+      {error && <FormHelperText>{helperText}</FormHelperText>}
+    </Box>
+  )
+}

package/src/components/Input/SingleCheckbox.tsx

@@ -1,78 +1,78 @@
-import {
-  Checkbox,
-  CheckboxProps,
-  FormControlLabel,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-export const BpIcon = styled('span')(({}) => ({
-  borderRadius: 3,
-  width: 18,
-  height: 18,
-  marginLeft: '2px',
-  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)',
-  },
-}))
-
-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',
-    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: ReactNode
-  name?: string
-  checked: boolean
-  onChange: (e) => void
-}
-
-export default function SingleCheckbox({
-  checked,
-  label,
-  onChange,
-  ...props
-}: Props) {
-  return (
-    <FormControlLabel
-      control={
-        <Checkbox
-          checked={checked}
-          onChange={onChange}
-          checkedIcon={<BpCheckedIcon />}
-          icon={<BpIcon />}
-          {...props}
-        />
-      }
-      label={label}
-    />
-  )
-}
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabel,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+export const BpIcon = styled('span')(({}) => ({
+  borderRadius: 3,
+  width: 18,
+  height: 18,
+  marginLeft: '2px',
+  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)',
+  },
+}))
+
+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',
+    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: ReactNode
+  name?: string
+  checked: boolean
+  onChange: (e) => void
+}
+
+export default function SingleCheckbox({
+  checked,
+  label,
+  onChange,
+  ...props
+}: Props) {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={checked}
+          onChange={onChange}
+          checkedIcon={<BpCheckedIcon />}
+          icon={<BpIcon />}
+          {...props}
+        />
+      }
+      label={label}
+    />
+  )
+}

package/src/components/Input/SingleSelect.tsx

@@ -1,104 +1,104 @@
-import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
-import {
-  FormControl,
-  MenuItem,
-  SelectProps,
-  styled,
-  Select,
-  FormHelperText,
-  Box,
-  BoxProps,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    '& legend': { display: 'none' },
-    '& .MuiSelect-select': {},
-    '& .MuiSvgIcon-root': {
-      right: '14px',
-    },
-  },
-}))
-
-const PaperProps = {
-  elevation: 0,
-  sx: {
-    borderRadius: '10px',
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    boxShadow: '0px 4px 16px #0000000F',
-    maxHeight: 360,
-    marginTop: '1px',
-    '& .MuiList-root': {
-      padding: 0,
-      '& li': {
-        height: '60px',
-        borderBottom: (theme) => theme.borders.grayLight,
-        ':hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.025)',
-        },
-      },
-      '& > :last-child': {
-        borderBottom: 'none',
-      },
-    },
-  },
-}
-
-type Props = {
-  options: Array<{ label: ReactNode; value: any }>
-  onChange?: (value: any) => void
-  required?: boolean
-  firstItemEmpty?: boolean
-  helperText?: string
-  containerProps?: BoxProps
-} & SelectProps
-
-export default function SingleSelect({
-  name = 'select',
-  options = [],
-  label,
-  onChange,
-  required,
-  value,
-  helperText,
-  containerProps,
-  firstItemEmpty = false,
-  ...props
-}: Props) {
-  const inputOptions = firstItemEmpty
-    ? [{ label: 'All', value: '__empty__' }, ...options]
-    : options
-
-  return (
-    <Box width="100%" {...containerProps}>
-      <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>
-  )
-}
+import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
+import {
+  FormControl,
+  MenuItem,
+  SelectProps,
+  styled,
+  Select,
+  FormHelperText,
+  Box,
+  BoxProps,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import FormLabel from './FormLabel'
+
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    '& legend': { display: 'none' },
+    '& .MuiSelect-select': {},
+    '& .MuiSvgIcon-root': {
+      right: '14px',
+    },
+  },
+}))
+
+const PaperProps = {
+  elevation: 0,
+  sx: {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    maxHeight: 360,
+    marginTop: '1px',
+    '& .MuiList-root': {
+      padding: 0,
+      '& li': {
+        height: '60px',
+        borderBottom: (theme) => theme.borders.grayLight,
+        ':hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.025)',
+        },
+      },
+      '& > :last-child': {
+        borderBottom: 'none',
+      },
+    },
+  },
+}
+
+type Props = {
+  options: Array<{ label: ReactNode; value: any }>
+  onChange?: (value: any) => void
+  required?: boolean
+  firstItemEmpty?: boolean
+  helperText?: string
+  containerProps?: BoxProps
+} & SelectProps
+
+export default function SingleSelect({
+  name = 'select',
+  options = [],
+  label,
+  onChange,
+  required,
+  value,
+  helperText,
+  containerProps,
+  firstItemEmpty = false,
+  ...props
+}: Props) {
+  const inputOptions = firstItemEmpty
+    ? [{ label: 'All', value: '__empty__' }, ...options]
+    : options
+
+  return (
+    <Box width="100%" {...containerProps}>
+      <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,46 +1,46 @@
-import {
-  Box,
-  BoxProps,
-  styled,
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-} from '@mui/material'
-import FieldLabel from './FormLabel'
-
-const StyledTextField = styled(MuiTextField)(({ theme }) => ({
-  '& label': {
-    display: 'none',
-  },
-  '& legend': {
-    '& span': {
-      display: 'none',
-    },
-  },
-}))
-
-export type ITextFieldProps = {
-  containerProps?: BoxProps
-} & MuiTextFieldProps
-
-export default function TextField({
-  name,
-  label,
-  value,
-  onChange,
-  required = false,
-  containerProps,
-  ...rest
-}: ITextFieldProps) {
-  return (
-    <Box width="100%" {...containerProps}>
-      <FieldLabel label={label} required={required} name={name} />
-      <StyledTextField
-        id={name}
-        value={value}
-        name={name}
-        onChange={onChange}
-        {...rest}
-      />
-    </Box>
-  )
-}
+import {
+  Box,
+  BoxProps,
+  styled,
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+} from '@mui/material'
+import FieldLabel from './FormLabel'
+
+const StyledTextField = styled(MuiTextField)(({ theme }) => ({
+  '& label': {
+    display: 'none',
+  },
+  '& legend': {
+    '& span': {
+      display: 'none',
+    },
+  },
+}))
+
+export type ITextFieldProps = {
+  containerProps?: BoxProps
+} & MuiTextFieldProps
+
+export default function TextField({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  ...rest
+}: ITextFieldProps) {
+  return (
+    <Box width="100%" {...containerProps}>
+      <FieldLabel label={label} required={required} name={name} />
+      <StyledTextField
+        id={name}
+        value={value}
+        name={name}
+        onChange={onChange}
+        {...rest}
+      />
+    </Box>
+  )
+}