@codeleap/mobile 3.1.1 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,8 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/config": "*"
+    "@codeleap/config": "*",
+    "@types/react-native": "link:../../apps/mobile/node_modules/@types/react-native"
   },
   "scripts": {
     "build": "tsc --build",
@@ -32,16 +33,16 @@
     "react-native-fast-image": "8.6.3",
     "react-native-gesture-handler": "2.9.0",
     "react-native-image-crop-picker": "0.37.2",
+    "react-native-super-grid": "4.6.1",
     "react-native-image-viewing": "0.2.2",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "typescript": "4.5.4"
+    "typescript": "5.0.4"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",
     "@miblanchard/react-native-slider": "2.3.1",
     "date-fns": "^2.29.3",
     "react-native-masked-text": "1.13.0",
-    "react-native-super-grid": "4.4.2",
     "react-native-uuid": "2.0.1"
   }
 }

package/src/components/ActionIcon/index.tsx

@@ -14,7 +14,7 @@ export type ActionIconProps= {
     styles?: StylesOf<ActionIconComposition> | StylesOf<ActionIconComposition>[]
 } & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets> & BadgeComponentProps
 
-export const ActionIcon:React.FC<ActionIconProps> = (props) => {
+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,

package/src/components/ActivityIndicator/index.tsx

@@ -7,7 +7,7 @@ import {
   ComponentVariants,
   useCodeleapContext,
 } from '@codeleap/common'
-import { StylesOf } from '../../types'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
 import {
   ActivityIndicatorComposition,
   ActivityIndicatorPresets,
@@ -19,17 +19,19 @@ export type ActivityIndicatorProps =
  & {
   variants?: ComponentVariants<typeof ActivityIndicatorPresets>['variants']
   styles?: StylesOf<ActivityIndicatorComposition>
-  component?: React.ComponentType<Omit<ActivityIndicatorProps & {ref?: React.Ref<Indicator>}, 'component'>>
+  component?: (props: Omit<ActivityIndicatorProps & {ref?: React.Ref<Indicator>}, 'component'>) => JSX.Element
 }
 
+type TActivityIndicator = ComponentWithDefaultProps<ActivityIndicatorProps>
+
 export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
   (activityIndicatorProps, ref) => {
-    const { 
-      variants = [], 
-      style, 
-      styles: propStyles, 
-      component, 
-      ...props 
+    const {
+      variants = [],
+      style = {},
+      styles: propStyles = {},
+      component = Indicator,
+      ...props
     } = {
       ...ActivityIndicator.defaultProps,
       ...activityIndicatorProps,
@@ -49,7 +51,6 @@ export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
     const size = styles?.height || styles?.width || 'large'
 
     const Component = component
-   
 
     return (
       <Component
@@ -62,8 +63,8 @@ export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
       />
     )
   },
-)
+) as TActivityIndicator
 
 ActivityIndicator.defaultProps = {
-  component: Indicator,
-}
+  component: forwardRef(({ size, color, style }, ref) => <Indicator size={size} color={color} style={style} ref={ref}/>),
+}

package/src/components/Avatar/index.tsx

@@ -33,7 +33,7 @@ export type AvatarProps = ComponentVariants<typeof AvatarPresets> & {
   noFeedback?: boolean
 } & BadgeComponentProps
 
-export const Avatar: React.FC<AvatarProps> = (props) => {
+export const Avatar = (props:AvatarProps) => {
   const {
     debugName,
     name = '',
@@ -92,8 +92,8 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
         onPress={() => onPress?.()}
         style={[
           variantStyles.touchable,
-          !hasBackgroundColor  && {
-            backgroundColor:  randomColor,
+          !hasBackgroundColor && {
+            backgroundColor: randomColor,
           },
         ]}
         noFeedback={noFeedback || !onPress}
@@ -110,10 +110,10 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
       </Touchable>
 
       {badgeIcon && (
-        <Touchable  
-          debugName={`${debugName} badge`} 
-          style={variantStyles.badgeIconWrapper} 
-          onPress={() => onPress?.()}   
+        <Touchable
+          debugName={`${debugName} badge`}
+          style={variantStyles.badgeIconWrapper}
+          onPress={() => onPress?.()}
           noFeedback
         >
           <Icon name={badgeIcon} style={variantStyles.badgeIcon} />

package/src/components/AvatarGroup/index.tsx

@@ -22,9 +22,7 @@ const defaultProps:Partial<AvatarGroupProps> = {
   displacement: 20.5,
 }
 
-
-
-export const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
+export const AvatarGroup = (props:AvatarGroupProps) => {
   const {
     variants = [],
     avatars = [],
@@ -35,7 +33,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
     ...viewProps
   } = {
     ...defaultProps,
-    ...props
+    ...props,
   }
 
   const variantStyles = useDefaultComponentStyle('u:AvatarGroup', {
@@ -58,7 +56,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
           key={avatar.debugName || index}
           {...avatar}
           variants={avatar.variants || avatarVariants}
-          style={getAvatarStyle(index,displacement)}
+          style={getAvatarStyle(index, displacement)}
           styles={avatarStyles}
         />
       ))}
@@ -68,7 +66,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
 
 AvatarGroup.defaultProps = defaultProps
 
-const getAvatarStyle = (index: number,displacementPixels: number) => {
+const getAvatarStyle = (index: number, displacementPixels: number) => {
   const displacement = index * 20.5
   return { right: `${displacement}%` }
 }

package/src/components/Badge/index.tsx

@@ -7,8 +7,8 @@ import { StyleSheet } from 'react-native'
 
 export * from './styles'
 
-export type BadgeProps = ComponentVariants<typeof BadgePresets> 
-  & ViewProps 
+export type BadgeProps = ComponentVariants<typeof BadgePresets>
+  & ViewProps
   & {
     styles?: StylesOf<BadgeComposition>
     maxCount?: number
@@ -106,7 +106,7 @@ export const Badge = (props: BadgeProps) => {
   let BadgeContent = renderBadgeContent
 
   if (TypeGuards.isNil(renderBadgeContent)) {
-    BadgeContent = () => <Text text={content} {...textProps} style={countStyles} /> 
+    BadgeContent = () => <Text text={content} {...textProps} style={countStyles} />
   }
 
   return (
@@ -116,14 +116,14 @@ export const Badge = (props: BadgeProps) => {
     >
       <View {...innerWrapperProps} style={innerWrapperStyles}>
         {showContent
-          ? <BadgeContent 
-              {...props} 
-              maxCount={maxCount} 
-              minCount={minCount} 
-              count={count}
-              getBadgeContent={getBadgeContent} 
-              content={content} 
-            /> 
+          ? <BadgeContent
+            {...props}
+            maxCount={maxCount}
+            minCount={minCount}
+            count={count}
+            getBadgeContent={getBadgeContent}
+            content={content}
+          />
           : null
         }
       </View>
@@ -131,4 +131,4 @@ export const Badge = (props: BadgeProps) => {
   )
 }
 
-Badge.defaultProps =  defaultProps
+Badge.defaultProps = defaultProps

package/src/components/Button/index.tsx

@@ -142,4 +142,5 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
       <Badge badge={badge} style={badgeStyles} {...badgeProps} />
     </Touchable>
   )
-})
+}) as ((props: ButtonProps) => JSX.Element)
+

package/src/components/DatePickerModal/index.tsx

@@ -121,6 +121,8 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     description,
     showDoneButton,
     style,
+    minimumDate,
+    maximumDate,
     footerComponent,
     ...modalProps
   } = allProps
@@ -226,6 +228,8 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
           textColor={variantStyles?.picker?.color}
           androidVariant='iosClone'
           onConfirm={setValue}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
           {...datePickerProps}
           mode={mode}
 

package/src/components/DatePickerModal/types.ts

@@ -6,7 +6,7 @@ import { TextInputComposition } from '../TextInput'
 import { ButtonComposition, ButtonProps } from '../Button'
 import { ModalProps } from '../Modal'
 
-type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
+export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
     valueLabel: FormTypes.Label
     styles?: StylesOf<TextInputComposition>
 }
@@ -52,4 +52,7 @@ export type DatePickerModalProps = Omit<ModalProps, 'styles' | 'variants' | 'ref
 
   footerComponent?: React.ComponentType<DatePickerModalFooterProps>
 
+  minimumDate?: DatePickerProps['minimumDate']
+
+  maximumDate?: DatePickerProps['maximumDate']
 } & ComponentVariants<typeof DatePickerModalPresets>

package/src/components/EmptyPlaceholder/index.tsx

@@ -16,9 +16,9 @@ import {
   EmptyPlaceholderPresets,
 } from './styles'
 
-import { ImageSourcePropType, StyleSheet, Image as RNImage } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types'
-import { Image } from '../Image'
+import { Image, ImageProps } from '../Image'
 
 export * from './styles'
 
@@ -27,7 +27,7 @@ export type EmptyPlaceholderProps = {
 
   title?: React.ReactElement | string
   description?: React.ReactElement | string
-  image?: ImageSourcePropType
+  image?: ImageProps['source']
   icon?: IconPlaceholder
 
   loading?: boolean

package/src/components/FileInput/index.tsx

@@ -1,27 +1,31 @@
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { DocumentPicker, ImageCropPicker } from '../../modules/documentPicker'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import {
-  MobileInputFile,
   parseFilePathData,
   useCodeleapContext,
   MobileFile,
+  AnyRef,
+  FormTypes,
 } from '@codeleap/common'
 import { OSAlert } from '../../utils'
-import { ImageOrVideo, Options } from 'react-native-image-crop-picker'
-import { DocumentPickerOptions } from '../../modules/types/documentPicker'
-
+import ImageCropPicker, { ImageOrVideo, Options } from 'react-native-image-crop-picker'
+import DocumentPicker, { DocumentPickerOptions } from 'react-native-document-picker'
 export * from './styles'
 
+export const useSomething = useImperativeHandle
+
+type FileInputImageSource = 'camera' | 'library' | 'fs'
+
+type FileResult = FormTypes.AnyFile
+
 export type FileInputRef = {
-  openFilePicker: (string?: 'camera' | 'library') => void
+  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
 }
-
 export type FileInputProps = {
   mode: 'hidden' | 'button'
-  onFileSelect(files: MobileInputFile<ImageOrVideo>[]): void
+  onFileSelect?: (files: FileResult[]) => void
   options?: DocumentPickerOptions<any>
 
-  ref?: FileInputRef
+  ref?: AnyRef<FileInputRef>
 
   type?: 'image' | 'anyFile'
   alertProps?: Parameters<typeof OSAlert.ask>[0]
@@ -37,7 +41,7 @@ const pickerDefaults = {
   cropping: true,
 }
 
-function parsePickerData(data:ImageOrVideo):MobileInputFile<ImageOrVideo> {
+function parsePickerData(data:ImageOrVideo):FileResult {
 
   const filePathData = parseFilePathData(data.path)
   const d:MobileFile = {
@@ -55,7 +59,7 @@ function parsePickerData(data:ImageOrVideo):MobileInputFile<ImageOrVideo> {
   }
 }
 
-export const FileInput = forwardRef<
+const _FileInput = forwardRef<
   FileInputRef,
   FileInputProps
 >((fileInputProps, ref) => {
@@ -74,7 +78,7 @@ export const FileInput = forwardRef<
     onOpenFileSystem = null,
     onError,
   } = fileInputProps
-
+  const resolveWithFile = useRef<(file:FileResult[]) => any>()
   const { logger } = useCodeleapContext()
 
   async function openFileSystem() {
@@ -84,7 +88,13 @@ export const FileInput = forwardRef<
         files = [files]
       }
 
-      onFileSelect(files.map((file) => ({ preview: file.uri, file })))
+      const filesWithPreview = files.map((file) => ({ preview: file.uri, file }))
+
+      if (resolveWithFile.current) {
+        resolveWithFile.current(filesWithPreview)
+        resolveWithFile.current = undefined
+      }
+      onFileSelect?.(filesWithPreview)
     } catch (err) {
       handleError(err)
     }
@@ -111,7 +121,7 @@ export const FileInput = forwardRef<
     }
     onFileSelect(imageArray.map(parsePickerData))
   }
-  const onPress = (open?: 'camera' | 'library' | 'fs', options?: Options) => {
+  const onPress = (open?: FileInputImageSource, options?: Options) => {
     if (open == 'fs') {
       openFileSystem()
     } else {
@@ -174,8 +184,28 @@ export const FileInput = forwardRef<
   }
 
   useImperativeHandle(ref, () => ({
-    openFilePicker,
+    openFilePicker: (imageSource: FileInputImageSource = null) => {
+      openFilePicker(imageSource)
+      return new Promise<FileResult[]>((resolve) => {
+        resolveWithFile.current = resolve
+      })
+    },
   }))
 
   return null
 })
+
+export const FileInput = _FileInput as unknown as ((props: FileInputProps) => JSX.Element)
+
+export const useFileInput = () => {
+  const inputRef = useRef<FileInputRef>(null)
+
+  const openFilePicker = (imageSource:FileInputImageSource = null):Promise<FileResult[]> => {
+    return inputRef.current?.openFilePicker(imageSource)
+  }
+
+  return {
+    openFilePicker,
+    ref: inputRef as React.MutableRefObject<FileInputRef>,
+  }
+}

package/src/components/Icon/index.tsx

@@ -6,7 +6,6 @@ import {
   useCodeleapContext,
   arePropsEqual,
   IconPlaceholder,
-  onMount,
   onUpdate,
   PropsOf,
   StylesOf,
@@ -14,7 +13,6 @@ import {
   getNestedStylesByKey,
 } from '@codeleap/common'
 import { StyleSheet } from 'react-native'
-import { View } from '../View'
 export * from './styles'
 
 import {
@@ -22,6 +20,7 @@ import {
   IconPresets,
 } from './styles'
 import { Badge, BadgeComponentProps } from '../Badge'
+import { View } from '../View'
 
 export type IconProps = {
   name: IconPlaceholder
@@ -33,16 +32,16 @@ export type IconProps = {
   styles?: StylesOf<IconComposition>
 } & BadgeComponentProps
 
-export const IconComponent: React.FC<IconProps> = (props) => {
-  const { 
-    name, 
-    style, 
-    variants, 
-    badge = false, 
-    badgeProps = {}, 
+export const IconComponent = (props: IconProps) => {
+  const {
+    name,
+    style,
+    variants,
+    badge = false,
+    badgeProps = {},
     wrapperProps = {},
     styles = {},
-    ...otherProps 
+    ...otherProps
   } = props
 
   const { Theme, logger } = useCodeleapContext()
@@ -87,7 +86,7 @@ export const IconComponent: React.FC<IconProps> = (props) => {
   }
 
   if (!name) {
-    return  null
+    return null
   }
 
   if (!Component) {
@@ -103,5 +102,5 @@ function areEqual(prevProps, nextProps) {
   return res
 }
 
-export const Icon = React.memo(IconComponent, areEqual)
+export const Icon = React.memo(IconComponent, areEqual) as typeof IconComponent
 

package/src/components/Image/index.tsx

@@ -1,24 +1,21 @@
 import * as React from 'react'
 import {
   ComponentVariants,
-
   useDefaultComponentStyle,
   arePropsEqual,
   FormTypes,
   TypeGuards,
-  useBooleanToggle,
   getNestedStylesByKey,
 } from '@codeleap/common'
-import { ComponentPropsWithoutRef } from 'react'
 import {
   Image as NativeImage,
+  ImageProps as NativeImageProps,
   ImageStyle,
   StyleProp,
   StyleSheet,
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import { FastImage } from '../../modules/fastImage'
 import {
   ImageComposition,
   ImagePresets,
@@ -28,27 +25,25 @@ import { Touchable } from '../Touchable'
 import { isFile, toMultipartFile } from '../../utils'
 import { LoadingOverlay, LoadingOverlayProps } from '../LoadingOverlay'
 import { StylesOf } from '../../types'
+import FastImage, { Source } from 'react-native-fast-image'
+
 export * from './styles'
-type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
+
 export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
   variants?: ComponentVariants<typeof ImagePresets>['variants']
   fast?: boolean
   styles?: StylesOf<ImageComposition>
   style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
   source:
-    | (NativeImageProps['source'] & {
-        priority?: keyof typeof FastImage.priority
-      })
+    | Source
     | FormTypes.AnyFile
-    | string
-    | number
   resizeMode?: keyof typeof FastImage.resizeMode
   spotlight?: string
   maintainAspectRatio?: boolean
-  withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>
+  withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
 }
 
-export const ImageComponent: React.FC<ImageProps> = (props) => {
+export const ImageComponent = (props:ImageProps) => {
   const {
     variants,
     style,
@@ -62,12 +57,17 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     ...imageProps
   } = props
 
-  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImagePresets>('u:Image', { variants, styles: componentStyleSheet, transform: StyleSheet.flatten })
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImagePresets>('u:Image', {
+    variants,
+    styles: componentStyleSheet,
+    transform: StyleSheet.flatten,
+  })
   const [loading, setLoading] = React.useState(false)
 
   const styles = StyleSheet.flatten([variantStyles.wrapper, style])
 
   let imSource = source
+
   if (isFile(imSource)) {
     imSource = toMultipartFile(imSource)
   } else if (TypeGuards.isString(source)) {
@@ -139,6 +139,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
           style={[aspectRatioStyle, styles]}
           // @ts-ignore
           tintColor={styles?.tintColor}
+          // @ts-ignore
           source={imSource}
           resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
           {...loadProps.current}
@@ -152,7 +153,8 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     <NativeImage
       style={[aspectRatioStyle, styles]}
       resizeMode={resizeMode}
-      source={imSource} {...(imageProps as any)}
+      source={imSource}
+      {...(imageProps as any)}
       {...loadProps.current}
     />
     {
@@ -167,5 +169,5 @@ function areEqual(prevProps, nextProps) {
   return res
 }
 
-export const Image = React.memo(ImageComponent, areEqual)
+export const Image = React.memo(ImageComponent, areEqual) as typeof ImageComponent
 

package/src/components/ImageView/Spotlight.tsx

@@ -4,7 +4,7 @@ import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount }
 import uuid from 'react-native-uuid'
 import { ImageView } from './component'
 import { ImageProps } from '../Image'
-import {ImageURISource, ImageRequireSource} from 'react-native'
+import { ImageURISource, ImageRequireSource } from 'react-native'
 type ImageSource = ImageURISource | ImageRequireSource
 
 type TImage = {
@@ -143,7 +143,7 @@ export const useImageSpotlight = (name: string | null, src: ImageProps['source']
   }
 }
 
-export const Spotlight = ({ name }) => {
+export const Spotlight = ({ name }: {name: string}) => {
   const spotlight = useSpotlight(name)
   useUnmount(() => {
     spotlight.clear()

package/src/components/List/index.tsx

@@ -146,7 +146,7 @@ const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
   },
 )
 
-export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => JSX.Element
 
 export const List = ListCP as unknown as ListComponentType
 

package/src/components/Modal/index.tsx

@@ -62,7 +62,7 @@ export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
   description?: React.ReactElement
 }
 
-const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
+const DefaultHeader = (props: ModalHeaderProps) => {
   const {
     styles,
     title = null,
@@ -101,7 +101,7 @@ const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
     )}</>
 }
 
-export const Modal: React.FC<ModalProps> = (modalProps) => {
+export const Modal = (modalProps:ModalProps) => {
   const {
     variants = [],
     styles = {},

package/src/components/Navigation/constants.ts

@@ -1,7 +1,23 @@
-// @ts-nocheck
-import { createBottomTabNavigator, createDrawerNavigator, createStackNavigator } from '../../modules/reactNavigation'
+import { createDrawerNavigator } from '@react-navigation/drawer'
+import { createStackNavigator } from '@react-navigation/stack'
+import type { TypedNavigator } from '@react-navigation/core'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 
-export const Navigators = {
+type X = TypedNavigator<
+  any,
+  any,
+  any,
+  any,
+  any
+>
+
+type INavigators = {
+  Drawer: X
+  Stack: X
+  Tab: X
+}
+
+export const Navigators:INavigators = {
   Drawer: createDrawerNavigator(),
   Stack: createStackNavigator(),
   Tab: createBottomTabNavigator(),