@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/Image/index.tsx

@@ -1,37 +1,70 @@
-import React from 'react'
-import { arePropsEqual, TypeGuards } from '@codeleap/common'
-import { Image as NativeImage } from 'react-native'
+import * as React from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  arePropsEqual,
+  FormTypes,
+  TypeGuards,
+  getNestedStylesByKey,
+} from '@codeleap/common'
+import {
+  Image as NativeImage,
+  ImageProps as NativeImageProps,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+import {
+  ImageComposition,
+  ImagePresets,
+} from './styles'
 import { useImageSpotlight } from '../ImageView/Spotlight'
 import { Touchable } from '../Touchable'
 import { isFile, toMultipartFile } from '../../utils'
-import { LoadingOverlay } from '../LoadingOverlay'
-import FastImage from 'react-native-fast-image'
-import { ImageProps } from './types'
-import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { LoadingOverlay, LoadingOverlayProps } from '../LoadingOverlay'
+import { StylesOf } from '../../types'
+import FastImage, { Source } from 'react-native-fast-image'
 
 export * from './styles'
-export * from './types'
 
-export const Image = React.memo((props: ImageProps) => {
+export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
+  variants?: ComponentVariants<typeof ImagePresets>['variants']
+  fast?: boolean
+  styles?: StylesOf<ImageComposition>
+  style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
+  source:
+    | Source
+    | FormTypes.AnyFile
+  resizeMode?: keyof typeof FastImage.resizeMode
+  spotlight?: string
+  maintainAspectRatio?: boolean
+  withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
+}
+
+export const ImageComponent = (props:ImageProps) => {
   const {
+    variants,
     style,
-    fast,
+    styles: componentStyleSheet = {},
+    fast = true,
     spotlight = null,
-    resizeMode,
+    resizeMode = 'contain',
     source,
-    withLoadingOverlay,
-    maintainAspectRatio,
+    withLoadingOverlay = false,
+    maintainAspectRatio = true,
     ...imageProps
-  } = {
-    ...Image.defaultProps,
-    ...props,
-  }
+  } = props
 
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImagePresets>('u:Image', {
+    variants,
+    styles: componentStyleSheet,
+    transform: StyleSheet.flatten,
+  })
   const [loading, setLoading] = React.useState(false)
 
-  const styles = useStylesFor(Image.styleRegistryName, style)
+  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
 
   let imSource = source
 
@@ -40,14 +73,12 @@ export const Image = React.memo((props: ImageProps) => {
   } else if (TypeGuards.isString(source)) {
     imSource = { uri: source }
   }
-
   const spotlightActions = useImageSpotlight(spotlight, props.source)
   const Wrapper = !!spotlight ? Touchable : ({ children }) => <>{children}</>
-
   const wrapperProps = {
     onPress: spotlightActions.onImagePressed,
     debugName: `Press spotlight image ${props.source}`,
-    style: styles.touchable,
+    style: [variantStyles.touchable],
     android_ripple: null,
   }
 
@@ -91,21 +122,23 @@ export const Image = React.memo((props: ImageProps) => {
   const Loading = TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay
   const showLoading = !!withLoadingOverlay
 
-  const overlayStyle = useNestedStylesByKey('overlay', styles)
+  const overlayStyle = React.useMemo(() => getNestedStylesByKey('overlay', variantStyles), [variantStyles])
 
   const loadingElement = React.useMemo(() => {
     return showLoading ? (
-      <Loading visible={loading} style={overlayStyle} />
+      <Loading visible={loading} styles={overlayStyle}/>
+
     ) : null
   }, [showLoading, loading])
 
   if (fast) {
     return (
       <Wrapper {...wrapperProps}>
+
         <FastImage
-          style={[aspectRatioStyle, styles.wrapper]}
+          style={[aspectRatioStyle, styles]}
           // @ts-ignore
-          tintColor={styles?.wrapper?.tintColor}
+          tintColor={styles?.tintColor}
           // @ts-ignore
           source={imSource}
           resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
@@ -116,38 +149,25 @@ export const Image = React.memo((props: ImageProps) => {
       </Wrapper>
     )
   }
-
-  return (
-    <Wrapper {...wrapperProps}>
-      <NativeImage
-        resizeMode={resizeMode}
-        source={imSource}
-        {...(imageProps as any)}
-        {...loadProps.current}
-        style={[aspectRatioStyle, styles.wrapper]}
-      />
-
-      {loadingElement}
-    </Wrapper>
-  )
-}, (prevProps, nextProps) => {
-  const equal = arePropsEqual(prevProps, nextProps, { check: ['source', 'style', 'resizeMode', 'fast'] })
-  return equal
-}) as StyledComponentWithProps<ImageProps>
-
-Image.styleRegistryName = 'Image'
-Image.elements = ['wrapper', 'touchable', 'overlay']
-Image.rootElement = 'wrapper'
-
-Image.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Image as (props: StyledComponentProps<ImageProps, typeof styles>) => IJSX
+  return <Wrapper {...wrapperProps}>
+    <NativeImage
+      style={[aspectRatioStyle, styles]}
+      resizeMode={resizeMode}
+      source={imSource}
+      {...(imageProps as any)}
+      {...loadProps.current}
+    />
+    {
+      loadingElement
+    }
+  </Wrapper>
 }
 
-Image.defaultProps = {
-  fast: true,
-  resizeMode: 'contain',
-  withLoadingOverlay: false,
-  maintainAspectRatio: true,
+function areEqual(prevProps, nextProps) {
+  const check = ['source', 'style', 'variants', 'resizeMode', 'fast']
+  const res = arePropsEqual(prevProps, nextProps, { check })
+  return res
 }
 
-MobileStyleRegistry.registerComponent(Image)
+export const Image = React.memo(ImageComponent, areEqual) as typeof ImageComponent
+

package/src/components/Image/styles.ts

@@ -1,3 +1,8 @@
-import { LoadingOverlayComposition } from '../LoadingOverlay'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { LoadingOverlayComposition } from '../LoadingOverlay/styles'
 
 export type ImageComposition = 'wrapper' | 'touchable' | `overlay${Capitalize<LoadingOverlayComposition>}`
+const createImageStyle = createDefaultVariantFactory<ImageComposition>()
+
+export const ImagePresets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })))
+

package/src/components/ImageView/Spotlight.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from 'react'
 import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
+
 import uuid from 'react-native-uuid'
 import { ImageView, ImageViewProps } from './component'
 import { ImageProps } from '../Image'
@@ -165,7 +166,9 @@ export type SpotlightProps = {
 } & ImageViewProps
 
 const DefaultFooterComponent: SpootlightFooterComponent = ({ imageIndex, imagesLength }) => (
-  <View><Text text={imageIndex + 1 + '/' + imagesLength} /></View>
+  <View variants={['marginBottom:5', 'alignCenter']}>
+    <Text text={imageIndex + 1 + '/' + imagesLength} />
+  </View>
 )
 
 export const Spotlight = (props: SpotlightProps) => {

package/src/components/ImageView/component.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import * as React from 'react'
+
 import { onUpdate, PropsOf } from '@codeleap/common'
 import _ImageView from 'react-native-image-viewing'
 import { StatusBar } from 'react-native'

package/src/components/InputBase/index.tsx

@@ -16,12 +16,11 @@ export const InputBaseDefaultOrder: InputBaseProps['order'] = [
   'innerWrapper',
   'error',
 ]
-
 const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <>{props.children}</>
 }
 
-export const InputBase = (props: InputBaseProps) => {
+export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
   const {
     children,
     error = null,
@@ -29,67 +28,69 @@ export const InputBase = (props: InputBaseProps) => {
     description = null,
     leftIcon = null,
     rightIcon = null,
-    wrapper: WrapperComponent,
+    styles,
+    wrapper,
     debugName,
-    innerWrapper: InnerWrapperComponent,
+    innerWrapper,
     focused,
     innerWrapperProps = {},
     wrapperProps = {},
-    disabled,
+    disabled = false,
     order = InputBaseDefaultOrder,
     style,
-    labelAsRow,
-    hideErrorMessage,
+    labelAsRow = false,
+    hideErrorMessage = false,
     ...otherProps
-  } = {
-    ...InputBase.defaultProps,
-    ...props,
-  }
+  } = props
 
-  const styles = useInputBaseStyles(props)
+  const WrapperComponent = wrapper || View
+  const InnerWrapperComponent = innerWrapper || View
+
+  const _styles = useInputBaseStyles(props)
 
   const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
     // @ts-ignore
-    style: styles.leftIconStyles,
+    styles: _styles.leftIconStyles,
     debugName: `${debugName} left icon`,
     dismissKeyboard: false,
   })
 
   const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
+
     // @ts-ignore
-    style: styles.rightIconStyles,
+    styles: _styles.rightIconStyles,
     debugName: `${debugName} right icon`,
     dismissKeyboard: false,
   })
 
-  const _label = TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle} /> : label
+  const _label = TypeGuards.isString(label) ? <Text text={label} style={_styles.labelStyle} /> : label
 
-  const _error = TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle} /> : error
+  const _error = TypeGuards.isString(error) ? <Text text={error} style={_styles.errorStyle} /> : error
 
-  const _description = TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle} /> : description
+  const _description = TypeGuards.isString(description) ? <Text text={description} style={_styles.descriptionStyle} /> : description
 
   const parts = {
-    label: labelAsRow ? <View style={styles.labelRowStyle}>
+    label: labelAsRow ? <View style={_styles.labelRowStyle}>
       {_label}
       {_description}
     </View> : _label,
     description: labelAsRow ? null : _description,
     innerWrapper: <InnerWrapperComponent style={[
-      styles.innerWrapperStyle,
+      _styles.innerWrapperStyle,
     ]} {...innerWrapperProps}>
       {_leftIcon}
       {children}
       {_rightIcon}
     </InnerWrapperComponent>,
     error: hideErrorMessage ? null : (
-      _error || <Text text={''} style={styles.errorStyle} />
+      _error || <Text text={''} style={_styles.errorStyle} />
     ),
   }
 
   return <WrapperComponent
+    style={[_styles.wrapperStyle, style]}
     {...otherProps}
     {...wrapperProps}
-    style={styles.wrapperStyle}
   >
     {
       order.map((key) => <KeyPassthrough key={key}>
@@ -97,16 +98,6 @@ export const InputBase = (props: InputBaseProps) => {
       </KeyPassthrough>)
 
     }
-  </WrapperComponent>
-}
 
-InputBase.elements = ['wrapper', 'innerWrapper', 'label', 'errorMessage', 'description', 'icon', 'leftIcon', 'rightIcon']
-
-InputBase.defaultProps = {
-  disabled: false,
-  labelAsRow: false,
-  hideErrorMessage: false,
-  order: InputBaseDefaultOrder,
-  wrapper: View,
-  innerWrapper: View,
-} as Partial<InputBaseProps>
+  </WrapperComponent>
+})

package/src/components/InputBase/styles.ts

@@ -1,8 +1,7 @@
-import { TypeGuards } from "@codeleap/common"
-import { ActionIconParts } from "../ActionIcon"
+import { TypeGuards, createDefaultVariantFactory, getRenderedComponent, includePresets, useDefaultComponentStyle, useMemo, useNestedStylesByKey } from "@codeleap/common"
+import { ActionIconComposition, ActionIconParts } from "../ActionIcon"
 import { InputBaseProps } from "./types"
-import { mergeStyles, useCompositionStyles } from '@codeleap/styles'
-import { useMemo } from 'react'
+import { StyleSheet } from "react-native"
 
 type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
 
@@ -25,33 +24,32 @@ export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconCompositio
 
 export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
 
-const getIconStyles = (obj, state) => ({
-  icon: mergeStyles([
-    obj.icon, 
-    state.focused && obj['icon:focus'],
-    state.hasError && obj['icon:error'], 
-    state.disabled && obj['icon:disabled']
-  ]),
-  'icon:disabled': mergeStyles([
-    state.disabled && obj['icon:disabled']
-  ]),
-  touchableWrapper: mergeStyles([
-    obj.touchableWrapper, 
-    state.focused && obj['touchableWrapper:focus'],
-    state.hasError && obj['touchableWrapper:error'], 
-    state.disabled && obj['touchableWrapper:disabled']
-  ]),
-  'touchableWrapper:disabled': mergeStyles([
-    state.disabled && obj['touchableWrapper:disabled']
-  ])
-})
-
-const useIconStyles = (styles, iconStyles, states) => {
-  return useMemo(() => {
-    const _iconStyles = getIconStyles(iconStyles, states)
-
-    return mergeStyles([styles, _iconStyles])
-  }, [states, styles, iconStyles])
+const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
+
+export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
+
+
+const getIconStyles = (obj, state) => {
+  return {
+    icon: [
+      obj.icon, 
+      state.focused && obj['icon:focus'],
+      state.hasError && obj['icon:error'], 
+      state.disabled && obj['icon:disabled']
+    ],
+    'icon:disabled': [
+      state.disabled && obj['icon:disabled']
+    ],
+    touchableWrapper: [
+      obj.touchableWrapper, 
+      state.focused && obj['touchableWrapper:focus'],
+      state.hasError && obj['touchableWrapper:error'], 
+      state.disabled && obj['touchableWrapper:disabled']
+    ],
+    'touchableWrapper:disabled': [
+      state.disabled && obj['touchableWrapper:disabled']
+    ]
+  }
 }
 
 export const useInputBaseStyles = (props: InputBaseProps) => {
@@ -59,65 +57,76 @@ export const useInputBaseStyles = (props: InputBaseProps) => {
     focused,
     disabled,
     error,
-    style: styles,
+    styles
   } = props
 
   const hasError = !TypeGuards.isNil(error)
 
-  const compositionStyles = useCompositionStyles(['leftIcon', 'rightIcon', 'icon'], styles)
+  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
+    styles,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper'
+  })
 
-  const generalIconStyles = getIconStyles(compositionStyles?.icon, { hasError, disabled })
+  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
+  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
+  const _generalIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
 
-  const leftIconStyles = useIconStyles(generalIconStyles, compositionStyles?.leftIcon, { 
-    // @ts-expect-error
-    hasError, disabled: (disabled || props?.leftIcon?.disabled), focused 
-  })
+  const generalIconStyles = getIconStyles(_generalIconStyles, { hasError, disabled })
 
-  const rightIconStyles = useIconStyles(generalIconStyles, compositionStyles?.rightIcon, { 
-    // @ts-expect-error
-    hasError, disabled: (disabled || props?.rightIcon?.disabled), focused
-  })
+  const leftIconStyles = [
+    generalIconStyles, 
+    // @ts-ignore
+    getIconStyles(_leftIconStyles, { hasError, disabled: disabled || props?.leftIcon?.disabled, focused })
+  ]
+
+  const rightIconStyles = [
+    generalIconStyles,
+    // @ts-ignore
+    getIconStyles(_rightIconStyles, { hasError, disabled: disabled || props?.right?.disabled, focused })
+  ]
 
   const labelStyle = [
-    styles.label,
-    focused && styles['label:focus'],
-    hasError && styles['label:error'],
-    disabled && styles['label:disabled'],
+    variantStyles.label,
+    focused && variantStyles['label:focus'],
+    hasError && variantStyles['label:error'],
+    disabled && variantStyles['label:disabled'],
+    
   ]
 
   const errorStyle = [
-    styles.errorMessage,
-    focused && styles['errorMessage:focus'],
-    hasError && styles['errorMessage:error'],
-    disabled && styles['errorMessage:disabled'],
+    variantStyles.errorMessage,
+    focused && variantStyles['errorMessage:focus'],
+    hasError && variantStyles['errorMessage:error'],
+    disabled && variantStyles['errorMessage:disabled'],
   ]
 
   const descriptionStyle = [
-    styles.description,
-    focused && styles['description:focus'],
-    hasError && styles['description:error'],
-    disabled && styles['description:disabled'],
+    variantStyles.description,
+    focused && variantStyles['description:focus'],
+    hasError && variantStyles['description:error'],
+    disabled && variantStyles['description:disabled'],
   ]
 
   const wrapperStyle = [
-    styles.wrapper,
-    focused && styles['wrapper:focus'],
-    error && styles['wrapper:error'],
-    disabled && styles['wrapper:disabled'],
+    variantStyles.wrapper,
+    focused && variantStyles['wrapper:focus'],
+    error && variantStyles['wrapper:error'],
+    disabled && variantStyles['wrapper:disabled'],
   ]
 
   const innerWrapperStyle = [
-    styles.innerWrapper,
-    focused && styles['innerWrapper:focus'],
-    hasError && styles['innerWrapper:error'],
-    disabled && styles['innerWrapper:disabled'],
+    variantStyles.innerWrapper,
+    focused && variantStyles['innerWrapper:focus'],
+    hasError && variantStyles['innerWrapper:error'],
+    disabled && variantStyles['innerWrapper:disabled'],
   ]
 
   const labelRowStyle = [
-    styles.labelRow,
-    focused && styles['labelRow:focus'],
-    hasError && styles['labelRow:error'],
-    disabled && styles['labelRow:disabled'],
+    variantStyles.labelRow,
+    focused && variantStyles['labelRow:focus'],
+    hasError && variantStyles['labelRow:error'],
+    disabled && variantStyles['labelRow:disabled'],
   ]
 
  return {

package/src/components/InputBase/types.ts

@@ -1,4 +1,5 @@
-import { PropsOf, StylesOf } from '@codeleap/common'
+import { PropsOf } from '@codeleap/common'
+import { StylesOf } from '../../types'
 import { InputBaseComposition } from './styles'
 import { ActionIcon } from '../ActionIcon'
 
@@ -6,7 +7,6 @@ type ActionIconProps = PropsOf<typeof ActionIcon>
 
 type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
 type IconProp = Partial<ActionIconProps> | JSX.Element
-
 export type InputBaseProps = React.PropsWithChildren<{
   label?: React.ReactNode
   error?: React.ReactNode
@@ -16,12 +16,13 @@ export type InputBaseProps = React.PropsWithChildren<{
   wrapperProps?: any
   innerWrapper?: React.FC<any>
   innerWrapperProps?: any
+  styles?: StylesOf<InputBaseComposition>
   description?: React.ReactNode
   debugName: string
   focused?: boolean
   disabled?: boolean
   order?: OrderedParts[]
-  style?: StylesOf<InputBaseComposition>
+  style?: any
   labelAsRow?: boolean
   hideErrorMessage?: boolean
 }>

package/src/components/InputBase/utils.ts

@@ -8,10 +8,8 @@ type OmitDiff<T1, T2> = {
 
 type InputBaseKey = keyof InputBaseProps
 
-type BaseProps = Omit<InputBaseProps, 'style'>
-
-export function selectInputBaseProps<T extends BaseProps>(props: T): {
-  inputBaseProps: BaseProps
+export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
+  inputBaseProps: InputBaseProps
   others: OmitDiff<T, T>
 } {
   const varList:InputBaseKey[] = [
@@ -21,6 +19,7 @@ export function selectInputBaseProps<T extends BaseProps>(props: T): {
     'innerWrapper',
     'leftIcon',
     'rightIcon',
+    // 'styles',
     'description',
     'wrapper',
     'children',
@@ -28,7 +27,6 @@ export function selectInputBaseProps<T extends BaseProps>(props: T): {
     'wrapperProps',
     'disabled',
     'hideErrorMessage',
-    'style',
   ]
 
   const copy = { ...props }
@@ -38,7 +36,7 @@ export function selectInputBaseProps<T extends BaseProps>(props: T): {
     acc[key] = copy[key]
 
     return acc
-  }, {} as BaseProps)
+  }, {} as InputBaseProps)
 
   return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
 }

package/src/components/InputLabel/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { View, ViewProps } from '../View'
+import { InputLabelComposition, InputLabelPresets } from './styles'
+import { Text } from '../Text'
+import { StyleSheet } from 'react-native'
+
+export type InputLabelProps = ViewProps & {
+    styles?: StylesOf<InputLabelComposition>
+    label?: FormTypes.Label
+    required?: boolean
+} & ComponentVariants<typeof InputLabelPresets>
+
+export * from './styles'
+
+export const InputLabel:React.FC<InputLabelProps> = (props) => {
+  const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelPresets>('u:InputLabel', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <View {...viewProps} style={[variantStyles.wrapper, style]}>
+        <Text style={variantStyles.text} text={label} />
+        {required && <Text style={variantStyles.asterisk} text={' *'} />}
+      </View>
+    case 'object':
+      return <>
+        {label as React.ReactNode}
+      </>
+    default:
+      return null
+  }
+}

package/src/components/InputLabel/styles.ts

@@ -0,0 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
+
+const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
+
+export const InputLabelPresets = includePresets(style => createInputLabelStyle(() => ({ wrapper: style, text: style })))