@campxdev/shared 1.4.16 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -33,7 +33,6 @@
     "@mui/icons-material": "^5.6.2",
     "@mui/lab": "^5.0.0-alpha.112",
     "@mui/material": "^5.7.0",
-    "@mui/x-date-pickers": "^5.0.0-alpha.3",
     "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "js-cookie": "^3.0.1",
@@ -77,7 +76,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-storybook": "^0.6.8",
-    "lerna": "^5.5.1",
     "prettier": "^2.5.0",
     "react-scripts": "^5.0.1",
     "storybook-addon-react-router-v6": "^0.2.1",

package/src/components/IconButtons/Icons.tsx

@@ -249,9 +249,9 @@ export const DateRangeIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="18.647"
-      height="14.651"
-      viewBox="0 0 18.647 14.651"
+      width="20"
+      height="15"
+      viewBox="0 0 20 15"
     >
       <g id="transfer" transform="translate(0 -51.198)" opacity="0.501">
         <g id="Group_807" data-name="Group 807" transform="translate(0 51.198)">

package/src/components/Image/Image.tsx

@@ -8,6 +8,7 @@ interface ImageProps {
   width: string | number
   fit?: 'cover' | 'contain' | 'fill'
   radius?: string | number
+  defaultImage?: any
 }
 
 export default function Image({
@@ -17,6 +18,7 @@ export default function Image({
   width,
   fit = 'contain',
   radius = '10px',
+  defaultImage = null,
 }: ImageProps) {
   return (
     <Box
@@ -32,10 +34,10 @@ export default function Image({
       }}
     >
       <img
-        src={src}
+        src={src || defaultImage}
         alt={alt}
         onError={(e: any) => {
-          e.target.src = brokenImage
+          e.target.src = defaultImage ? defaultImage : brokenImage
         }}
       />
     </Box>

package/src/components/Input/DatePicker.tsx

@@ -6,7 +6,7 @@ import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
 import TextField from './TextField'
 
 export interface IDatePicker {
-  label: ReactNode
+  label?: ReactNode
   name?: string
   control?: any
   minDate?: Date | string | number

package/src/components/Input/DateRangePicker.tsx

@@ -1,131 +1,84 @@
+import { Box, styled, SvgIcon } from '@mui/material'
+import { useEffect, useState } from 'react'
 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'
+import DateTimePicker from './DateTimePicker'
+
+const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
+  ({ theme, size }) => ({
+    borderRadius: '10px',
+    height: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    border: theme.borders.grayLight,
+    '& .MuiOutlinedInput-notchedOutline': {
+      display: 'none',
+    },
+    '& .MuiSvgIcon-root': {
+      margin: '0 20px',
+      marginTop: '8px',
+    },
+    ...(size === 'small' && {
+      borderRadius: '5px',
+      height: '40px',
+      '& .MuiSvgIcon-root': {
+        margin: '0 20px',
+        marginTop: '8px',
+      },
+    }),
+  }),
+)
+
 interface Props {
-  label?: string
-  name?: string
+  value: [Date, Date]
+  onChange: (value: [Date, Date]) => void
+  enableTime?: boolean
   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)
+export default function DateRangePicker({
+  value,
+  onChange,
+  enableTime = false,
+  size = 'medium',
+}: Props) {
+  const [state, setState] = useState([null, null])
+
+  useEffect(() => {
+    setState(value)
+  }, [value])
+
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          border: '1px solid #0000001A',
-          borderRadius: '10px',
-          padding: '5px',
+    <StyledDateRangePicker size={size}>
+      <DateTimePicker
+        value={state[0]}
+        placeholder="From Date"
+        onChange={(value) => {
+          setState((prev) => [value, prev[1]])
+          onChange([value, state[1]])
         }}
-      >
-        <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>
+        enableTime={enableTime}
+        inputProps={{
+          InputProps: null,
+          size: size,
+        }}
+      />
+      <SvgIcon>
+        <DateRangeIcon />
+      </SvgIcon>
+      <DateTimePicker
+        value={state[1]}
+        minDate={state[0]}
+        placeholder="To Date"
+        enableTime={enableTime}
+        onChange={(value) => {
+          setState((prev) => [prev[0], value])
+          onChange([state[0], value])
+        }}
+        inputProps={{
+          InputProps: null,
+          size: size,
+        }}
+      />
+    </StyledDateRangePicker>
   )
 }
-
-const StyledDatepicker = styled(DatePicker)({
-  '& .MuiFormLabel-root .Mui-focused': {
-    display: 'none',
-  },
-  '& .MuiInputAdornment-root': {
-    display: 'none',
-  },
-
-  '& fieldset': {
-    display: 'none',
-  },
-})

package/src/components/Input/DateTimePicker.tsx

@@ -17,6 +17,7 @@ export interface IDateTimePicker {
   onChange: (value: Date) => void
   placeholder?: string
   inputProps?: TextFieldProps
+  enableTime?: boolean
 }
 
 export default function DateTimePicker({
@@ -30,13 +31,14 @@ export default function DateTimePicker({
   onChange,
   value,
   placeholder,
+  enableTime = true,
   ...rest
 }: IDateTimePicker) {
   return (
     <Flatpickr
       options={{
-        enableTime: true,
-        dateFormat: 'd-m-Y h:i K',
+        enableTime,
+        dateFormat: enableTime ? 'd-m-Y h:i K' : 'd-m-Y',
         minDate,
         maxDate,
         minTime,

package/src/components/index.ts

@@ -25,6 +25,7 @@ import DialogWrapper from './DrawerWrapper/DialogWrapper'
 import Form from './Form/Form'
 import RenderForm from './Form/RenderForm'
 import AsyncSearchSelect from './Input/AsyncSearchSelect'
+import FilterButton from './FilterComponents/FilterButton'
 export { default as Image } from './Image'
 export { default as PageHeader } from './PageHeader'
 export { PageContent } from './PageContent'
@@ -79,6 +80,7 @@ export {
   Form,
   RenderForm,
   AsyncSearchSelect,
+  FilterButton,
 }
 
 export * from './UploadButton/types'

package/src/theme/muiTheme.ts

@@ -217,7 +217,7 @@ const muiTheme = createTheme({
           '& .MuiOutlinedInput-notchedOutline': {
             top: 1,
             minHeight: '50px',
-            borderColor: alpha(colors.common.black, 0.15),
+            border: borders.grayLight,
             '& legend': {
               '& > span': {
                 paddingRight: 2,
@@ -225,7 +225,7 @@ const muiTheme = createTheme({
             },
           },
           '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: alpha(colors.common.black, 0.3),
+            borderColor: alpha(colors.common.black, 0.2),
           },
           '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
             borderColor: colors.primary.main,

package/src/utils/index.ts

@@ -4,5 +4,4 @@ export { default as romanize } from './romanize'
 
 export { default as withRouteWrapper } from './withRouteWrapper'
 export { default as withSuspense } from './withSuspense'
-export { default as withLocalization } from './withLocalization'
 export { default as onLogout } from './logout'