@codeleap/mobile 2.4.7 → 3.0.2

package/src/components/Autocomplete/types.ts

@@ -0,0 +1,75 @@
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  PropsOf,
+} from '@codeleap/common'
+import { AutocompletePresets } from '.'
+import { StylesOf } from '../../types/utility'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
+import { Icon } from '../Icon'
+import { FlatListProps } from '../List'
+import { Text } from '../Text'
+import { SearchInputProps, TextInputProps } from '../TextInput'
+import { Touchable } from '../Touchable'
+import { AutocompleteComposition } from './styles'
+
+export type AutocompleteRenderFNProps<T> = {
+  styles: StylesOf<AutocompleteComposition>
+  onPress: () => void
+  isSelected?: boolean
+  item: FormTypes.Options<T>[number]
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  textProps?: Partial<PropsOf<typeof Text>>
+  iconProps?: Partial<PropsOf<typeof Icon>>
+}
+
+export type AutocompleteRenderFN<T> = (props: AutocompleteRenderFNProps<T>) => JSX.Element
+
+export type AutocompleteValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
+
+export type ValueBoundAutocompleteProps<T, Multi extends boolean = false> = {
+  options?: FormTypes.Options<T>
+  defaultOptions?: FormTypes.Options<T>
+  loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
+  value: AutocompleteValue<T, Multi>
+  renderItem?: AutocompleteRenderFN<AutocompleteValue<T, Multi>>
+  onValueChange: (value: AutocompleteValue<T, Multi>) => void
+  filterItems?: (search: string, items: FormTypes.Options<T>) => FormTypes.Options<T>
+  onLoadOptionsError?: (error: any) => void
+  multiple?: Multi
+  getLabel?: (forOption: Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]) => FormTypes.Label
+  onItemPressed?: (item: FormTypes.Options<T>[number]) => any
+}
+
+export type ReplaceAutocompleteProps<Props, T, Multi extends boolean = false> = Omit<
+  Props,
+  keyof ValueBoundAutocompleteProps<T, Multi>
+> & ValueBoundAutocompleteProps<T, Multi>
+
+export type AutocompleteProps<T = any, Multi extends boolean = false> = {
+    placeholder?: string
+    label?: FormTypes.Label
+    styles?: StylesOf<AutocompleteComposition>
+    style?: TextInputProps['style']
+    closeOnSelect?: boolean
+    listProps?: Partial<FlatListProps>
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    multiple?: Multi
+    itemProps?: Partial<
+      Pick<AutocompleteRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
+    >>
+    searchable?: boolean
+    limit?: number
+    selectedIcon?: IconPlaceholder
+    loadOptionsOnMount?: boolean
+    loadOptionsOnOpen?: boolean
+    selectable?: boolean
+    searchInputProps?: Partial<SearchInputProps>
+    debugName: string
+    searchComponent?: React.ComponentType<SearchInputProps>
+  }
+    & Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>
+    & ComponentVariants<typeof AutocompletePresets>
+    & ValueBoundAutocompleteProps<T, Multi>
+

package/src/components/Avatar/index.tsx

@@ -0,0 +1,126 @@
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  TypeGuards,
+  matchInitialToColor,
+  useDefaultComponentStyle,
+  useMemo,
+  getNestedStylesByKey,
+} from '@codeleap/common'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { AvatarComposition, AvatarPresets } from './styles'
+import { Image, ImageProps } from '../Image'
+import { Touchable } from '../Touchable'
+import { Text } from '../Text'
+import { View, ViewProps } from '../View'
+import { Icon } from '../Icon'
+import { Badge, BadgeComponentProps } from '../Badge'
+
+export type AvatarProps = ComponentVariants<typeof AvatarPresets> & {
+  styles?: StylesOf<AvatarComposition>
+  image?: ImageProps['source']
+  name?: string | string[]
+  debugName: string
+  firstNameOnly?: boolean
+  text?: string
+  description?: string
+  icon?: IconPlaceholder
+  badgeIcon?: IconPlaceholder
+  style?: ViewProps['style']
+  onPress?: () => void
+  noFeedback?: boolean
+} & BadgeComponentProps
+
+export const Avatar: React.FC<AvatarProps> = (props) => {
+  const {
+    debugName,
+    name = '',
+    firstNameOnly = true,
+    image,
+    variants = [],
+    styles,
+    style,
+    icon,
+    badgeIcon,
+    text,
+    description,
+    onPress,
+    noFeedback,
+    badge = false,
+    badgeProps = {},
+    ...viewProps
+  } = props
+
+  const variantStyles = useDefaultComponentStyle('u:Avatar', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  const hasImage = !!image
+
+  const { initials, randomColor } = useMemo(() => {
+    const [first = '', last = ''] = TypeGuards.isString(name)
+      ? name.split(' ')
+      : name
+    const initials = [first[0]]
+    if (!firstNameOnly) {
+      initials.push(last[0])
+    }
+    return {
+      initials: initials.join(' '),
+      randomColor: matchInitialToColor(first[0]),
+    }
+  }, [name, firstNameOnly])
+
+  const renderContent = () => {
+    if (hasImage) return <Image source={image} style={variantStyles.image} />
+    if (icon) return <Icon name={icon} style={variantStyles.icon} />
+    return <Text text={text || initials} style={variantStyles.initials} />
+  }
+
+  const hasBackgroundColor = !!variantStyles?.touchable?.backgroundColor
+
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+
+  return (
+    <View style={[variantStyles.wrapper, style]} {...viewProps}>
+      <Touchable
+        debugName={'Avatar ' + debugName}
+        onPress={() => onPress?.()}
+        style={[
+          variantStyles.touchable,
+          !hasBackgroundColor  && {
+            backgroundColor:  randomColor,
+          },
+        ]}
+        noFeedback={noFeedback || !onPress}
+      >
+        {renderContent()}
+
+        {!!description && (
+          <View style={variantStyles.descriptionOverlay}>
+            <Text text={description} style={variantStyles.description} />
+          </View>
+        )}
+
+        <Badge badge={badge} style={badgeStyles} {...badgeProps} />
+      </Touchable>
+
+      {badgeIcon && (
+        <Touchable  
+          debugName={`${debugName} badge`} 
+          style={variantStyles.badgeIconWrapper} 
+          onPress={() => onPress?.()}   
+          noFeedback
+        >
+          <Icon name={badgeIcon} style={variantStyles.badgeIcon} />
+        </Touchable>
+      )}
+    </View>
+  )
+}
+
+export * from './styles'

package/src/components/Avatar/styles.ts

@@ -0,0 +1,22 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { BadgeComposition } from '../Badge'
+
+export type AvatarParts =
+  | 'wrapper'
+  | 'touchable'
+  | 'initials'
+  | 'image'
+  | 'icon'
+  | 'iconWrapper'
+  | 'description'
+  | 'descriptionOverlay'
+  | 'badgeIconWrapper'
+  | 'badgeIcon'
+  | `badge${Capitalize<BadgeComposition>}`
+
+export type AvatarComposition = AvatarParts
+
+const createAvatarStyle = createDefaultVariantFactory<AvatarComposition>()
+
+export const AvatarPresets = includePresets((styles) => createAvatarStyle(() => ({ wrapper: styles })),
+)

package/src/components/AvatarGroup/index.tsx

@@ -0,0 +1,76 @@
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  useNestedStylesByKey,
+} from '@codeleap/common'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { AvatarGroupComposition, AvatarGroupPresets } from './styles'
+import { View, ViewProps } from '../View'
+import { Avatar, AvatarProps } from '../Avatar'
+
+export type AvatarGroupProps = ComponentVariants<typeof AvatarGroupPresets> & {
+  styles?: StylesOf<AvatarGroupComposition>
+  style?: ViewProps['style']
+  avatars: AvatarProps[]
+  displacement?: number
+  avatarVariants?: AvatarProps['variants']
+}
+
+const defaultProps:Partial<AvatarGroupProps> = {
+  displacement: 20.5,
+}
+
+
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = (props) => {
+  const {
+    variants = [],
+    avatars = [],
+    avatarVariants,
+    styles,
+    style,
+    displacement,
+    ...viewProps
+  } = {
+    ...defaultProps,
+    ...props
+  }
+
+  const variantStyles = useDefaultComponentStyle('u:AvatarGroup', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  const avatarStyles = useNestedStylesByKey('avatar', variantStyles)
+
+  return (
+    <View
+      style={[variantStyles.wrapper, style]}
+      variants={['row']}
+      {...viewProps}
+    >
+      {avatars.map((avatar, index) => (
+        <Avatar
+          firstNameOnly
+          key={avatar.debugName || index}
+          {...avatar}
+          variants={avatar.variants || avatarVariants}
+          style={getAvatarStyle(index,displacement)}
+          styles={avatarStyles}
+        />
+      ))}
+    </View>
+  )
+}
+
+AvatarGroup.defaultProps = defaultProps
+
+const getAvatarStyle = (index: number,displacementPixels: number) => {
+  const displacement = index * 20.5
+  return { right: `${displacement}%` }
+}
+
+export * from './styles'

package/src/components/AvatarGroup/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { AvatarComposition } from '../components'
+
+export type AvatarGroupParts = 'wrapper'
+
+export type AvatarGroupComposition = AvatarGroupParts | `avatar${Capitalize<AvatarComposition>}`
+
+const createAvatarStyle = createDefaultVariantFactory<AvatarGroupComposition>()
+
+export const AvatarGroupPresets = includePresets((styles) => createAvatarStyle(() => ({ wrapper: styles })),
+)

package/src/components/Backdrop/index.tsx

@@ -1,13 +1,12 @@
 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'
+import { useAnimatedVariantStyles } from '../../utils'
+import { BackdropComposition, BackdropPresets } from './styles'
 
 export * from './styles'
 export type BackdropProps = React.PropsWithChildren<
@@ -15,31 +14,33 @@ export type BackdropProps = React.PropsWithChildren<
   PropsOf<typeof Touchable> & {
     visible: boolean
     wrapperProps?: PropsOf<typeof View>
-    variants?: ComponentVariants<typeof BackdropStyles>['variants']
+    variants?: ComponentVariants<typeof BackdropPresets>['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', {
+  const variantStyles = useDefaultComponentStyle<'u:Backdrop', typeof BackdropPresets>('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']
+  const animation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: ['wrapper:hidden', 'wrapper:visible'],
+    updater: (s) => {
+      'worklet'
+      return visible ? s['wrapper:visible'] :  s['wrapper:hidden']
+    },
+    dependencies: [visible],
+    transition: variantStyles.transition,
   })
 
-  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}>
+  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={[variantStyles.wrapper, animation]} {...wrapperProps}>
     {
       !!props?.onPress ?
         <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>

package/src/components/Backdrop/styles.ts

@@ -4,30 +4,9 @@ export type BackdropComposition =
  'wrapper'|
 'touchable' |
 'wrapper:visible' |
-'wrapper:hidden'
+'wrapper:hidden' | 
+'transition'
 
 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,
-    },
-  })),
-}
+export const BackdropPresets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))

package/src/components/Badge/index.tsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import { ComponentVariants, PropsOf, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { Text } from '../Text'
+import { View, ViewProps } from '../View'
+import { BadgeComposition, BadgePresets } from './styles'
+import { StyleSheet } from 'react-native'
+
+export * from './styles'
+
+export type BadgeProps = ComponentVariants<typeof BadgePresets> 
+  & ViewProps 
+  & {
+    styles?: StylesOf<BadgeComposition>
+    maxCount?: number
+    minCount?: number
+    debugName?: string
+    innerWrapperProps?: Partial<PropsOf<typeof View>>
+    textProps?: Partial<PropsOf<typeof Text>>
+    getBadgeContent?: (props: BadgeContent) => string
+    renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
+    disabled?: boolean
+    badge?: number | boolean
+  }
+
+type BadgeContent = BadgeProps & { count: number }
+
+export type BadgeComponentProps = {
+  badge?: BadgeProps['badge']
+  badgeProps?: Partial<BadgeProps>
+}
+
+const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
+  if (Number(count) > maxCount) {
+    return `${maxCount}+`
+  } else {
+    return String(count)
+  }
+}
+
+const defaultProps: Partial<BadgeProps> = {
+  maxCount: 9,
+  minCount: 1,
+  getBadgeContent: defaultGetBadgeContent,
+  renderBadgeContent: null,
+  disabled: false,
+  badge: true,
+}
+
+export const Badge = (props: BadgeProps) => {
+  const allProps = {
+    ...Badge.defaultProps,
+    ...props,
+  }
+
+  const {
+    debugName,
+    innerWrapperProps = {},
+    textProps = {},
+    maxCount,
+    minCount,
+    getBadgeContent,
+    renderBadgeContent,
+    styles = {},
+    variants,
+    disabled,
+    style = {},
+    badge,
+    ...rest
+  } = allProps
+
+  const visible = (TypeGuards.isBoolean(badge) && badge === true) || TypeGuards.isNumber(badge)
+
+  if (!visible) return null
+
+  const variantStyles = useDefaultComponentStyle<'u:Badge', typeof BadgePresets>('u:Badge', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+    transform: StyleSheet.flatten,
+  })
+
+  const wrapperStyles: ViewProps['style'] = [
+    variantStyles?.wrapper,
+    (disabled && variantStyles?.['wrapper:disabled']),
+    style,
+  ]
+
+  const innerWrapperStyles: ViewProps['style'] = [
+    variantStyles?.innerWrapper,
+    (disabled && variantStyles?.['innerWrapper:disabled']),
+    innerWrapperProps?.style,
+  ]
+
+  const countStyles = [
+    variantStyles?.count,
+    (disabled && variantStyles?.['count:disabled']),
+    textProps?.style,
+  ]
+
+  const count = TypeGuards.isNumber(badge) ? badge : null
+
+  const content = getBadgeContent({ ...props, maxCount, minCount, count })
+
+  const showContent = TypeGuards.isNumber(count) && count >= minCount
+
+  let BadgeContent = renderBadgeContent
+
+  if (TypeGuards.isNil(renderBadgeContent)) {
+    BadgeContent = () => <Text text={content} {...textProps} style={countStyles} /> 
+  }
+
+  return (
+    <View
+      {...rest}
+      style={wrapperStyles}
+    >
+      <View {...innerWrapperProps} style={innerWrapperStyles}>
+        {showContent
+          ? <BadgeContent 
+              {...props} 
+              maxCount={maxCount} 
+              minCount={minCount} 
+              count={count}
+              getBadgeContent={getBadgeContent} 
+              content={content} 
+            /> 
+          : null
+        }
+      </View>
+    </View>
+  )
+}
+
+Badge.defaultProps =  defaultProps

package/src/components/Badge/styles.ts

@@ -0,0 +1,14 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+type BadgeParts =  'wrapper'  | 'innerWrapper' | 'count'
+
+type BadgeStates =  'disabled'
+
+export type BadgeComposition =  
+  `${BadgeParts}:${BadgeStates}` 
+  | BadgeParts
+
+const createBadgeStyle =
+  createDefaultVariantFactory<BadgeComposition>()
+
+export const BadgePresets = includePresets((styles) => createBadgeStyle(() => ({ wrapper: styles })))