@campxdev/shared 0.1.0

package/src/components/Input/DateRangePicker.tsx

@@ -0,0 +1,131 @@
+import { DateRangeIcon } from '../IconButtons'
+import { Box, styled, TextField } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { useState } from 'react'
+interface Props {
+  label?: string
+  name?: string
+  size?: 'small' | 'medium'
+  control?: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+
+  onChangeFromDate: any
+  onChangeToDate: any
+  fromValue: any
+  toValue: any
+}
+export default function DateRangePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+    fromValue,
+    toValue,
+    onChangeFromDate,
+    onChangeToDate,
+  } = props
+  const [fromOpen, setFromOpen] = useState(false)
+  const [toOpen, setToOpen] = useState(false)
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          border: '1px solid #0000001A',
+          borderRadius: '10px',
+          padding: '5px',
+        }}
+      >
+        <StyledDatepicker
+          value={fromValue}
+          onChange={onChangeFromDate}
+          label={'start date'}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          closeOnSelect={true}
+          OpenPickerButtonProps={{
+            onFocus: (e) => {
+              setFromOpen(true)
+            },
+          }}
+          onClose={() => {
+            setFromOpen(false)
+          }}
+          PopperProps={{
+            disablePortal: true,
+          }}
+          InputProps={{
+            onFocus: () => {
+              setFromOpen(true)
+            },
+          }}
+          open={fromOpen}
+          renderInput={(params) => (
+            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
+          )}
+        />
+        <Box>
+          <DateRangeIcon />
+        </Box>
+        <StyledDatepicker
+          onChange={onChangeToDate}
+          value={toValue}
+          label={'end date'}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          OpenPickerButtonProps={{
+            onFocus: (e) => {
+              setToOpen(true)
+            },
+          }}
+          onClose={() => {
+            setToOpen(false)
+          }}
+          PopperProps={{
+            disablePortal: true,
+          }}
+          InputProps={{
+            onFocus: () => {
+              setToOpen(true)
+            },
+          }}
+          open={toOpen}
+          renderInput={(params) => (
+            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
+          )}
+        />
+      </Box>
+      {/* {error && (
+          <Typography
+            variant="caption"
+            component={'div'}
+            sx={{ pl: '2px' }}
+            color="rgb(211, 47, 47)"
+          >
+            {error.message}
+          </Typography>
+        )} */}
+    </LocalizationProvider>
+  )
+}
+
+const StyledDatepicker = styled(DatePicker)({
+  '& .MuiFormLabel-root .Mui-focused': {
+    display: 'none',
+  },
+  '& .MuiInputAdornment-root': {
+    display: 'none',
+  },
+
+  '& fieldset': {
+    display: 'none',
+  },
+})

package/src/components/Input/DateTimePicker.tsx

@@ -0,0 +1,70 @@
+import { InputAdornment, TextField, Typography } from '@mui/material'
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+import DateRangeIcon from '@mui/icons-material/DateRange'
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  minDate?: any
+}
+export default function FormDateTimePicker(props: Props) {
+  const { name, size = 'small', control, label = '', required, minDate } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <DateTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              minDate={minDate && minDate}
+              mask="__/__/____ __:__ _M"
+              inputFormat="DD/MM/yyyy hh:mm a"
+              value={field.value || null}
+              onChange={field.onChange}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <DateRangeIcon />
+                  </InputAdornment>
+                ),
+              }}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}

package/src/components/Input/FormLabel.tsx

@@ -0,0 +1,14 @@
+import { Typography } from '@mui/material'
+
+export default function FormLabel({ label, required }) {
+  return (
+    <>
+      {label}
+      {required && (
+        <Typography fontSize={14} component={'span'} color="error">
+          {' *'}
+        </Typography>
+      )}
+    </>
+  )
+}

package/src/components/Input/MultiCheckbox.tsx

@@ -0,0 +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>
+          )}
+        </>
+      )}
+    />
+  )
+}

package/src/components/Input/MultiSelect.tsx

@@ -0,0 +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}
+    />
+  )
+}

package/src/components/Input/RadioGroup.tsx

@@ -0,0 +1,55 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  Radio,
+  Typography,
+  RadioGroup as MuiRadioGroup,
+  Box,
+  RadioGroupProps,
+  Stack,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props extends RadioGroupProps {
+  label: string
+  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' }}>
+        <Typography variant="subtitle2">{label}</Typography>
+        {required && (
+          <Typography fontSize={14} component={'span'} color="error">
+            {'  *'}
+          </Typography>
+        )}
+      </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

@@ -0,0 +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}
+    />
+  )
+}

package/src/components/Input/SingleSelect.tsx

@@ -0,0 +1,139 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectProps,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+interface Props extends SelectProps {
+  name?: string
+  control?: any
+  options: Array<{ label: ReactNode; value: any }>
+  label?: string
+  textColor?: string
+  onChange?: (value: any) => void
+  required?: boolean
+  hookForm?: boolean
+  firstItemEmpty?: boolean
+}
+
+export default function SingleSelect(props: Props) {
+  const {
+    name = 'select',
+    options,
+    control,
+    label,
+    textColor,
+    onChange,
+    required,
+    hookForm = true,
+    firstItemEmpty = false,
+  } = 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
+            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
+              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>
+          )}
+        </>
+      )}
+    />
+  )
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/Input/TextField.tsx

@@ -0,0 +1,50 @@
+import {
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+  Typography,
+} from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type MyTextFieldProps = MuiTextFieldProps & {
+  control?: any
+  label?: string
+  name?: string
+  value?: any
+  hookForm?: boolean
+  required?: boolean
+  handleChange?: React.ChangeEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  >
+}
+
+export default function TextField({
+  name,
+  control,
+  label,
+  value,
+  handleChange,
+  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}
+    />
+  )
+}

package/src/components/Input/TimePicker.tsx

@@ -0,0 +1,82 @@
+import DateRangeIcon from '@mui/icons-material/DateRange'
+import { InputAdornment, TextField, Typography } from '@mui/material'
+import {
+  LocalizationProvider,
+  TimePicker as MuiTimePicker,
+} from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  hookForm?: boolean
+}
+
+export default function TimePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    required,
+    hookForm = true,
+  } = props
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <MuiTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              mask="__:__ _M"
+              inputFormat="hh:mm a"
+              value={field.value || null}
+              onChange={field.onChange}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <DateRangeIcon />
+                  </InputAdornment>
+                ),
+              }}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}