@campxdev/shared 1.4.15 → 1.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "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/FilterComponents/FilterButton.tsx

@@ -0,0 +1,39 @@
+import { Tune } from '@mui/icons-material'
+import { Box, styled } from '@mui/material'
+
+const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
+  ({ theme, size }) => ({
+    width: size === 'regular' ? '40px' : '50px',
+    height: size === 'regular' ? '40px' : '50px',
+    border: theme.borders.grayLight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '10px',
+    cursor: 'pointer',
+    '&:active': {
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+    transition: 'border 0.1s ease-in-out',
+  }),
+)
+
+export default function FilterButton({
+  onClick,
+  size = 'large',
+  ...props
+}: {
+  onClick: (e: any) => void
+  size?: 'regular' | 'large'
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!onClick) return
+    onClick(e)
+  }
+  return (
+    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
+      <Tune />
+    </StyledButtonWrapper>
+  )
+}

package/src/components/FilterComponents/SearchBar.tsx

@@ -0,0 +1,40 @@
+import { Search } from '@mui/icons-material'
+import { InputAdornment } from '@mui/material'
+import _ from 'lodash'
+import { useMemo, useState } from 'react'
+import { TextField } from '../Input'
+import { ITextFieldProps } from '../Input/TextField'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  textFieldProps?: ITextFieldProps
+}
+
+export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
+  const [, setSearch] = useState('')
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e) => {
+        setSearch(e.target.value)
+        onSearch(e.target.value)
+      }, 300),
+    [],
+  )
+
+  return (
+    <TextField
+      label="Search"
+      placeholder="Search"
+      onChange={debouncedChangeHandler}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Search />
+          </InputAdornment>
+        ),
+      }}
+      {...restProps.textFieldProps}
+    />
+  )
+}

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/Input/TextField.tsx

@@ -18,7 +18,7 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   },
 }))
 
-type TextFieldProps = {
+export type ITextFieldProps = {
   containerProps?: BoxProps
 } & MuiTextFieldProps
 
@@ -30,7 +30,7 @@ export default function TextField({
   required = false,
   containerProps,
   ...rest
-}: TextFieldProps) {
+}: ITextFieldProps) {
   return (
     <Box width="100%" {...containerProps}>
       <FieldLabel label={label} required={required} name={name} />

package/src/components/ModalButtons/DialogButton.tsx

@@ -71,7 +71,7 @@ export default function DialogButton({
         fullWidth
         onClose={onClose}
         open={open}
-        transitionDuration={100}
+        transitionDuration={140}
         TransitionComponent={Transition}
         sx={{
           '& .MuiBackdrop-root': {

package/src/components/ModalButtons/DrawerButton.tsx

@@ -1,6 +1,5 @@
 import { Close } from '@mui/icons-material'
 import {
-  alpha,
   Box,
   ButtonProps,
   DialogTitle,
@@ -54,7 +53,7 @@ export default function DrawerButton({
       {anchor({ open: onOpen })}
       <Drawer
         anchor="right"
-        elevation={10}
+        elevation={2}
         onClose={onClose}
         open={open}
         PaperProps={{
@@ -70,7 +69,7 @@ export default function DrawerButton({
             backgroundColor: 'rgba(0, 0, 0, 0.4)',
           },
         }}
-        transitionDuration={200}
+        transitionDuration={140}
       >
         <StyledDrawerHeader>
           <DialogTitle>{title}</DialogTitle>

package/src/components/index.ts

@@ -4,7 +4,7 @@ import ImageUpload from './ImageUpload'
 import FloatingContainer from './FloatingContainer'
 import TabsContainer from './Tabs/TabsContainer'
 import { StyledTableContainer } from './StyledTableContainer'
-import SearchBar from './SearchBar'
+import SearchBar from './FilterComponents/SearchBar'
 import { DrawerButton, DialogButton } from './ModalButtons'
 import DetailsGrid from './DetailsGrid'
 import AppHeader from './Layout/Header'

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'