@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/Slider/types.ts

@@ -1,27 +1,22 @@
-import { ComponentVariants, Form, PropsOf, SliderStyles } from '@codeleap/common'
-
-import {
-  SliderComposition,
-} from './styles'
-
+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'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
+export type SliderProps =
+  Partial<Omit<RNSliderProps, 'value' | 'onValueChange' | 'style'>> &
+  Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> &
+  {
     debounce?: number | null
     trackMarklabels: string[]
     value: number | number[]
-    onValueChange: (val: number| number[]) => void
-    variants?: ComponentVariants<typeof SliderStyles>['variants']
-    styles?: StylesOf<SliderComposition>
-    style?: PropsOf<typeof View>['style']
+    onValueChange: (val: number | number[]) => void
     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,35 +1,15 @@
-import * as React from 'react'
-import {
-
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  PropsOf,
-} from '@codeleap/common'
-import { StyleSheet } from 'react-native'
+import React from 'react'
 import { View } from '../View'
-
-import {
-  SwitchPresets,
-  SwitchComposition,
-} from './styles'
-import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { InputBase, InputBaseDefaultOrder, 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 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
-}
+export * from './types'
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
@@ -37,11 +17,13 @@ export const Switch = (props: SwitchProps) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps(props)
+  } = selectInputBaseProps({
+    ...Switch.defaultProps,
+    ...props,
+  })
+
   const {
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     debugName,
@@ -49,45 +31,39 @@ export const Switch = (props: SwitchProps) => {
     switchOnLeft,
   } = others
 
-  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
-    variants,
-    styles,
-    rootElement: 'wrapper',
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(Switch.styleRegistryName, style)
 
   const trackAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
-    transition: variantStyles['track:transition'],
+    transition: styles['track:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
+        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
       }
-      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
+      const style = value ? styles['track:on'] : styles['track:off']
 
       return {
         ...style,
         ...disabledStyle,
       }
-
     },
     dependencies: [value, disabled],
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
-    transition: variantStyles['thumb:transition'],
+    transition: styles['thumb:transition'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
+        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
       }
-      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
+      const style = value ? styles['thumb:on'] : styles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
@@ -97,13 +73,14 @@ export const Switch = (props: SwitchProps) => {
     dependencies: [value, disabled],
   })
 
-  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
+  // @ts-expect-error
+  const _switchOnLeft = switchOnLeft ?? styles?.__props?.switchOnLeft
 
   return <InputBase
     {...inputBaseProps}
     debugName={debugName}
     wrapper={Touchable}
-    styles={variantStyles}
+    style={styles}
     wrapperProps={{
       onPress: () => {
         onValueChange(!value)
@@ -112,26 +89,36 @@ export const Switch = (props: SwitchProps) => {
       rippleDisabled: true,
     }}
     order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
-    style={style}
     disabled={disabled}
-
   >
     <View
       animated
+      animatedStyle={trackAnimation}
       style={[
-        variantStyles.track,
-        disabled && variantStyles['track:disabled'],
-        trackAnimation,
+        styles?.track,
+        disabled && styles['track:disabled'],
       ]}
     >
       <View
         animated
+        animatedStyle={thumbAnimation}
         style={[
-          variantStyles.thumb,
-          disabled && variantStyles['thumb:disabled'],
-          thumbAnimation,
+          styles?.thumb,
+          disabled && styles['thumb:disabled'],
         ]}
       />
     </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,8 +1,7 @@
-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'
 
@@ -14,8 +13,3 @@ export type SwitchComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${SwitchAnimationStates}`
   | '__props'
-
-const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
-
-export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))
-

package/src/components/Switch/types.ts

@@ -0,0 +1,12 @@
+import { StyledProp } from '@codeleap/styles'
+import { InputBaseProps } from '../InputBase'
+import { SwitchComposition } from './styles'
+
+export type SwitchProps =
+  Omit<InputBaseProps, 'style'> &
+  {
+    value: boolean
+    onValueChange: (value: boolean) => void
+    style?: StyledProp<SwitchComposition>
+    switchOnLeft?: boolean
+  }

package/src/components/Text/index.tsx

@@ -1,31 +1,27 @@
-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'
+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'
 
 export * from './styles'
-
-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 } = {
+export * from './types'
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const {
+    text,
+    children,
+    onPress,
+    style,
+    debounce,
+    pressDisabled,
+    animated,
+    animatedStyle,
+    ...props
+  } = {
     ...Text.defaultProps,
     ...textProps,
   }
@@ -38,7 +34,7 @@ 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)) {
@@ -65,48 +61,56 @@ const _Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
       }
     }
   }
-  const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
-    variants,
-    transform: StyleSheet.flatten,
-    rootElement: 'text',
-  })
 
-  const styles = StyleSheet.flatten([variantStyles.text, style])
+  const styles = useStylesFor(Text.styleRegistryName, style)
 
   if (!!text && !TypeGuards.isString(text)) return <>{text}</>
 
-  const Component = textProps.animated ? Animated.Text : NativeText
+  const Component = animated ? Animated.Text : NativeText
 
   const { getFeedbackStyle } = usePressableFeedback(styles, {
     disabled: !pressPolyfillEnabled,
-    feedbackConfig: variantStyles.pressFeedback,
+    feedbackConfig: styles?.pressFeedback as TouchableFeedbackConfig,
     hightlightPropertyIn: 'color',
     hightlightPropertyOut: 'backgroundColor',
   })
+
   const feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined
 
   const pressProps = !!onPress ? {
     onPress: pressDisabled ? null : _onPress,
   } : {}
 
-  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>
-
-})
-
-export const Text = _Text as ComponentWithDefaultProps<TextProps & {ref?: React.MutableRefObject<NativeText> }>
+  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
+}
 
 Text.defaultProps = {
-}
+  debounce: 1000,
+} as Partial<TextProps>
 
-export const AnimatedText = Animated.createAnimatedComponent(Text)
+MobileStyleRegistry.registerComponent(Text)
 
+export const AnimatedText = Animated.createAnimatedComponent(Text)

package/src/components/Text/styles.ts

@@ -1,4 +1,4 @@
-import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { StylesOf } from '@codeleap/common'
 import { FeedbackConfig } from '../../utils'
 
 export type TextComposition = 'text' | 'pressFeedback' | 'text:disabled'
@@ -6,9 +6,3 @@ 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 })))

package/src/components/Text/types.ts

@@ -0,0 +1,18 @@
+import { StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { TextProps as RNTextProps, Animated, ViewStyle, ImageStyle, TextStyle } from 'react-native'
+import { AnimatedStyleProp } from 'react-native-reanimated'
+import { TextComposition } from './styles'
+
+export type TextProps =
+  Omit<RNTextProps, 'style'> &
+  {
+    text?: ReactNode
+    animated?: boolean
+    colorChangeConfig?: Partial<Animated.TimingAnimationConfig>
+    debugName?: string
+    debounce?: number
+    pressDisabled?: boolean
+    style?: StyledProp<TextComposition>
+    animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
+  }