@codeleap/web 3.25.0 → 3.25.2

package/src/components/DatePicker/index.tsx

@@ -1,27 +1,45 @@
 import {
   TypeGuards,
+  getNestedStylesByKey,
   useCallback,
-  useConditionalState,
+  useDefaultComponentStyle,
+  useState,
 } from '@codeleap/common'
 import { Text, View } from '../components'
+import { DatePickerPresets } from './styles'
 import { DatePickerProps, DayComponentProps } from './types'
-import ReactDatePicker from 'react-datepicker'
-import { Header, OuterInput } from './components'
+import _DatePicker from 'react-datepicker'
+import { Header, OuterInput } from './defaultComponents'
 import { format, isBefore, isAfter } from 'date-fns'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
-export * from './components'
+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,
@@ -38,99 +56,120 @@ export function DatePicker(props: DatePickerProps) {
     toggle: _toggle,
     yearShow: _yearShow,
     setYearShow: _setYearShow,
-    disabled,
+    disabled = false,
     ...otherProps
-  } = {
-    ...DatePicker.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(DatePicker.styleRegistryName, style)
+  } = 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 [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false })
-  const [yearShow, setYearShow] = useConditionalState(_yearShow, _setYearShow, { initialValue: false })
+      const { day, date: _date } = param
 
-  const DayContentComponent = useCallback((_param: DayComponentProps) => {
-    const param = {
-      ..._param,
-      ...dayProps,
-    }
+      const date = format(new Date(_date), 'dd MMM yyyy')
+      const dateValue = value ? format(new Date(value), 'dd MMM yyyy') : ''
 
-    const date = format(new Date(param?.date), 'dd MMM yyyy')
-    const dateValue = value ? format(new Date(value), 'dd MMM yyyy') : ''
+      const isSelected = date === dateValue
 
-    const isSelected = date === dateValue
+      const isDisabled = [
+        isBefore(_date, minDate),
+        isAfter(_date, maxDate),
+      ].some(Boolean)
 
-    const isDisabled = [
-      isBefore(param?.date, minDate),
-      isAfter(param?.date, maxDate),
-    ].some(Boolean)
+      const getStyles = (key) => {
+        return {
+          ...variantStyles[key],
+          ...(isSelected && variantStyles[`${key}:selected`]),
+          ...(!isSelected && isDisabled && variantStyles[`${key}:disabled`]),
+        }
+      }
 
-    const getStyles = (key) => {
-      return {
-        ...styles[key],
-        ...(isSelected && styles[`${key}:selected`]),
-        ...(!isSelected && isDisabled && styles[`${key}:disabled`]),
+      if (TypeGuards.isFunction(DayComponent)) {
+        return (
+          <DayComponent
+            {...param}
+            value={value}
+            disabled={isDisabled}
+            selected={isSelected}
+            variantStyles={variantStyles}
+          />
+        )
       }
-    }
 
-    if (TypeGuards.isFunction(DayComponent)) {
       return (
-        <DayComponent
-          {...param}
-          value={value}
-          disabled={isDisabled}
-          selected={isSelected}
-          styles={styles}
-        />
+        <View css={getStyles('dayWrapper')}>
+          <Text style={getStyles('day')} disabled={isDisabled} text={String(day)} />
+        </View>
       )
-    }
-
-    return (
-      <View style={getStyles('dayWrapper')}>
-        <Text style={getStyles('day')} text={String(param?.day)} />
-      </View>
-    )
-  }, [value])
-
-  const YearContentComponent = useCallback((_param) => {
-    const param = {
-      ..._param,
-      ...yearProps,
-    }
-
-    const isSelected = String(value)?.includes(param?.year)
-
-    const getStyles = (key) => {
-      return {
-        ...styles[key],
-        ...(isSelected && styles[`${key}:selected`]),
+    },
+    [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}
+          />
+        )
       }
-    }
 
-    if (TypeGuards.isFunction(YearComponent)) {
       return (
-        <YearComponent
-          {...param}
-          value={value}
-          selected={isSelected}
-          styles={styles}
-        />
+        <View css={getStyles('yearWrapper')}>
+          <Text style={getStyles('year')} text={year} />
+        </View>
       )
-    }
-
-    return (
-      <View style={getStyles('yearWrapper')}>
-        <Text style={getStyles('year')} text={param?.year} />
-      </View>
-    )
-  }, [value])
+    },
+    [value],
+  )
 
-  const compositionStyles = useCompositionStyles(['outerInput', 'header'], styles)
+  const inputStyles = getNestedStylesByKey('outerInput', variantStyles)
+  const headerStyles = getNestedStylesByKey('header', variantStyles)
 
   return (
-    <View style={styles.wrapper}>
-      <ReactDatePicker
+    <View css={variantStyles.wrapper}>
+      <_DatePicker
         onChange={onValueChange}
         open={visible}
         selected={value}
@@ -147,7 +186,7 @@ export function DatePicker(props: DatePickerProps) {
         )}
         customInput={
           <OuterInputComponent
-            style={compositionStyles.outerInput}
+            styles={inputStyles}
             focused={visible}
             hideInput={hideInput}
             {...otherProps}
@@ -155,7 +194,7 @@ export function DatePicker(props: DatePickerProps) {
         }
         renderCustomHeader={(headerProps) => (
           <HeaderComponent
-            styles={compositionStyles.header}
+            styles={headerStyles}
             setYearShow={setYearShow}
             prevYearButtonDisabled={yearShow}
             nextYearButtonDisabled={yearShow}
@@ -190,29 +229,4 @@ export function DatePicker(props: DatePickerProps) {
   )
 }
 
-DatePicker.styleRegistryName = 'DatePicker'
-
-DatePicker.elements = [
-  'wrapper',
-  'day',
-  'year',
-  'outerInput',
-  'header',
-]
-
-DatePicker.rootElement = 'wrapper'
-
-DatePicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return DatePicker as (props: StyledComponentProps<DatePickerProps, typeof styles>) => IJSX
-}
-
-DatePicker.defaultProps = {
-  minDate: new Date(1910, 0, 1),
-  maxDate: new Date(),
-  startDate: new Date(1923, 0, 1),
-  outerInputComponent: OuterInput,
-  headerComponent: Header,
-  disabled: false,
-} as Partial<DatePickerProps>
-
-WebStyleRegistry.registerComponent(DatePicker)
+DatePicker.defaultProps = defaultProps

package/src/components/DatePicker/styles.ts

@@ -1,4 +1,8 @@
-import { TextInputComposition } from '@codeleap/common'
+import {
+  TextInputComposition,
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type DatePickerStates = ':selected' | ':disabled' | ''
@@ -21,3 +25,10 @@ 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

@@ -1,16 +1,22 @@
-import { FormTypes, StylesOf } from '@codeleap/common'
-import { ReactDatePickerCustomHeaderProps, ReactDatePickerProps } from 'react-datepicker'
+import { ComponentVariants, FormTypes, StylesOf } from '@codeleap/common'
+import {
+  ReactDatePickerCustomHeaderProps,
+  ReactDatePickerProps,
+} from 'react-datepicker'
 import { ActionIconProps, TextInputProps } from '../components'
-import { DatePickerComposition, DatePickerHeaderComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
+import {
+  DatePickerComposition,
+  DatePickerHeaderComposition,
+  DatePickerPresets,
+} from './styles'
 
 export type DatePickerOuterInputProps = TextInputProps & {
   valueLabel: FormTypes.Label
   hideInput?: boolean
 }
 
-export type DatePickerHeaderComponent = Omit<ReactDatePickerCustomHeaderProps, 'styles'> & {
-  styles?: StylesOf<DatePickerHeaderComposition>
+export type DatePickerHeaderComponent = ReactDatePickerCustomHeaderProps & {
+  styles?: DatePickerHeaderComposition
   formatHeaderTitle?: (date: Date) => string
 }
 
@@ -18,32 +24,37 @@ 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
-  styles?: DatePickerProps['style']
+  variantStyles?: any
 }
 
 export type YearComponentProps = {
   year: string | number
   value: Date
   selected: boolean
-  styles: DatePickerProps['style']
+  variantStyles: any
 }
 
 type RootDatePickerProps = 'startDate' | 'minDate' | 'maxDate'
 
-export type DatePickerProps =
-  Omit<Partial<Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>>, 'style'> &
-  Omit<TextInputProps, 'defaultValue' | 'style'> &
-  {
-    style?: StyledProp<DatePickerComposition>
+export type DatePickerProps = Partial<
+  Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>
+> &
+  RootStyles & {
+    styles?: StylesOf<DatePickerComposition>
+    style?: React.CSSProperties
     hideInput?: boolean
     value: Date
-    outerInputComponent?: React.ComponentType<Partial<DatePickerOuterInputProps>>
+    outerInputComponent?: React.ComponentType<
+      Partial<DatePickerOuterInputProps>
+    >
     headerComponent?: React.ComponentType<Partial<DatePickerHeaderComponent>>
     headerProps?: Partial<DatePickerHeaderComponent>
     dayComponent?: React.ComponentType<Partial<DayComponentProps>>
@@ -51,11 +62,17 @@ export type DatePickerProps =
     yearComponent?: React.ComponentType<Partial<YearComponentProps>>
     yearProps?: Partial<YearComponentProps>
     formatDate?: (date: Date | string) => FormTypes.Label
-    datePickerProps?: Omit<Partial<ReactDatePickerProps>, 'customInput' | 'renderCustomHeader' | RootDatePickerProps>
+    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'
+  >