@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/DatePickerModal/index.tsx

@@ -1,19 +1,17 @@
 import React, { useRef } from 'react'
-import { TypeGuards, useBooleanToggle, useI18N } from '@codeleap/common'
+import { useState, useCodeleapContext, useDefaultComponentStyle, TypeGuards, useBooleanToggle, useNestedStylesByKey, useI18N } from '@codeleap/common'
+import { DatePickerModalPresets } from './styles'
 import DatePicker from 'react-native-date-picker'
-import Modal from '../Modal'
 import { TextInput } from '../TextInput'
 import { ModalManager } from '../../utils'
 import { Button } from '../Button'
+import { StyleSheet } from 'react-native'
 import { DatePickerModalProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
 export * from './types'
 
-const OuterInputComponent: DatePickerModalProps['outerInputComponent'] = (props) => {
+const OuterInputComponent:DatePickerModalProps['outerInputComponent'] = (props) => {
   const {
     debugName,
     toggle,
@@ -31,42 +29,43 @@ const OuterInputComponent: DatePickerModalProps['outerInputComponent'] = (props)
   />
 }
 
-const defaultFormatDate: DatePickerModalProps['formatDate'] = (date) => {
+const defaultFormatDate:DatePickerModalProps['formatDate'] = (date) => {
   if (!date) return null
   return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
 }
 
-const DefaultFooter: DatePickerModalProps['footerComponent'] = (props) => {
+const DefaultFooter:DatePickerModalProps['footerComponent'] = (props) => {
   const {
     debugName,
     commitDate,
     showDoneButton,
+    styles,
     confirm,
     confirmButtonProps = {},
     cancelButtonProps = {},
     toggle,
-    cancelStyles,
-    confirmStyles,
-    doneStyles,
   } = props
 
   if (commitDate == 'onConfirm') {
     return <>
       <Button
         debugName={`${debugName} cancel button`}
-        style={cancelStyles}
+        styles={styles.cancel}
+        variants={['flex']}
         text={`Cancel`}
         onPress={toggle}
         {...cancelButtonProps}
       />
       <Button
         debugName={`${debugName} confirm button`}
-        style={confirmStyles}
+        variants={['flex']}
+        styles={styles.confirm}
         text={`Confirm`}
         onPress={confirm}
         {...confirmButtonProps}
       />
     </>
+
   }
 
   if (!showDoneButton) return null
@@ -75,13 +74,28 @@ const DefaultFooter: DatePickerModalProps['footerComponent'] = (props) => {
     debugName={`${debugName} done button`}
     onPress={confirm}
     text={'Done'}
-    style={doneStyles}
+    styles={styles.done}
+
   />
 }
 
+const defaultProps:Partial<DatePickerModalProps> = {
+  outerInputComponent: OuterInputComponent,
+  formatDate: defaultFormatDate,
+  footerComponent: DefaultFooter,
+  mode: 'date',
+  commitDate: 'onConfirm',
+  showDoneButton: true,
+  isCustomModal: true,
+  toggleOnConfirm: true,
+}
+
 export const DatePickerModal = (props: DatePickerModalProps) => {
+
+  const { currentTheme } = useCodeleapContext()
+
   const allProps = {
-    ...DatePickerModal.defaultProps,
+    ...defaultProps,
     ...props,
   }
 
@@ -96,8 +110,10 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     debugName,
     cancelButtonProps = {},
     confirmButtonProps = {},
-    outerInputComponent: OuterInput,
+    outerInputComponent,
     footer,
+    variants = [],
+    styles = {},
     datePickerProps,
     mode,
     label,
@@ -108,25 +124,37 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     minimumDate,
     maximumDate,
     initialDate,
-    footerComponent: Footer,
+    footerComponent,
     toggleOnConfirm,
     onConfirm: _onConfirm,
     ...modalProps
   } = allProps
 
-  const styles = useStylesFor(DatePickerModal.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:DatePickerModal', typeof DatePickerModalPresets>('u:DatePickerModal', {
+    variants,
+    styles,
+    rootElement: 'inputWrapper',
+    transform: StyleSheet.flatten,
+  })
 
   const [visible, toggle] = !TypeGuards.isNil(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
   const [value, setValue] = [_value, onValueChange]
+  //const [value, setValue] = _value && onValueChange ? [_value, onValueChange] : useState(_value ?? new Date())
 
   const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment
 
-  const compositionStyles = useCompositionStyles(['input', 'doneButton', 'cancelButton', 'confirmButton'], styles)
+  const OuterInput = outerInputComponent
+  const Footer = footerComponent
+
+  const inputStyle = useNestedStylesByKey('input', variantStyles)
+  const doneStyle = useNestedStylesByKey('doneButton', variantStyles)
+  const cancelStyle = useNestedStylesByKey('cancelButton', variantStyles)
+  const confirmStyle = useNestedStylesByKey('confirmButton', variantStyles)
 
   const formattedDate = value ? formatDate(value) : ''
   const { locale } = useI18N()
 
-  const tempDate = useRef<Date | null>(null)
+  const tempDate = useRef<Date|null>(null)
 
   const onConfirm = () => {
     if (commitDate == 'onConfirm' && !!tempDate.current) {
@@ -145,9 +173,11 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   const modalFooter = footer || <Footer
     {...allProps}
     confirm={onConfirm}
-    doneStyles={compositionStyles?.doneButton}
-    cancelStyles={compositionStyles?.cancelButton}
-    confirmStyles={compositionStyles?.confirmButton}
+    styles={{
+      done: doneStyle,
+      cancel: cancelStyle,
+      confirm: confirmStyle,
+    }}
     confirmButtonProps={confirmButtonProps}
     cancelButtonProps={cancelButtonProps}
     showDoneButton={showDoneButton}
@@ -165,7 +195,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     debugName: `${debugName} Modal`,
     visible: visible,
     toggle: toggle,
-    style: styles,
+    styles: variantStyles,
     footer: modalFooter,
     ...modalProps,
     id: null,
@@ -173,18 +203,20 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
 
   return (
     <>
-      {!hideInput ? <OuterInput
+      {!hideInput && <OuterInput
         {...allProps}
-        style={compositionStyles?.input}
+        styles={inputStyle}
         value={value}
         debugName={debugName}
         visible={visible}
         toggle={toggle}
         onValueChange={setValue}
         valueLabel={formattedDate}
-      /> : null}
+        style={style}
 
-      <Wrapper {...wrapperProps}>
+      />}
+      {/* @ts-expect-error */}
+      <Wrapper {...wrapperProps} >
         <DatePicker
           modal={!isCustomModal}
           open={visible}
@@ -199,38 +231,21 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
             tempDate.current = date
           }}
           locale={locale}
-          // @ts-expect-error
-          textColor={styles?.picker?.color}
-          theme='light'
+          theme={currentTheme === 'dark' ? 'dark' : 'light' }
+          textColor={variantStyles?.picker?.color}
           androidVariant='iosClone'
           onConfirm={setValue}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           {...datePickerProps}
           mode={mode}
+
         />
       </Wrapper>
+
     </>
   )
-}
 
-DatePickerModal.styleRegistryName = 'DatePickerModal'
-DatePickerModal.elements = [...Modal.elements, 'input', 'picker', 'doneButton', 'confirmButton', 'cancelButton']
-DatePickerModal.rootElement = 'inputWrapper'
-
-DatePickerModal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return DatePickerModal as (props: StyledComponentProps<DatePickerModalProps, typeof styles>) => IJSX
 }
 
-DatePickerModal.defaultProps = {
-  outerInputComponent: OuterInputComponent,
-  formatDate: defaultFormatDate,
-  footerComponent: DefaultFooter,
-  mode: 'date',
-  commitDate: 'onConfirm',
-  showDoneButton: true,
-  isCustomModal: true,
-  toggleOnConfirm: true,
-} as Partial<DatePickerModalProps>
-
-MobileStyleRegistry.registerComponent(DatePickerModal)
+DatePickerModal.defaultProps = defaultProps

package/src/components/DatePickerModal/styles.ts

@@ -1,14 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ButtonComposition } from '../Button'
 import { ModalComposition } from '../Modal'
 import { TextInputComposition } from '../TextInput'
 
-export type DatePickerModalButtonCompositions =
-  `doneButton${Capitalize<ButtonComposition>}` |
-  `confirmButton${Capitalize<ButtonComposition>}` |
-  `cancelButton${Capitalize<ButtonComposition>}`
-
 export type DatePickerModalComposition =
-  ModalComposition |
-  `input${Capitalize<TextInputComposition>}` |
-  `picker` |
-  DatePickerModalButtonCompositions
+    ModalComposition | 
+    `input${Capitalize<TextInputComposition>}` | 
+    `picker` | 
+    `doneButton${Capitalize<ButtonComposition>}` | 
+    `confirmButton${Capitalize<ButtonComposition>}` | 
+    `cancelButton${Capitalize<ButtonComposition>}`
+
+const createDatePickerModalStyle = createDefaultVariantFactory<DatePickerModalComposition>()
+export const DatePickerModalPresets = includePresets((styles) => createDatePickerModalStyle(() => ({ inputWrapper: styles })))

package/src/components/DatePickerModal/types.ts

@@ -1,46 +1,64 @@
 import React from 'react'
-import { FormTypes, StylesOf } from '@codeleap/common'
-import { DatePickerModalButtonCompositions, DatePickerModalComposition } from './styles'
+import { ComponentVariants, StylesOf, FormTypes, AnyFunction } from '@codeleap/common'
+import { DatePickerModalComposition, DatePickerModalPresets } from './styles'
 import { DatePickerProps } from 'react-native-date-picker'
-import { ButtonProps } from '../Button'
+import { TextInputComposition } from '../TextInput'
+import { ButtonComposition, ButtonProps } from '../Button'
 import { ModalProps } from '../Modal'
-import { StyledProp } from '@codeleap/styles'
 
-export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent'> & {
-  valueLabel: FormTypes.Label
+export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
+    valueLabel: FormTypes.Label
+    styles?: StylesOf<TextInputComposition>
 }
 
-type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'style'> & {
+type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
   valueLabel: FormTypes.Label
+  styles?: Record<
+    'confirm' | 'cancel' | 'done',
+    StylesOf<ButtonComposition>
+  >
   confirm: () => void
-  cancelStyles: StylesOf<DatePickerModalButtonCompositions>
-  confirmStyles: StylesOf<DatePickerModalButtonCompositions>
-  doneStyles: StylesOf<DatePickerModalButtonCompositions>
 }
 
-export type DatePickerModalProps =
-  Omit<ModalProps, 'style' | 'ref'> &
-  {
-    hideInput?: boolean
-    debugName: string
-    value: Date
-    label?: FormTypes.Label
-    placeholder?: FormTypes.Label
-    onValueChange: (date: Date) => void
-    isCustomModal?: boolean
-    mode?: DatePickerProps['mode']
-    cancelButtonProps?: Partial<ButtonProps>
-    confirmButtonProps?: Partial<ButtonProps>
-    datePickerProps?: Partial<DatePickerProps>
-    outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
-    formatDate?: (date: Date) => FormTypes.Label
-    commitDate?: 'onConfirm' | 'onChange'
-    showDoneButton?: boolean
-    footerComponent?: React.ComponentType<DatePickerModalFooterProps>
-    initialDate?: Date
-    minimumDate?: DatePickerProps['minimumDate']
-    maximumDate?: DatePickerProps['maximumDate']
-    toggleOnConfirm?: boolean
-    onConfirm?: (value: Date) => void
-    style?: StyledProp<DatePickerModalComposition>
-  }
+export type DatePickerModalProps = Omit<ModalProps, 'styles' | 'variants' | 'ref'> & {
+  hideInput?: boolean
+  debugName: string
+
+  value: Date
+
+  label?: FormTypes.Label
+
+  placeholder?: FormTypes.Label
+
+  onValueChange: (date: Date) => void
+
+  styles?: StylesOf<DatePickerModalComposition>
+
+  isCustomModal?: boolean
+  mode?: DatePickerProps['mode']
+
+  cancelButtonProps?: Partial<ButtonProps>
+  confirmButtonProps?: Partial<ButtonProps>
+
+  datePickerProps?: Partial<DatePickerProps>
+
+  outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
+
+  formatDate?: (date: Date) => FormTypes.Label
+
+  commitDate?: 'onConfirm' | 'onChange'
+
+  showDoneButton?: boolean
+
+  footerComponent?: React.ComponentType<DatePickerModalFooterProps>
+
+  minimumDate?: DatePickerProps['minimumDate']
+
+  maximumDate?: DatePickerProps['maximumDate']
+
+  initialDate?: Date
+
+  toggleOnConfirm?: boolean
+
+  onConfirm?: (value: Date) => void
+} & ComponentVariants<typeof DatePickerModalPresets>

package/src/components/Drawer/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+import { ComponentVariants, useDefaultComponentStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import Modal, { ModalProps } from '../Modal'
+import { DrawerPresets } from './styles'
+export * from './styles'
+export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerPresets>
+
+export const Drawer:React.FC<DrawerProps> = (props) => {
+  const { variants, styles, scrollProps, ...modalProps } = props
+
+  const variantStyles = useDefaultComponentStyle('u:Drawer', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  return <Modal
+    styles={variantStyles}
+    scroll={false}
+
+    {...modalProps}
+    scrollProps={{
+      ...scrollProps,
+    }}
+  />
+}

package/src/components/Drawer/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ModalComposition } from '../Modal'
+
+export type DrawerComposition = ModalComposition
+
+const createModalStyle = createDefaultVariantFactory<DrawerComposition>()
+
+export const DrawerPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/EmptyPlaceholder/index.tsx

@@ -1,53 +1,88 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Icon } from '../Icon'
 import { View } from '../View'
 import { Text } from '../Text'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { Image } from '../Image'
-import { EmptyPlaceholderProps } from './types'
-import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
+import {
+  ComponentVariants,
+
+  getNestedStylesByKey,
+  IconPlaceholder,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+
+import {
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderPresets,
+} from './styles'
+
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { Image, ImageProps } from '../Image'
 
 export * from './styles'
-export * from './types'
 
-export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
+export type EmptyPlaceholderProps = {
+  itemName?: string
+
+  title?: React.ReactElement | string
+  description?: React.ReactElement | string
+  image?: ImageProps['source']
+  icon?: IconPlaceholder
+
+  loading?: boolean
+
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  variants?: ComponentVariants<typeof EmptyPlaceholderPresets>['variants']
+
+  renderEmpty?: (props: {
+    emptyText:string | React.ReactElement
+    emptyIconName?: IconPlaceholder
+    styles: StylesOf<EmptyPlaceholderComposition> & {activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>}
+  }) => React.ReactElement
+}
+
+export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
   const {
     itemName,
     title,
     loading,
     description,
     image,
+    styles = {},
+    variants = [],
     icon = null,
     renderEmpty,
-    style,
-  } = {
-    ...EmptyPlaceholder.defaultProps,
-    ...props,
-  }
-
+  } = props
   const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
 
-  const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)
+  const componentStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
 
-  const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
+  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
+    , [componentStyles])
 
   if (loading) {
     return (
-      <View style={[styles.wrapper, styles['wrapper:loading']]} >
-        <ActivityIndicator style={activityIndicatorStyles} />
+      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
+        <ActivityIndicator styles={activityIndicatorStyles}/>
       </View>
     )
   }
 
   if (renderEmpty) {
     return (
-      <View style={styles.wrapper}>
+      <View style={componentStyles.wrapper}>
         {renderEmpty({
           emptyText,
-          emptyIconName: icon as AppIcon,
-          style: styles,
+          emptyIconName: icon as IconPlaceholder,
+          styles: {
+            ...componentStyles,
+            activityIndicatorStyles,
+          },
         })}
       </View>
     )
@@ -56,33 +91,21 @@ export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
   let _image = null
 
   if (icon) {
-    _image = <Icon name={icon as AppIcon} style={styles.icon} />
+    _image = <Icon name={icon} style={componentStyles.icon}/>
   } else if (image) {
-    _image = <Image source={image} style={styles.image} />
+    _image = <Image source={image} style={[componentStyles.image]}/>
   }
 
   return (
-    <View style={styles.wrapper}>
+    <View style={componentStyles.wrapper}>
       {React.isValidElement(_image) ? (
-        <View style={styles.imageWrapper}>
+        <View style={componentStyles.imageWrapper}>
           {_image}
         </View>
       ) : null}
 
-      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={styles.title} />}
-      {React.isValidElement(description) ? description : <Text text={description} style={styles.description} />}
+      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={componentStyles.title}/> }
+      {React.isValidElement(description) ? description : <Text text={description} style={componentStyles.description}/> }
     </View>
   )
 }
-
-EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
-EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'icon']
-EmptyPlaceholder.rootElement = 'wrapper'
-
-EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
-}
-
-EmptyPlaceholder.defaultProps = {} as Partial<EmptyPlaceholderProps>
-
-MobileStyleRegistry.registerComponent(EmptyPlaceholder)

package/src/components/EmptyPlaceholder/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type EmptyPlaceholderComposition =
@@ -9,3 +10,7 @@ export type EmptyPlaceholderComposition =
   | 'image'
   | 'imageWrapper'
   | 'icon'
+
+const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
+
+export const EmptyPlaceholderPresets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })))