@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/Modal/index.tsx

@@ -1,25 +1,72 @@
-import React from 'react'
-import { View } from '../View'
+import * as React from 'react'
+import { View, ViewProps } from '../View'
+import { ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
-import { TypeGuards } from '@codeleap/common'
+import {
+  ComponentVariants,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  PropsOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+  useRef,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  ModalComposition,
+  ModalPresets,
+  ModalParts,
+} from './styles'
+import { ScrollView, StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+
 import { Backdrop } from '../Backdrop'
 import { useAnimatedVariantStyles, useBackButton } from '../../utils/hooks'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { ActionIcon } from '../ActionIcon'
 import { useState } from 'react'
-import { ModalHeaderProps, ModalProps } from './types'
-import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps, useTheme, AppTheme, Theme } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-export * from './types'
+
+export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+  variants?: ComponentVariants<typeof ModalPresets>['variants']
+  styles?: StylesOf<ModalComposition>
+  dismissOnBackdrop?: boolean
+  buttonProps?: ButtonProps
+  accessible?: boolean
+  showClose?: boolean
+  closable?: boolean
+  footer?: React.ReactNode
+  title?: React.ReactNode
+  debugName: string
+  closeIconName?: IconPlaceholder
+  visible: boolean
+  toggle?: () => void
+  zIndex?: number
+  description?: React.ReactElement
+  scroll?: boolean
+  header?: React.ReactElement
+  closeOnHardwareBackPress?: boolean
+  renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+  keyboardAware?: boolean
+  scrollProps?: PropsOf<typeof Scroll, 'ref'>
+}
+
+export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
+  styles: {
+    wrapper: ViewProps['style']
+    titleWrapper: ViewProps['style']
+    title: TextProps['style']
+    description: TextProps['style']
+    closeButton: ButtonProps['styles']
+  }
+  description?: React.ReactElement
+}
 
 const DefaultHeader = (props: ModalHeaderProps) => {
   const {
     styles,
-    buttonStyles,
     title = null,
     showClose = false,
     description = null,
@@ -27,10 +74,9 @@ const DefaultHeader = (props: ModalHeaderProps) => {
     closeIconName = 'x',
     toggle,
   } = props
-
   return <>
     {(title || showClose || description) && (
-      <View style={styles.header}>
+      <View style={styles.wrapper}>
         <View style={styles.titleWrapper}>
           {TypeGuards.isString(title) ? (
             <Text text={title} style={styles.title} />
@@ -38,14 +84,14 @@ const DefaultHeader = (props: ModalHeaderProps) => {
             title
           )}
 
-          {(showClose && closable) ? (
+          {(showClose && closable) && (
             <ActionIcon
               debugName={`${debugName} modal close button`}
-              icon={closeIconName as AppIcon}
+              icon={closeIconName as IconPlaceholder}
               onPress={toggle}
-              style={buttonStyles}
+              styles={styles.closeButton}
             />
-          ) : null}
+          )}
         </View>
 
         {TypeGuards.isString(description) ? (
@@ -54,39 +100,51 @@ const DefaultHeader = (props: ModalHeaderProps) => {
           description
         )}
       </View>
-    )}
-  </>
+    )}</>
 }
 
 export const Modal = (modalProps: ModalProps) => {
   const {
+    variants = [],
+    styles = {},
     visible,
-    closable,
+
+    closable = true,
+
     footer,
     children,
     toggle = () => null,
-    dismissOnBackdrop,
+    dismissOnBackdrop = true,
     header = null,
     debugName,
-    scroll,
+    scroll = true,
     renderHeader,
     zIndex = null,
     scrollProps = {},
-    closeOnHardwareBackPress,
-    style,
+    closeOnHardwareBackPress = true,
     ...props
   } = {
     ...Modal.defaultProps,
     ...modalProps,
   }
-
-  const themeValues = useTheme(store => (store.current as AppTheme<Theme>)?.values)
-
   const [modalHeight, setModalHeight] = useState(0)
+  const { Theme } = useCodeleapContext()
 
-  const styles = useStylesFor(Modal.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle('u:Modal', {
+    variants: variants as any,
+    transform: StyleSheet.flatten,
+    styles,
+  }) as ModalProps['styles']
+  const scrollRef = useRef<ScrollView>(null)
+  function getStyles(key: ModalParts) {
+    const s = [
+      variantStyles[key],
+      styles[key],
+    ]
 
-  const buttonStyles = useNestedStylesByKey('closeButton', styles)
+    return StyleSheet.flatten(s)
+  }
+  const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
 
   const boxAnimationStyles = useAnimatedVariantStyles({
     updater: (states) => {
@@ -94,24 +152,31 @@ export const Modal = (modalProps: ModalProps) => {
       return visible ? states['box:visible'] : states['box:hidden']
     },
     animatedProperties: ['box:hidden', 'box:visible'],
-    variantStyles: styles,
-    transition: styles['box:transition'],
+    variantStyles,
+    transition: variantStyles['box:transition'],
     dependencies: [visible],
   })
 
+  const wrapperStyle = getStyles('wrapper')
+
   const ScrollComponent = scroll ? Scroll : View
-  const scrollStyle = scroll ? styles?.scroll : styles?.innerWrapper
+  const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
 
-  const heightThreshold = themeValues?.height * 0.75
-  const topSpacing = modalHeight > heightThreshold ? styles?.topSpacing : 0
+  const heightThreshold = Theme.values.height * 0.75
+  const topSpacing = modalHeight > heightThreshold ? variantStyles.topSpacing : Theme.spacing.paddingTop(0)
 
   const headerProps: ModalHeaderProps = {
+
     ...modalProps,
     closable,
-    styles,
-    buttonStyles,
+    styles: {
+      wrapper: getStyles('header'),
+      title: getStyles('title'),
+      description: getStyles('description'),
+      closeButton: buttonStyles,
+      titleWrapper: getStyles('titleWrapper'),
+    },
   }
-
   const Header = renderHeader || DefaultHeader
 
   useBackButton(() => {
@@ -129,83 +194,65 @@ export const Modal = (modalProps: ModalProps) => {
 
   return (
     <View
-      style={[
-        styles?.wrapper,
-        // @ts-expect-error
-        { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : styles?.wrapper?.zIndex, ...topSpacing }
-      ]}
+      style={[wrapperStyle, {
+        zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex, ...topSpacing,
+      }]}
       pointerEvents={visible ? 'auto' : 'none'}
     >
-      <Backdrop
-        visible={visible}
-        debugName={`Modal ${debugName} backdrop`}
-        style={{
-          'wrapper:hidden': styles['backdrop:hidden'],
-          'wrapper:visible': styles['backdrop:visible'],
-          'wrapper': styles?.backdrop,
-        }}
+
+      <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
+        'wrapper:hidden': variantStyles['backdrop:hidden'],
+        'wrapper:visible': variantStyles['backdrop:visible'],
+        wrapper: variantStyles.backdrop,
+      }}
         wrapperProps={{
-          // @ts-expect-error
-          transition: styles['backdrop:transition'],
+          transition: { ...variantStyles['backdrop:transition'] },
         }}
       />
-
       <ScrollComponent
-        contentContainerStyle={styles?.scrollContent}
+        style={scrollStyle}
+        contentContainerStyle={getStyles('scrollContent')}
         showsVerticalScrollIndicator={false}
         keyboardAware
         animated
+
         {...scrollProps}
-        style={scrollStyle}
       >
-        {dismissOnBackdrop ? (
+        {dismissOnBackdrop &&
           <Touchable
             onPress={closable && visible ? toggle : (() => { })}
             debounce={400}
             debugName={'Modal backdrop touchable'}
-            style={styles?.backdropTouchable}
+            style={variantStyles.backdropTouchable}
             android_ripple={null}
             noFeedback
-          />) : null}
+          />}
 
         <View
           animated
-          animatedStyle={boxAnimationStyles}
+          style={[getStyles('box'), boxAnimationStyles]}
           {...props}
           onLayout={onModalLayout}
-          style={styles?.box}
         >
-          {header ? header : <Header {...headerProps} />}
 
-          <View style={styles?.body}>{children}</View>
+          {header ? header : <Header {...headerProps} />}
 
-          {footer ? (
-            <View style={styles?.footer}>
+          <View style={getStyles('body')}>{children}</View>
+          {footer && (
+            <View style={getStyles('footer')}>
               {typeof footer === 'string' ? <Text text={footer} /> : footer}
             </View>
-          ) : null}
+          )}
         </View>
+
       </ScrollComponent>
     </View >
-  )
-}
-
-Modal.styleRegistryName = 'Modal'
-Modal.elements = ['box', 'backdrop', 'innerWrapper', 'scroll', 'body', 'footer', 'header', 'title', 'description', 'closeButton', 'topSpacing']
-Modal.rootElement = 'wrapper'
 
-Modal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Modal as (props: StyledComponentProps<ModalProps, typeof styles>) => IJSX
+  )
 }
 
 Modal.defaultProps = {
-  closeIconName: 'close' as AppIcon,
-  closable: true,
-  dismissOnBackdrop: true,
-  scroll: true,
-  closeOnHardwareBackPress: true,
-} as Partial<ModalProps>
-
-MobileStyleRegistry.registerComponent(Modal)
+  closeIconName: 'close' as IconPlaceholder,
+}
 
 export default Modal

package/src/components/Modal/styles.ts

@@ -1,3 +1,7 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type AnimatableParts = 'box' | 'backdrop'
@@ -23,3 +27,7 @@ export type ModalComposition =
   | `${AnimatableParts}:visible`
   | `${AnimatableParts}:hidden`
   | `${AnimatableParts}:transition`
+
+const createModalStyle = createDefaultVariantFactory<ModalComposition>()
+
+export const ModalPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/Navigation/Navigation.tsx

@@ -34,7 +34,6 @@ export const Navigation = <T extends NavigatorType>({ type, scenes, ...props }:
             options: (optionProps) => ({
               title,
               tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>,
-              tabIcon: content?.icon,
               tabBarIconFocused: content?.iconFocused ? (style) => <Icon name={content?.iconFocused} style={style}/> : null,
               ...(TypeGuards.isFunction(content.options) ? content.options(optionProps) : content.options),
             }),

package/src/components/Navigation/types.ts

@@ -1,4 +1,4 @@
-import { AppIcon } from '@codeleap/styles'
+import { IconPlaceholder } from '@codeleap/common'
 import { Navigators } from './constants'
 
 export type TNavigators = typeof Navigators
@@ -13,7 +13,7 @@ export type PropTypes = {
 }
 export type SceneComponent<K extends NavigatorType> = PropTypes[K]['Screen']
 export type SceneOptions<K extends NavigatorType> =
-    { icon?: AppIcon; default?:SceneComponent<K> } & PropTypes[K]['Screen']
+    { icon?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']
 export type Scene<K extends NavigatorType> = SceneComponent<K> | SceneOptions<K>
 
 export type Scenes<K extends NavigatorType> = {
@@ -26,3 +26,10 @@ export type NavigationProps<T extends NavigatorType> = {
     type: T
     scenes: Scenes<T>
 } & PropTypes[T]['Navigator']
+
+// export type NavigationStructure  = {
+//     [module:string] : {
+//         scenes: Scenes,
+
+//     }
+// }

package/src/components/NumberIncrement/index.tsx

@@ -1,6 +1,14 @@
-import React, { useState, useRef } from 'react'
-import { TypeGuards, useValidate } from '@codeleap/common'
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  TypeGuards,
+  useState,
+  useRef,
+  useValidate,
+  IconPlaceholder,
+} from '@codeleap/common'
 import { forwardRef, useImperativeHandle } from 'react'
+import { NumberIncrementPresets } from './styles'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
 import { MaskedTextInput } from '../../modules/textInputMask'
@@ -8,9 +16,6 @@ import { TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, N
 import { Touchable } from '../Touchable'
 import { useActionValidate } from './utils'
 import { NumberIncrementProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
 export * from './types'
@@ -25,6 +30,22 @@ const defaultParseValue = (_value: string) => {
   return parseFloat(parsedValue)
 }
 
+const defaultProps: Partial<NumberIncrementProps> = {
+  max: MAX_VALID_DIGITS,
+  min: 0,
+  step: 1,
+  editable: true,
+  separator: null,
+  formatter: null,
+  parseValue: defaultParseValue,
+  delimiter: null,
+  mask: null,
+  masking: null,
+  timeoutActionFocus: 300,
+  actionPressAutoFocus: true,
+  actionDebounce: null,
+}
+
 export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>((props, inputRef) => {
   const {
     inputBaseProps,
@@ -35,7 +56,9 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   })
 
   const {
-    style,
+    variants = [],
+    style = {},
+    styles = {},
     value,
     disabled,
     onChangeText,
@@ -104,29 +127,34 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     return false
   }, [value])
 
-  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
+    'u:NumberIncrement',
+    {
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
 
   const inputTextStyle = React.useMemo(() => ([
-    styles.input,
-    isFocused && styles['input:focus'],
-    hasError && styles['input:error'],
-    disabled && styles['input:disabled'],
+    variantStyles.input,
+    isFocused && variantStyles['input:focus'],
+    hasError && variantStyles['input:error'],
+    disabled && variantStyles['input:disabled'],
   ]), [disabled, isFocused, hasError])
 
   const placeholderTextColor = [
-    [disabled, styles['placeholder:disabled']],
-    [hasError, styles['placeholder:error']],
-    [isFocused, styles['placeholder:focus']],
-    [true, styles.placeholder],
-    // @ts-expect-error
+    [disabled, variantStyles['placeholder:disabled']],
+    [hasError, variantStyles['placeholder:error']],
+    [isFocused, variantStyles['placeholder:focus']],
+    [true, variantStyles.placeholder],
   ].find(([x]) => x)?.[1]?.color
 
   const selectionColor = [
-    [disabled, styles['selection:disabled']],
-    [!validation.isValid, styles['selection:error']],
-    [isFocused, styles['selection:focus']],
-    [true, styles.selection],
-    // @ts-expect-error
+    [disabled, variantStyles['selection:disabled']],
+    [!validation.isValid, variantStyles['selection:error']],
+    [isFocused, variantStyles['selection:focus']],
+    [true, variantStyles.selection],
   ].find(([x]) => x)?.[1]?.color
 
   const onChange = (newValue: number) => {
@@ -229,21 +257,27 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     <InputBase
       {...inputBaseProps}
       error={hasError ? errorMessage : null}
-      style={styles}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+        ],
+      }}
       rightIcon={{
-        name: 'plus' as AppIcon,
+        name: 'plus' as IconPlaceholder,
         disabled: disabled || incrementDisabled || !editable,
         onPress: () => handleChange('increment'),
         debounce: actionDebounce,
         ...inputBaseProps.rightIcon,
       }}
       leftIcon={{
-        name: 'minus' as AppIcon,
+        name: 'minus' as IconPlaceholder,
         disabled: disabled || decrementDisabled || !editable,
         onPress: () => handleChange('decrement'),
         debounce: actionDebounce,
         ...inputBaseProps.leftIcon,
       }}
+      style={style}
       disabled={disabled}
       focused={isFocused}
       innerWrapper={Touchable}
@@ -279,30 +313,6 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
       )}
     </InputBase>
   )
-}) as StyledComponentWithProps<NumberIncrementProps>
-
-NumberIncrement.styleRegistryName = 'NumberIncrement'
-NumberIncrement.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
-NumberIncrement.rootElement = 'wrapper'
-
-NumberIncrement.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return NumberIncrement as (props: StyledComponentProps<NumberIncrementProps, typeof styles>) => IJSX
-}
-
-NumberIncrement.defaultProps = {
-  max: MAX_VALID_DIGITS,
-  min: 0,
-  step: 1,
-  editable: true,
-  separator: null,
-  formatter: null,
-  parseValue: defaultParseValue,
-  delimiter: null,
-  mask: null,
-  masking: null,
-  timeoutActionFocus: 300,
-  actionPressAutoFocus: true,
-  actionDebounce: null,
-} as Partial<NumberIncrementProps>
+})
 
-MobileStyleRegistry.registerComponent(NumberIncrement)
+NumberIncrement.defaultProps = defaultProps

package/src/components/NumberIncrement/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder' | 'selection'
@@ -7,3 +8,7 @@ export type NumberIncrementStates = InputBaseStates
 export type NumberIncrementComposition =
   | NumberIncrementParts
   | `${NumberIncrementParts}:${NumberIncrementStates}`
+
+const createNumberIncrementStyle = createDefaultVariantFactory<NumberIncrementComposition>()
+
+export const NumberIncrementPresets = includePresets((styles) => createNumberIncrementStyle(() => ({ wrapper: styles })))

package/src/components/NumberIncrement/types.ts

@@ -1,37 +1,44 @@
-import { yup, FormTypes, AnyFunction } from '@codeleap/common'
-import { NumberIncrementComposition } from './styles'
+import {
+  ComponentVariants,
+  yup,
+  StylesOf,
+  PropsOf,
+  FormTypes,
+} from '@codeleap/common'
+import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
 import { TextInputMaskProps } from '../../modules/textInputMask'
-import { TextInputProps as RNTextInputProps } from 'react-native'
+import { TextInputProps as NativeTextInputProps } from 'react-native'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
 import { InputBaseProps } from '../InputBase'
-import { StyledProp } from '@codeleap/styles'
 
 type Masking = FormTypes.TextField['masking']
-type MaskOptions = Masking['options']
+type MaskOptions =  Masking['options']
 
-export type NumberIncrementProps =
-  Omit<InputBaseProps, 'style'> &
-  Omit<RNTextInputProps, 'style'> &
-  {
-    value: number
-    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-    max?: number
-    min?: number
-    step?: number
-    editable?: boolean
-    _error?: string
-    placeholder?: string
-    onChangeMask?: TextInputMaskProps['onChangeText']
-    masking?: Exclude<Masking, 'mask' | 'format'>
-    prefix?: MaskOptions['unit']
-    suffix?: MaskOptions['suffixUnit']
-    separator?: MaskOptions['separator']
-    delimiter?: MaskOptions['delimiter']
-    mask?: MaskOptions['mask']
-    formatter?: (value: string | number) => string
-    parseValue?: (value: string) => number
-    timeoutActionFocus?: number
-    actionPressAutoFocus?: boolean
-    actionDebounce?: number | null
-    onPress?: AnyFunction
-    style?: StyledProp<NumberIncrementComposition>
-  }
+export type NumberIncrementProps = 
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  NativeTextInputProps & {
+  variants?: ComponentVariants<typeof NumberIncrementPresets>['variants']
+  styles?: StylesOf<NumberIncrementComposition>
+  value: number
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+  style?: PropsOf<typeof View>['style']
+  max?: number
+  min?: number
+  step?: number
+  editable?: boolean
+  _error?: string
+  placeholder?: string
+  onChangeMask?: TextInputMaskProps['onChangeText']
+  masking?: Exclude<Masking, 'mask' | 'format'>
+  prefix?: MaskOptions['unit']
+  suffix?: MaskOptions['suffixUnit']
+  separator?: MaskOptions['separator']
+  delimiter?: MaskOptions['delimiter']
+  mask?: MaskOptions['mask']
+  formatter?: (value: string | number) => string
+  parseValue?: (value: string) => number
+  timeoutActionFocus?: number
+  actionPressAutoFocus?: boolean
+  actionDebounce?: number | null
+} & Pick<PropsOf<typeof Touchable>, 'onPress'>