@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/FileInput/index.tsx

@@ -1,20 +1,50 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import { parseFilePathData, MobileFile } from '@codeleap/common'
+import {
+  parseFilePathData,
+  useCodeleapContext,
+  MobileFile,
+  AnyRef,
+  FormTypes,
+} from '@codeleap/common'
 import { OSAlert } from '../../utils'
 import ImageCropPicker, { ImageOrVideo, Options } from 'react-native-image-crop-picker'
-import DocumentPicker from 'react-native-document-picker'
-import { FileInputImageSource, FileInputProps, FileInputRef, FileResult } from './types'
+import DocumentPicker, { DocumentPickerOptions } from 'react-native-document-picker'
+export * from './styles'
 
-export * from './types'
+export const useSomething = useImperativeHandle
+
+type FileInputImageSource = 'camera' | 'library' | 'fs'
+
+type FileResult = FormTypes.AnyFile
+
+export type FileInputRef = {
+  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
+}
+export type FileInputProps = {
+  mode: 'hidden' | 'button'
+  onFileSelect?: (files: FileResult[]) => void
+  options?: DocumentPickerOptions<any>
+
+  ref?: AnyRef<FileInputRef>
+
+  type?: 'image' | 'anyFile'
+  alertProps?: Parameters<typeof OSAlert.ask>[0]
+  pickerOptions?: Partial<Options>
+  required?: boolean
+  onOpenCamera?: (resolve: (() => void)) => Promise<void>
+  onOpenFileSystem?: (resolve: (() => void)) => Promise<void>
+  onOpenGallery?: (resolve: (() => void)) => Promise<void>
+  onError?: (error: any) => void
+}
 
 const pickerDefaults = {
   cropping: true,
 }
 
 function parsePickerData(data: ImageOrVideo): FileResult {
-  const filePathData = parseFilePathData(data.path)
 
-  const file: MobileFile = {
+  const filePathData = parseFilePathData(data.path)
+  const d: MobileFile = {
     ...data,
     name: filePathData.name,
     size: data.size,
@@ -24,25 +54,32 @@ function parsePickerData(data: ImageOrVideo): FileResult {
   }
 
   return {
-    file,
+    file: d,
     preview: data.path,
   }
 }
 
-const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref) => {
+const _FileInput = forwardRef<
+  FileInputRef,
+  FileInputProps
+>((fileInputProps, ref) => {
   const {
+
     onFileSelect,
+
     options,
     type = 'image',
     alertProps,
+
     pickerOptions,
+
     onOpenCamera = null,
     onOpenGallery = null,
     onOpenFileSystem = null,
     onError,
   } = fileInputProps
-
   const resolveWithFile = useRef<(file: FileResult[]) => any>()
+  const { logger } = useCodeleapContext()
 
   const handleResolve = (files: Array<FileResult>) => {
     if (resolveWithFile.current) {
@@ -68,7 +105,10 @@ const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref
   }
 
   function handleError(err) {
+
+    logger.warn('File Input Error', err, 'FILE INPUT')
     onError?.(err)
+
   }
 
   const mergedOptions = {
@@ -85,7 +125,6 @@ const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref
     }
     handleResolve?.(imageArray.map(parsePickerData))
   }
-
   const onPress = (open?: FileInputImageSource, options?: Options) => {
     if (open == 'fs') {
       openFileSystem()
@@ -94,7 +133,6 @@ const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref
       ImageCropPicker[call]({ ...mergedOptions, ...(options || {}) }).then(handlePickerResolution)
     }
   }
-
   const openFilePicker = async (imageSource = null) => {
     if (type === 'image') {
       if (imageSource === 'camera') {

package/src/components/FileInput/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type FileInputComposition = 'label' | 'wrapper' | 'input'
+
+const createFileInputStyle =
+  createDefaultVariantFactory<FileInputComposition>()
+
+export const FileInputPresets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })))

package/src/components/Grid/index.tsx

@@ -1,103 +1,135 @@
-import React, { useCallback, forwardRef, ComponentType } from 'react'
-import { ListRenderItemInfo } from 'react-native'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCallback,
+  useCodeleapContext,
+} from '@codeleap/common'
+
+import { StyleSheet, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { RefreshControl } from '../RefreshControl'
-import { List, ListItem } from '../List'
+import { List } from '../List'
+import { GridPresets } from './styles'
+import { FlatListProps, AugmentedRenderItemInfo } from '../List'
 import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
-import { GridProps } from './types'
-import { AnyRecord, AppTheme, IJSX, StyledComponentProps, StyledComponentWithProps, Theme, useTheme } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-export * from './types'
 
-const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
-  return <View style={props.separatorStyles} />
-}
-
-export const Grid = forwardRef<KeyboardAwareFlatList, GridProps>((flatGridProps, ref) => {
-  const {
-    style,
-    onRefresh,
-    refreshing,
-    placeholder,
-    refreshControlProps = {},
-    spacing,
-    numColumns,
-    renderItem: RenderItem,
-    ...props
-  } = {
-    ...Grid.defaultProps,
-    ...flatGridProps,
-  }
-
-  const themeSpacing = useTheme(store => (store.current as AppTheme<Theme>)?.spacing)
-
-  const styles = useStylesFor(Grid.styleRegistryName, style)
-
-  const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
-    if (!RenderItem) return null
+export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
-    const listLength = props?.data?.length || 0
+export type GridAugmentedRenderItemInfo<T> = AugmentedRenderItemInfo<T> & {
+  isFirstInRow: boolean
+  isLastInRow: boolean
+  isOnlyInRow: boolean
+}
 
-    const isFirst = data.index === 0
-    const isLast = data.index === listLength - 1
-    const isOnly = isFirst && isLast
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = Omit<FlatListProps<T, Data>, 'variants' | 'renderItem'> & ComponentVariants<typeof GridPresets> & {
+  spacing?: number
+  itemDimension?: number
+  renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
+}
 
-    const idx = data.index + 1
-    const isLastInRow = !isFirst && idx % (numColumns) === 0
-    const isFirstInRow = isFirst || data.index % numColumns === 0
-    const isOnlyInRow = !isFirstInRow && !isLastInRow
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return (
+    <View style={props.separatorStyles}></View>
+  )
+}
 
-    let gap = themeSpacing?.marginRight?.(spacing / 2)
-    if (isLastInRow) gap = themeSpacing?.marginLeft?.(spacing / 2)
-    else if (isOnlyInRow) gap = themeSpacing?.marginHorizontal?.(spacing / 2)
+const defaultProps: Partial<GridProps> = {
+  keyboardShouldPersistTaps: 'handled',
+  refreshControlProps: {},
+}
 
-    const _itemProps = { isFirst, isLast, isOnly, isFirstInRow, isLastInRow, isOnlyInRow }
+const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
+  (flatGridProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      refreshing,
+      placeholder,
+      refreshControlProps = {},
+      spacing,
+      numColumns,
+      ...props
+    } = {
+      ...defaultProps,
+      ...flatGridProps,
+    }
+
+    const { Theme } = useCodeleapContext()
+    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+    })
+
+    const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
+      if (!props?.renderItem) return null
+      const listLength = props?.data?.length || 0
+
+      const isFirst = data.index === 0
+      const isLast = data.index === listLength - 1
+      const isOnly = isFirst && isLast
+
+      const idx = data.index + 1
+      const isLastInRow = !isFirst && idx % (numColumns) === 0
+      const isFirstInRow = isFirst || data.index % numColumns === 0
+      const isOnlyInRow = !isFirstInRow && !isLastInRow
+
+      let gap = Theme.spacing.marginRight(spacing / 2)
+      if (isLastInRow) gap = Theme.spacing.marginLeft(spacing / 2)
+      else if (isOnlyInRow) gap = Theme.spacing.marginHorizontal(spacing / 2)
+
+      const _itemProps = { isFirst, isLast, isOnly, isFirstInRow, isLastInRow, isOnlyInRow }
+      const RenderItem = props?.renderItem
+
+      return (
+        <View style={{ ...variantStyles.itemWrapper, ...gap }}>
+          <RenderItem {...data} {..._itemProps} />
+        </View>
+      )
+    }, [props?.renderItem, props?.data?.length])
+
+    const separatorStyles = { height: Theme.spacing.value(spacing), ...variantStyles.separator }
+    const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles} /> : null)
+    const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps} />
+    const _gridProps = {
+      ...props,
+      ref: ref,
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder} />,
+      ListHeaderComponentStyle: variantStyles.header,
+      ListFooterComponentStyle: variantStyles.footer,
+      ItemSeparatorComponent: separator,
+      refreshControl,
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: [variantStyles.content, props?.contentContainerStyle],
+      showsVerticalScrollIndicator: false,
+      numColumns,
+      renderItem,
+    }
 
     return (
-      <View style={[styles.itemWrapper, gap]}>
-        <RenderItem {...data} {..._itemProps} />
-      </View>
+      // @ts-ignore
+      <List
+        {..._gridProps}
+      />
     )
-  }, [RenderItem, props?.data?.length])
+  },
+)
 
-  const separatorStyles = { height: themeSpacing?.value?.(spacing), ...styles.separator }
-  const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles} /> : null)
-  const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps} />
-
-  return (
-    <List
-      // @ts-expect-error
-      ref={ref}
-      {...props}
-      ListEmptyComponent={<EmptyPlaceholder {...placeholder} />}
-      ListHeaderComponentStyle={styles.header}
-      ListFooterComponentStyle={styles.footer}
-      ItemSeparatorComponent={separator as unknown as ComponentType}
-      refreshControl={refreshControl}
-      style={styles.wrapper}
-      contentContainerStyle={[styles.content, props?.contentContainerStyle]}
-      showsVerticalScrollIndicator={false}
-      numColumns={numColumns}
-      renderItem={renderItem}
-    />
-  )
-}) as StyledComponentWithProps<GridProps>
-
-Grid.styleRegistryName = 'Grid'
-Grid.elements = ['wrapper', 'content', 'separator', 'header', 'refreshControl', 'itemWrapper', 'footer']
-Grid.rootElement = 'wrapper'
-
-Grid.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Grid as (<T extends ListItem>(props: StyledComponentProps<GridProps<T>, typeof styles>) => IJSX)
+export type GridComponentType = (<T extends any[] = any[]>(props: GridProps<T>) => JSX.Element) & {
+  defaultProps?: Partial<GridProps>
 }
 
-Grid.defaultProps = {
-  keyboardShouldPersistTaps: 'handled',
-  refreshControlProps: {},
-} as Partial<GridProps>
+export const Grid = GridCP as unknown as GridComponentType
+
+Grid.defaultProps = defaultProps
 
-MobileStyleRegistry.registerComponent(Grid)

package/src/components/Grid/styles.ts

@@ -1,3 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ListComposition } from '../List'
 
 export type GridComposition = ListComposition | 'itemWrapper' | 'footer'
+
+const createGridStyle = createDefaultVariantFactory<GridComposition>()
+
+export const GridPresets = includePresets(style => createGridStyle(() => ({ content: style })))

package/src/components/Icon/index.tsx

@@ -1,34 +1,79 @@
-import React from 'react'
-import { arePropsEqual, TypeGuards } from '@codeleap/common'
-import { Badge } from '../Badge'
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  useCodeleapContext,
+  arePropsEqual,
+  IconPlaceholder,
+  onUpdate,
+  PropsOf,
+  StylesOf,
+  TypeGuards,
+  getNestedStylesByKey,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+export * from './styles'
+
+import {
+  IconComposition,
+  IconPresets,
+} from './styles'
+import { Badge, BadgeComponentProps } from '../Badge'
 import { View } from '../View'
-import { IconProps } from './types'
-import { useNestedStylesByKey, AnyRecord, StyledComponentProps, IJSX, useTheme, StyledComponentWithProps, AppTheme, Theme } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
-export * from './styles'
-export * from './types'
+export type IconProps = {
+  name: IconPlaceholder
+  style?: any
+  color?: string
+  variants?: ComponentVariants<typeof IconPresets>['variants']
+  wrapperProps?: Partial<PropsOf<typeof View>>
+  size?: number
+  styles?: StylesOf<IconComposition>
+  source?: string
+} & BadgeComponentProps
 
 export const IconComponent = (props: IconProps) => {
   const {
     name,
     style,
-    badge,
+    variants,
+    badge = false,
     badgeProps = {},
     wrapperProps = {},
+    styles = {},
     source,
     ...otherProps
-  } = {
-    ...Icon.defaultProps,
-    ...props,
-  }
-
-  const icons = useTheme(store => (store.current as AppTheme<Theme>)?.icons)
-
-  const styles = useStylesFor(Icon.styleRegistryName, style)
-
-  const Component = icons?.[name]
+  } = props
+
+  const { Theme, logger } = useCodeleapContext()
+
+  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconPresets>('u:Icon', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles: {
+      icon: style,
+      ...styles,
+    },
+    rootElement: 'icon',
+  })
+  const Component = Theme?.icons?.[name] || (source && Theme.icons.RenderSource)
+
+  onUpdate(() => {
+    if (!Component && !!name) {
+      logger.warn(
+        `Icon: No icon found in theme for name "${name}".`,
+        { props: { style, name, variants, variantStyles } },
+        'Component',
+      )
+    } else if (!Component && !!source) {
+      logger.warn('Icon: Cannot render source, no RenderSource component in Theme.icons', {
+        source,
+        props: { style, name, variants, variantStyles },
+        Component,
+      }, 'Component')
+    }
+  }, [name])
 
   if (!name && !source) {
     return null
@@ -39,42 +84,32 @@ export const IconComponent = (props: IconProps) => {
   }
 
   if (badge || TypeGuards.isNumber(badge)) {
-    const badgeStyles = useNestedStylesByKey('badge', styles)
+    const badgeStyles = getNestedStylesByKey('badge', variantStyles)
 
     const sized = {
-      // @ts-expect-error
-      height: styles.icon?.size || styles.icon?.height || props?.size,
-      // @ts-expect-error
-      width: styles.icon?.size || styles.icon?.width || props?.size,
+      height: variantStyles.icon?.size || variantStyles.icon?.height || props?.size,
+      width: variantStyles.icon?.size || variantStyles.icon?.width || props?.size,
     }
 
-    return <View {...wrapperProps} style={[sized, styles.iconBadgeWrapper]}>
-      <Component {...otherProps} style={styles.icon} source={source} />
-      <Badge style={badgeStyles} badge={badge} {...badgeProps} />
+    const wrapperStyle = [
+      sized,
+      (variantStyles.iconBadgeWrapper ?? {}),
+    ]
+
+    return <View {...wrapperProps} style={wrapperStyle}>
+      <Component {...otherProps} style={variantStyles.icon} source={source} />
+      <Badge styles={badgeStyles} badge={badge} {...badgeProps} />
     </View>
   }
 
-  return <Component {...otherProps} style={styles.icon} source={source} />
+  return <Component {...otherProps} style={variantStyles.icon} source={source} />
 }
 
 function areEqual(prevProps, nextProps) {
-  const check = ['name', 'style', 'renderEmptySpace', 'badgeProps', 'badge']
+  const check = ['name', 'style', 'variants', 'renderEmptySpace', 'badgeProps', 'badge']
   const res = arePropsEqual(prevProps, nextProps, { check })
   return res
 }
 
-export const Icon = React.memo(IconComponent, areEqual) as StyledComponentWithProps<IconProps>
-
-Icon.styleRegistryName = 'Icon'
-Icon.elements = ['icon', 'iconBadgeWrapper', 'badge']
-Icon.rootElement = 'icon'
-
-Icon.defaultProps = {
-  badge: false,
-} as Partial<IconProps>
-
-Icon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Icon as (props: StyledComponentProps<IconProps, typeof styles>) => IJSX
-}
+export const Icon = React.memo(IconComponent, areEqual) as typeof IconComponent
 
-MobileStyleRegistry.registerComponent(Icon)

package/src/components/Icon/styles.ts

@@ -1,3 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
 export type IconComposition = 'icon' | 'iconBadgeWrapper' | `badge${Capitalize<BadgeComposition>}`
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+export const IconPresets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
+