@codeleap/mobile 1.9.33 → 2.0.2

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/AutoComplete/index.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react'
+import { ComponentVariants,
+  FormTypes,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  onUpdate,
+  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> & {
+    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 } = props
+
+  return <View style={[styles.wrapper]}>
+    <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 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
+    {...selectProps}
+    styles={variantStyles}
+    options={ loading ? [] : filteredOptions}
+    listProps={{
+      ...selectProps?.listProps,
+      placeholder: {
+        loading,
+        ...selectProps?.listProps?.placeholder,
+      },
+    }}
+    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}
+      />
+    }
+  />
+
+}
+export * from './styles'

package/src/components/AutoComplete/styles.ts

@@ -0,0 +1,49 @@
+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.presets.column,
+        ...theme.presets.alignStart,
+      },
+      box: {
+        minHeight: theme.values.height * 0.85,
+        maxHeight: theme.values.height * 0.85,
+      },
+      listContent: {
+        ...theme.presets.safeAreaBottom(0, true),
+      },
+      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.tsx → Backdrop/index.tsx}

@@ -1,48 +1,15 @@
 import React from 'react'
 import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
-import { useAnimationState, useDynamicAnimation } from 'moti'
-import { Touchable } from './Touchable'
-import { View } from './View'
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-import { StylesOf } from '../types/utility'
-import { StyleSheet } from 'react-native'
-import { useStaticAnimationStyles } from '../utils/hooks'
-
-type BackdropComposition =
- 'wrapper'|
-'touchable' |
-'wrapper:visible' |
-'wrapper:hidden'
-
-const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
-
-const presets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
+import { useDynamicAnimation } from 'moti'
+import { Touchable } from '../Touchable'
+import { View } from '../View'
 
-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,
-    },
-  })),
-}
+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>
@@ -73,7 +40,7 @@ export const Backdrop = (backdropProps:BackdropProps) => {
   return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
     {
       props?.onPress ?
-        <Touchable feedbackVariant='none' style={variantStyles.touchable} {...props} />
+        <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>
         : null
     }
     {children}

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,
+    },
+  })),
+}

package/src/components/{Button.tsx → Button/index.tsx}

@@ -1,20 +1,30 @@
 import * as React from 'react'
 import {
   useDefaultComponentStyle,
-  ButtonStyles,
   ComponentVariants,
-  ButtonComposition,
-  ButtonParts,
+
   IconPlaceholder,
   GetRefType,
+  SmartOmit,
+  TypeGuards,
+  deepMerge,
+  PropsOf,
 } from '@codeleap/common'
+
+import {
+  ButtonStyles,
+  ButtonComposition,
+  ButtonParts,
+} from './styles'
 import { forwardRef } from 'react'
-import { StylesOf } from '../types/utility'
-import { Text } from './Text'
-import { Touchable, TouchableProps } from './Touchable'
-import { Icon } from './Icon'
-import { ActivityIndicator } from './ActivityIndicator'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StylesOf } from '../../types/utility'
+import { Text } from '../Text'
+import { Touchable, TouchableProps } from '../Touchable'
+import { Icon } from '../Icon'
+import { View, ViewProps } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { StyleSheet } from 'react-native'
+export * from './styles'
 
 type ChildProps = {
   styles: StylesOf<ButtonParts>
@@ -22,6 +32,14 @@ type ChildProps = {
   props: Omit<ButtonProps, 'children'>
 }
 
+type BadgeProps = Partial<ViewProps> & {
+  text?: string
+  children?: React.ReactElement | ((props: Partial<SmartOmit<BadgeProps, 'children'>>) => React.ReactElement)
+  styles?: StylesOf<'text'|'wrapper'>
+  position?: [number, number]
+  textProps?: Partial<PropsOf<typeof Text>>
+}
+
 export type ButtonProps = Omit<TouchableProps, 'variants'> &
   ComponentVariants<typeof ButtonStyles> & {
     text?: string
@@ -31,9 +49,25 @@ export type ButtonProps = Omit<TouchableProps, 'variants'> &
     loading?: boolean
     debounce?: number
     debugName: string
+    badge?: React.ReactElement | BadgeProps
     children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
   }
 
+export const Badge = forwardRef<GetRefType<ViewProps['ref']>, BadgeProps>((props, ref) => {
+  const {
+    children = null,
+    styles,
+    text,
+    textProps = {},
+    ...viewProps
+  } = props
+
+  return <View style={[styles.wrapper]} {...viewProps} ref={ref}>
+    {text && <Text text={text} style={styles.text} {...textProps}/>}
+    {(TypeGuards.isFunction(children) ? children({ ...viewProps, styles, text }) : children)}
+  </View>
+})
+
 export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>((buttonProps, ref) => {
   const {
     variants = [],
@@ -44,6 +78,7 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
     styles = {},
     onPress,
     disabled,
+    badge = null,
     rightIcon,
     debounce = 600,
     style,
@@ -51,7 +86,7 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
   } = buttonProps
   const [pressed, setPressed] = React.useState(false)
 
-  const variantStyles = useDefaultComponentStyle('Button', {
+  const variantStyles = useDefaultComponentStyle('u:Button', {
     variants,
     transform: StyleSheet.flatten,
     styles,
@@ -98,21 +133,35 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
     children({ styles: _styles, props: buttonProps, pressed })
     : children
 
+  let _badge = null
+
+  if (badge) {
+    _badge = React.isValidElement(badge) ? badge : <Badge {...badge} styles={deepMerge({
+      text: variantStyles.badgeText,
+      wrapper: variantStyles.badgeWrapper,
+    }, badge?.styles || {})}/>
+
+  }
+
   return (
     <Touchable
       style={_styles.wrapper}
       onPress={handlePress}
       ref={ref}
       disabled={disabled}
+      styles={{
+        feedback: variantStyles.feedback,
+      }}
       debugComponent={'Button'}
+      noFeedback={!onPress}
       {...props}
     >
-
+      {_badge}
       {loading && <ActivityIndicator style={_styles.loader} />}
-      {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText}/>}
+      {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText && !!rightIcon}/>}
       {text ? <Text text={text} style={_styles.text} /> : null}
       {childrenContent}
-      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={hasText} />
+      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={hasText && !!icon} />
     </Touchable>
   )
 })

package/src/components/Button/styles.ts

@@ -0,0 +1,129 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { TouchableStylesGen } from '../Touchable'
+
+export type ButtonStates = 'disabled'
+export type ButtonParts =
+| 'text'
+| 'inner'
+| 'wrapper'
+| 'icon'
+| 'leftIcon'
+| 'rightIcon'
+| 'loader'
+| `loader${Capitalize<ActivityIndicatorComposition>}`
+| 'badgeText'
+| 'badgeWrapper'
+
+export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+
+export type ButtonStylesGen<TCSS = any> = StylesOf<ButtonComposition, TCSS> & {
+  feedback?: TouchableStylesGen['feedback']
+}
+
+const createButtonStyle = createDefaultVariantFactory<ButtonComposition, ButtonStylesGen >()
+
+const presets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))
+
+export const ButtonStyles = {
+  ...presets,
+  default: createButtonStyle((theme) => ({
+    wrapper: {
+
+      flexDirection: 'row',
+      backgroundColor: theme.colors.primary,
+      ...theme.presets.justifyCenter,
+      ...theme.presets.alignCenter,
+      ...theme.spacing.paddingHorizontal(2.5),
+    },
+    text: {
+      textAlign: 'center',
+      // ...theme.spacing.marginHorizontal(2.5),
+    },
+    loader: {
+      height: 20,
+      width: 20,
+    },
+
+    loaderFrontCircle: {
+      borderTopColor: theme.colors.white,
+    },
+    'wrapper:disabled': {
+      backgroundColor: theme.colors.disabled,
+      opacity: 0.9,
+      cursor: 'auto',
+
+    },
+    badgeWrapper: {
+      backgroundColor: theme.colors.negative,
+      position: 'absolute',
+      ...theme.spacing.padding(2.5),
+    },
+    badgeText: {
+      color: theme.colors.white,
+    },
+
+    leftIcon: {
+      ...theme.sized(4),
+      ...theme.spacing.marginRight('auto'),
+      // ...theme.spacing.marginLeft(2.5),
+    },
+    rightIcon: {
+      ...theme.spacing.marginLeft('auto'),
+      // ...theme.spacing.marginRight(2.5),
+      ...theme.sized(4),
+    },
+
+  })),
+  negative: createButtonStyle((theme) => ({
+    wrapper: {
+      backgroundColor: theme.colors.negative,
+
+    },
+
+  })),
+
+  circle: createButtonStyle((theme) => ({
+    wrapper: {
+      borderRadius: 100,
+      ...theme.spacing.padding(1),
+    },
+  })),
+  pill: createButtonStyle((theme) => ({
+    wrapper: {
+      borderRadius: theme.borderRadius.medium,
+      ...theme.spacing.paddingHorizontal(1),
+      ...theme.spacing.paddingVertical(0.5),
+    },
+  })),
+  icon: createButtonStyle((theme) => ({
+    wrapper: {
+      backgroundColor: 'transparent',
+      aspectRatio: 1,
+      display: 'flex',
+      ...theme.presets.center,
+      ...theme.spacing.padding(0),
+
+    },
+    text: {
+      flex: 1,
+      textAlign: 'center',
+    },
+    loader: {
+      ...theme.spacing.margin(0),
+    },
+    icon: {
+      ...theme.spacing.margin(0),
+      ...theme.presets.center,
+      height: null,
+      width: null,
+      color: theme.colors.icon,
+    },
+    leftIcon: {
+      ...theme.spacing.marginRight(0),
+    },
+    rightIcon: {
+      ...theme.spacing.marginRight(0),
+    },
+  })),
+}