@codeleap/mobile 1.9.32 → 2.0.1

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>
@@ -71,7 +38,11 @@ export const Backdrop = (backdropProps:BackdropProps) => {
   }, [visible, animationStates])
 
   return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
-    <Touchable feedbackVariant='none' style={variantStyles.touchable} {...props} />
+    {
+      props?.onPress ?
+        <Touchable feedbackVariant='none' style={variantStyles.touchable} {...props} 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,
+    },
+  })),
+}

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

@@ -1,20 +1,32 @@
 import * as React from 'react'
 import {
   useDefaultComponentStyle,
-  ButtonStyles,
   ComponentVariants,
-  ButtonComposition,
-  ButtonParts,
+
   IconPlaceholder,
   GetRefType,
+  SmartOmit,
+  TypeGuards,
+  deepMerge,
+  PropsOf,
+  standardizeVariants,
+  useCodeleapContext,
 } 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 { Platform, PressableAndroidRippleConfig, StyleSheet } from 'react-native'
+export * from './styles'
 
 type ChildProps = {
   styles: StylesOf<ButtonParts>
@@ -22,6 +34,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 +51,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 +80,7 @@ export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>
     styles = {},
     onPress,
     disabled,
+    badge = null,
     rightIcon,
     debounce = 600,
     style,
@@ -51,7 +88,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,16 +135,32 @@ 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 || {})}/>
+
+  }
+
+  let android_ripple:PressableAndroidRippleConfig = null
+
+  if (Platform.OS === 'android' && !!variantStyles.ripple) {
+    android_ripple = variantStyles.ripple
+  }
   return (
     <Touchable
       style={_styles.wrapper}
       onPress={handlePress}
       ref={ref}
       disabled={disabled}
+      android_ripple={android_ripple}
       debugComponent={'Button'}
       {...props}
     >
-
+      {_badge}
       {loading && <ActivityIndicator style={_styles.loader} />}
       {!loading && <Icon name={icon} style={_styles.leftIcon} renderEmptySpace={hasText}/>}
       {text ? <Text text={text} style={_styles.text} /> : null}

package/src/components/Button/styles.ts

@@ -0,0 +1,105 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type ButtonStates = 'disabled'
+export type ButtonParts = 'text' | 'inner' |'wrapper' | 'icon' | 'leftIcon' | 'rightIcon' | 'loader' | `loader${Capitalize<ActivityIndicatorComposition>}` |
+  'badgeText' | 'badgeWrapper' | 'ripple'
+export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+
+const createButtonStyle = createDefaultVariantFactory<ButtonComposition>()
+
+const presets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))
+
+export const ButtonStyles = {
+  ...presets,
+  default: createButtonStyle((theme) => ({
+    wrapper: {
+      cursor: 'pointer',
+      border: 'none',
+      outline: 'none',
+      display: 'flex',
+      flexDirection: 'row',
+      backgroundColor: theme.colors.primary,
+      ...theme.presets.alignCenter,
+
+    },
+    text: {
+      flex: 1,
+      textAlign: 'center',
+    },
+    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,
+    },
+
+  })),
+  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),
+    },
+  })),
+}

package/src/components/Calendar/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { ComponentVariants, PropsOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { format, formatISO } from 'date-fns'
+// @ts-ignore
+import { Calendar as RNCalendar, CalendarProps as RNCalendarProps, DateData } from 'react-native-calendars'
+
+import { View } from '../View'
+import { CalendarStyles } from './style'
+import { TCalendarStyles } from './types'
+export type CalendarProps = PropsOf<typeof View> & {
+  styles?: TCalendarStyles
+  onValueChange?: (date: Date|string) => any
+  value?: Date|string
+  calendarProps?: RNCalendarProps
+} & ComponentVariants<typeof CalendarStyles>
+export * from './style'
+export * from './types'
+
+export const Calendar = (props:CalendarProps) => {
+  const {
+    variants = [],
+    style,
+    styles = {},
+    calendarProps,
+    value,
+    onValueChange,
+    ...viewProps
+  } = props
+  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarStyles>('u:Calendar', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+  })
+  const isDateObject = TypeGuards.isInstance(value, Date)
+  const stringValue:string = isDateObject ? format(value, 'yyyy/MM/dd') : value
+
+  function handleChange(date:DateData) {
+    if (!onValueChange) return
+    if (isDateObject) {
+      onValueChange(new Date(date.timestamp))
+    } else {
+      onValueChange(date.dateString)
+    }
+  }
+
+  return <View style={[variantStyles.wrapper, style]} {...viewProps}>
+    <RNCalendar
+      onDayPress={handleChange}
+      current={new Date(value).toISOString()}
+      monthFormat={'MMMM yyyy'}
+      markedDates={{
+        [stringValue]: { selected: true },
+      }}
+      theme={{
+        ...variantStyles.theme,
+        stylesheet: {
+          ...variantStyles,
+        },
+      }}
+      {...calendarProps}
+    />
+  </View>
+}

package/src/components/Calendar/style.ts

@@ -0,0 +1,35 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { TCalendarStyles, CalendarComposition } from './types'
+
+const createCalendarStyle = createDefaultVariantFactory<CalendarComposition, TCalendarStyles>()
+
+export const CalendarStyles = {
+  default: createCalendarStyle((theme) => ({
+    theme: {
+      backgroundColor: '#0000',
+      calendarBackground: '#0000',
+      textSectionTitleColor: theme.colors.textH,
+      textSectionTitleDisabledColor: theme.colors.disabled,
+      selectedDayBackgroundColor: theme.colors.primary,
+      selectedDayTextColor: theme.colors.white,
+      todayTextColor: theme.colors.textH,
+      dayTextColor: theme.colors.textP,
+      textDisabledColor: theme.colors.disabled,
+      dotColor: theme.colors.primary,
+      selectedDotColor: theme.colors.primary,
+      arrowColor: theme.colors.primary,
+      disabledArrowColor: theme.colors.disabled,
+      monthTextColor: theme.colors.textH,
+      indicatorColor: theme.colors.backgroundSecondary,
+      textDayFontFamily: theme.typography.fontFamily,
+      textMonthFontFamily: theme.typography.fontFamily,
+      textDayHeaderFontFamily: theme.typography.fontFamily,
+      textDayFontWeight: '400',
+      textMonthFontWeight: 'bold',
+      textDayHeaderFontWeight: '400',
+      textDayFontSize: 16,
+      textMonthFontSize: 22,
+      textDayHeaderFontSize: 15,
+    },
+  })),
+}