@campxdev/shared 1.4.6 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
+    "react-flatpickr": "^3.10.13",
     "react-hook-form": "^7.40.0",
     "react-query": "^3.39.0",
     "react-router-dom": "^6.4.2",
@@ -52,6 +53,7 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@types/react-flatpickr": "^3.8.8",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",

package/src/components/HookForm/DatePicker.tsx

@@ -1,65 +1,40 @@
-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
+import { DatePicker } from '../Input'
+import { IDatePicker } from '../Input/DatePicker'
+interface Props extends Omit<IDatePicker, 'onChange' | 'value'> {
   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
+
+export default function FormDatePicker({
+  name,
+  control,
+  minDate,
+  maxDate,
+  label,
+  required = false,
+  ...rest
+}: 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>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DatePicker
+          label={label}
+          required={required}
+          onChange={field.onChange}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/HookForm/DateTimePicker.tsx

@@ -1,70 +1,47 @@
-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
+import DateTimePicker, { IDateTimePicker } from '../Input/DateTimePicker'
+
+interface Props extends Omit<IDateTimePicker, 'onChange' | 'value'> {
   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
+
+export default function FormDateTimePicker({
+  name,
+  control,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  ...rest
+}: 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>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DateTimePicker
+          name={name}
+          label={label}
+          required={required}
+          onChange={(v) => {
+            field.onChange(v)
+          }}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          minTime={minTime}
+          maxTime={maxTime}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/HookForm/TimePicker.tsx

@@ -1,82 +1,40 @@
-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'
+import TimePicker, { ITimePicker } from '../Input/TimePicker'
 
-interface Props {
-  label?: string
+interface Props extends Omit<ITimePicker, 'onChange' | 'value'> {
   name: string
-  size?: 'small' | 'medium'
   control: any
-  required?: boolean
-  hookForm?: boolean
 }
 
-export default function FormTimePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    required,
-    hookForm = true,
-  } = props
-
+export default function FormTimePicker({
+  name,
+  control,
+  label,
+  minTime,
+  maxTime,
+  required,
+  ...rest
+}: 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>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TimePicker
+          label={label}
+          required={required}
+          onChange={field.onChange}
+          value={field.value}
+          minTime={minTime}
+          maxTime={maxTime}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/Input/DatePicker.tsx

@@ -1,60 +1,69 @@
-import { Box, TextField } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import FormLabel from './FormLabel'
-interface Props {
-  label?: string
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDatePicker {
+  label: ReactNode
   name?: string
-  size?: 'small' | 'medium'
   control?: any
-  minDate?: any
-  maxDate?: any
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
   required?: boolean
-  value: any
-  onChange: any
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
-export default function FormDatePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-    value,
-    onChange,
-  } = props
+
+export default function FormDatePicker({
+  name,
+  label,
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  ...rest
+}: IDatePicker) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box>
-        <DatePicker
-          label={<FormLabel label={label} required={required} name={name} />}
-          mask="__/__/____"
-          inputFormat="DD/MM/yyyy"
-          value={value}
-          onChange={onChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          renderInput={(params) => (
-            <TextField
-              fullWidth
-              size={size}
-              {...params}
-              // error={Boolean(error)}
-            />
-          )}
-        />
-        {/* {error && (
-          <Typography
-            variant="caption"
-            component={'div'}
-            sx={{ pl: '2px' }}
-            color="rgb(211, 47, 47)"
-          >
-            {error.message}
-          </Typography>
-        )} */}
-      </Box>
-    </LocalizationProvider>
+    <Flatpickr
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      options={{
+        dateFormat: 'd-m-Y',
+        minDate,
+        maxDate,
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }

package/src/components/Input/DateTimePicker.tsx

@@ -1,70 +1,75 @@
-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
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist//flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDateTimePicker {
+  label?: ReactNode
+  name?: string
   required?: boolean
-  minDate?: any
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
-export default function FormDateTimePicker(props: Props) {
-  const { name, size = 'small', control, label = '', required, minDate } = props
+
+export default function DateTimePicker({
+  name,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  ...rest
+}: IDateTimePicker) {
   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>
+    <Flatpickr
+      options={{
+        enableTime: true,
+        dateFormat: 'd-m-Y h:i:K',
+        minDate,
+        maxDate,
+        minTime,
+        maxTime,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }

package/src/components/Input/TextField.tsx

@@ -17,6 +17,8 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   },
 }))
 
+type TextFieldProps = {} & MuiTextFieldProps
+
 export default function TextField({
   name,
   label,
@@ -24,7 +26,7 @@ export default function TextField({
   onChange,
   required = false,
   ...rest
-}: MuiTextFieldProps) {
+}: TextFieldProps) {
   return (
     <Box width="100%">
       <FieldLabel label={label} required={required} name={name} />

package/src/components/Input/TimePicker.tsx

@@ -1,82 +1,70 @@
-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'
+import { QueryBuilder } from '@mui/icons-material'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
 
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
+export interface ITimePicker {
+  label?: ReactNode
+  name?: string
   required?: boolean
-  hookForm?: boolean
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
 
-export default function TimePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    required,
-    hookForm = true,
-  } = props
-
+export default function TimePicker({
+  name,
+  label,
+  required,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  ...rest
+}: ITimePicker) {
   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>
+    <Flatpickr
+      options={{
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'h:i:K',
+        minTime,
+        maxTime,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <QueryBuilder />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }