@codeleap/mobile 3.24.3 → 4.0.0

package/src/components/Modal/index.tsx

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

package/src/components/Modal/styles.ts

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

package/src/components/Modal/types.ts

@@ -0,0 +1,41 @@
+import { PropsOf } from '@codeleap/common'
+import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ButtonProps } from '../Button'
+import { Scroll } from '../Scroll'
+import { ViewProps } from '../View'
+import { ModalComposition } from './styles'
+
+export type ModalProps =
+  Omit<ViewProps, 'style'> &
+  {
+    dismissOnBackdrop?: boolean
+    buttonProps?: ButtonProps
+    accessible?: boolean
+    showClose?: boolean
+    closable?: boolean
+    footer?: React.ReactNode
+    title?: React.ReactNode
+    debugName?: string
+    closeIconName?: AppIcon
+    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'>
+    style?: StyledProp<ModalComposition>
+    id?: string
+    absolute?: boolean
+  }
+
+export type ModalHeaderProps =
+  Omit<ModalProps, 'renderHeader'> &
+  {
+    styles: Record<ModalComposition, ICSS>
+    buttonStyles: any
+    description?: React.ReactElement
+  }

package/src/components/Navigation/Navigation.tsx

@@ -34,6 +34,7 @@ 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 { IconPlaceholder } from '@codeleap/common'
+import { AppIcon } from '@codeleap/styles'
 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?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']
+    { icon?: AppIcon; default?:SceneComponent<K> } & PropTypes[K]['Screen']
 export type Scene<K extends NavigatorType> = SceneComponent<K> | SceneOptions<K>
 
 export type Scenes<K extends NavigatorType> = {
@@ -26,10 +26,3 @@ 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,14 +1,6 @@
-import * as React from 'react'
-import {
-  useDefaultComponentStyle,
-  TypeGuards,
-  useState,
-  useRef,
-  useValidate,
-  IconPlaceholder,
-} from '@codeleap/common'
+import React, { useState, useRef } from 'react'
+import { TypeGuards, useValidate } 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'
@@ -16,6 +8,9 @@ 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'
@@ -30,22 +25,6 @@ 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,
@@ -56,9 +35,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   })
 
   const {
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     onChangeText,
@@ -127,34 +104,29 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     return false
   }, [value])
 
-  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
-    'u:NumberIncrement',
-    {
-      variants,
-      styles,
-      rootElement: 'wrapper',
-    },
-  )
+  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
   const inputTextStyle = React.useMemo(() => ([
-    variantStyles.input,
-    isFocused && variantStyles['input:focus'],
-    hasError && variantStyles['input:error'],
-    disabled && variantStyles['input:disabled'],
+    styles.input,
+    isFocused && styles['input:focus'],
+    hasError && styles['input:error'],
+    disabled && styles['input:disabled'],
   ]), [disabled, isFocused, hasError])
 
   const placeholderTextColor = [
-    [disabled, variantStyles['placeholder:disabled']],
-    [hasError, variantStyles['placeholder:error']],
-    [isFocused, variantStyles['placeholder:focus']],
-    [true, variantStyles.placeholder],
+    [disabled, styles['placeholder:disabled']],
+    [hasError, styles['placeholder:error']],
+    [isFocused, styles['placeholder:focus']],
+    [true, styles.placeholder],
+    // @ts-expect-error
   ].find(([x]) => x)?.[1]?.color
 
   const selectionColor = [
-    [disabled, variantStyles['selection:disabled']],
-    [!validation.isValid, variantStyles['selection:error']],
-    [isFocused, variantStyles['selection:focus']],
-    [true, variantStyles.selection],
+    [disabled, styles['selection:disabled']],
+    [!validation.isValid, styles['selection:error']],
+    [isFocused, styles['selection:focus']],
+    [true, styles.selection],
+    // @ts-expect-error
   ].find(([x]) => x)?.[1]?.color
 
   const onChange = (newValue: number) => {
@@ -257,27 +229,21 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     <InputBase
       {...inputBaseProps}
       error={hasError ? errorMessage : null}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-        ],
-      }}
+      style={styles}
       rightIcon={{
-        name: 'plus' as IconPlaceholder,
+        name: 'plus' as AppIcon,
         disabled: disabled || incrementDisabled || !editable,
         onPress: () => handleChange('increment'),
         debounce: actionDebounce,
         ...inputBaseProps.rightIcon,
       }}
       leftIcon={{
-        name: 'minus' as IconPlaceholder,
+        name: 'minus' as AppIcon,
         disabled: disabled || decrementDisabled || !editable,
         onPress: () => handleChange('decrement'),
         debounce: actionDebounce,
         ...inputBaseProps.leftIcon,
       }}
-      style={style}
       disabled={disabled}
       focused={isFocused}
       innerWrapper={Touchable}
@@ -313,6 +279,30 @@ 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>
 
-NumberIncrement.defaultProps = defaultProps
+MobileStyleRegistry.registerComponent(NumberIncrement)

package/src/components/NumberIncrement/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder' | 'selection'
@@ -8,7 +7,3 @@ 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,44 +1,37 @@
-import {
-  ComponentVariants,
-  yup,
-  StylesOf,
-  PropsOf,
-  FormTypes,
-} from '@codeleap/common'
-import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
+import { yup, FormTypes, AnyFunction } from '@codeleap/common'
+import { NumberIncrementComposition } from './styles'
 import { TextInputMaskProps } from '../../modules/textInputMask'
-import { TextInputProps as NativeTextInputProps } from 'react-native'
-import { View } from '../View'
-import { Touchable } from '../Touchable'
+import { TextInputProps as RNTextInputProps } from 'react-native'
 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, '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'>
+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>
+  }