@codeleap/mobile 3.24.2 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.24.2",
+  "version": "3.25.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -18,6 +18,7 @@
   },
   "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",
@@ -28,7 +29,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",
@@ -37,12 +38,13 @@
     "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-avoid-softinput": "3.1.5",
+    "react-native-mmkv": "2.12.2"
   },
   "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/Registry.ts

@@ -0,0 +1,52 @@
+import { AnyStyledComponent, CodeleapStyleRegistry, ICSS, StylePersistor } from '@codeleap/styles'
+import { StyleSheet } from 'react-native'
+import { MMKV } from 'react-native-mmkv'
+
+const mmkvStorage = new MMKV()
+
+const persistor = new StylePersistor({
+  set(key, value) {
+    return mmkvStorage?.set(key, value)
+  },
+  get(key) {
+    return mmkvStorage?.getString(key)
+  },
+  del(key) {
+    return mmkvStorage?.delete(key)
+  },
+})
+
+let instance: MobileStyleRegistry
+
+const components: CodeleapStyleRegistry['components'][string][] = []
+
+export class MobileStyleRegistry extends CodeleapStyleRegistry {
+  constructor() {
+    super(persistor)
+
+    components.forEach((component) => {
+      this.registerComponent(component)
+    })
+
+    if (!instance) {
+      instance = this
+    }
+
+    return instance
+  }
+
+  createStyle(css: ICSS): ICSS {
+    return StyleSheet.create({ s: css }).s
+  }
+
+  static get current() {
+    return instance
+  }
+
+  static registerComponent(component: AnyStyledComponent) {
+    components.push(component)
+    if (instance) {
+      instance.registerComponent(component)
+    }
+  }
+}

package/src/components/ActionIcon/index.tsx

@@ -1,45 +1,63 @@
-import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
 import React from 'react'
-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
+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'
 
 export const ActionIcon = (props: ActionIconProps) => {
-  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>
+  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
 }
 
 ActionIcon.defaultProps = {
   hitSlop: 10,
-}
+  badge: false,
+} as Partial<ActionIconProps>
 
-export * from './styles'
+MobileStyleRegistry.registerComponent(ActionIcon)

package/src/components/ActionIcon/styles.ts

@@ -1,10 +1,8 @@
-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 })))
+export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`

package/src/components/ActionIcon/types.ts

@@ -0,0 +1,15 @@
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { BadgeComponentProps } from '../Badge'
+import { IconProps } from '../Icon'
+import { TouchableProps } from '../Touchable'
+import { ActionIconComposition } from './styles'
+
+export type ActionIconProps =
+  Omit<TouchableProps, 'style'> &
+  BadgeComponentProps & 
+  {
+    iconProps?: Partial<IconProps>
+    icon?: AppIcon
+    name?: AppIcon
+    style?: StyledProp<ActionIconComposition>
+  }

package/src/components/ActivityIndicator/index.tsx

@@ -1,70 +1,48 @@
-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'
+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'
 
 export * from './styles'
-export type ActivityIndicatorProps =
-  IndicatorProps
- & {
-  variants?: ComponentVariants<typeof ActivityIndicatorPresets>['variants']
-  styles?: StylesOf<ActivityIndicatorComposition>
-  component?: (props: Omit<ActivityIndicatorProps & {ref?: React.Ref<Indicator>}, 'component'>) => JSX.Element
+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}
+    />
+  )
 }
 
-type TActivityIndicator = ComponentWithDefaultProps<ActivityIndicatorProps>
-
-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()
+ActivityIndicator.styleRegistryName = 'ActivityIndicator'
+ActivityIndicator.elements = ['wrapper']
+ActivityIndicator.rootElement = 'wrapper'
+ActivityIndicator.defaultProps = {} as Partial<ActionIconProps>
 
-    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}/>),
+ActivityIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return ActivityIndicator as (<T extends React.ComponentType = typeof RNActivityIndicator>(props: StyledComponentProps<ActivityIndicatorProps<T>, typeof styles>) => IJSX)
 }
+
+MobileStyleRegistry.registerComponent(ActivityIndicator)

package/src/components/ActivityIndicator/styles.ts

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

package/src/components/ActivityIndicator/types.ts

@@ -0,0 +1,9 @@
+import { PropsOf } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { ActivityIndicator as RNActivityIndicator } from 'react-native'
+import { ActivityIndicatorComposition } from './styles'
+
+export type ActivityIndicatorProps<T extends React.ComponentType = typeof RNActivityIndicator> = {
+  style?: StyledProp<ActivityIndicatorComposition>
+  component?: T
+} & PropsOf<T>

package/src/components/Autocomplete/index.tsx

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

package/src/components/Autocomplete/styles.ts

@@ -1,5 +1,6 @@
-import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
+import { ButtonComposition } from '../Button'
 import { ListComposition } from '../List'
+import { TextInputComposition } from '../TextInput'
 
 type ItemStates = '' | ':selected'
 
@@ -12,7 +13,3 @@ 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,22 +1,17 @@
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-  PropsOf,
-} from '@codeleap/common'
-import { AutocompletePresets } from '.'
+import { FormTypes, PropsOf } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
 import { Text } from '../Text'
-import { SearchInputProps, TextInputProps } from '../TextInput'
+import { SearchInputProps } from '../SearchInput'
 import { Touchable } from '../Touchable'
-import { AutocompleteComposition } from './styles'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AutocompleteComposition } from './styles'
 
 export type AutocompleteRenderFNProps<T> = {
-  styles: StylesOf<AutocompleteComposition>
+  style?: StylesOf<AutocompleteComposition>
   onPress: () => void
   isSelected?: boolean
   item: FormTypes.Options<T>[number]
@@ -48,21 +43,20 @@ 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> = {
+export type AutocompleteProps<T = any, Multi extends boolean = false> =
+  Omit<FlatListProps<T>, 'renderItem' | 'style'> &
+  ValueBoundAutocompleteProps<T, Multi> &
+  {
     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?: IconPlaceholder
+    selectedIcon?: AppIcon
     loadOptionsOnMount?: boolean
     loadOptionsOnOpen?: boolean
     selectable?: boolean
@@ -70,10 +64,6 @@ export type AutocompleteProps<T = any, Multi extends boolean = false> = {
     debugName: string
     searchComponent?: React.ComponentType<SearchInputProps>
     listPlaceholder?: Partial<EmptyPlaceholderProps>
-    listProps?: Partial<Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>>
+    listProps?: Partial<Omit<FlatListProps<T>, 'renderItem' | 'style'>>
     loading: boolean | ((isLoading: boolean) => boolean)
   }
-    & Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>
-    & ComponentVariants<typeof AutocompletePresets>
-    & ValueBoundAutocompleteProps<T, Multi>
-