@codeleap/mobile 3.24.3 → 4.0.0

package/src/components/Avatar/index.tsx

@@ -1,126 +1,114 @@
-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 { TypeGuards, matchInitialToColor, useMemo } from '@codeleap/common'
+import { Image } 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 = (props:AvatarProps) => {
+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) => {
   const {
     debugName,
     name = '',
-    firstNameOnly = true,
+    firstNameOnly,
     image,
-    variants = [],
-    styles,
-    style,
     icon,
     badgeIcon,
     text,
     description,
     onPress,
     noFeedback,
-    badge = false,
+    badge,
     badgeProps = {},
+    style,
     ...viewProps
-  } = props
+  } = {
+    ...Avatar.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle('u:Avatar', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(Avatar.styleRegistryName, style)
 
   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={variantStyles.image} />
-    if (icon) return <Icon name={icon} style={variantStyles.icon} />
-    return <Text text={text || initials} style={variantStyles.initials} />
+    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} />
   }
 
-  const hasBackgroundColor = !!variantStyles?.touchable?.backgroundColor
+  // @ts-expect-error icss type
+  const hasBackgroundColor = !!styles?.touchable?.backgroundColor
 
-  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+  const badgeStyles = useNestedStylesByKey('badge', styles)
 
   return (
-    <View style={[variantStyles.wrapper, style]} {...viewProps}>
+    <View {...viewProps as ViewProps} style={styles.wrapper}>
       <Touchable
-        debugName={'Avatar ' + debugName}
+        debugName={'Avatar:' + debugName}
         onPress={() => onPress?.()}
         style={[
-          variantStyles.touchable,
-          !hasBackgroundColor && {
-            backgroundColor: randomColor,
-          },
+          styles.touchable,
+          !hasBackgroundColor && { backgroundColor: randomColor },
         ]}
         noFeedback={noFeedback || !onPress}
       >
         {renderContent()}
 
-        {!!description && (
-          <View style={variantStyles.descriptionOverlay}>
-            <Text text={description} style={variantStyles.description} />
+        {!!description ? (
+          <View style={styles.descriptionOverlay}>
+            <Text text={description} style={styles.description} />
           </View>
-        )}
+        ) : null}
 
-        <Badge badge={badge} style={badgeStyles} {...badgeProps} />
+        <Badge badge={badge} {...badgeProps} style={badgeStyles} />
       </Touchable>
 
-      {badgeIcon && (
+      {badgeIcon ? (
         <Touchable
-          debugName={`${debugName} badge`}
-          style={variantStyles.badgeIconWrapper}
+          debugName={`AvatarBadge:${debugName}`}
+          style={styles.badgeIconWrapper}
           onPress={() => onPress?.()}
           noFeedback
         >
-          <Icon name={badgeIcon} style={variantStyles.badgeIcon} />
+          <Icon name={badgeIcon} style={styles.badgeIcon} />
         </Touchable>
-      )}
+      ) : null}
     </View>
   )
 }
 
-export * from './styles'
+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)

package/src/components/Avatar/styles.ts

@@ -1,7 +1,6 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
 
-export type AvatarParts =
+export type AvatarComposition =
   | 'wrapper'
   | 'touchable'
   | 'initials'
@@ -13,10 +12,3 @@ export type AvatarParts =
   | 'badgeIconWrapper'
   | 'badgeIcon'
   | `badge${Capitalize<BadgeComposition>}`
-
-export type AvatarComposition = AvatarParts
-
-const createAvatarStyle = createDefaultVariantFactory<AvatarComposition>()
-
-export const AvatarPresets = includePresets((styles) => createAvatarStyle(() => ({ wrapper: styles })),
-)

package/src/components/Avatar/types.ts

@@ -0,0 +1,23 @@
+import { StyledProp } from '@codeleap/styles'
+import { BadgeComponentProps } from '../Badge'
+import { IconProps } from '../Icon'
+import { ImageProps } from '../Image'
+import { ViewProps } from '../View'
+import { AvatarComposition } from './styles'
+
+export type AvatarProps =
+  Omit<ViewProps, 'style'> &
+  BadgeComponentProps &
+  {
+    image?: ImageProps['source']
+    name?: string | string[]
+    debugName: string
+    firstNameOnly?: boolean
+    text?: string
+    description?: string
+    icon?: IconProps['name']
+    badgeIcon?: IconProps['name']
+    style?: StyledProp<AvatarComposition>
+    onPress?: () => void
+    noFeedback?: boolean
+  }

package/src/components/AvatarGroup/index.tsx

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

package/src/components/AvatarGroup/styles.ts

@@ -1,11 +1,5 @@
-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/AvatarGroup/types.ts

@@ -0,0 +1,10 @@
+import { StyledProp } from '@codeleap/styles'
+import { AvatarProps } from '../Avatar/types'
+import { AvatarGroupComposition } from './styles'
+
+export type AvatarGroupProps = {
+  style?: StyledProp<AvatarGroupComposition>
+  avatars: Partial<AvatarProps>[]
+  displacement?: number
+  debugName: string
+}

package/src/components/Backdrop/index.tsx

@@ -1,51 +1,68 @@
 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 { BackdropComposition, BackdropPresets } from './styles'
+import { BackdropProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-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,
-  })
+export * from './types'
+
+export const Backdrop = (props: BackdropProps) => {
+  const {
+    visible,
+    children,
+    wrapperProps = {},
+    style,
+    ...rest
+  } = {
+    ...Backdrop.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(Backdrop.styleRegistryName, style)
 
   const animation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     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: variantStyles.transition,
+    transition: styles.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}
 
-  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>
+      {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,12 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type BackdropComposition =
- 'wrapper'|
-'touchable' |
-'wrapper:visible' |
-'wrapper:hidden' | 
-'transition'
-
-const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
-
-export const BackdropPresets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
+  'wrapper' |
+  'touchable' |
+  'wrapper:visible' |
+  'wrapper:hidden' |
+  'transition'

package/src/components/Backdrop/types.ts

@@ -0,0 +1,14 @@
+import { StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { TouchableProps } from '../Touchable'
+import { ViewProps } from '../View/types'
+import { BackdropComposition } from './styles'
+
+export type BackdropProps =
+  Omit<TouchableProps, 'style'> &
+  {
+    children?: ReactNode
+    visible: boolean
+    wrapperProps?: ViewProps
+    style?: StyledProp<BackdropComposition>
+  }

package/src/components/Badge/index.tsx

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

package/src/components/Badge/styles.ts

@@ -1,14 +1,6 @@
-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
-
-const createBadgeStyle =
-  createDefaultVariantFactory<BadgeComposition>()
-
-export const BadgePresets = includePresets((styles) => createBadgeStyle(() => ({ wrapper: styles })))
+export type BadgeComposition = `${BadgeParts}:${BadgeStates}` | BadgeParts