@campxdev/shared 1.0.4 → 1.1.0

package/src/components/FullCalendar/Actions.tsx

@@ -1,162 +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
+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

@@ -1,54 +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',
-  },
-}))
+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/FullScreenLoader.tsx

@@ -1,19 +1,19 @@
-import { Box, CircularProgress } from '@mui/material'
-
-const FullScreenLoader = () => {
-  return (
-    <Box
-      sx={{
-        margin: 0,
-        padding: 0,
-        height: '100vh',
-        width: '100vw',
-        display: 'grid',
-        placeItems: 'center',
-      }}
-    >
-      <CircularProgress size={60} />
-    </Box>
-  )
-}
-export default FullScreenLoader
+import { Box, CircularProgress } from '@mui/material'
+
+const FullScreenLoader = () => {
+  return (
+    <Box
+      sx={{
+        margin: 0,
+        padding: 0,
+        height: '100vh',
+        width: '100vw',
+        display: 'grid',
+        placeItems: 'center',
+      }}
+    >
+      <CircularProgress size={60} />
+    </Box>
+  )
+}
+export default FullScreenLoader