@campxdev/shared 0.1.0

package/src/components/ErrorBox.tsx

@@ -0,0 +1,42 @@
+import { Alert as MuiAlert, styled } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode } from 'react'
+
+export default function ErrorBox({
+  err,
+  extra,
+}: {
+  err: any
+  extra?: string | ReactNode
+}) {
+  if (!err) {
+    return null
+  }
+
+  if (err.response) {
+    if (err.response.status == 401) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+    if (err.response.status == 422) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+
+    return (
+      <Alert severity={'error'}>
+        {'Unknown Error'} {extra}
+      </Alert>
+    )
+  }
+}
+
+const Alert = styled(MuiAlert)(({}) => ({
+  marginTop: '20px',
+}))

package/src/components/FloatingContainer.tsx

@@ -0,0 +1,26 @@
+import { Box, styled } from '@mui/material'
+export const StyledFooter = styled(Box)<{
+  show: boolean
+}>`
+  position: fixed;
+  background: #fff;
+  bottom: ${(props) => (props.show ? '0' : '-70px')};
+  right: 16px;
+  width: calc(100% - 236px);
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  transition: bottom 400ms ease-in-out;
+  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
+`
+function FloatingContainer({ children, show }) {
+  return (
+    <>
+      <StyledFooter show={show}>{children}</StyledFooter>
+    </>
+  )
+}
+export default FloatingContainer

package/src/components/FullCalendar/Actions.tsx

@@ -0,0 +1,162 @@
+import type { ElementType, FC, ReactNode } from 'react'
+import { format } from 'date-fns'
+import PropTypes from 'prop-types'
+import { Grid, IconButton, Tooltip, Typography } from '@mui/material'
+
+import ViewAgendaTwoToneIcon from '@mui/icons-material/ViewAgendaTwoTone'
+
+import ViewDayTwoToneIcon from '@mui/icons-material/ViewDayTwoTone'
+import CalendarViewMonthTwoToneIcon from '@mui/icons-material/CalendarViewMonthTwoTone'
+import ViewWeekTwoToneIcon from '@mui/icons-material/ViewWeekTwoTone'
+import TodayTwoToneIcon from '@mui/icons-material/TodayTwoTone'
+import ArrowForwardTwoToneIcon from '@mui/icons-material/ArrowForwardTwoTone'
+import ArrowBackTwoToneIcon from '@mui/icons-material/ArrowBackTwoTone'
+
+export type View = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek'
+
+interface ActionsProps {
+  children?: ReactNode
+  className?: string
+  date: Date
+  onNext?: () => void
+  onPrevious?: () => void
+  onToday?: () => void
+  handleCreateEvent?: () => void
+  changeView?: (view: View) => void
+  view: View
+}
+
+interface ViewOption {
+  label: string
+  value: View
+  icon: ElementType
+}
+
+const viewOptions: ViewOption[] = [
+  {
+    label: 'Month',
+    value: 'dayGridMonth',
+    icon: CalendarViewMonthTwoToneIcon,
+  },
+  {
+    label: 'Week',
+    value: 'timeGridWeek',
+    icon: ViewWeekTwoToneIcon,
+  },
+  {
+    label: 'Day',
+    value: 'timeGridDay',
+    icon: ViewDayTwoToneIcon,
+  },
+  {
+    label: 'Agenda',
+    value: 'listWeek',
+    icon: ViewAgendaTwoToneIcon,
+  },
+]
+
+const Actions: FC<ActionsProps> = ({
+  date,
+  onNext,
+  onPrevious,
+  onToday,
+  changeView,
+  view,
+}) => {
+  return (
+    <Grid
+      container
+      spacing={3}
+      alignItems="center"
+      justifyContent="space-between"
+      marginBottom={'20px'}
+    >
+      <Grid item>
+        {/* <Tooltip arrow placement="top" title={'Previous Day'}>
+          <IconButton color="primary" onClick={onPrevious}>
+            <ArrowBackTwoToneIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip arrow placement="top" title={'Today'}>
+          <IconButton
+            color="primary"
+            sx={{
+              mx: 1,
+            }}
+            onClick={onToday}
+          >
+            <TodayTwoToneIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip arrow placement="top" title={'Next Day'}>
+          <IconButton color="primary" onClick={onNext}>
+            <ArrowForwardTwoToneIcon />
+          </IconButton>
+        </Tooltip> */}
+      </Grid>
+      <Grid
+        item
+        sx={{
+          display: { xs: 'none', sm: 'inline-block' },
+        }}
+      >
+        <Typography variant="h3" color="text.primary">
+          {format(date, 'MMMM yyyy')}
+        </Typography>
+      </Grid>
+      <Grid
+        item
+        sx={{
+          display: { xs: 'none', sm: 'inline-block' },
+        }}
+      >
+        {viewOptions.map((viewOption) => {
+          const Icon = viewOption.icon
+
+          return (
+            <Tooltip
+              key={viewOption.value}
+              arrow
+              placement="top"
+              title={viewOption.label}
+            >
+              <IconButton
+                color={viewOption.value === view ? 'primary' : 'secondary'}
+                onClick={() => changeView(viewOption.value)}
+              >
+                <Icon />
+              </IconButton>
+            </Tooltip>
+          )
+        })}
+      </Grid>
+    </Grid>
+  )
+}
+
+Actions.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  date: PropTypes.instanceOf(Date).isRequired,
+  onNext: PropTypes.func,
+  onPrevious: PropTypes.func,
+  onToday: PropTypes.func,
+  handleCreateEvent: PropTypes.func,
+  changeView: PropTypes.func,
+  view: PropTypes.oneOf([
+    'dayGridMonth',
+    'timeGridWeek',
+    'timeGridDay',
+    'listWeek',
+  ]),
+}
+
+Actions.defaultProps = {
+  onNext: () => {},
+  onPrevious: () => {},
+  onToday: () => {},
+  handleCreateEvent: () => {},
+  changeView: () => {},
+}
+
+export default Actions

package/src/components/FullCalendar/FullCalendarWrapper.tsx

@@ -0,0 +1,54 @@
+import { alpha, Box, styled } from '@mui/material'
+
+export const FullCalendarWrapper = styled(Box)(({ theme }) => ({
+  '& colgroup': {
+    '& col': {
+      minWidth: '120px',
+    },
+  },
+  '.fc .fc-timegrid-axis-cushion': {
+    maxWidth: 'unset',
+  },
+  '.fc .fc-timegrid-axis-frame': {
+    justifyContent: 'flex-start',
+  },
+  '.fc-direction-ltr .fc-timegrid-slot-label-frame': {
+    textAlign: 'left',
+  },
+  '.fc .fc-timegrid-divider': {
+    padding: 0,
+  },
+  '.fc .fc-timegrid-slot-minor': {
+    borderTop: 'none',
+  },
+  '& thead': {
+    '& th': {
+      verticalAlign: 'bottom',
+    },
+    height: '60px',
+    '& *': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  '& .fc .fc-timegrid-slot': {
+    height: '84px',
+  },
+  '& .fc-v-event, & .fc-h-event': {
+    border: 'none',
+    padding: '2px 5px',
+  },
+  '& .fc .fc-timegrid-col.fc-day-today': {
+    backgroundColor: 'white',
+  },
+  '& .fc-daygrid-day-top': {
+    '& a': {
+      color: theme.palette.text.primary,
+    },
+  },
+  '& .fc-day-disabled': {
+    background: 'rgba(0, 0, 0, 0.02)',
+  },
+  '& .fc-daygrid-event .fc-event-time': {
+    display: 'none',
+  },
+}))

package/src/components/HookForm/AutoCompleteSearch.tsx

@@ -0,0 +1,143 @@
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type Option = {
+  value: string | any
+  label: string | any
+}
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name: string
+  options: { value: string | any; label: string | any }[]
+  placeholder?: string
+  hookForm?: boolean
+  loading?: boolean
+  [key: string]: any
+  multiple?: boolean
+}
+
+export default function FormAutoCompleteSearch({
+  control,
+  name,
+  options,
+  label,
+  loading, // pass this variable when options are from an async operation
+  hookForm = true,
+  multiple = false,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple={multiple}
+        value={props.value}
+        fullWidth
+        onChange={(e, value) => {
+          props.onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option: Option) => option?.label || ''}
+        renderInput={(params) => (
+          <TextField
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+            {...params}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Box>
+          <Autocomplete
+            multiple={multiple}
+            loading={loading}
+            value={field.value}
+            fullWidth
+            onChange={(e, value) => {
+              field.onChange(value)
+            }}
+            options={options || []}
+            getOptionLabel={(option: Option) => option?.label || ''}
+            renderInput={(params) => (
+              <TextField
+                error={Boolean(error)}
+                variant="outlined"
+                label={<FormLabel label={label} required={props.required} />}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? (
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+                {...params}
+              />
+            )}
+          />
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error?.message}
+            </Typography>
+          )}
+        </Box>
+      )}
+    />
+  )
+}
+
+export function MyAutoComplete({
+  value,
+  onChange,
+  options,
+  label,
+  loading,
+  ...props
+}) {
+  return (
+    <Autocomplete
+      loading={loading}
+      value={value}
+      fullWidth
+      freeSolo
+      onChange={(e, value) => {
+        onChange(value.value)
+      }}
+      options={options || []}
+      getOptionLabel={(option: Option) => option?.label || ''}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          label={<FormLabel label={label} required={props.required} />}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/DatePicker.tsx

@@ -0,0 +1,65 @@
+import { Box, TextField, Typography } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+}
+export default function FormDatePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+  } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <Box>
+            <DatePicker
+              label={<FormLabel label={label} required={required} />}
+              mask="__/__/____"
+              inputFormat="DD/MM/yyyy"
+              value={field.value ?? null}
+              onChange={field.onChange}
+              minDate={minDate}
+              maxDate={maxDate}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                component={'div'}
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </Box>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}

package/src/components/HookForm/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/HookForm/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/HookForm/MultiCheckbox.tsx

@@ -0,0 +1,82 @@
+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 FormMultiCheckbox(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    options = [],
+    required = false,
+    row = true,
+  } = props
+
+  return (
+    <Controller
+      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)
+                        }
+                      }}
+                    />
+                  }
+                  label={item.label}
+                />
+              ))}
+            </FormGroup>
+          </FormControl>
+          {error && (
+            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
+              {error.message}
+            </Typography>
+          )}
+        </>
+      )}
+    />
+  )
+}