@codeleap/mobile 2.3.0 → 2.3.2

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

package/src/components/Button/index.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+
+  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 { View, ViewProps } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { StyleSheet } from 'react-native'
+export * from './styles'
+
+type ChildProps = {
+  styles: StylesOf<ButtonParts>
+  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
+    rightIcon?: IconPlaceholder
+    icon?: IconPlaceholder
+    styles?: StylesOf<ButtonComposition>
+    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 = [],
+    children,
+    icon,
+    text,
+    loading,
+    styles = {},
+    onPress,
+    disabled,
+    badge = null,
+    rightIcon,
+    style,
+    ...props
+  } = buttonProps
+
+  const variantStyles = useDefaultComponentStyle('u:Button', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  function getStyles(key: ButtonParts) {
+    return [
+      variantStyles[key],
+      key === 'wrapper' && style,
+      disabled && variantStyles[key + ':disabled'],
+      styles[key],
+      disabled && styles[key + ':disabled'],
+    ]
+  }
+
+  const iconStyle = getStyles('icon')
+
+  const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
+  const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
+
+  const hasText = !!(text || children)
+
+  const _styles = {
+    wrapper: getStyles('wrapper'),
+    loader: getStyles('loader'),
+    leftIcon: leftIconStyle,
+    rightIcon: rightIconStyle,
+    text: getStyles('text'),
+    icon: getStyles('icon'),
+
+  }
+
+  const childrenContent = TypeGuards.isFunction(children) ?
+    // @ts-ignore
+    children({ styles: _styles, props: buttonProps })
+    : 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}
+      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 && !!rightIcon}/>}
+      {text ? <Text text={text} style={_styles.text} /> : null}
+      {childrenContent}
+      <Icon name={rightIcon} style={_styles.rightIcon} renderEmptySpace={(hasText && !!icon) || loading} />
+    </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),
+    },
+  })),
+}

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