@codeleap/mobile 2.4.6 → 3.0.2

package/mobile-packages.code-workspace

@@ -0,0 +1,27 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"eslint.alwaysShowStatus": true,
+		"todohighlight.keywords": [
+			"TODO",
+			"NOTES",
+			"NOTE",
+			"FIXME",
+			"HACK",
+			"DISCUSS",
+			"WTF",
+			"REFACTOR"
+		],
+		"todohighlight.defaultStyle": {
+			"color": "red",
+			"border": "2px solid #aaa",
+			"backgroundColor": "#faea00",
+			"fontWeight": "bold",
+			"borderRadius": "3px"
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.4.6",
+  "version": "3.0.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,12 +9,7 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/config": "*",
-    "@types/react-native": "0.66.15",
-    "@types/react-window": "1.8.5",
-    "moti": "0.18.0",
-    "@codeleap/common": "*",
-    "typescript": "4.5.4"
+    "@codeleap/config": "*"
   },
   "scripts": {
     "build": "tsc --build",
@@ -22,34 +17,31 @@
   },
   "peerDependencies": {
     "@codeleap/common": "*",
+    "@react-native-community/async-storage": "1.12.1",
     "@react-native-firebase/messaging": "14.4.0",
-    "@react-navigation/bottom-tabs": "^6.0.9",
-    "@react-navigation/drawer": "^6.1.8",
-    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/native-stack": "^6.2.5",
-    "@react-navigation/stack": "^6.1.1",
-    "moti": "^0.18.0",
-    "react": "17.0.2",
-    "react-native": "0.66.4",
-    "react-native-animatable": "^1.3.3",
-    "react-native-calendars": "*",
-    "react-native-fast-image": "^8.5.11",
-    "react-native-gesture-handler": "^2.2.0",
-    "react-native-image-crop-picker": "*",
-    "react-native-image-viewing": "^0.2.2",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-text-input-mask": "3.1.4",
-    "@react-native-community/async-storage": "*",
-    "react-native-device-info": "10.3.0"
+    "@react-navigation/bottom-tabs": "6.5.3",
+    "@react-navigation/drawer": "6.5.7",
+    "@react-navigation/native": "6.1.2",
+    "@react-navigation/native-stack": "6.9.8",
+    "@react-navigation/stack": "6.3.11",
+    "react": "18.1.0",
+    "react-native": "0.70.6",
+    "react-native-calendars": "1.1293.0",
+    "react-native-date-picker": "^4.2.13",
+    "react-native-device-info": "10.3.0",
+    "react-native-fast-image": "8.6.3",
+    "react-native-gesture-handler": "2.9.0",
+    "react-native-image-crop-picker": "0.37.2",
+    "react-native-image-viewing": "0.2.2",
+    "react-native-keyboard-aware-scroll-view": "0.9.5",
+    "typescript": "4.5.4"
   },
   "dependencies": {
-    "@gorhom/portal": "^1.0.13",
-    "@miblanchard/react-native-slider": "^2.1.0",
-    "date-fns": "^2.28.0",
-    "react-native-animatable": "^1.3.3",
-    "react-native-masked-text": "^1.13.0",
-    "react-native-pose": "^0.9.1",
-    "react-native-super-grid": "^4.4.2",
-    "react-native-uuid": "^2.0.1"
+    "@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

@@ -2,31 +2,41 @@ import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } fro
 import React from 'react'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types'
+import { Badge, BadgeComponentProps } from '../Badge'
 import { Icon, IconProps } from '../Icon'
 import { Touchable, TouchableProps } from '../Touchable'
-import { ActionIconComposition, ActionIconStyles } from './styles'
+import { ActionIconComposition, ActionIconPresets } from './styles'
 
 export type ActionIconProps= {
     iconProps?: Partial<IconProps>
     icon?: IconProps['name']
-    styles?: StylesOf<ActionIconComposition>
-} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconStyles>
+    name?: IconProps['name']
+    styles?: StylesOf<ActionIconComposition> | StylesOf<ActionIconComposition>[]
+} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets> & BadgeComponentProps
 
 export const ActionIcon:React.FC<ActionIconProps> = (props) => {
-  const { icon, iconProps, variants, styles, children, ...touchableProps } = props
-  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconStyles>('u:ActionIcon', {
+  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,
   })
   const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
 
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+
   return <Touchable styles={touchableStyles} {...touchableProps}>
-    <Icon name={icon} style={
+    <Icon name={icon ?? name} style={
       [
         variantStyles.icon,
         touchableProps?.disabled && variantStyles['icon:disabled'],
       ]} {...iconProps}/>
     {children}
+
+    <Badge badge={badge} style={badgeStyles} {...badgeProps} />
   </Touchable>
 }
 
+ActionIcon.defaultProps = {
+  hitSlop: 10,
+}
+
 export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -1,97 +1,10 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { BadgeComposition } from '../Badge'
 import { TouchableComposition } from '../Touchable'
 
-export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}`
+export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}` | `badge${Capitalize<BadgeComposition>}`
 export type ActionIconStates = ':disabled' | ''
 export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
 const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
 
-const presets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))
-
-export const ActionIconStyles = {
-  ...presets,
-  default: createActionIconStyle((theme) => {
-
-    return {
-      icon: {
-        color: theme.colors.icon,
-        ...theme.sized(5 * 0.6),
-
-      },
-      touchableWrapper: {
-        ...theme.sized(5),
-        borderRadius: theme.borderRadius.round,
-        ...theme.presets.center,
-      },
-      'icon:disabled': {
-        color: theme.colors.disabled,
-      },
-
-    }
-  }),
-  originalColor: createActionIconStyle(theme => ({
-    icon: {
-      color: 'auto',
-    },
-  })),
-  small: createActionIconStyle((theme) => ({
-    touchableWrapper: {
-      ...theme.sized(3.5),
-
-    },
-    icon: {
-      ...theme.sized(3.5 * 0.6),
-
-    },
-  })),
-  large: createActionIconStyle((theme) => ({
-    touchableWrapper: {
-      ...theme.sized(6.5),
-
-    },
-    icon: {
-      ...theme.sized(6.5 * 0.6),
-
-    },
-  })),
-  primary: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.primary,
-
-    },
-
-  })),
-  negative: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.negative,
-
-    },
-
-  })),
-  positive: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.positive,
-
-    },
-
-  })),
-  black: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.black,
-
-    },
-
-  })),
-  white: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.white,
-
-    },
-
-  })),
-  neutral: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.neutral,
-    },
-  })),
-}
+export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))

package/src/components/ActivityIndicator/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
+import { forwardRef } from 'react'
+import { ActivityIndicator as Indicator, ActivityIndicatorProps as IndicatorProps, StyleSheet } from 'react-native'
 import {
 
   useDefaultComponentStyle,
@@ -10,20 +10,31 @@ import {
 import { StylesOf } from '../../types'
 import {
   ActivityIndicatorComposition,
-  ActivityIndicatorStyles,
+  ActivityIndicatorPresets,
 } from './styles'
 
 export * from './styles'
-export type ActivityIndicatorProps = ComponentPropsWithoutRef<
-  typeof Indicator
-> & {
-  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
+export type ActivityIndicatorProps =
+  IndicatorProps
+ & {
+  variants?: ComponentVariants<typeof ActivityIndicatorPresets>['variants']
   styles?: StylesOf<ActivityIndicatorComposition>
+  component?: React.ComponentType<Omit<ActivityIndicatorProps & {ref?: React.Ref<Indicator>}, 'component'>>
 }
 
 export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
   (activityIndicatorProps, ref) => {
-    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
+    const { 
+      variants = [], 
+      style, 
+      styles: propStyles, 
+      component, 
+      ...props 
+    } = {
+      ...ActivityIndicator.defaultProps,
+      ...activityIndicatorProps,
+
+    }
 
     const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
       variants,
@@ -37,14 +48,22 @@ export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
     const color = styles?.color || Theme.colors.gray
     const size = styles?.height || styles?.width || 'large'
 
+    const Component = component
+   
+
     return (
-      <Indicator
+      <Component
         size={size}
         ref={ref}
         color={color}
         style={styles}
+        styles={styles}
         {...props}
       />
     )
   },
 )
+
+ActivityIndicator.defaultProps = {
+  component: Indicator,
+}

package/src/components/ActivityIndicator/styles.ts

@@ -6,63 +6,6 @@ export type ActivityIndicatorComposition =
   | 'frontCircle'
   | 'circle'
 
-const createActivityIndicatorStyle =
-  createDefaultVariantFactory<ActivityIndicatorComposition>()
+const createActivityIndicatorStyle = createDefaultVariantFactory<ActivityIndicatorComposition>()
 
-const presets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })),
-)
-
-export const getActivityIndicatorBaseStyles = (size:number) => {
-  const sizes = {
-    height: size,
-    width: size,
-    borderWidth: size * 0.25,
-  }
-
-  return {
-    wrapper: {
-      position: 'relative',
-      ...sizes,
-    } as any,
-    circle: {
-      borderRadius: 100,
-      position: 'absolute',
-      borderStyle: 'solid',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-    } as any,
-    backCircle: {
-
-      // borderColor: theme.colors.primary,
-      minWidth: '100%',
-      opacity: 0.5,
-    } as any,
-    frontCircle: {
-      position: 'absolute',
-      borderColor: 'transparent',
-      // borderTopColor: theme.colors.primary,
-    } as any,
-  }
-}
-
-export const ActivityIndicatorStyles = {
-  ...presets,
-  default: createActivityIndicatorStyle((theme) => {
-    const baseStyles = getActivityIndicatorBaseStyles(35)
-
-    return {
-      ...baseStyles,
-      backCircle: {
-        ...baseStyles.backCircle,
-        borderColor: theme.colors.primary,
-      },
-      frontCircle: {
-        ...baseStyles.frontCircle,
-        borderTopColor: theme.colors.primary,
-      },
-    }
-
-  }),
-}
+export const ActivityIndicatorPresets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })))

package/src/components/Autocomplete/index.tsx

@@ -0,0 +1,235 @@
+import {
+  useDefaultComponentStyle,
+  TypeGuards,
+  useNestedStylesByKey,
+  FormTypes,
+  onMount,
+  useSearch,
+} from '@codeleap/common'
+import React, { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import { List } from '../List'
+import { SearchInput } from '../TextInput'
+import { AutocompletePresets } from './styles'
+import { AutocompleteProps } from './types'
+import { Button } from '../Button'
+import { View } from '../View'
+export * from './styles'
+
+const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
+  return options.filter((option) => {
+    if (TypeGuards.isString(option.label)) {
+      return option.label.toLowerCase().includes(search.toLowerCase())
+    }
+
+    return option.label === search
+  })
+}
+
+const defaultProps:Partial<AutocompleteProps<any, boolean>> = {
+  getLabel(option) {
+
+    if (TypeGuards.isArray(option)) {
+
+      if (option.length === 0) return null
+
+      return option.map(o => o.label).join(', ')
+
+    } else {
+      if (!option) return null
+      return option?.label
+    }
+  },
+  searchInputProps: {},
+  selectedIcon: 'check' as any,
+  searchComponent: SearchInput,
+}
+
+export const Autocomplete = <T extends string|number = string, Multi extends boolean = false>(autocomplete:AutocompleteProps<T, Multi>) => {
+  const allProps = {
+    ...defaultProps,
+    ...autocomplete,
+  }
+
+  const {
+    value,
+    onValueChange,
+    styles = {},
+    options = [],
+    variants,
+    renderItem,
+
+    debugName,
+    placeholder = 'Select',
+    itemProps = {},
+    searchable = true,
+    loadOptions,
+    multiple = false,
+    limit = null,
+    defaultOptions = options,
+    onLoadOptionsError,
+    selectedIcon,
+    loadOptionsOnMount = defaultOptions.length === 0,
+    selectable = false,
+    searchComponent,
+    filterItems = defaultFilterFunction,
+    searchInputProps: searchProps = {},
+    onItemPressed = () => {},
+    ...listProps
+  } = allProps
+
+  const isValueArray = TypeGuards.isArray(value) && multiple
+
+  const {
+    loading,
+    setLoading,
+    labelOptions,
+    setLabelOptions,
+    filteredOptions,
+    load,
+    onChangeSearch,
+  } = useSearch({
+    value,
+    multiple,
+    options,
+    filterItems,
+    debugName,
+    defaultOptions,
+    loadOptions,
+    onLoadOptionsError,
+  })
+
+  onMount(() => {
+    if (loadOptionsOnMount && !!loadOptions) {
+      load()
+    }
+  })
+
+  const variantStyles = useDefaultComponentStyle<'u:Autocomplete', typeof AutocompletePresets>('u:Autocomplete', {
+    transform: StyleSheet.flatten,
+    rootElement: 'inputWrapper',
+    styles,
+    variants,
+  })
+
+  const itemStyles = useNestedStylesByKey('item', variantStyles)
+
+  const listStyles = useNestedStylesByKey('list', variantStyles)
+
+  const currentOptions = searchable ? filteredOptions : defaultOptions
+
+  const select = (selectedValue) => {
+
+    let newValue = null
+
+    let newOption = null
+    let removedIndex = null
+
+    if (multiple && isValueArray) {
+      if (value.includes(selectedValue)) {
+        removedIndex = value.findIndex(v => v === selectedValue)
+
+        newValue = value.filter((v, i) => i !== removedIndex)
+
+      } else {
+
+        if (TypeGuards.isNumber(limit) && value.length >= limit) {
+          return
+        }
+
+        newOption = currentOptions.find(o => o.value === selectedValue)
+
+        newValue = [...value, selectedValue]
+      }
+
+    } else {
+      newValue = selectedValue
+      newOption = currentOptions.find(o => o.value === selectedValue)
+    }
+
+    onValueChange(newValue)
+
+    if (isValueArray) {
+      if (removedIndex !== null) {
+        const newOptions = [...labelOptions]
+        newOptions.splice(removedIndex, 1)
+        setLabelOptions(newOptions)
+      } else {
+        setLabelOptions([...labelOptions, newOption])
+      }
+    } else {
+      setLabelOptions([newOption])
+    }
+
+  }
+
+  const Item = renderItem || Button
+
+  const renderListItem = useCallback(({ item }) => {
+
+    let selected = false
+
+    if (multiple && isValueArray) {
+      selected = value?.includes(item.value)
+    } else {
+      selected = value === item.value
+    }
+
+    return <Item
+      debugName={`${debugName} item ${item.value}`}
+      selected={selectable ? selected : false}
+      text={item.label}
+      item={item}
+      onPress={() => {
+        onItemPressed(item)
+        if (selectable) {
+          select(item.value)
+        }
+      }}
+      // @ts-ignore
+      rightIcon={selectedIcon}
+      // @ts-ignore
+      icon={selectedIcon}
+      styles={itemStyles}
+      {...itemProps}
+    />
+  }, [value, select, multiple, selectable, isValueArray])
+
+  const Search = searchComponent
+
+  return <View style={variantStyles.wrapper}>
+    <Search
+      placeholder={placeholder}
+      debugName={debugName}
+      onTypingChange={(isTyping) => {
+        if (searchable && !!loadOptions) {
+          setLoading(isTyping)
+        }
+      }}
+      debounce={!!loadOptions ? 800 : null}
+      onSearchChange={onChangeSearch}
+      hideErrorMessage
+      {...searchProps}
+    />
+
+    <List<any>
+      data={searchable ? filteredOptions : options}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+      styles={listStyles}
+      // @ts-ignore
+      keyExtractor={(i) => i.value}
+      renderItem={renderListItem}
+      fakeEmpty={loading}
+      placeholder={{
+        loading,
+      }}
+      {...listProps}
+    />
+  </View>
+}
+
+export * from './styles'
+export * from './types'
+
+Autocomplete.defaultProps = defaultProps

package/src/components/Autocomplete/styles.ts

@@ -0,0 +1,18 @@
+import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
+import { ListComposition } from '../List'
+
+type ItemStates = '' | ':selected'
+
+type ItemParts = ButtonComposition
+
+type ItemComposition = `${ItemParts}${ItemStates}` | ItemParts
+
+export type AutocompleteComposition =
+  'wrapper' |
+  `list${Capitalize<ListComposition>}` |
+  `item${Capitalize<ItemComposition>}` |
+  `searchInput${Capitalize<TextInputComposition>}`
+
+const createSelectStyle = createDefaultVariantFactory<AutocompleteComposition>()
+
+export const AutocompletePresets = includePresets((style) => createSelectStyle(() => ({ wrapper: style })))