@codeleap/mobile 3.25.0 → 3.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.25.0",
+  "version": "3.25.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -18,7 +18,6 @@
   },
   "peerDependencies": {
     "@codeleap/common": "*",
-    "@codeleap/styles": "*",
     "@react-native-community/async-storage": "1.12.1",
     "@react-native-firebase/messaging": "14.4.0",
     "@react-navigation/bottom-tabs": "6.5.3",
@@ -29,7 +28,7 @@
     "react": "18.1.0",
     "react-native": "0.73.8",
     "react-native-calendars": "1.1293.0",
-    "react-native-date-picker": "4.2.13",
+    "react-native-date-picker": "^4.2.13",
     "react-native-device-info": "10.3.0",
     "react-native-fast-image": "8.6.3",
     "react-native-gesture-handler": "2.9.0",
@@ -38,13 +37,12 @@
     "react-native-image-viewing": "0.2.2",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
     "typescript": "5.0.4",
-    "react-native-avoid-softinput": "3.1.5",
-    "react-native-mmkv": "2.12.2"
+    "react-native-avoid-softinput": "^3.1.5"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",
     "@miblanchard/react-native-slider": "2.3.1",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.29.3",
     "react-native-masked-text": "1.13.0",
     "react-native-uuid": "2.0.1"
   }

package/src/components/ActionIcon/index.tsx

@@ -1,63 +1,45 @@
+import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
 import React from 'react'
-import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { Badge } from '../Badge'
-import { Icon } from '../Icon'
-import { Touchable } from '../Touchable'
-import { ActionIconProps } from './types'
-import { useStylesFor } from '../../hooks'
-
-export * from './styles'
-export * from './types'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { Badge, BadgeComponentProps } from '../Badge'
+import { Icon, IconProps } from '../Icon'
+import { Touchable, TouchableProps } from '../Touchable'
+import { ActionIconComposition, ActionIconPresets } from './styles'
+
+/** * IconButton */
+export type ActionIconProps= {
+    iconProps?: Partial<IconProps>
+    /** prop */
+    icon?: IconProps['name']
+    /** prop */
+    name?: IconProps['name']
+    styles?: StylesOf<ActionIconComposition> | StylesOf<ActionIconComposition>[]
+} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets> & BadgeComponentProps
 
 export const ActionIcon = (props: ActionIconProps) => {
-  const {
-    name,
-    icon,
-    iconProps,
-    children,
-    badge,
-    badgeProps = {},
-    style,
-    ...touchableProps
-  } = {
-    ...ActionIcon.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(ActionIcon.styleRegistryName, style)
-
-  const compositionStyles = useCompositionStyles(['badge', 'touchable'], styles)
-
-  return (
-    <Touchable {...touchableProps} style={compositionStyles?.touchable}>
-      <Icon
-        name={icon ?? name}
-        {...iconProps}
-        style={[
-          styles.icon,
-          touchableProps?.disabled && styles['icon:disabled'],
-        ]}
-      />
-
-      {children}
-
-      <Badge badge={badge} {...badgeProps} style={compositionStyles?.badge} />
-    </Touchable>
-  )
-}
-
-ActionIcon.styleRegistryName = 'ActionIcon'
-ActionIcon.elements = ['icon', 'touchable', 'badge']
-ActionIcon.rootElement = 'touchableWrapper'
-
-ActionIcon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ActionIcon as (props: StyledComponentProps<ActionIconProps, typeof styles>) => IJSX
+  const { name, icon, iconProps, variants, styles, children, badge = false, badgeProps = {}, ...touchableProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+  const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
+
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+
+  return <Touchable styles={touchableStyles} {...touchableProps}>
+    <Icon name={icon ?? name} style={
+      [
+        variantStyles.icon,
+        touchableProps?.disabled && variantStyles['icon:disabled'],
+      ]} {...iconProps}/>
+    {children}
+
+    <Badge badge={badge} style={badgeStyles} {...badgeProps} />
+  </Touchable>
 }
 
 ActionIcon.defaultProps = {
   hitSlop: 10,
-  badge: false,
-} as Partial<ActionIconProps>
+}
 
-MobileStyleRegistry.registerComponent(ActionIcon)
+export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -1,8 +1,10 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 import { TouchableComposition } from '../Touchable'
 
 export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}` | `badge${Capitalize<BadgeComposition>}`
-
 export type ActionIconStates = ':disabled' | ''
-
 export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
+const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
+
+export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))

package/src/components/ActivityIndicator/index.tsx

@@ -1,48 +1,70 @@
-import React, { CSSProperties } from 'react'
-import { ActivityIndicator as RNActivityIndicator } from 'react-native'
-import { ActivityIndicatorProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../hooks'
-import { ActionIconProps } from '../ActionIcon'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import { ActivityIndicator as Indicator, ActivityIndicatorProps as IndicatorProps, StyleSheet } from 'react-native'
+import {
+
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
+import {
+  ActivityIndicatorComposition,
+  ActivityIndicatorPresets,
+} from './styles'
 
 export * from './styles'
-export * from './types'
-
-export const ActivityIndicator = <T extends React.ComponentType = typeof RNActivityIndicator>(props: ActivityIndicatorProps<T>) => {
-  const {
-    style,
-    component: Component = RNActivityIndicator,
-    ...rest
-  } = {
-    ...ActivityIndicator.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(ActivityIndicator.styleRegistryName, style)
-
-  const wrapperStyle = styles?.wrapper as CSSProperties
-
-  const color = wrapperStyle?.color || '#000'
-  const size = (wrapperStyle?.height || wrapperStyle?.width || 'large') as number
-
-  return (
-    <Component
-      size={size}
-      color={color}
-      {...rest}
-      style={styles?.wrapper}
-    />
-  )
+export type ActivityIndicatorProps =
+  IndicatorProps
+ & {
+  variants?: ComponentVariants<typeof ActivityIndicatorPresets>['variants']
+  styles?: StylesOf<ActivityIndicatorComposition>
+  component?: (props: Omit<ActivityIndicatorProps & {ref?: React.Ref<Indicator>}, 'component'>) => JSX.Element
 }
 
-ActivityIndicator.styleRegistryName = 'ActivityIndicator'
-ActivityIndicator.elements = ['wrapper']
-ActivityIndicator.rootElement = 'wrapper'
-ActivityIndicator.defaultProps = {} as Partial<ActionIconProps>
+type TActivityIndicator = ComponentWithDefaultProps<ActivityIndicatorProps>
 
-ActivityIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ActivityIndicator as (<T extends React.ComponentType = typeof RNActivityIndicator>(props: StyledComponentProps<ActivityIndicatorProps<T>, typeof styles>) => IJSX)
-}
+export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
+  (activityIndicatorProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles: propStyles = {},
+      component = Indicator,
+      ...props
+    } = {
+      ...ActivityIndicator.defaultProps,
+      ...activityIndicatorProps,
+
+    }
+
+    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
+      variants,
+      transform: StyleSheet.flatten,
+      styles: propStyles,
+    })
+
+    const { Theme } = useCodeleapContext()
 
-MobileStyleRegistry.registerComponent(ActivityIndicator)
+    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+    const color = styles?.color || Theme.colors.gray
+    const size = styles?.height || styles?.width || 'large'
+
+    const Component = component
+
+    return (
+      <Component
+        size={size}
+        ref={ref}
+        color={color}
+        style={styles}
+        styles={styles}
+        {...props}
+      />
+    )
+  },
+) as TActivityIndicator
+
+ActivityIndicator.defaultProps = {
+  component: forwardRef(({ size, color, style }, ref) => <Indicator size={size} color={color} style={style} ref={ref}/>),
+}

package/src/components/ActivityIndicator/styles.ts

@@ -1,2 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-export type ActivityIndicatorComposition = 'wrapper'
+export type ActivityIndicatorComposition =
+  | 'wrapper'
+  | 'backCircle'
+  | 'frontCircle'
+  | 'circle'
+
+const createActivityIndicatorStyle = createDefaultVariantFactory<ActivityIndicatorComposition>()
+
+export const ActivityIndicatorPresets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })))

package/src/components/Autocomplete/index.tsx

@@ -1,16 +1,20 @@
+import {
+  useDefaultComponentStyle,
+  TypeGuards,
+  useNestedStylesByKey,
+  FormTypes,
+  onMount,
+  useSearch,
+} from '@codeleap/common'
 import React, { useCallback } from 'react'
-import { TypeGuards, FormTypes, onMount, useSearch } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
 import { List } from '../List'
-import { SearchInput } from '../SearchInput'
+import { SearchInput } from '../TextInput'
+import { AutocompletePresets } from './styles'
 import { AutocompleteProps } from './types'
 import { Button } from '../Button'
 import { View } from '../View'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
-
 export * from './styles'
-export * from './types'
 
 const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
   return options.filter((option) => {
@@ -22,40 +26,51 @@ const defaultFilterFunction = (search: string, options: FormTypes.Options<any>)
   })
 }
 
-const defaultGetLabel = (option) => {
-  if (TypeGuards.isArray(option)) {
-    if (option.length === 0) return null
+const defaultProps: Partial<AutocompleteProps<any, boolean>> = {
+  getLabel(option) {
 
-    return option.map(o => o.label).join(', ')
-  } else {
-    if (!option) return null
-    return option?.label
-  }
+    if (TypeGuards.isArray(option)) {
+
+      if (option.length === 0) return null
+
+      return option.map(o => o.label).join(', ')
+
+    } else {
+      if (!option) return null
+      return option?.label
+    }
+  },
+  searchInputProps: {},
+  selectedIcon: 'check' as any,
+  searchComponent: SearchInput,
 }
 
 export const Autocomplete = <T extends string | number = string, Multi extends boolean = false>(autocomplete: AutocompleteProps<T, Multi>) => {
   const allProps = {
-    ...Autocomplete.defaultProps,
+    ...defaultProps,
     ...autocomplete,
   }
 
   const {
     value,
     onValueChange,
+    styles = {},
     options = [],
+    variants,
     renderItem,
+
     debugName,
-    placeholder,
+    placeholder = 'Select',
     itemProps = {},
-    searchable,
+    searchable = true,
     loadOptions,
-    multiple,
+    multiple = false,
     limit = null,
     defaultOptions = options,
     onLoadOptionsError,
     selectedIcon,
     loadOptionsOnMount = defaultOptions.length === 0,
-    selectable,
+    selectable = false,
     searchComponent,
     filterItems = defaultFilterFunction,
     searchInputProps: searchProps = {},
@@ -93,13 +108,21 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
     }
   })
 
-  const styles = useStylesFor(Autocomplete.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Autocomplete', typeof AutocompletePresets>('u:Autocomplete', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const itemStyles = useNestedStylesByKey('item', variantStyles)
 
-  const compositionStyles = useCompositionStyles(['item', 'list', 'searchInput'], styles)
+  const listStyles = useNestedStylesByKey('list', variantStyles)
 
   const currentOptions = searchable ? filteredOptions : defaultOptions
 
   const select = (selectedValue) => {
+
     let newValue = null
 
     let newOption = null
@@ -140,11 +163,13 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
     } else {
       setLabelOptions([newOption])
     }
+
   }
 
   const Item = renderItem || Button
 
   const renderListItem = useCallback(({ item }) => {
+
     let selected = false
 
     if (multiple && isValueArray) {
@@ -168,7 +193,7 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
       rightIcon={selectedIcon}
       // @ts-ignore
       icon={selectedIcon}
-      style={compositionStyles?.item}
+      styles={itemStyles}
       {...itemProps}
     />
   }, [value, select, multiple, selectable, isValueArray])
@@ -177,7 +202,7 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
 
   const showLoading = TypeGuards.isFunction(loadingProp) ? loadingProp(loading) : (loadingProp || loading)
 
-  return <View style={styles?.wrapper}>
+  return <View style={[variantStyles.wrapper, style]}>
     <Search
       placeholder={placeholder}
       debugName={debugName}
@@ -190,14 +215,13 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
       onSearchChange={onChangeSearch}
       hideErrorMessage
       {...searchProps}
-      style={compositionStyles?.searchInput}
     />
 
-    <List
+    <List<any>
       data={searchable ? filteredOptions : options}
       scrollEnabled={false}
       showsHorizontalScrollIndicator={false}
-      style={compositionStyles?.list}
+      styles={listStyles}
       // @ts-ignore
       keyExtractor={(i) => i.value}
       renderItem={renderListItem}
@@ -209,23 +233,7 @@ export const Autocomplete = <T extends string | number = string, Multi extends b
   </View>
 }
 
-Autocomplete.styleRegistryName = 'Autocomplete'
-Autocomplete.elements = ['wrapper', 'list', 'item', 'searchInput']
-Autocomplete.rootElement = 'wrapper'
-
-Autocomplete.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Autocomplete as (<T extends string | number = string, Multi extends boolean = false>(props: StyledComponentProps<AutocompleteProps<T, Multi>, typeof styles>) => IJSX)
-}
-
-Autocomplete.defaultProps = {
-  getLabel: defaultGetLabel,
-  searchInputProps: {},
-  selectedIcon: 'check' as AppIcon,
-  searchComponent: SearchInput,
-  placeholder: 'Select',
-  searchable: true,
-  multiple: false,
-  selectable: false,
-} as Partial<AutocompleteProps<any, boolean>>
+export * from './styles'
+export * from './types'
 
-MobileStyleRegistry.registerComponent(Autocomplete)
+Autocomplete.defaultProps = defaultProps

package/src/components/Autocomplete/styles.ts

@@ -1,6 +1,5 @@
-import { ButtonComposition } from '../Button'
+import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
 import { ListComposition } from '../List'
-import { TextInputComposition } from '../TextInput'
 
 type ItemStates = '' | ':selected'
 
@@ -13,3 +12,7 @@ export type AutocompleteComposition =
   `list${Capitalize<ListComposition>}` |
   `item${Capitalize<ItemComposition>}` |
   `searchInput${Capitalize<TextInputComposition>}`
+
+const createSelectStyle = createDefaultVariantFactory<AutocompleteComposition>()
+
+export const AutocompletePresets = includePresets((style) => createSelectStyle(() => ({ wrapper: style })))

package/src/components/Autocomplete/types.ts

@@ -1,17 +1,22 @@
-import { FormTypes, PropsOf } from '@codeleap/common'
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  PropsOf,
+} from '@codeleap/common'
+import { AutocompletePresets } from '.'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
 import { Text } from '../Text'
-import { SearchInputProps } from '../SearchInput'
+import { SearchInputProps, TextInputProps } from '../TextInput'
 import { Touchable } from '../Touchable'
-import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { AppIcon, StyledProp } from '@codeleap/styles'
 import { AutocompleteComposition } from './styles'
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
 
 export type AutocompleteRenderFNProps<T> = {
-  style?: StylesOf<AutocompleteComposition>
+  styles: StylesOf<AutocompleteComposition>
   onPress: () => void
   isSelected?: boolean
   item: FormTypes.Options<T>[number]
@@ -43,20 +48,21 @@ export type ReplaceAutocompleteProps<Props, T, Multi extends boolean = false> =
   keyof ValueBoundAutocompleteProps<T, Multi>
 > & ValueBoundAutocompleteProps<T, Multi>
 
-export type AutocompleteProps<T = any, Multi extends boolean = false> =
-  Omit<FlatListProps<T>, 'renderItem' | 'style'> &
-  ValueBoundAutocompleteProps<T, Multi> &
-  {
+export type AutocompleteProps<T = any, Multi extends boolean = false> = {
     placeholder?: string
     label?: FormTypes.Label
+    styles?: StylesOf<AutocompleteComposition>
+    style?: TextInputProps['style']
     closeOnSelect?: boolean
-    style?: StyledProp<AutocompleteComposition>
+
     keyboardAware?: GetKeyboardAwarePropsOptions
     multiple?: Multi
-    itemProps?: Partial<Pick<AutocompleteRenderFNProps<any>, 'iconProps' | 'textProps' | 'touchableProps'>>
+    itemProps?: Partial<
+      Pick<AutocompleteRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
+    >>
     searchable?: boolean
     limit?: number
-    selectedIcon?: AppIcon
+    selectedIcon?: IconPlaceholder
     loadOptionsOnMount?: boolean
     loadOptionsOnOpen?: boolean
     selectable?: boolean
@@ -64,6 +70,10 @@ export type AutocompleteProps<T = any, Multi extends boolean = false> =
     debugName: string
     searchComponent?: React.ComponentType<SearchInputProps>
     listPlaceholder?: Partial<EmptyPlaceholderProps>
-    listProps?: Partial<Omit<FlatListProps<T>, 'renderItem' | 'style'>>
+    listProps?: Partial<Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>>
     loading: boolean | ((isLoading: boolean) => boolean)
   }
+    & Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>
+    & ComponentVariants<typeof AutocompletePresets>
+    & ValueBoundAutocompleteProps<T, Multi>
+