@campxdev/shared 1.0.5 → 1.1.0

package/src/components/Input/MultiCheckbox.tsx

@@ -1,79 +1,79 @@
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@mui/material'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  options: Array<{ label: string; value: string }>
-  required?: boolean
-  row?: boolean
-}
-
-export default function MultiCheckbox(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-  } = props
-
-  return (
-    <Controller
-      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)
-                        }
-                      }}
-                    />
-                  }
-                  label={item.label}
-                />
-              ))}
-            </FormGroup>
-          </FormControl>
-          {error && (
-            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
-              {error.message}
-            </Typography>
-          )}
-        </>
-      )}
-    />
-  )
-}
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  options: Array<{ label: string; value: string }>
+  required?: boolean
+  row?: boolean
+}
+
+export default function MultiCheckbox(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    options = [],
+    required = false,
+    row = true,
+  } = props
+
+  return (
+    <Controller
+      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)
+                        }
+                      }}
+                    />
+                  }
+                  label={item.label}
+                />
+              ))}
+            </FormGroup>
+          </FormControl>
+          {error && (
+            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
+              {error.message}
+            </Typography>
+          )}
+        </>
+      )}
+    />
+  )
+}

package/src/components/Input/MultiSelect.tsx

@@ -1,52 +1,52 @@
-import { Close } from '@mui/icons-material'
-import { Autocomplete, TextField } from '@mui/material'
-import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
-
-interface MultiSelectProps {
-  label: string
-  name?: string
-  options: { label: string | ReactNode; value: any }[]
-  placeholder?: string
-  loading?: boolean
-  value: { label: string | ReactNode; value: any }[]
-  onChange: (value: any) => void
-  required?: boolean
-}
-
-export default function MultiSelect({
-  name,
-  options,
-  label,
-  loading,
-  value,
-  onChange,
-  required,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <Autocomplete
-      multiple
-      value={value}
-      loading={loading}
-      fullWidth
-      onChange={(e, value) => {
-        if (!onChange) return
-        onChange(value)
-      }}
-      options={options || []}
-      getOptionLabel={(option: any) => option?.value || ''}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label={<FormLabel label={label} required={required} />}
-        />
-      )}
-      ChipProps={{
-        deleteIcon: <Close />,
-      }}
-      {...props}
-    />
-  )
-}
+import { Close } from '@mui/icons-material'
+import { Autocomplete, TextField } from '@mui/material'
+import { ReactNode } from 'react'
+import FormLabel from './FormLabel'
+
+interface MultiSelectProps {
+  label: string
+  name?: string
+  options: { label: string | ReactNode; value: any }[]
+  placeholder?: string
+  loading?: boolean
+  value: { label: string | ReactNode; value: any }[]
+  onChange: (value: any) => void
+  required?: boolean
+}
+
+export default function MultiSelect({
+  name,
+  options,
+  label,
+  loading,
+  value,
+  onChange,
+  required,
+  ...props
+}: MultiSelectProps) {
+  return (
+    <Autocomplete
+      multiple
+      value={value}
+      loading={loading}
+      fullWidth
+      onChange={(e, value) => {
+        if (!onChange) return
+        onChange(value)
+      }}
+      options={options || []}
+      getOptionLabel={(option: any) => option?.value || ''}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          label={<FormLabel label={label} required={required} />}
+        />
+      )}
+      ChipProps={{
+        deleteIcon: <Close />,
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/Input/RadioGroup.tsx

@@ -1,61 +1,61 @@
-import {
-  Checkbox,
-  FormControlLabel,
-  Radio,
-  Typography,
-  RadioGroup as MuiRadioGroup,
-  Box,
-  RadioGroupProps,
-  Stack,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-interface Props extends RadioGroupProps {
-  label: string | ReactNode
-  name?: string
-  control?: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-}
-
-export default function RadioGroup(props: Props) {
-  const {
-    name,
-    label,
-    options = [],
-    row = false,
-    required = false,
-    value,
-    onChange,
-  } = 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}>
-        {options.map((item, index) => (
-          <FormControlLabel
-            key={index}
-            value={item.value}
-            control={<Radio />}
-            label={item.label}
-          />
-        ))}
-      </MuiRadioGroup>
-    </Box>
-  )
-}
+import {
+  Checkbox,
+  FormControlLabel,
+  Radio,
+  Typography,
+  RadioGroup as MuiRadioGroup,
+  Box,
+  RadioGroupProps,
+  Stack,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props extends RadioGroupProps {
+  label: string | ReactNode
+  name?: string
+  control?: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+}
+
+export default function RadioGroup(props: Props) {
+  const {
+    name,
+    label,
+    options = [],
+    row = false,
+    required = false,
+    value,
+    onChange,
+  } = 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}>
+        {options.map((item, index) => (
+          <FormControlLabel
+            key={index}
+            value={item.value}
+            control={<Radio />}
+            label={item.label}
+          />
+        ))}
+      </MuiRadioGroup>
+    </Box>
+  )
+}

package/src/components/Input/SingleCheckbox.tsx

@@ -1,23 +1,23 @@
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-import { Controller } from 'react-hook-form'
-
-interface Props {
-  disabled?: boolean
-  label: string
-  name?: string
-  size?: 'small' | 'medium'
-  sx?: any
-  checked: boolean
-  onChange: (e) => void
-}
-
-export default function SingleCheckbox(props: Props) {
-  const { name, checked, size = 'medium', label = '', sx, onChange } = props
-  return (
-    <FormControlLabel
-      sx={{ width: '100%', ...sx }}
-      control={<Checkbox size={size} checked={checked} onChange={onChange} />}
-      label={label}
-    />
-  )
-}
+import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  disabled?: boolean
+  label: string
+  name?: string
+  size?: 'small' | 'medium'
+  sx?: any
+  checked: boolean
+  onChange: (e) => void
+}
+
+export default function SingleCheckbox(props: Props) {
+  const { name, checked, size = 'medium', label = '', sx, onChange } = props
+  return (
+    <FormControlLabel
+      sx={{ width: '100%', ...sx }}
+      control={<Checkbox size={size} checked={checked} onChange={onChange} />}
+      label={label}
+    />
+  )
+}