@codeleap/mobile 2.2.11 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.2.11",
+  "version": "2.3.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -44,6 +44,7 @@
     "@miblanchard/react-native-slider": "^2.1.0",
     "date-fns": "^2.28.0",
     "react-native-animatable": "^1.3.3",
+    "react-native-device-info": "^10.3.0",
     "react-native-masked-text": "^1.13.0",
     "react-native-pose": "^0.9.1",
     "react-native-super-grid": "^4.4.2",

package/src/components/ActionIcon/index.tsx

@@ -1,32 +0,0 @@
-import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types'
-import { Icon, IconProps } from '../Icon'
-import { Touchable, TouchableProps } from '../Touchable'
-import { ActionIconComposition, ActionIconStyles } from './styles'
-
-export type ActionIconProps= {
-    iconProps?: Partial<IconProps>
-    icon?: IconProps['name']
-    styles?: StylesOf<ActionIconComposition>
-} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconStyles>
-
-export const ActionIcon:React.FC<ActionIconProps> = (props) => {
-  const { icon, iconProps, variants, styles, children, ...touchableProps } = props
-  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconStyles>('u:ActionIcon', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
-  const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
-
-  return <Touchable styles={touchableStyles} {...touchableProps}>
-    <Icon name={icon} style={
-      [
-        variantStyles.icon,
-        touchableProps?.disabled && variantStyles['icon:disabled'],
-      ]} {...iconProps}/>
-    {children}
-  </Touchable>
-}
-
-export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -1,97 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { TouchableComposition } from '../Touchable'
-
-export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}`
-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,
-    },
-  })),
-}

package/src/components/ActivityIndicator/index.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
-import {
-
-  useDefaultComponentStyle,
-  ComponentVariants,
-  useCodeleapContext,
-} from '@codeleap/common'
-import { StylesOf } from '../../types'
-import {
-  ActivityIndicatorComposition,
-  ActivityIndicatorStyles,
-} from './styles'
-
-export * from './styles'
-export type ActivityIndicatorProps = ComponentPropsWithoutRef<
-  typeof Indicator
-> & {
-  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
-  styles?: StylesOf<ActivityIndicatorComposition>
-}
-
-export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
-  (activityIndicatorProps, ref) => {
-    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
-
-    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
-      variants,
-      transform: StyleSheet.flatten,
-      styles: propStyles,
-    })
-
-    const { Theme } = useCodeleapContext()
-
-    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-    const color = styles?.color || Theme.colors.gray
-    const size = styles?.height || styles?.width || 'large'
-
-    return (
-      <Indicator
-        size={size}
-        ref={ref}
-        color={color}
-        style={styles}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/ActivityIndicator/styles.ts

@@ -1,68 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type ActivityIndicatorComposition =
-  | 'wrapper'
-  | 'backCircle'
-  | 'frontCircle'
-  | 'circle'
-
-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,
-      },
-    }
-
-  }),
-}

package/src/components/Animated.tsx

@@ -1,34 +0,0 @@
-import { onUpdate } from '@codeleap/common'
-import React, { useRef } from 'react'
-
-import posed from 'react-native-pose'
-import { Touchable } from './Touchable'
-import { View } from './View'
-const Components = {
-  Touchable,
-  View,
-}
-
-const PosedComponents = Object.fromEntries(
-  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
-)
-
-type AnimatedComponents = typeof Components
-type CP = keyof AnimatedComponents
-
-type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
-  component: T
-  config: CFG
-  pose: keyof CFG
-  initialPose?: keyof CFG
-} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
-
-export const Animated = <T extends CP, CFG = any>({
-  config,
-  component,
-  ...props
-}: AnimatedProps<T, CFG>) => {
-  const Component = useRef(PosedComponents[component](config)).current
-
-  return <Component withParent={false} {...props} />
-}

package/src/components/AutoComplete/index.tsx

@@ -1,163 +0,0 @@
-import * as React from 'react'
-import { ComponentVariants,
-  FormTypes,
-  getNestedStylesByKey,
-  IconPlaceholder,
-  onUpdate,
-  PropsOf,
-  ReactStateProps,
-  TypeGuards,
-  useDebounce,
-  useDefaultComponentStyle,
-  useMemo,
-  useState,
-} from '@codeleap/common'
-import { ModalHeaderProps } from '../Modal'
-import { TextInput, TextInputProps } from '../TextInput'
-import { View, ViewProps } from '../View'
-import { CustomSelectProps, Select } from '../Select'
-import { AutoCompleteStyles, AutoCompleteComposition } from './styles'
-import { StylesOf } from '../../types'
-import { StyleSheet } from 'react-native'
-import { Text } from '../Text'
-import { Button } from '../Button'
-
-export type AutoCompleteHeaderProps = ReactStateProps<'search', string> &
-  Omit<PropsOf<typeof View>, 'style'|'styles'|'variants'>
-& {
-    label: FormTypes.Label
-    searchInputProps?: Partial<TextInputProps>
-    styles: ModalHeaderProps['styles'] & { searchInput?: TextInputProps['styles']; titleWrapper?:ViewProps['style']}
-    debugName: string
-    icon?: IconPlaceholder
-    toggle: ModalHeaderProps['toggle']
-  }
-
-export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
-  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps, ...viewProps } = props
-
-  return <View style={[styles.wrapper]} {...viewProps}>
-    <View style={styles.titleWrapper}>
-      <Text style={styles.title} text={label}/>
-      <Button
-        icon={'close' as IconPlaceholder}
-        debugName={`Close Autocomplete ${debugName} button`}
-        onPress={toggle} variants={['icon']}
-        styles={styles.closeButton}/>
-    </View>
-    <TextInput subtitle={() => null} leftIcon={{
-      icon: icon as IconPlaceholder,
-    }} debugName={`AutoComplete ${debugName} search input`} value={search} onChangeText={setSearch} styles={styles.searchInput} {...searchInputProps}/>
-  </View>
-}
-
-export type AutoCompleteOption<T> = CustomSelectProps<T>['options'][number] & {searchTerm?: string}
-
-export type AutoCompleteProps<
-    T,
-    Base extends CustomSelectProps<T> = CustomSelectProps<T>
-  > = Omit<Base, 'options'| 'variants' | 'styles'> & {
-    options: AutoCompleteOption<T>[]
-    caseSensitive?: boolean
-    debounce?: number
-    headerProps?: Partial<AutoCompleteHeaderProps>
-    styles?: StylesOf<AutoCompleteComposition>
-    filterFn?: (search?: string, option?:AutoCompleteOption<T>) => boolean
-  } & ComponentVariants<typeof AutoCompleteStyles>
-
-export const AutoComplete = <T extends string|number = string>(props: AutoCompleteProps<T>) => {
-  const {
-    options,
-    caseSensitive = false,
-    debounce = 200,
-    filterFn,
-    headerProps = {},
-    variants,
-    styles,
-    ...selectProps
-  } = props
-
-  const [search, setSearch] = useState('')
-  const [debouncedSearch, resetDebounce] = useDebounce(search, debounce)
-  const [filteredOptions, setFilteredOptions] = useState(options)
-
-  const [loading, setLoading] = useState(false)
-  const variantStyles = useDefaultComponentStyle<'u:AutoComplete', typeof AutoCompleteStyles>('u:AutoComplete', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-  const serialVariants = JSON.stringify(variantStyles)
-  const { searchInputStyles, closeButtonStyles } = useMemo(() => ({
-    searchInputStyles: getNestedStylesByKey('searchInput', variantStyles),
-    closeButtonStyles: getNestedStylesByKey('closeButton', variantStyles),
-
-  }), [serialVariants])
-
-  onUpdate(() => {
-    setLoading(true)
-    let persist = true
-    setTimeout(() => {
-
-      const newOpts = options.filter((option) => {
-        if (filterFn) {
-          return filterFn(debouncedSearch, option)
-        }
-        const { label, searchTerm, value } = option
-        let term = searchTerm || (TypeGuards.isString(label) ? label : value.toString())
-
-        if (!caseSensitive) {
-          term = term.toLowerCase()
-        }
-
-        return term.includes(debouncedSearch.toLowerCase())
-      })
-      if (persist) {
-        setFilteredOptions(newOpts)
-        setTimeout(() => {
-          if (persist) {
-            setLoading(false)
-          }
-        }, debounce * 1.5)
-      }
-
-    })
-    return () => {
-      persist = false
-      resetDebounce()
-    }
-  }, [debouncedSearch, caseSensitive, options.length, filterFn])
-  return <Select
-    styles={variantStyles}
-    options={ loading ? [] : filteredOptions}
-    header={
-      <AutoCompleteHeader
-        debugName={selectProps.debugName}
-        label={selectProps.label}
-        search={search}
-        setSearch={setSearch}
-        toggle={selectProps.toggle}
-        styles={{
-          wrapper: variantStyles.header,
-          closeButton: closeButtonStyles,
-          title: variantStyles.title,
-          searchInput: searchInputStyles,
-          titleWrapper: variantStyles.titleWrapper,
-        }}
-
-        {...headerProps}
-      />
-    }
-
-    {...selectProps}
-    listProps={{
-      ...selectProps?.listProps,
-      placeholder: {
-        loading,
-        ...selectProps?.listProps?.placeholder,
-      },
-    }}
-  />
-
-}
-export * from './styles'

package/src/components/AutoComplete/styles.ts

@@ -1,44 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
-import { SelectComposition, SelectStyles } from '../Select'
-import { TextInputComposition } from '../TextInput'
-
-export type AutoCompleteComposition = SelectComposition | `searchInput${Capitalize<TextInputComposition>}` | 'titleWrapper'
-
-const createAutoCompleteStyle = createDefaultVariantFactory<AutoCompleteComposition>()
-
-export const AutoCompleteStyles = {
-  ...SelectStyles,
-  default: createAutoCompleteStyle((theme) => {
-    const defaultStyle = SelectStyles.default(theme)
-
-    return {
-      ...defaultStyle,
-      header: {
-        ...theme.spacing.paddingHorizontal(2),
-        ...theme.spacing.paddingTop(1),
-        ...theme.presets.column,
-        ...theme.presets.alignStart,
-      },
-
-      searchInputWrapper: {
-        ...theme.presets.fullWidth,
-        ...theme.spacing.marginTop(2),
-      },
-
-      titleWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.alignCenter,
-        ...theme.presets.fullWidth,
-        ...theme.presets.justifyCenter,
-      },
-      title: {
-        ...theme.presets.textCenter,
-        flex: 1,
-      },
-      closeButtonWrapper: {
-        position: 'absolute',
-        right: 0,
-      },
-    }
-  }),
-}

package/src/components/Backdrop/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
-import { useDynamicAnimation } from 'moti'
-import { Touchable } from '../Touchable'
-import { View } from '../View'
-
-import { StylesOf } from '../../types/utility'
-import { StyleSheet } from 'react-native'
-import { useStaticAnimationStyles } from '../../utils'
-import { BackdropComposition, BackdropStyles } from './styles'
-
-export * from './styles'
-export type BackdropProps = PropsOf<typeof Touchable> & {
-    visible: boolean
-    wrapperProps?: PropsOf<typeof View>
-    variants?: ComponentVariants<typeof BackdropStyles>['variants']
-    styles?: StylesOf<BackdropComposition>
-}
-
-export const Backdrop = (backdropProps:BackdropProps) => {
-  const { variants = [], styles = {}, visible, children, wrapperProps = {}, ...props } = backdropProps
-
-  const variantStyles = useDefaultComponentStyle<'u:Backdrop', typeof BackdropStyles>('u:Backdrop', {
-    variants,
-    rootElement: 'wrapper',
-    styles,
-    transform: StyleSheet.flatten,
-  })
-
-  const animationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden', 'wrapper:visible'])
-
-  const animation = useDynamicAnimation(() => {
-    return visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden']
-  })
-
-  onUpdate(() => {
-    animation.animateTo(visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden'])
-  }, [visible, animationStates])
-
-  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
-    {
-      props?.onPress ?
-        <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>
-        : null
-    }
-    {children}
-  </View>
-}

package/src/components/Backdrop/styles.ts

@@ -1,33 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type BackdropComposition =
- 'wrapper'|
-'touchable' |
-'wrapper:visible' |
-'wrapper:hidden'
-
-const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
-
-const presets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
-
-export const BackdropStyles = {
-  ...presets,
-  default: createBackdropVariant((theme) => ({
-    wrapper: {
-      backgroundColor: theme.colors.black,
-      ...theme.presets.whole,
-      ...theme.presets.absolute,
-    },
-    'wrapper:visible': {
-      opacity: 0.5,
-    },
-    'wrapper:hidden': {
-
-      opacity: 0,
-    },
-    touchable: {
-      ...theme.presets.whole,
-      ...theme.presets.absolute,
-    },
-  })),
-}