@codeleap/web 3.18.2 → 3.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.18.2",
+  "version": "3.18.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -28,6 +28,7 @@
     "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-datepicker": "^4.20.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dropzone": "^14.2.3",
     "react-image-crop": "^10.1.8",

package/src/components/DatePicker/defaultComponents/Header.tsx

@@ -0,0 +1,87 @@
+import {
+  IconPlaceholder,
+  TypeGuards,
+  getNestedStylesByKey,
+} from '@codeleap/common'
+import { ActionIcon, Text, View } from '../../components'
+import { DatePickerArrowProps, DatePickerHeaderComponent } from '../types'
+import { format, getYear } from 'date-fns'
+
+export const ArrowLabel: React.FC<DatePickerArrowProps> = ({
+  name,
+  direction,
+  ...props
+}) => {
+  return (
+    <ActionIcon
+      name={name ?? (`chevron-${direction}` as IconPlaceholder)}
+      debugName={'Calendar arrowLabel'}
+      {...props}
+    />
+  )
+}
+
+export const Header = (props: DatePickerHeaderComponent) => {
+  const {
+    date,
+    decreaseMonth,
+    increaseMonth,
+    prevMonthButtonDisabled,
+    decreaseYear,
+    increaseYear,
+    prevYearButtonDisabled,
+    nextYearButtonDisabled,
+    nextMonthButtonDisabled,
+    setYearShow,
+    styles,
+    formatHeaderTitle,
+  } = props
+
+  const month = format(date, 'MMMM')
+  const year = getYear(date)
+
+  const title = TypeGuards.isFunction(formatHeaderTitle)
+    ? formatHeaderTitle(date)
+    : `${month} ${year}`
+
+  const prevArrow = getNestedStylesByKey('prevButton', styles)
+  const nextArrow = getNestedStylesByKey('nextButton', styles)
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.buttonsWrapper}>
+        <ArrowLabel
+          direction='left'
+          styles={prevArrow}
+          onPress={decreaseYear}
+          disabled={prevYearButtonDisabled}
+        />
+        <Text
+          onPress={() => setYearShow((curr) => !curr)}
+          style={styles.title}
+          text={title}
+        />
+        <ArrowLabel
+          direction='right'
+          styles={nextArrow}
+          onPress={increaseYear}
+          disabled={nextYearButtonDisabled}
+        />
+      </View>
+      <View style={styles.buttonsWrapper}>
+        <ArrowLabel
+          direction='left'
+          styles={prevArrow}
+          onPress={decreaseMonth}
+          disabled={prevMonthButtonDisabled}
+        />
+        <ArrowLabel
+          direction='right'
+          styles={nextArrow}
+          onPress={increaseMonth}
+          disabled={nextMonthButtonDisabled}
+        />
+      </View>
+    </View>
+  )
+}

package/src/components/DatePicker/defaultComponents/OuterInput.tsx

@@ -0,0 +1,28 @@
+import { TextInput } from '../../components'
+import { DatePickerProps } from '../types'
+
+export const OuterInput: DatePickerProps['outerInputComponent'] = ({
+  valueLabel,
+  focused,
+  hideInput,
+  ...props
+}) => {
+  return hideInput ? null : (
+    <TextInput
+      validate={!focused && props?.validate}
+      debugName='DatePicker - OuterInputComponent'
+      masking={{
+        type: 'custom',
+        options: {
+          mask: 'xx/xx/xxxx',
+          placeholder: props.placeholder,
+          formatChars: {
+            x: '[0123456789]',
+          },
+          maskChar: '',
+        },
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/DatePicker/defaultComponents/index.tsx

@@ -0,0 +1,2 @@
+export * from './OuterInput'
+export * from './Header'

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,232 @@
+import {
+  TypeGuards,
+  getNestedStylesByKey,
+  useCallback,
+  useDefaultComponentStyle,
+  useState,
+} from '@codeleap/common'
+import { Text, View } from '../components'
+import { DatePickerPresets } from './styles'
+import { DatePickerProps, DayComponentProps } from './types'
+import _DatePicker from 'react-datepicker'
+import { Header, OuterInput } from './defaultComponents'
+import { format, isBefore, isAfter } from 'date-fns'
+
+export * from './styles'
+export * from './types'
+export * from './defaultComponents'
+
+const defaultProps = {
+  variants: [],
+  styles: {},
+  minDate: new Date(1910, 0, 1),
+  maxDate: new Date(),
+  startDate: new Date(1923, 0, 1),
+  outerInputComponent: OuterInput,
+  headerComponent: Header,
+}
+
+export function DatePicker(props: DatePickerProps) {
+  const allProps = {
+    ...DatePicker.defaultProps,
+    ...props,
+  }
+
+  const {
+    hideInput,
+    value,
+    onValueChange,
+    variants,
+    styles,
+    style,
+    responsiveVariants,
+    defaultValue,
+    outerInputComponent: OuterInputComponent,
+    headerComponent: HeaderComponent,
+    headerProps: _headerProps,
+    dayComponent: DayComponent,
+    dayProps,
+    yearComponent: YearComponent,
+    yearProps,
+    datePickerProps,
+    minDate,
+    maxDate,
+    startDate,
+    visible: _visible,
+    toggle: _toggle,
+    yearShow: _yearShow,
+    setYearShow: _setYearShow,
+    disabled = false,
+    ...otherProps
+  } = allProps
+
+  const [visible, toggle] =
+    TypeGuards.isBoolean(_visible) && TypeGuards.isFunction(_toggle)
+      ? [_visible, _toggle]
+      : useState(false)
+  const [yearShow, setYearShow] =
+    TypeGuards.isBoolean(_yearShow) && TypeGuards.isFunction(_setYearShow)
+      ? [_yearShow, _setYearShow]
+      : useState(false)
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:DatePicker',
+    typeof DatePickerPresets
+  >('u:DatePicker', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  const DayContentComponent = useCallback(
+    (_param: DayComponentProps) => {
+      const param = {
+        ..._param,
+        ...dayProps,
+      }
+
+      const { day, date: _date } = param
+
+      const date = format(new Date(_date), 'dd MMM yyyy')
+      const dateValue = value ? format(new Date(value), 'dd MMM yyyy') : ''
+
+      const isSelected = date === dateValue
+
+      const isDisabled = [
+        isBefore(_date, minDate),
+        isAfter(_date, maxDate),
+      ].some(Boolean)
+
+      const getStyles = (key) => {
+        return {
+          ...variantStyles[key],
+          ...(isSelected && variantStyles[`${key}:selected`]),
+          ...(!isSelected && isDisabled && variantStyles[`${key}:disabled`]),
+        }
+      }
+
+      if (TypeGuards.isFunction(DayComponent)) {
+        return (
+          <DayComponent
+            {...param}
+            value={value}
+            disabled={isDisabled}
+            selected={isSelected}
+            variantStyles={variantStyles}
+          />
+        )
+      }
+
+      return (
+        <View css={getStyles('dayWrapper')}>
+          <Text style={getStyles('day')} disabled={isDisabled} text={day} />
+        </View>
+      )
+    },
+    [value],
+  )
+
+  const YearContentComponent = useCallback(
+    (_param) => {
+      const param = {
+        ..._param,
+        ...yearProps,
+      }
+
+      const { year } = param
+
+      const isSelected = String(value)?.includes(year)
+
+      const getStyles = (key) => {
+        return {
+          ...variantStyles[key],
+          ...(isSelected && variantStyles[`${key}:selected`]),
+        }
+      }
+
+      if (TypeGuards.isFunction(YearComponent)) {
+        return (
+          <YearComponent
+            {...param}
+            value={value}
+            selected={isSelected}
+            variantStyles={variantStyles}
+          />
+        )
+      }
+
+      return (
+        <View css={getStyles('yearWrapper')}>
+          <Text style={getStyles('year')} text={year} />
+        </View>
+      )
+    },
+    [value],
+  )
+
+  const inputStyles = getNestedStylesByKey('outerInput', variantStyles)
+  const headerStyles = getNestedStylesByKey('header', variantStyles)
+
+  return (
+    <View css={variantStyles.wrapper}>
+      <_DatePicker
+        onChange={onValueChange}
+        open={visible}
+        selected={value}
+        todayButton={null}
+        shouldCloseOnSelect={false}
+        openToDate={defaultValue ?? value}
+        dateFormat='dd/MM/yyyy'
+        formatWeekDay={(t) => t[0]}
+        calendarStartDay={1}
+        placeholderText={otherProps?.placeholder}
+        disabled={disabled}
+        renderDayContents={(day, date) => (
+          <DayContentComponent day={day} date={date} />
+        )}
+        customInput={
+          <OuterInputComponent
+            styles={inputStyles}
+            focused={visible}
+            hideInput={hideInput}
+            {...otherProps}
+          />
+        }
+        renderCustomHeader={(headerProps) => (
+          <HeaderComponent
+            styles={headerStyles}
+            setYearShow={setYearShow}
+            prevYearButtonDisabled={yearShow}
+            nextYearButtonDisabled={yearShow}
+            {...headerProps}
+            {..._headerProps}
+          />
+        )}
+        onFocus={() => toggle(true)}
+        onSelect={() => (yearShow ? setYearShow(false) : toggle(false))}
+        onClickOutside={() => {
+          toggle(false)
+          setYearShow(false)
+        }}
+        minDate={minDate}
+        maxDate={maxDate}
+        endDate={maxDate}
+        startDate={startDate}
+        onYearChange={() => setYearShow(false)}
+        yearItemNumber={maxDate.getFullYear() - minDate.getFullYear()}
+        showYearPicker={yearShow}
+        renderYearContent={(year) => {
+          if (year < startDate.getFullYear() || year > maxDate.getFullYear()) return null
+          return <YearContentComponent year={year} />
+        }}
+        filterDate={(date) => {
+          if (date.getFullYear() < startDate.getFullYear() || date.getFullYear() > maxDate.getFullYear()) return false
+          return true
+        }}
+        {...datePickerProps}
+      />
+    </View>
+  )
+}
+
+DatePicker.defaultProps = defaultProps

package/src/components/DatePicker/styles.ts

@@ -0,0 +1,34 @@
+import {
+  TextInputComposition,
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
+
+export type DatePickerStates = ':selected' | ':disabled' | ''
+
+export type DatePickerParts =
+  | 'wrapper'
+  | `dayWrapper${DatePickerStates}`
+  | `day${DatePickerStates}`
+  | `yearWrapper${DatePickerStates}`
+  | `year${DatePickerStates}`
+
+export type DatePickerHeaderComposition =
+  | 'wrapper'
+  | 'buttonsWrapper'
+  | `prevButton${Capitalize<ActionIconComposition>}`
+  | `nextButton${Capitalize<ActionIconComposition>}`
+  | 'title'
+
+export type DatePickerComposition =
+  | DatePickerParts
+  | `outerInput${Capitalize<TextInputComposition>}`
+  | `header${Capitalize<DatePickerHeaderComposition>}`
+
+const createDatePickerStyle =
+  createDefaultVariantFactory<DatePickerComposition>()
+
+export const DatePickerPresets = includePresets(
+  (style) => createDatePickerStyle(() => ({ wrapper: style })),
+)

package/src/components/DatePicker/types.ts

@@ -0,0 +1,78 @@
+import { ComponentVariants, FormTypes, StylesOf } from '@codeleap/common'
+import {
+  ReactDatePickerCustomHeaderProps,
+  ReactDatePickerProps,
+} from 'react-datepicker'
+import { ActionIconProps, TextInputProps } from '../components'
+import {
+  DatePickerComposition,
+  DatePickerHeaderComposition,
+  DatePickerPresets,
+} from './styles'
+
+export type DatePickerOuterInputProps = TextInputProps & {
+  valueLabel: FormTypes.Label
+  hideInput?: boolean
+}
+
+export type DatePickerHeaderComponent = ReactDatePickerCustomHeaderProps & {
+  styles?: DatePickerHeaderComposition
+  formatHeaderTitle?: (date: Date) => string
+}
+
+export type DatePickerArrowProps = Partial<ActionIconProps> & {
+  direction: 'left' | 'right'
+}
+
+type RootStyles = ComponentVariants<typeof DatePickerPresets>
+
+export type DayComponentProps = {
+  day: string | number
+  value: Date
+  date: Date
+  disabled: boolean
+  selected: boolean
+  variantStyles: any
+}
+
+export type YearComponentProps = {
+  year: string | number
+  value: Date
+  selected: boolean
+  variantStyles: any
+}
+
+type RootDatePickerProps = 'startDate' | 'minDate' | 'maxDate'
+
+export type DatePickerProps = Partial<
+  Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>
+> &
+  RootStyles & {
+    styles?: StylesOf<DatePickerComposition>
+    style?: React.CSSProperties
+    hideInput?: boolean
+    value: Date
+    outerInputComponent?: React.ComponentType<
+      Partial<DatePickerOuterInputProps>
+    >
+    headerComponent?: React.ComponentType<Partial<DatePickerHeaderComponent>>
+    headerProps?: Partial<DatePickerHeaderComponent>
+    dayComponent?: React.ComponentType<Partial<DayComponentProps>>
+    dayProps?: Partial<DayComponentProps>
+    yearComponent?: React.ComponentType<Partial<YearComponentProps>>
+    yearProps?: Partial<YearComponentProps>
+    formatDate?: (date: Date | string) => FormTypes.Label
+    datePickerProps?: Omit<
+      Partial<ReactDatePickerProps>,
+      'customInput' | 'renderCustomHeader' | RootDatePickerProps
+    >
+    onValueChange: (date: Date) => void
+    defaultValue?: Date
+    visible?: boolean
+    toggle?: () => void
+    yearShow?: boolean
+    setYearShow?: () => void
+  } & Omit<
+    TextInputProps,
+    'defaultValue' | 'styles' | 'variants' | 'responsiveVariants'
+  >

package/src/components/components.ts

@@ -31,6 +31,7 @@ export * from './EmptyPlaceholder'
 export * from './Grid'
 export * from './Badge'
 export * from './CropPicker'
+export * from './DatePicker'
 export * from './Dropzone'
 export * from './Progress'
 export * from './Tag'