@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/Slider/index.tsx

@@ -1,21 +1,23 @@
-import React from 'react'
+import * as React from 'react'
 import { Slider as RNSlider } from '@miblanchard/react-native-slider'
 import { StyleSheet } from 'react-native'
-import { TypeGuards, onUpdate } from '@codeleap/common'
+import {
+  TypeGuards,
+  useDefaultComponentStyle,
+  onUpdate,
+} from '@codeleap/common'
+
 import { SliderProps, TrackMarkProps } from './types'
 import { InputBase, selectInputBaseProps } from '../InputBase'
+import { SliderPresets } from './styles'
 import { Text } from '../Text'
 import { View } from '../View'
 import { Touchable } from '../Touchable'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-export * from './types'
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
-  const { style, onPress } = props
+  const { index, content, style, onPress } = props
 
   if (!TypeGuards.isString(props.content)) {
     return <>
@@ -33,14 +35,11 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
 const minimumValue = 0
 const maximumValue = 100
 
-export const Slider = (props: SliderProps) => {
+export const Slider = (props:SliderProps) => {
   const {
     inputBaseProps: { label: _label, description: _description, ..._inputBaseProps },
     others,
-  } = selectInputBaseProps({
-    ...Slider.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(props)
 
   const {
     debounce = null,
@@ -49,15 +48,17 @@ export const Slider = (props: SliderProps) => {
     label,
     description,
     debugName,
+    styles = {},
     style,
     disabled,
+    variants,
     trackMarks,
-    trackMarksClickable,
-    labelClickable,
-    trackMarkComponent: SliderTrackMark,
+    trackMarksClickable = false,
+    labelClickable = false,
+    trackMarkComponent = DefaultSliderTrackMark,
     ...sliderProps
   } = others
-
+  const SliderTrackMark = trackMarkComponent
   const [_value, _setValue] = React.useState(value)
 
   onUpdate(() => {
@@ -66,40 +67,44 @@ export const Slider = (props: SliderProps) => {
     }
   }, [value])
 
-  const styles = useStylesFor(Slider.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
   const thumbStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.thumb,
-      disabled && styles['thumb:disabled'],
+      variantStyles.thumb,
+      disabled && variantStyles['thumb:disabled'],
     ])
   }, [])
 
   const trackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.track,
-      disabled && styles['track:disabled'],
+      variantStyles.track,
+      disabled && variantStyles['track:disabled'],
     ])
   }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.selectedTrack,
-      disabled && styles['selectedTrack:disabled'],
+      variantStyles.selectedTrack,
+      disabled && variantStyles['selectedTrack:disabled'],
     ])
   }, [disabled])
 
   const unselectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.unselectedTrack,
-      disabled && styles['unselectedTrack:disabled'],
+      variantStyles.unselectedTrack,
+      disabled && variantStyles['unselectedTrack:disabled'],
     ])
   }, [disabled])
 
   const containerStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.sliderContainer,
-      disabled && styles['sliderContainer:disabled'],
+      variantStyles.sliderContainer,
+      disabled && variantStyles['sliderContainer:disabled'],
     ])
   }, [disabled])
 
@@ -114,8 +119,8 @@ export const Slider = (props: SliderProps) => {
 
   const trackMarkStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      styles?.trackMark,
-      disabled && styles['trackMark:disabled'],
+      variantStyles.trackMark,
+      disabled && variantStyles['trackMark:disabled'],
     ])
   }, [disabled])
 
@@ -123,32 +128,31 @@ export const Slider = (props: SliderProps) => {
     <InputBase
       {..._inputBaseProps}
       disabled={disabled}
-      style={styles}
+      styles={variantStyles}
       labelAsRow
     >
       {label || description ? (
-        <View style={styles.labelRow}>
+        <View style={variantStyles.labelRow}>
           {label ? (
             <Touchable
               onPress={() => labelClickable ? onValueChange(sliderProps?.minimumValue || minimumValue) : null}
-              style={styles.labelBtn}
+              styles={variantStyles.labelBtn}
               debugName='slider title'
             >
-              <Text style={styles?.label} text={label} />
+              <Text style={variantStyles.label} text={label}/>
             </Touchable>
           ) : null}
           {description ? (
             <Touchable
               onPress={() => labelClickable ? onValueChange(sliderProps?.maximumValue || maximumValue) : null}
-              style={styles?.descriptionBtn}
+              styles={variantStyles.descriptionBtn}
               debugName='slider description'
             >
-              <Text style={styles?.description} text={description} />
+              <Text style={variantStyles.description} text={description}/>
             </Touchable>
           ) : null}
         </View>
       ) : null}
-
       <RNSlider
         value={_value}
         onValueChange={_setValue}
@@ -170,17 +174,16 @@ export const Slider = (props: SliderProps) => {
       />
       {
         trackMarksProp ? (
-          <View style={styles?.trackMarkWrapper}>
+          <View style={variantStyles.trackMarkWrapper}>
             {
               trackMarksProp.map((_, idx) => {
                 let idxStyle = {}
 
                 if (idx === 0) {
-                  idxStyle = styles?.firstTrackMark
+                  idxStyle = variantStyles.firstTrackMark
                 } else if (idx === trackMarksProp.length - 1) {
-                  idxStyle = styles?.lastTrackMark
+                  idxStyle = variantStyles.lastTrackMark
                 }
-
                 const style = [
                   trackMarkStyle,
                   idxStyle,
@@ -214,21 +217,3 @@ export const Slider = (props: SliderProps) => {
   )
 }
 
-Slider.styleRegistryName = 'Slider'
-Slider.rootElement = 'wrapper'
-Slider.elements = [
-  ...InputBase.elements,
-  'thumb', 'track', 'selectedTrack', 'unselectedTrack', 'firstTrackMark', 'lastTrackMark', 'sliderContainer', 'labelBtn', 'descriptionBtn'
-]
-
-Slider.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Slider as (props: StyledComponentProps<SliderProps, typeof styles>) => IJSX
-}
-
-Slider.defaultProps = {
-  trackMarksClickable: false,
-  labelClickable: false,
-  trackMarkComponent: DefaultSliderTrackMark,
-} as Partial<SliderProps>
-
-MobileStyleRegistry.registerComponent(Slider)

package/src/components/Slider/styles.ts

@@ -1,24 +1,15 @@
-import { PartialComponentStyle } from '@codeleap/common'
+import { PartialComponentStyle, TouchableComposition, createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts, InputBaseStates } from '../InputBase'
-import { TouchableComposition, TouchableStylesGen } from '../Touchable'
-
-type SliderParts =
-  'thumb' |
-  'track' |
-  'selectedTrack' |
-  'unselectedTrack' |
-  'trackMark' |
-  'firstTrackMark' |
-  'lastTrackMark' |
-  'trackMarkWrapper' |
-  'sliderContainer' |
-  IconLessInputBaseParts
+import { TouchableStylesGen } from '../Touchable'
 
+type SliderParts = 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
 type SliderStates = Exclude<InputBaseStates, 'focus'>
 
 export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts | 'labelBtn' | 'descriptionBtn'
-
 export type SliderStylesGen = {
   labelBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
   descriptionBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
 }
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+
+export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))

package/src/components/Slider/types.ts

@@ -1,22 +1,27 @@
-import { SliderComposition } from './styles'
+import { ComponentVariants, Form, PropsOf, SliderStyles } from '@codeleap/common'
+
+import {
+  SliderComposition,
+} from './styles'
+
 import { SliderProps as RNSliderProps } from '@miblanchard/react-native-slider/lib/types'
+import { StylesOf } from '../../types'
+import { View } from '../View'
 import { InputBaseProps } from '../InputBase'
-import { StyledProp } from '@codeleap/styles'
 
-export type SliderProps =
-  Partial<Omit<RNSliderProps, 'value' | 'onValueChange' | 'style'>> &
-  Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> &
-  {
+export type SliderProps = Partial<Omit<RNSliderProps, 'value' | 'onValueChange'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
     debounce?: number | null
     trackMarklabels: string[]
     value: number | number[]
-    onValueChange: (val: number | number[]) => void
+    onValueChange: (val: number| number[]) => void
+    variants?: ComponentVariants<typeof SliderStyles>['variants']
+    styles?: StylesOf<SliderComposition>
+    style?: PropsOf<typeof View>['style']
     trackMarks?: RNSliderProps['trackMarks'] | Record<number, string>
     trackMarksClickable?: boolean
     labelClickable?: boolean
     trackMarkComponent?: React.ComponentType<TrackMarkProps>
-    style?: StyledProp<SliderComposition>
-  }
+}
 
 export type TrackMarkProps = {
   index: number

package/src/components/Switch/index.tsx

@@ -1,15 +1,35 @@
-import React from 'react'
+import * as React from 'react'
+import {
+
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  PropsOf,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
 import { View } from '../View'
-import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
+
+import {
+  SwitchPresets,
+  SwitchComposition,
+} from './styles'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../..'
 import { Touchable } from '../Touchable'
-import { SwitchProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
 
 export * from './styles'
-export * from './types'
+
+export type SwitchProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & {
+  variants?: ComponentVariants<typeof SwitchPresets>['variants']
+  styles?: StylesOf<SwitchComposition>
+  value: boolean
+  onValueChange: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  switchOnLeft?: boolean
+}
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
@@ -17,13 +37,11 @@ export const Switch = (props: SwitchProps) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...Switch.defaultProps,
-    ...props,
-  })
-
+  } = selectInputBaseProps(props)
   const {
-    style,
+    variants = [],
+    style = {},
+    styles = {},
     value,
     disabled,
     debugName,
@@ -31,39 +49,45 @@ export const Switch = (props: SwitchProps) => {
     switchOnLeft,
   } = others
 
-  const styles = useStylesFor(Switch.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
+    variants,
+    styles,
+    rootElement: 'wrapper',
+    transform: StyleSheet.flatten,
+  })
 
   const trackAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
-    transition: styles['track:transition'],
+    transition: variantStyles['track:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
+        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
       }
-      const style = value ? styles['track:on'] : styles['track:off']
+      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
 
       return {
         ...style,
         ...disabledStyle,
       }
+
     },
     dependencies: [value, disabled],
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
-    transition: styles['thumb:transition'],
+    transition: variantStyles['thumb:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
+        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
       }
-      const style = value ? styles['thumb:on'] : styles['thumb:off']
+      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
@@ -73,14 +97,13 @@ export const Switch = (props: SwitchProps) => {
     dependencies: [value, disabled],
   })
 
-  // @ts-expect-error
-  const _switchOnLeft = switchOnLeft ?? styles?.__props?.switchOnLeft
+  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
   return <InputBase
     {...inputBaseProps}
     debugName={debugName}
     wrapper={Touchable}
-    style={styles}
+    styles={variantStyles}
     wrapperProps={{
       onPress: () => {
         onValueChange(!value)
@@ -89,36 +112,26 @@ export const Switch = (props: SwitchProps) => {
       rippleDisabled: true,
     }}
     order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
     disabled={disabled}
+
   >
     <View
       animated
-      animatedStyle={trackAnimation}
       style={[
-        styles?.track,
-        disabled && styles['track:disabled'],
+        variantStyles.track,
+        disabled && variantStyles['track:disabled'],
+        trackAnimation,
       ]}
     >
       <View
         animated
-        animatedStyle={thumbAnimation}
         style={[
-          styles?.thumb,
-          disabled && styles['thumb:disabled'],
+          variantStyles.thumb,
+          disabled && variantStyles['thumb:disabled'],
+          thumbAnimation,
         ]}
       />
     </View>
   </InputBase>
 }
-
-Switch.styleRegistryName = 'Switch'
-Switch.elements = [...InputBase.elements, 'track', 'thumb']
-Switch.rootElement = 'wrapper'
-
-Switch.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Switch as (props: StyledComponentProps<SwitchProps, typeof styles>) => IJSX
-}
-
-Switch.defaultProps = {} as Partial<SwitchProps>
-
-MobileStyleRegistry.registerComponent(Switch)

package/src/components/Switch/styles.ts

@@ -1,7 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'track' | 'thumb'
-export type SwitchParts = InputBaseParts | AnimatableParts
+export type SwitchParts = InputBaseParts | AnimatableParts 
 
 export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
 
@@ -13,3 +14,8 @@ export type SwitchComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${SwitchAnimationStates}`
   | '__props'
+
+const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
+
+export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))
+

package/src/components/Text/index.tsx

@@ -1,27 +1,31 @@
-import React, { forwardRef, useState } from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { Animated, Platform, Text as NativeText } from 'react-native'
-import { TouchableFeedbackConfig, usePressableFeedback } from '../../utils'
-import { TextProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TypeGuards,
+  useState,
+} from '@codeleap/common'
+import { Animated, Platform, StyleSheet, Text as NativeText, TextProps as RNTextProps } from 'react-native'
+import { usePressableFeedback } from '../../utils'
+import { TextPresets } from './styles'
+import { ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
-export * from './types'
-
-export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const {
-    text,
-    children,
-    onPress,
-    style,
-    debounce,
-    pressDisabled,
-    animated,
-    animatedStyle,
-    ...props
-  } = {
+
+export type TextProps = RNTextProps & {
+  text?: React.ReactNode
+  variants?: ComponentVariants<typeof TextPresets>['variants']
+  animated?: boolean
+  colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+  debugName?: string
+  debounce?: number
+  pressDisabled?: boolean
+}
+
+const _Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { variants = [], text, children, onPress, style, debounce = 1000, pressDisabled, ...props } = {
     ...Text.defaultProps,
     ...textProps,
   }
@@ -34,7 +38,7 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
   const [pressed, setPressed] = useState(false)
   const pressedRef = React.useRef(false)
 
-  const _onPress: TextProps['onPress'] = (e) => {
+  const _onPress:TextProps['onPress'] = (e) => {
     if (!onPress) return
 
     if (TypeGuards.isNumber(debounce)) {
@@ -61,56 +65,48 @@ export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
       }
     }
   }
+  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'text',
+  })
 
-  const styles = useStylesFor(Text.styleRegistryName, style)
+  const styles = StyleSheet.flatten([variantStyles.text, style])
 
   if (!!text && !TypeGuards.isString(text)) return <>{text}</>
 
-  const Component = animated ? Animated.Text : NativeText
+  const Component = textProps.animated ? Animated.Text : NativeText
 
   const { getFeedbackStyle } = usePressableFeedback(styles, {
     disabled: !pressPolyfillEnabled,
-    feedbackConfig: styles?.pressFeedback as TouchableFeedbackConfig,
+    feedbackConfig: variantStyles.pressFeedback,
     hightlightPropertyIn: 'color',
     hightlightPropertyOut: 'backgroundColor',
   })
-
   const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
 
   const pressProps = !!onPress ? {
     onPress: pressDisabled ? null : _onPress,
   } : {}
 
-  const disabled = !!onPress && pressDisabled
-
-  return (
-    <Component
-      {...props}
-      onPressIn={handlePress(true)} onPressOut={handlePress(false)}
-      style={[styles?.text, animatedStyle, feedbackStyle, disabled ? styles['text:disabled'] : null]}
-      allowFontScaling={false}
-      {...pressProps}
-      // @ts-ignore
-      ref={ref}
-    >
-      {text}
-      {children}
-    </Component>
-  )
-}) as StyledComponentWithProps<TextProps>
-
-Text.styleRegistryName = 'Text'
-Text.elements = ['text', 'pressFeedback']
-Text.rootElement = 'text'
-
-Text.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Text as (props: StyledComponentProps<TextProps & { ref?: React.MutableRefObject<NativeText> }, typeof styles>) => IJSX
-}
+  return <Component {...props}
+    onPressIn={handlePress(true)} onPressOut={handlePress(false)}
+    style={[styles, feedbackStyle, !!onPress && pressDisabled ? variantStyles['text:disabled'] : null]}
+    allowFontScaling={false}
+    {...pressProps}
+    // @ts-ignore
+    ref={ref}
+  >
+    {text}
+    {children}
+  </Component>
 
-Text.defaultProps = {
-  debounce: 1000,
-} as Partial<TextProps>
+})
 
-MobileStyleRegistry.registerComponent(Text)
+export const Text = _Text as ComponentWithDefaultProps<TextProps & {ref?: React.MutableRefObject<NativeText> }>
+
+Text.defaultProps = {
+}
 
 export const AnimatedText = Animated.createAnimatedComponent(Text)
+

package/src/components/Text/styles.ts

@@ -1,4 +1,4 @@
-import { StylesOf } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
 import { FeedbackConfig } from '../../utils'
 
 export type TextComposition = 'text' | 'pressFeedback' | 'text:disabled'
@@ -6,3 +6,9 @@ export type TextComposition = 'text' | 'pressFeedback' | 'text:disabled'
 export type TextStylesGen<TCSS = any> = StylesOf<'text', TCSS> & {
   'pressFeedback'?: FeedbackConfig
 }
+
+const createTextStyle = createDefaultVariantFactory<
+  TextComposition, TextStylesGen
+>()
+
+export const TextPresets = includePresets((styles) => createTextStyle(() => ({ text: styles })))