@codeleap/mobile 3.25.0 → 3.25.3

package/src/components/Avatar/index.tsx

@@ -1,114 +1,126 @@
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  TypeGuards,
+  matchInitialToColor,
+  useDefaultComponentStyle,
+  useMemo,
+  getNestedStylesByKey,
+} from '@codeleap/common'
 import React from 'react'
-import { TypeGuards, matchInitialToColor, useMemo } from '@codeleap/common'
-import { Image } from '../Image'
+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 } from '../Badge'
-import { AvatarProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../hooks'
-
-export * from './styles'
-export * from './types'
-
-export const Avatar = (props: AvatarProps) => {
+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 = (props:AvatarProps) => {
   const {
     debugName,
     name = '',
-    firstNameOnly,
+    firstNameOnly = true,
     image,
+    variants = [],
+    styles,
+    style,
     icon,
     badgeIcon,
     text,
     description,
     onPress,
     noFeedback,
-    badge,
+    badge = false,
     badgeProps = {},
-    style,
     ...viewProps
-  } = {
-    ...Avatar.defaultProps,
-    ...props,
-  }
+  } = props
 
-  const styles = useStylesFor(Avatar.styleRegistryName, style)
+  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 [first = '', last = ''] = TypeGuards.isString(name)
+      ? name.split(' ')
+      : name
     const initials = [first[0]]
-    
-    if (!firstNameOnly) initials.push(last[0])
-
+    if (!firstNameOnly) {
+      initials.push(last[0])
+    }
     return {
-      initials: initials?.join(' '),
+      initials: initials.join(' '),
       randomColor: matchInitialToColor(first[0]),
     }
   }, [name, firstNameOnly])
 
   const renderContent = () => {
-    if (hasImage) return <Image source={image} style={styles.image} />
-    if (icon) return <Icon name={icon} style={styles.icon} />
-    return <Text text={text || initials} style={styles.initials} />
+    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} />
   }
 
-  // @ts-expect-error icss type
-  const hasBackgroundColor = !!styles?.touchable?.backgroundColor
+  const hasBackgroundColor = !!variantStyles?.touchable?.backgroundColor
 
-  const badgeStyles = useNestedStylesByKey('badge', styles)
+  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
 
   return (
-    <View {...viewProps as ViewProps} style={styles.wrapper}>
+    <View style={[variantStyles.wrapper, style]} {...viewProps}>
       <Touchable
-        debugName={'Avatar:' + debugName}
+        debugName={'Avatar ' + debugName}
         onPress={() => onPress?.()}
         style={[
-          styles.touchable,
-          !hasBackgroundColor && { backgroundColor: randomColor },
+          variantStyles.touchable,
+          !hasBackgroundColor && {
+            backgroundColor: randomColor,
+          },
         ]}
         noFeedback={noFeedback || !onPress}
       >
         {renderContent()}
 
-        {!!description ? (
-          <View style={styles.descriptionOverlay}>
-            <Text text={description} style={styles.description} />
+        {!!description && (
+          <View style={variantStyles.descriptionOverlay}>
+            <Text text={description} style={variantStyles.description} />
           </View>
-        ) : null}
+        )}
 
-        <Badge badge={badge} {...badgeProps} style={badgeStyles} />
+        <Badge badge={badge} style={badgeStyles} {...badgeProps} />
       </Touchable>
 
-      {badgeIcon ? (
+      {badgeIcon && (
         <Touchable
-          debugName={`AvatarBadge:${debugName}`}
-          style={styles.badgeIconWrapper}
+          debugName={`${debugName} badge`}
+          style={variantStyles.badgeIconWrapper}
           onPress={() => onPress?.()}
           noFeedback
         >
-          <Icon name={badgeIcon} style={styles.badgeIcon} />
+          <Icon name={badgeIcon} style={variantStyles.badgeIcon} />
         </Touchable>
-      ) : null}
+      )}
     </View>
   )
 }
 
-Avatar.styleRegistryName = 'Avatar'
-Avatar.elements = ['wrapper', 'touchable', 'initials', 'image', 'icon', 'description', 'badge']
-Avatar.rootElement = 'wrapper'
-
-Avatar.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Avatar as (props: StyledComponentProps<AvatarProps, typeof styles>) => IJSX
-}
-
-Avatar.defaultProps = {
-  badge: false,
-  firstNameOnly: true,
-} as AvatarProps
-
-MobileStyleRegistry.registerComponent(Avatar)
+export * from './styles'

package/src/components/Avatar/styles.ts

@@ -1,6 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
-export type AvatarComposition =
+export type AvatarParts =
   | 'wrapper'
   | 'touchable'
   | 'initials'
@@ -12,3 +13,10 @@ export type AvatarComposition =
   | '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

@@ -1,60 +1,74 @@
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  useNestedStylesByKey,
+} from '@codeleap/common'
 import React from 'react'
-import { View } from '../View'
-import { Avatar } from '../Avatar'
-import { AvatarGroupProps } from './types'
-import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { StyleSheet, StyleProp, ViewStyle } from 'react-native'
+import { StylesOf } from '../../types'
+import { AvatarGroupComposition, AvatarGroupPresets } from './styles'
+import { View, ViewProps } from '../View'
+import { Avatar, AvatarProps } from '../Avatar'
 
-export * from './styles'
-export * from './types'
+export type AvatarGroupProps = ComponentVariants<typeof AvatarGroupPresets> & {
+  styles?: StylesOf<AvatarGroupComposition>
+  style?: ViewProps['style']
+  avatars: AvatarProps[]
+  displacement?: number
+  avatarVariants?: AvatarProps['variants']
+}
 
-const getAvatarStyle = (index: number, displacement: number = 20.5) => {
-  const right = index * displacement
-  return { right: `${right}%` }
+const defaultProps: Partial<AvatarGroupProps> = {
+  displacement: 20.5,
 }
 
 export const AvatarGroup = (props: AvatarGroupProps) => {
   const {
+    variants = [],
     avatars = [],
+    avatarVariants,
+    styles,
     style,
     displacement,
-    debugName,
     ...viewProps
   } = {
-    ...AvatarGroup.defaultProps,
+    ...defaultProps,
     ...props,
   }
 
-  const styles = useStylesFor(AvatarGroup.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle('u:AvatarGroup', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
-  const avatarStyles = useNestedStylesByKey('avatar', styles)
+  const avatarStyles = useNestedStylesByKey('avatar', variantStyles)
 
   return (
-    <View {...viewProps} style={styles.wrapper}>
-      {avatars?.map?.((avatar, index) => (
+    <View
+      style={[variantStyles.wrapper, style]}
+      variants={['row']}
+      {...viewProps}
+    >
+      {avatars.map((avatar, index) => (
         <Avatar
           firstNameOnly
-          key={debugName + index}
-          debugName={`${debugName}: ${avatar?.debugName ?? index}`}
+          key={avatar.debugName || index}
           {...avatar}
-          style={[avatarStyles, (avatar?.style ?? {}), getAvatarStyle(index, displacement)]}
+          variants={avatar.variants || avatarVariants}
+          style={getAvatarStyle(index, displacement)}
+          styles={avatarStyles}
         />
       ))}
     </View>
   )
 }
 
-AvatarGroup.styleRegistryName = 'AvatarGroup'
-AvatarGroup.elements = ['wrapper', 'avatar']
-AvatarGroup.rootElement = 'wrapper'
+AvatarGroup.defaultProps = defaultProps
 
-AvatarGroup.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return AvatarGroup as (props: StyledComponentProps<AvatarGroupProps, typeof styles>) => IJSX
+const getAvatarStyle = (index: number, displacementPixels: number): StyleProp<ViewStyle> => {
+  const displacement = index * 20.5
+  return { right: `${displacement}%` }
 }
 
-AvatarGroup.defaultProps = {
-  displacement: 20.5,
-} as Partial<AvatarGroupProps>
-
-MobileStyleRegistry.registerComponent(AvatarGroup)
+export * from './styles'

package/src/components/AvatarGroup/styles.ts

@@ -1,5 +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,68 +1,51 @@
 import React from 'react'
+import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
 import { Touchable } from '../Touchable'
 import { View } from '../View'
+
+import { StylesOf } from '../../types/utility'
+import { StyleSheet } from 'react-native'
 import { useAnimatedVariantStyles } from '../../utils'
-import { BackdropProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { BackdropComposition, BackdropPresets } from './styles'
 
 export * from './styles'
-export * from './types'
-
-export const Backdrop = (props: BackdropProps) => {
-  const {
-    visible,
-    children,
-    wrapperProps = {},
-    style,
-    ...rest
-  } = {
-    ...Backdrop.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Backdrop.styleRegistryName, style)
+export type BackdropProps = React.PropsWithChildren<
+
+  PropsOf<typeof Touchable> & {
+    visible: boolean
+    wrapperProps?: PropsOf<typeof View>
+    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 BackdropPresets>('u:Backdrop', {
+    variants,
+    rootElement: 'wrapper',
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
   const animation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['wrapper:hidden', 'wrapper:visible'],
     updater: (s) => {
       'worklet'
-      return visible ? s['wrapper:visible'] : s['wrapper:hidden']
+      return visible ? s['wrapper:visible'] :  s['wrapper:hidden']
     },
     dependencies: [visible],
-    transition: styles.transition,
+    transition: variantStyles.transition,
   })
 
-  const isPressable = !!props?.onPress
-
-  return (
-    <View
-      animated
-      pointerEvents={visible ? 'auto' : 'none'}
-      animatedStyle={animation}
-      {...wrapperProps}
-      style={styles.wrapper}
-    >
-      {isPressable
-        ? <Touchable {...rest} style={styles.touchable} noFeedback android_ripple={null} />
-        : null}
 
-      {children}
-    </View>
-  )
+  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={[variantStyles.wrapper, animation]} {...wrapperProps}>
+    {
+      !!props?.onPress ?
+        <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>
+        : null
+    }
+    {children}
+  </View>
 }
-
-
-Backdrop.styleRegistryName = 'Backdrop'
-Backdrop.elements = ['wrapper', 'touchable', 'transition']
-Backdrop.rootElement = 'wrapper'
-
-Backdrop.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Backdrop as (props: StyledComponentProps<BackdropProps, typeof styles>) => IJSX
-}
-
-Backdrop.defaultProps = {} as Partial<BackdropProps>
-
-MobileStyleRegistry.registerComponent(Backdrop)

package/src/components/Backdrop/styles.ts

@@ -1,7 +1,12 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type BackdropComposition =
-  'wrapper' |
-  'touchable' |
-  'wrapper:visible' |
-  'wrapper:hidden' |
-  'transition'
+ 'wrapper'|
+'touchable' |
+'wrapper:visible' |
+'wrapper:hidden' | 
+'transition'
+
+const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
+
+export const BackdropPresets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))

package/src/components/Badge/index.tsx

@@ -1,14 +1,33 @@
 import React from 'react'
-import { TypeGuards } from '@codeleap/common'
+import { ComponentVariants, PropsOf, StylesOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { Text } from '../Text'
 import { View, ViewProps } from '../View'
-import { BadgeContent, BadgeProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../hooks'
+import { BadgeComposition, BadgePresets } from './styles'
+import { StyleSheet } from 'react-native'
 
 export * from './styles'
-export * from './types'
+
+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) {
@@ -18,6 +37,15 @@ const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
   }
 }
 
+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,
@@ -32,32 +60,40 @@ export const Badge = (props: BadgeProps) => {
     minCount,
     getBadgeContent,
     renderBadgeContent,
+    styles = {},
+    variants,
     disabled,
-    style,
+    style = {},
     badge,
     ...rest
   } = allProps
 
   const visible = (TypeGuards.isBoolean(badge) && badge === true) || TypeGuards.isNumber(badge)
 
-  const styles = useStylesFor(Badge.styleRegistryName, style)
-
   if (!visible) return null
-  
+
+  const variantStyles = useDefaultComponentStyle<'u:Badge', typeof BadgePresets>('u:Badge', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+    transform: StyleSheet.flatten,
+  })
+
   const wrapperStyles: ViewProps['style'] = [
-    styles?.wrapper,
-    (disabled && styles?.['wrapper:disabled']),
+    variantStyles?.wrapper,
+    (disabled && variantStyles?.['wrapper:disabled']),
+    style,
   ]
 
   const innerWrapperStyles: ViewProps['style'] = [
-    styles?.innerWrapper,
-    (disabled && styles?.['innerWrapper:disabled']),
+    variantStyles?.innerWrapper,
+    (disabled && variantStyles?.['innerWrapper:disabled']),
     innerWrapperProps?.style,
   ]
 
   const countStyles = [
-    styles?.count,
-    (disabled && styles?.['count:disabled']),
+    variantStyles?.count,
+    (disabled && variantStyles?.['count:disabled']),
     textProps?.style,
   ]
 
@@ -67,10 +103,17 @@ export const Badge = (props: BadgeProps) => {
 
   const showContent = TypeGuards.isNumber(count) && count >= minCount
 
-  const BadgeContent = TypeGuards.isNil(renderBadgeContent) ? () => <Text text={content} {...textProps} style={countStyles} /> : renderBadgeContent
+  let BadgeContent = renderBadgeContent
+
+  if (TypeGuards.isNil(renderBadgeContent)) {
+    BadgeContent = () => <Text text={content} {...textProps} style={countStyles} />
+  }
 
   return (
-    <View {...rest} style={wrapperStyles}>
+    <View
+      {...rest}
+      style={wrapperStyles}
+    >
       <View {...innerWrapperProps} style={innerWrapperStyles}>
         {showContent
           ? <BadgeContent
@@ -88,21 +131,4 @@ export const Badge = (props: BadgeProps) => {
   )
 }
 
-Badge.styleRegistryName = 'Badge'
-Badge.elements = ['wrapper', 'innerWrapper', 'count']
-Badge.rootElement = 'wrapper'
-
-Badge.defaultProps = {
-  maxCount: 9,
-  minCount: 1,
-  getBadgeContent: defaultGetBadgeContent,
-  renderBadgeContent: null,
-  disabled: false,
-  badge: true,
-} as Partial<BadgeProps>
-
-Badge.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Badge as (props: StyledComponentProps<BadgeProps, typeof styles>) => IJSX
-}
-
-MobileStyleRegistry.registerComponent(Badge)
+Badge.defaultProps = defaultProps

package/src/components/Badge/styles.ts

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