@codeleap/mobile 2.3.8 → 2.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.3.8",
+  "version": "2.3.12",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -17,8 +17,7 @@
   },
   "scripts": {
     "build": "tsc --build",
-    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
-    "publish": "npm publish"
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
     "@codeleap/common": "*",

package/src/components/ActionIcon/index.tsx

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,33 @@
+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,
+    },
+  })),
+}