@codeleap/mobile 3.24.3 → 3.25.0

package/src/components/TextInput/index.tsx

@@ -1,50 +1,19 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  FormTypes,
-  PropsOf,
-  TypeGuards,
-  useDefaultComponentStyle,
-  useValidate,
-  yup,
-  useState,
-  useBooleanToggle,
-  IconPlaceholder,
-} from '@codeleap/common'
+import React, { useState } from 'react'
+import { TypeGuards, useValidate, useBooleanToggle } from '@codeleap/common'
 import { forwardRef, useImperativeHandle } from 'react'
-import { ComponentWithDefaultProps, StylesOf } from '../../types'
-import { StyleSheet, TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
-import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
-import { TextInputComposition, TextInputPresets } from './styles'
+import { TextInput as NativeTextInput, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Touchable } from '../Touchable'
-import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
+import { MaskedTextInput } from '../../modules/textInputMask'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { TextInputProps } from './types'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
-export type TextInputProps =
-  Omit<InputBaseProps, 'styles' | 'variants'> &
-  NativeTextInputProps &
-  {
-    styles?: StylesOf<TextInputComposition>
-    password?: boolean
-    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
-    debugName: string
-    visibilityToggle?: boolean
-    masking?: FormTypes.TextField['masking']
-    variants?: ComponentVariants<typeof TextInputPresets>['variants']
-    onChangeMask?: TextInputMaskProps['onChangeText']
-    visibleIcon?: IconPlaceholder
-    hiddenIcon?: IconPlaceholder
-    _error?: string
-  } & Pick<PropsOf<typeof Touchable>, 'onPress'>
-
-const defaultProps: Partial<TextInputProps> = {
-  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
-  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
-}
-
-const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
-
+export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
   const innerInputRef = React.useRef<NativeTextInput>(null)
 
   const [isFocused, setIsFocused] = useState(false)
@@ -58,18 +27,17 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
   })
 
   const {
-    variants,
-    styles,
     value,
     validate,
     debugName,
-    visibilityToggle = false,
+    visibilityToggle,
     masking,
     password,
     onChangeMask,
     onPress,
     visibleIcon,
     hiddenIcon,
+    style,
     _error = null,
     ...textInputProps
   } = others
@@ -80,11 +48,7 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
 
   const InputElement = isMasked ? MaskedTextInput : NativeTextInput
 
-  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(TextInput.styleRegistryName, style)
 
   // @ts-expect-error - React's ref type system is weird
   useImperativeHandle(inputRef, () => {
@@ -114,7 +78,6 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
   }, [validation.onInputFocused, props.onFocus])
 
   const handleMaskChange = (masked, unmasked) => {
-
     if (textInputProps.onChangeText) textInputProps.onChangeText(masking?.saveFormatted ? masked : masked)
     if (onChangeMask) onChangeMask(masked, unmasked)
   }
@@ -123,22 +86,24 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
   const isDisabled = !!inputBaseProps.disabled
 
   const placeholderTextColor = [
-    [isDisabled, variantStyles['placeholder:disabled']],
-    [!validation.isValid, variantStyles['placeholder:error']],
-    [isFocused, variantStyles['placeholder:focus']],
-    [true, variantStyles.placeholder],
+    [isDisabled, styles['placeholder:disabled']],
+    [!validation.isValid, styles['placeholder:error']],
+    [isFocused, styles['placeholder:focus']],
+    [true, styles?.placeholder],
+    // @ts-expect-error
   ].find(([x]) => x)?.[1]?.color
 
   const selectionColor = [
-    [isDisabled, variantStyles['selection:disabled']],
-    [!validation.isValid, variantStyles['selection:error']],
-    [isFocused, variantStyles['selection:focus']],
-    [true, variantStyles.selection],
+    [isDisabled, styles['selection:disabled']],
+    [!validation.isValid, styles['selection:error']],
+    [isFocused, styles['selection:focus']],
+    [true, styles?.selection],
+    // @ts-expect-error
   ].find(([x]) => x)?.[1]?.color
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
     debugName: `${debugName} toggle visibility`,
   } : null
 
@@ -147,35 +112,32 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
   const maskingExtraProps = isMasked ? {
     onChangeText: handleMaskChange,
     ref: null,
-
     refInput: (inputRef) => {
-      // console.log(inputRef)
       if (!!inputRef) {
         innerInputRef.current = inputRef
-
       }
     },
     ...masking,
   } : {}
 
   const buttonModeProps = isPressable ? {
-    // pointerEvents: 'none',
     editable: false,
     caretHidden: true,
   } : {}
 
   const hasMultipleLines = isMultiline && value?.includes('\n')
+
   return <InputBase
     {...inputBaseProps}
     innerWrapper={isPressable ? Touchable : undefined}
     debugName={debugName}
     error={(validation.isValid && !_error) ? null : _error || validation.message}
-    styles={{
-      ...variantStyles,
+    style={{
+      ...styles,
       innerWrapper: [
-        variantStyles.innerWrapper,
-        isMultiline && variantStyles['innerWrapper:multiline'],
-        hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
+        styles?.innerWrapper,
+        isMultiline && styles['innerWrapper:multiline'],
+        hasMultipleLines && styles['innerWrapper:hasMultipleLines'],
       ],
     }}
     innerWrapperProps={{
@@ -188,7 +150,6 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
     focused={isFocused}
   >
     <InputElement
-
       allowFontScaling={false}
       editable={!isPressable && !isDisabled}
       {...buttonModeProps}
@@ -201,106 +162,32 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
       onBlur={handleBlur}
       onFocus={handleFocus}
       style={[
-        variantStyles.input,
-        isMultiline && variantStyles['input:multiline'],
-        isFocused && variantStyles['input:focused'],
-        !validation.isValid && variantStyles['input:error'],
-        isDisabled && variantStyles['input:disabled'],
-        hasMultipleLines && variantStyles['input:hasMultipleLines'],
+        styles?.input,
+        isMultiline && styles['input:multiline'],
+        isFocused && styles['input:focused'],
+        !validation.isValid && styles['input:error'],
+        isDisabled && styles['input:disabled'],
+        hasMultipleLines && styles['input:hasMultipleLines'],
       ]}
       ref={innerInputRef}
       pointerEvents={isPressable ? 'none' : undefined}
       {...maskingExtraProps}
     />
   </InputBase>
-})
+}) as StyledComponentWithProps<TextInputProps>
 
-export type SearchInputProps = {
-  onTypingChange: (isTyping: boolean) => void
-  onSearchChange: (search: string) => void
-  onValueChange?: (search: string) => void
-  onClear?: () => void
-  debugName: string
-  debounce?: number
-  clearIcon?: IconPlaceholder
-  searchIcon?: IconPlaceholder
-  placeholder: string
-} & Partial<TextInputProps>
-
-export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
-  const {
-    debugName,
-    onClear,
-    onSearchChange,
-    onTypingChange,
-    clearIcon,
-    searchIcon,
-    debounce,
-    placeholder,
-    value,
-    onValueChange,
-    ...others
-  } = {
-    ...SearchInput.defaultProps,
-    ...props,
-  }
+TextInput.styleRegistryName = 'TextInput'
+TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
+TextInput.rootElement = 'wrapper'
 
-  const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
-
-  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
-
-  const handleChangeSearch = (value: string) => {
-    setSearch(value)
-
-    if (TypeGuards.isNil(debounce)) {
-      onSearchChange?.(value)
-    } else {
-      if (setSearchTimeout.current) {
-        clearTimeout(setSearchTimeout.current)
-      }
-
-      setSearchTimeout.current = setTimeout(() => {
-
-        onSearchChange(value)
-        onTypingChange?.(false)
-      }, debounce ?? 0)
-    }
-
-  }
-
-  const handleClear = () => {
-    setSearch('')
-    onSearchChange?.('')
-    onClear?.()
-  }
-
-  return (
-    <TextInput
-      value={search}
-      onChangeText={(value) => {
-        onTypingChange?.(true)
-        handleChangeSearch(value)
-      }}
-      placeholder={placeholder}
-      debugName={`Search ${debugName}`}
-      rightIcon={!!search.trim() && {
-        name: clearIcon,
-        onPress: handleClear,
-      }}
-      leftIcon={{
-        name: searchIcon,
-      }}
-      {...others}
-    />
-  )
+TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return TextInput as (props: StyledComponentProps<TextInputProps, typeof styles>) => IJSX
 }
 
-export const TextInput = TextInputComponent as ComponentWithDefaultProps<TextInputProps>
-
-TextInput.defaultProps = defaultProps
+TextInput.defaultProps = {
+  hiddenIcon: 'input-visiblity:hidden' as AppIcon,
+  visibleIcon: 'input-visiblity:visible' as AppIcon,
+  visibilityToggle: false,
+} as Partial<TextInputProps>
 
-SearchInput.defaultProps = {
-  debounce: null,
-  clearIcon: 'x' as IconPlaceholder,
-  searchIcon: 'search' as IconPlaceholder,
-}
+MobileStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/styles.ts

@@ -1,13 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { InputBaseComposition, InputBaseStates, InputBaseParts } from '../InputBase'
-
+import { InputBaseStates, InputBaseParts } from '../InputBase'
 
 type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
+
 export type TextInputStates = InputBaseStates | 'multiline' | 'hasMultipleLines' | 'pressable'
 
 export type TextInputComposition =  `${TextInputParts}:${TextInputStates}` | TextInputParts
-
-const createTextInputStyle =
-  createDefaultVariantFactory<TextInputComposition>()
-
-export const TextInputPresets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))

package/src/components/TextInput/types.ts

@@ -0,0 +1,23 @@
+import { InputBaseProps } from '../InputBase'
+import { TextInputProps as RNTextInputProps } from 'react-native'
+import { AnyFunction, FormTypes, yup } from '@codeleap/common'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { TextInputMaskProps } from '../../modules/textInputMask'
+import { TextInputComposition } from './styles'
+
+export type TextInputProps =
+  Omit<InputBaseProps, 'style'> &
+  Omit<RNTextInputProps, 'style'> &
+  {
+    password?: boolean
+    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
+    debugName: string
+    visibilityToggle?: boolean
+    masking?: FormTypes.TextField['masking']
+    onChangeMask?: TextInputMaskProps['onChangeText']
+    visibleIcon?: AppIcon
+    hiddenIcon?: AppIcon
+    _error?: string
+    onPress?: AnyFunction
+    style?: StyledProp<TextInputComposition>
+  }

package/src/components/Touchable/index.tsx

@@ -1,65 +1,20 @@
-import * as React from 'react'
-import { forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-
-  useCodeleapContext,
-  AnyFunction,
-  TypeGuards,
-  onMount,
-} from '@codeleap/common'
-import { Pressable, StyleSheet, View as RNView, Insets, Platform, PressableProps, ViewStyle, StyleProp } from 'react-native'
-import { TouchableComposition, TouchablePresets } from './styles'
-import { StylesOf } from '../../types'
+import React, { forwardRef } from 'react'
+import { TypeGuards, onMount, useGlobalContext } from '@codeleap/common'
+import { Pressable, StyleSheet, View as RNView, Insets, Platform } from 'react-native'
 import { View } from '../View'
-import { usePressableFeedback } from '../../utils'
+import { TouchableFeedbackConfig, usePressableFeedback } from '../../utils'
 import { Keyboard } from 'react-native'
-
 import { PressableRipple } from '../../modules/PressableRipple'
-export type TouchableProps =
-  Omit<
-    PressableProps,
-    'onPress' | 'children' | 'style'
-  > & {
-    variants?: ComponentVariants<typeof TouchablePresets>['variants']
-    component?: any
-    ref?: React.Ref<RNView>
-    debugName: string
-    activeOpacity?: number
-    debugComponent?: string
-    onPress?: AnyFunction
-    noFeedback?: boolean
-    debounce?: number
-    leadingDebounce?: boolean
-    styles?: StylesOf<TouchableComposition>
-    setPressed?: (param: boolean) => void
-    rippleDisabled?: boolean
-    children?: React.ReactNode
-    style?: StyleProp<ViewStyle>
-    analyticsEnabled?: boolean
-    analyticsName?: string
-    analyticsData?: Record<string, any>
-    dismissKeyboard?: boolean
-  }
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { TouchableProps } from './types'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-const defaultProps: Partial<TouchableProps> = {
-  variants: [],
-  debounce: 500,
-  noFeedback: false,
-  rippleDisabled: false,
-  analyticsEnabled: false,
-  analyticsName: null,
-  analyticsData: {},
-  dismissKeyboard: true,
-}
-const _Touchable = forwardRef<
-  RNView,
-  TouchableProps
->((touchableProps, ref) => {
+export * from './types'
+
+export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref) => {
   const {
-    variants = [],
     children,
     onPress,
     style,
@@ -68,7 +23,6 @@ const _Touchable = forwardRef<
     debounce,
     leadingDebounce,
     noFeedback,
-    styles,
     setPressed,
     rippleDisabled,
     analyticsEnabled,
@@ -77,7 +31,7 @@ const _Touchable = forwardRef<
     dismissKeyboard,
     ...props
   } = {
-    ...defaultProps,
+    ...Touchable.defaultProps,
     ...touchableProps,
   }
 
@@ -91,26 +45,17 @@ const _Touchable = forwardRef<
     }
   })
 
-  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
-    variants,
-    transform: StyleSheet.flatten,
-    rootElement: 'wrapper',
-    styles,
-  })
+  const styles = useStylesFor(Touchable.styleRegistryName, style)
 
-  const { logger } = useCodeleapContext()
+  const { logger } = useGlobalContext()
 
   const press = () => {
-    if (!onPress) {
-      logger.warn('No onPress passed to touchable', {
-        touchableProps,
-      }, 'User Interaction')
-      return
-    }
+    if (!onPress) return
+
     const _onPress = () => {
       logger.log(
         `<${debugComponent || 'Touchable'}/>  pressed`,
-        debugName || variants,
+        debugName,
         'User interaction',
       )
       if (dismissKeyboard) {
@@ -123,8 +68,9 @@ const _Touchable = forwardRef<
         }
       }
 
-      onPress && onPress()
+      onPress()
     }
+    
     if (TypeGuards.isNumber(debounce)) {
       if (pressed.current) {
         return
@@ -139,10 +85,9 @@ const _Touchable = forwardRef<
     } else {
       _onPress()
     }
-
   }
 
-  const _styles = StyleSheet.flatten([variantStyles.wrapper, props?.disabled && variantStyles['wrapper:disabled'], style])
+  const _styles = StyleSheet.flatten([styles?.wrapper, props?.disabled && styles?.['wrapper:disabled']])
 
   const disableFeedback = !onPress || noFeedback
 
@@ -150,7 +95,7 @@ const _Touchable = forwardRef<
     hightlightPropertyIn: 'backgroundColor',
     hightlightPropertyOut: 'backgroundColor',
     disabled: disableFeedback,
-    feedbackConfig: variantStyles?.feedback,
+    feedbackConfig: styles?.feedback as TouchableFeedbackConfig,
   })
 
   const Wrapper = View
@@ -165,7 +110,6 @@ const _Touchable = forwardRef<
       'bottom!',
       'position!',
       'transform!',
-      // 'flex!',
     ]
 
     const radiusKey = [
@@ -193,6 +137,7 @@ const _Touchable = forwardRef<
         return key.startsWith(k)
       }
     }
+
     Object.entries(_styles).forEach(([key, value]) => {
       if (radiusKey.some(k => match(k, key))) {
         wrapperStyle[key] = value
@@ -211,10 +156,12 @@ const _Touchable = forwardRef<
         pressableStyle[key] = value
       }
     })
+
     if (wrapperStyle.position === 'absolute') {
       pressableStyle.width = '100%'
       pressableStyle.height = '100%'
     }
+
     wrapperStyle.overflow = 'visible'
 
     return {
@@ -234,15 +181,12 @@ const _Touchable = forwardRef<
   const disableRipple = disableFeedback || rippleDisabled || Platform.OS !== 'android'
 
   return (
-    <Wrapper style={[wrapperStyle]} hitSlop={hitSlop}>
+    <Wrapper style={wrapperStyle} hitSlop={hitSlop}>
       {!disableRipple ? (
         <PressableRipple
           onPress={press}
-          style={[
-            pressableStyle,
-            variantStyles.pressable,
-          ]}
           {...props}
+          style={[pressableStyle, styles?.pressable]}
           rippleFades={false}
           rippleDuration={350}
           rippleOpacity={0.1}
@@ -259,7 +203,7 @@ const _Touchable = forwardRef<
           style={({ pressed }) => ([
             pressableStyle,
             getFeedbackStyle(pressed),
-            variantStyles.pressable,
+            styles?.pressable,
           ])}
           {...props}
           ref={ref}
@@ -269,10 +213,23 @@ const _Touchable = forwardRef<
       )}
     </Wrapper>
   )
-})
+}) as StyledComponentWithProps<TouchableProps>
+
+Touchable.styleRegistryName = 'Touchable'
+Touchable.elements = ['wrapper', 'feedback', 'pressable']
+Touchable.rootElement = 'wrapper'
 
-export const Touchable = _Touchable as ((props: TouchableProps) => JSX.Element) & {
-  defaultProps: Partial<TouchableProps>
+Touchable.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Touchable as (props: StyledComponentProps<TouchableProps, typeof styles>) => IJSX
 }
 
-Touchable.defaultProps = defaultProps
+Touchable.defaultProps = {
+  debounce: 500,
+  noFeedback: false,
+  rippleDisabled: false,
+  analyticsEnabled: false,
+  analyticsName: null,
+  dismissKeyboard: true,
+} as Partial<TouchableProps>
+
+MobileStyleRegistry.registerComponent(Touchable)

package/src/components/Touchable/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { StylesOf } from '../../types'
 import { TouchableFeedbackConfig } from '../../utils'
 
@@ -7,11 +6,3 @@ export type TouchableComposition = 'wrapper' | 'wrapper:disabled' | 'feedback' |
 export type TouchableStylesGen<TCSS = any> = StylesOf<Exclude<TouchableComposition, 'feedback'>> & {
   feedback?: TouchableFeedbackConfig
 }
-
-const createTouchableStyle = createDefaultVariantFactory<
-  TouchableComposition,
-  TouchableStylesGen
->()
-
-export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })))
-

package/src/components/Touchable/types.ts

@@ -0,0 +1,27 @@
+import { AnyFunction } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { View as RNView, PressableProps } from 'react-native'
+import { TouchableComposition } from './styles'
+
+export type TouchableProps =
+  Omit<PressableProps, 'onPress' | 'children' | 'style'> &
+  {
+    component?: any
+    ref?: React.Ref<RNView>
+    debugName: string
+    activeOpacity?: number
+    debugComponent?: string
+    onPress?: AnyFunction
+    noFeedback?: boolean
+    debounce?: number
+    leadingDebounce?: boolean
+    setPressed?: (param: boolean) => void
+    rippleDisabled?: boolean
+    children?: React.ReactNode
+    style?: StyledProp<TouchableComposition>
+    analyticsEnabled?: boolean
+    analyticsName?: string
+    analyticsData?: Record<string, any>
+    dismissKeyboard?: boolean
+    disabled?: boolean
+  }