@codeleap/web 3.24.3 → 3.25.0

package/src/components/DatePicker/index.tsx

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

package/src/components/DatePicker/styles.ts

@@ -1,8 +1,4 @@
-import {
-  TextInputComposition,
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
+import { TextInputComposition } from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type DatePickerStates = ':selected' | ':disabled' | ''
@@ -25,10 +21,3 @@ 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,22 +1,16 @@
-import { ComponentVariants, FormTypes, StylesOf } from '@codeleap/common'
-import {
-  ReactDatePickerCustomHeaderProps,
-  ReactDatePickerProps,
-} from 'react-datepicker'
+import { FormTypes, StylesOf } from '@codeleap/common'
+import { ReactDatePickerCustomHeaderProps, ReactDatePickerProps } from 'react-datepicker'
 import { ActionIconProps, TextInputProps } from '../components'
-import {
-  DatePickerComposition,
-  DatePickerHeaderComposition,
-  DatePickerPresets,
-} from './styles'
+import { DatePickerComposition, DatePickerHeaderComposition } from './styles'
+import { StyledProp } from '@codeleap/styles'
 
 export type DatePickerOuterInputProps = TextInputProps & {
   valueLabel: FormTypes.Label
   hideInput?: boolean
 }
 
-export type DatePickerHeaderComponent = ReactDatePickerCustomHeaderProps & {
-  styles?: DatePickerHeaderComposition
+export type DatePickerHeaderComponent = Omit<ReactDatePickerCustomHeaderProps, 'styles'> & {
+  styles?: StylesOf<DatePickerHeaderComposition>
   formatHeaderTitle?: (date: Date) => string
 }
 
@@ -24,37 +18,32 @@ 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
+  styles?: DatePickerProps['style']
 }
 
 export type YearComponentProps = {
   year: string | number
   value: Date
   selected: boolean
-  variantStyles: any
+  styles: DatePickerProps['style']
 }
 
 type RootDatePickerProps = 'startDate' | 'minDate' | 'maxDate'
 
-export type DatePickerProps = Partial<
-  Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>
-> &
-  RootStyles & {
-    styles?: StylesOf<DatePickerComposition>
-    style?: React.CSSProperties
+export type DatePickerProps =
+  Omit<Partial<Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>>, 'style'> &
+  Omit<TextInputProps, 'defaultValue' | 'style'> &
+  {
+    style?: StyledProp<DatePickerComposition>
     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>>
@@ -62,17 +51,11 @@ export type DatePickerProps = Partial<
     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'
-  >
+  }