@codeleap/mobile 3.25.0 → 3.25.3

package/src/components/Button/index.tsx

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

package/src/components/Button/styles.ts

@@ -1,22 +1,19 @@
-import { StylesOf } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, 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'
-  | 'textFeedback'
-  | 'wrapper'
-  | 'wrapperFeedback'
-  | 'feedback'
-  | 'icon'
-  | 'leftIcon'
-  | 'rightIcon'
-  | 'loader'
-  | `loader${Capitalize<ActivityIndicatorComposition>}`
-  | `badge${Capitalize<BadgeComposition>}`
+| 'text'
+| 'inner'
+| 'wrapper'
+| 'icon'
+| 'leftIcon'
+| 'rightIcon'
+| 'loader'
+| `loader${Capitalize<ActivityIndicatorComposition>}`
+| `badge${Capitalize<BadgeComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
 
@@ -25,3 +22,7 @@ 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/Calendar/index.tsx

@@ -1,40 +1,42 @@
 import React from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { format } from 'date-fns'
+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, 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 styles = useStylesFor(Calendar.styleRegistryName, style)
-
+  const variantStyles = useDefaultComponentStyle<'u:Calendar', typeof CalendarPresets>('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
+  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))
@@ -43,7 +45,7 @@ export const Calendar = (props: CalendarProps) => {
     }
   }
 
-  return <View style={styles?.wrapper} {...viewProps}>
+  return <View style={[variantStyles.wrapper, style]} {...viewProps}>
     <RNCalendar
       onDayPress={handleChange}
       current={new Date(value).toISOString()}
@@ -52,20 +54,12 @@ export const Calendar = (props: CalendarProps) => {
         [stringValue]: { selected: true },
       }}
       theme={{
-        ...styles?.theme,
-        stylesheet: styles,
+        ...variantStyles.theme,
+        stylesheet: {
+          ...variantStyles,
+        },
       }}
       {...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/Calendar/style.ts

@@ -0,0 +1,6 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { TCalendarStyles, CalendarComposition } from './types'
+
+const createCalendarStyle = createDefaultVariantFactory<CalendarComposition, TCalendarStyles>()
+
+export const CalendarPresets = includePresets((style) => createCalendarStyle(() => ({ theme: style })))

package/src/components/Checkbox/index.tsx

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

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,3 +14,8 @@ export type CheckboxComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${CheckboxAnimationStates}`
   | '__props'
+
+const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
+
+export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
+

package/src/components/ContentView/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {
+
+  ComponentVariants,
+  useDefaultComponentStyle,
+
+} from '@codeleap/common'
+import {
+  ContentViewPresets,
+} from './styles'
+import { ViewProps, View, ViewComposition } from '../View'
+import { Text } from '../Text'
+import { StylesOf } from '../../types'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { StyleSheet } from 'react-native'
+
+export * from './styles'
+
+export type ContentViewProps = Omit<
+  ViewProps,
+  'variants' | 'responsiveVariants'
+> & {
+  message?: string
+  loading?: boolean
+  styles?: StylesOf<ViewComposition>
+} & ComponentVariants<typeof ContentViewPresets>
+
+const WrapContent = ({ children, ...props }) => (
+  <View {...props}>{children}</View>
+)
+
+export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
+  const { children, message, loading, variants, styles, ...props } =
+    rawProps
+
+  const variantStyle = useDefaultComponentStyle('ContentView', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  if (loading) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
+      </WrapContent>
+    )
+  }
+  const hasChildren = Object.keys(children || {}).length > 0
+  if (hasChildren) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        {children}
+      </WrapContent>
+    )
+  }
+
+  return (
+    <WrapContent {...props} style={styles}>
+      <Text text={message} />
+    </WrapContent>
+  )
+}

package/src/components/ContentView/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ContentViewComposition = 'placeholder' | 'wrapper' | 'loader'
+
+const createContentViewStyle =
+  createDefaultVariantFactory<ContentViewComposition>()
+
+export const ContentViewPresets = includePresets((styles) => createContentViewStyle(() => ({ wrapper: styles })))