@codeleap/mobile 3.24.3 → 3.25.0

package/src/components/Badge/types.ts

@@ -0,0 +1,27 @@
+import { PropsOf } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { Text } from '../Text'
+import { View, ViewProps } from '../View'
+import { BadgeComposition } from './styles'
+
+export type BadgeProps =
+  Omit<ViewProps, 'style'> &
+  {
+    style?: StyledProp<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
+  }
+
+export type BadgeContent = BadgeProps & { count: number }
+
+export type BadgeComponentProps = {
+  badge?: BadgeProps['badge']
+  badgeProps?: Partial<BadgeProps>
+}

package/src/components/Button/index.tsx

@@ -1,146 +1,119 @@
-import * as React from 'react'
-import {
-  useDefaultComponentStyle,
-  ComponentVariants,
-  IconPlaceholder,
-  GetRefType,
-  TypeGuards,
-  getNestedStylesByKey,
-} from '@codeleap/common'
-
-import {
-  ButtonPresets,
-  ButtonComposition,
-  ButtonParts,
-} from './styles'
-import { forwardRef } from 'react'
-import { StylesOf } from '../../types/utility'
+import React, { forwardRef, useState } from 'react'
+import { GetRefType } from '@codeleap/common'
+import { ButtonParts } from './styles'
 import { Text } from '../Text'
 import { Touchable, TouchableProps } from '../Touchable'
 import { Icon } from '../Icon'
 import { ActivityIndicator } from '../ActivityIndicator'
 import { StyleSheet } from 'react-native'
-import { usePressableFeedback } from '../../utils'
-import { Badge, BadgeComponentProps } from '../Badge'
-export * from './styles'
-
-type ChildProps = {
-  styles: StylesOf<ButtonParts>
-  props: Omit<ButtonProps, 'children'>
-}
+import { TouchableFeedbackConfig, usePressableFeedback } from '../../utils'
+import { Badge } from '../Badge'
+import { ButtonProps } from './types'
+import { AnyRecord, useNestedStylesByKey, IJSX, mergeStyles, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
-export type ButtonProps = Omit<TouchableProps, 'variants'> &
-  ComponentVariants<typeof ButtonPresets> & {
-    text?: string
-    rightIcon?: IconPlaceholder
-    icon?: IconPlaceholder
-    styles?: StylesOf<ButtonComposition>
-    loading?: boolean
-    debounce?: number
-    debugName: string
-    selected?: boolean
-    children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
-  } & BadgeComponentProps
+export * from './styles'
+export * from './types'
 
 export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>((buttonProps, ref) => {
   const {
-    variants = [],
     children,
     icon,
     text,
     loading,
-    styles = {},
     onPress,
     disabled,
     selected,
     rightIcon,
     style,
-    badge = false,
+    badge,
     badgeProps = {},
     ...props
-  } = buttonProps
-  const [pressed, setPressed] = React.useState(false)
-  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],
-      selected && variantStyles[key + ':selected'],
-      disabled && styles[key + ':disabled'],
-    ]
+  } = {
+    ...Button.defaultProps,
+    ...buttonProps,
   }
 
+  const [pressed, setPressed] = useState(false)
+
+  const styles = useStylesFor(Button.styleRegistryName, style)
+
+  const getStyles = (key: ButtonParts) => mergeStyles([
+    styles[key],
+    selected && styles[key + ':selected'],
+    disabled && styles[key + ':disabled'],
+  ])
+
   const iconStyle = getStyles('icon')
 
   const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
   const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
 
-  const _styles = {
+  const componentStyles = {
     wrapper: getStyles('wrapper'),
     loader: getStyles('loader'),
     leftIcon: leftIconStyle,
     rightIcon: rightIconStyle,
     text: getStyles('text'),
     icon: getStyles('icon'),
-
   }
 
   const disableFeedback = !onPress || props?.noFeedback
 
-  const { getFeedbackStyle } = usePressableFeedback(variantStyles.text, {
+  const { getFeedbackStyle } = usePressableFeedback(styles.text, {
     hightlightPropertyIn: 'color',
     hightlightPropertyOut: 'color',
-    feedbackConfig: variantStyles?.textFeedback,
+    feedbackConfig: styles?.textFeedback as TouchableFeedbackConfig,
     disabled: disableFeedback,
   })
 
-  const { getFeedbackStyle: getFeedbackWrapperStyle } = usePressableFeedback(variantStyles.wrapper, {
+  const { getFeedbackStyle: getFeedbackWrapperStyle } = usePressableFeedback(styles.wrapper, {
     hightlightPropertyIn: 'borderColor',
     hightlightPropertyOut: 'borderColor',
     disabled: disableFeedback,
-    feedbackConfig: variantStyles?.wrapperFeedback,
+    feedbackConfig: styles?.wrapperFeedback as TouchableFeedbackConfig,
   })
 
-  const childrenContent = TypeGuards.isFunction(children) ?
-    // @ts-ignore
-    children({ styles: _styles, props: buttonProps })
-    : children
-
   const rightFeedback = getFeedbackStyle(pressed)
 
-  // TODO - This is a hack to hide the icon when there is no text
-  const isLeftIconHidden = _styles?.leftIcon?.display != 'none'
+  // @ts-expect-error This is a hack to hide the icon when there is no text
+  const isLeftIconHidden = componentStyles?.leftIcon?.display != 'none'
 
-  const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+  const badgeStyles = useNestedStylesByKey('badge', styles)
 
   return (
     <Touchable
-      style={[_styles.wrapper, getFeedbackWrapperStyle(pressed)]}
       ref={ref}
       disabled={disabled}
-      styles={{
-        feedback: variantStyles.feedback,
-      }}
       onPress={onPress}
       debugComponent={'Button'}
       noFeedback={!onPress}
       setPressed={setPressed}
       {...props}
+      style={[componentStyles.wrapper, { feedback: styles.feedback }, getFeedbackWrapperStyle(pressed)]}
     >
-      {loading && <ActivityIndicator style={[_styles.loader, getFeedbackStyle(pressed)]} />}
-      {(!loading && isLeftIconHidden) && <Icon name={icon} style={[_styles.leftIcon, getFeedbackStyle(pressed)]} />}
-      {text ? <Text text={text} style={[_styles.text, getFeedbackStyle(pressed)]} /> : null}
-      {childrenContent}
-      <Icon name={rightIcon} style={[_styles.rightIcon, rightFeedback]} />
-      <Badge badge={badge} style={badgeStyles} {...badgeProps} />
+      {loading ? <ActivityIndicator style={[componentStyles.loader, getFeedbackStyle(pressed)]} /> : null}
+      {(!loading && isLeftIconHidden) ? <Icon name={icon} style={[componentStyles.leftIcon, getFeedbackStyle(pressed)]} /> : null}
+      {text ? <Text text={text} style={[componentStyles.text, getFeedbackStyle(pressed)]} /> : null}
+      {children}
+      {rightIcon ? <Icon name={rightIcon} style={[componentStyles.rightIcon, rightFeedback]} /> : null}
+      <Badge badge={badge} {...badgeProps} style={badgeStyles} />
     </Touchable>
   )
-}) as ((props: ButtonProps) => JSX.Element)
+}) as StyledComponentWithProps<ButtonProps>
+
+Button.styleRegistryName = 'Button'
+Button.elements = ['wrapper', 'text', 'icon', 'leftIcon', 'rightIcon', 'loader', 'badge']
+Button.rootElement = 'wrapper'
+
+Button.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Button as (props: StyledComponentProps<ButtonProps, typeof styles>) => IJSX
+}
+
+Button.defaultProps = {
+  hitSlop: 10,
+  badge: false
+} as Partial<ButtonProps>
 
+MobileStyleRegistry.registerComponent(Button)

package/src/components/Button/styles.ts

@@ -1,19 +1,22 @@
-import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { StylesOf } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 import { BadgeComposition } from '../Badge'
 import { TouchableStylesGen } from '../Touchable'
 
 export type ButtonStates = 'disabled' | 'selected'
+
 export type ButtonParts =
-| 'text'
-| 'inner'
-| 'wrapper'
-| 'icon'
-| 'leftIcon'
-| 'rightIcon'
-| 'loader'
-| `loader${Capitalize<ActivityIndicatorComposition>}`
-| `badge${Capitalize<BadgeComposition>}`
+  | 'text'
+  | 'textFeedback'
+  | 'wrapper'
+  | 'wrapperFeedback'
+  | 'feedback'
+  | 'icon'
+  | 'leftIcon'
+  | 'rightIcon'
+  | 'loader'
+  | `loader${Capitalize<ActivityIndicatorComposition>}`
+  | `badge${Capitalize<BadgeComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
 
@@ -22,7 +25,3 @@ export type ButtonStylesGen<TCSS = any> = StylesOf<ButtonComposition, TCSS> & {
   textFeedback?: TouchableStylesGen['feedback']
   wrapperFeedback?: TouchableStylesGen['feedback']
 }
-
-const createButtonStyle = createDefaultVariantFactory<ButtonComposition, ButtonStylesGen >()
-
-export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Button/types.ts

@@ -0,0 +1,20 @@
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { BadgeComponentProps } from '../Badge'
+import { TouchableProps } from '../Touchable'
+import { ButtonComposition } from './styles'
+
+export type ButtonProps =
+  Omit<TouchableProps, 'style'> &
+  BadgeComponentProps &
+  {
+    text?: string
+    rightIcon?: AppIcon
+    icon?: AppIcon
+    loading?: boolean
+    debounce?: number
+    debugName: string
+    selected?: boolean
+    children?: ReactNode
+    style?: StyledProp<ButtonComposition>
+  }

package/src/components/Calendar/index.tsx

@@ -1,42 +1,40 @@
 import React from 'react'
-import { ComponentVariants, PropsOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-import { format, formatISO } from 'date-fns'
+import { TypeGuards } from '@codeleap/common'
+import { format } from 'date-fns'
 // @ts-ignore
 import { Calendar as RNCalendar, CalendarProps as RNCalendarProps, DateData } from 'react-native-calendars'
+import { View, ViewProps } from '../View'
+import { CalendarComposition } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, StyledProp } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
+
+export type CalendarProps =
+  Omit<ViewProps, 'style'> &
+  {
+    onValueChange?: (date: Date | string) => any
+    value?: Date | string
+    calendarProps?: RNCalendarProps
+    style?: StyledProp<CalendarComposition>
+  }
 
-import { View } from '../View'
-import { TCalendarStyles } from './types'
-import { CalendarPresets } from './style'
-export type CalendarProps = PropsOf<typeof View> & {
-  styles?: TCalendarStyles
-  onValueChange?: (date: Date|string) => any
-  value?: Date|string
-  calendarProps?: RNCalendarProps
-} & ComponentVariants<typeof CalendarPresets>
-export * from './style'
 export * from './types'
 
-export const Calendar = (props:CalendarProps) => {
+export const Calendar = (props: CalendarProps) => {
   const {
-    variants = [],
     style,
-    styles = {},
     calendarProps,
     value,
     onValueChange,
     ...viewProps
   } = props
-  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarPresets>('u:Calendar', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-    rootElement: 'wrapper',
-  })
+
+  const styles = useStylesFor(Calendar.styleRegistryName, style)
+
   const isDateObject = TypeGuards.isInstance(value, Date)
-  const stringValue:string = isDateObject ? format(value, 'yyyy/MM/dd') : value
+  const stringValue: string = isDateObject ? format(value, 'yyyy/MM/dd') : value
 
-  function handleChange(date:DateData) {
+  function handleChange(date: DateData) {
     if (!onValueChange) return
     if (isDateObject) {
       onValueChange(new Date(date.timestamp))
@@ -45,7 +43,7 @@ export const Calendar = (props:CalendarProps) => {
     }
   }
 
-  return <View style={[variantStyles.wrapper, style]} {...viewProps}>
+  return <View style={styles?.wrapper} {...viewProps}>
     <RNCalendar
       onDayPress={handleChange}
       current={new Date(value).toISOString()}
@@ -54,12 +52,20 @@ export const Calendar = (props:CalendarProps) => {
         [stringValue]: { selected: true },
       }}
       theme={{
-        ...variantStyles.theme,
-        stylesheet: {
-          ...variantStyles,
-        },
+        ...styles?.theme,
+        stylesheet: styles,
       }}
       {...calendarProps}
     />
   </View>
 }
+
+Calendar.styleRegistryName = 'Calendar'
+Calendar.elements = ['wrapper', 'theme', 'calendar', 'day', 'agenda', 'expandable', 'event', 'timeLabel', 'textDayStyle', 'dotStyle', 'arrowStyle', 'contentStyle', 'timelineContainer', 'line', 'verticalLine', 'nowIndicator']
+Calendar.rootElement = 'wrapper'
+
+Calendar.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Calendar as (props: StyledComponentProps<CalendarProps, typeof styles>) => IJSX
+}
+
+MobileStyleRegistry.registerComponent(Calendar)

package/src/components/Checkbox/index.tsx

@@ -1,57 +1,30 @@
-import * as React from 'react'
-import {
-
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  PropsOf,
-  IconPlaceholder,
-} from '@codeleap/common'
-import { ReactNode } from 'react'
-import { StyleSheet } from 'react-native'
+import React from 'react'
 import { View } from '../View'
-
-import {
-  CheckboxPresets,
-  CheckboxComposition,
-} from './styles'
-import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../..'
 import { Touchable } from '../Touchable'
 import { Icon } from '../Icon'
+import { CheckboxProps } from './types'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-
-export type CheckboxProps = Pick<
-  InputBaseProps,
-  'debugName' | 'disabled' | 'label'
-> & {
-  variants?: ComponentVariants<typeof CheckboxPresets>['variants']
-  styles?: StylesOf<CheckboxComposition>
-  value: boolean
-  onValueChange: (value: boolean) => void
-  style?: PropsOf<typeof View>['style']
-  checkboxOnLeft?: boolean
-  checkIcon?: IconPlaceholder
-}
+export * from './types'
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
-const defaultProps: Partial<CheckboxProps> = {
-  checkIcon: 'check' as IconPlaceholder,
-}
+
 export const Checkbox = (props: CheckboxProps) => {
   const {
     inputBaseProps,
     others,
   } = selectInputBaseProps({
-    ...defaultProps,
+    ...Checkbox.defaultProps,
     ...props,
   })
 
   const {
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     debugName,
@@ -60,24 +33,19 @@ export const Checkbox = (props: CheckboxProps) => {
     checkIcon,
   } = others
 
-  const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
-    variants,
-    styles,
-    rootElement: 'wrapper',
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(Checkbox.styleRegistryName, style)
 
   const boxAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
-    transition: variantStyles['box:transition'],
+    transition: styles['box:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['box:disabled-checked'] : variantStyles['box:disabled-unchecked']
+        disabledStyle = value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
       }
-      const style = value ? variantStyles['box:checked'] : variantStyles['box:unchecked']
+      const style = value ? styles['box:checked'] : styles['box:unchecked']
 
       return {
         ...style,
@@ -89,16 +57,16 @@ export const Checkbox = (props: CheckboxProps) => {
   })
 
   const checkmarkWrapperAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['checkmarkWrapper:unchecked', 'checkmarkWrapper:disabled', 'checkmarkWrapper:checked', 'checkmarkWrapper:disabled-unchecked', 'checkmarkWrapper:disabled-checked'],
-    transition: variantStyles['checkmarkWrapper:transition'],
+    transition: styles['checkmarkWrapper:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['checkmarkWrapper:disabled-checked'] : variantStyles['checkmarkWrapper:disabled-unchecked']
+        disabledStyle = value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
       }
-      const style = value ? variantStyles['checkmarkWrapper:checked'] : variantStyles['checkmarkWrapper:unchecked']
+      const style = value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
       return {
         ...style,
         ...disabledStyle,
@@ -108,13 +76,14 @@ export const Checkbox = (props: CheckboxProps) => {
     dependencies: [value, disabled],
   })
 
-  const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
+  // @ts-expect-error
+  const _checkboxOnLeft = checkboxOnLeft ?? styles.__props?.checkboxOnLeft
 
   return <InputBase
     {...inputBaseProps}
     debugName={debugName}
     wrapper={Touchable}
-    styles={variantStyles}
+    style={styles}
     wrapperProps={{
       onPress: () => {
         onValueChange(!value)
@@ -123,32 +92,42 @@ export const Checkbox = (props: CheckboxProps) => {
       rippleDisabled: true,
     }}
     order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
-    style={style}
   >
     <View
       animated
+      animatedStyle={boxAnimation}
       style={[
-        variantStyles.box,
-        disabled && variantStyles['box:disabled'],
-        boxAnimation,
+        styles.box,
+        disabled && styles['box:disabled'],
       ]}
     >
       <View
         animated
+        animatedStyle={checkmarkWrapperAnimation}
         style={[
-          variantStyles.checkmarkWrapper,
-          disabled && variantStyles['checkmarkWrapper:disabled'],
-          checkmarkWrapperAnimation,
+          styles.checkmarkWrapper,
+          disabled && styles['checkmarkWrapper:disabled'],
         ]}
       >
         <Icon
-          name={checkIcon as any}
-          style={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
-
+          name={checkIcon}
+          style={[styles.checkmark, disabled && styles['checkmark:disabled']]}
         />
       </View>
     </View>
   </InputBase>
 }
 
-Checkbox.defaultProps = defaultProps
+Checkbox.styleRegistryName = 'Checkbox'
+Checkbox.rootElement = 'wrapper'
+Checkbox.elements = [...InputBase.elements, 'checkmark', 'box', '__props']
+
+Checkbox.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Checkbox as (props: StyledComponentProps<CheckboxProps, typeof styles>) => IJSX
+}
+
+Checkbox.defaultProps = {
+  checkIcon: 'check' as AppIcon,
+} as Partial<CheckboxProps>
+
+MobileStyleRegistry.registerComponent(Checkbox)

package/src/components/Checkbox/styles.ts

@@ -1,7 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'checkmarkWrapper' | 'box'
+
 export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
 
 export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
@@ -14,8 +14,3 @@ export type CheckboxComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${CheckboxAnimationStates}`
   | '__props'
-
-const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
-
-export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
-

package/src/components/Checkbox/types.ts

@@ -0,0 +1,13 @@
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { InputBaseProps } from '../InputBase'
+import { CheckboxComposition } from './styles'
+
+export type CheckboxProps =
+  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
+  {
+    value: boolean
+    onValueChange: (value: boolean) => void
+    style?: StyledProp<CheckboxComposition>
+    checkboxOnLeft?: boolean
+    checkIcon?: AppIcon
+  }