@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/Pager/index.tsx

@@ -1,86 +1,27 @@
-import {
-  AnyFunction,
-  ComponentVariants,
-  onUpdate,
-  TypeGuards,
-  useDefaultComponentStyle,
-  useWarning,
-} from '@codeleap/common'
-import React, { ReactNode, useCallback, useRef } from 'react'
-import {
-  Dimensions,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  ScrollViewProps,
-  StyleSheet,
-} from 'react-native'
-import { StylesOf } from '../../types/utility'
+import React, { useCallback, useRef } from 'react'
+import { onUpdate, TypeGuards } from '@codeleap/common'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { Dimensions, ScrollView } from 'react-native'
+import { MobileStyleRegistry } from '../../Registry'
 import { View } from '../View'
-import { PagerPresets, PagerComposition } from './styles'
-export * from './styles'
-
-export type PageProps = {
-  isLast: boolean
-  isFirst: boolean
-  isActive: boolean
-  isNext: boolean
-  page: number
-  index: number
-  isPrevious: boolean
-}
+import { PageProps, PagerProps, ScrollEvent } from './types'
+import { useStylesFor } from '../../hooks'
 
-type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
-
-export type PagerProps = React.PropsWithChildren<{
-  variants?: ComponentVariants<typeof PagerPresets>['variants']
-  styles?: StylesOf<PagerComposition>
-  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
-  page?: number
-  style?: any
-  setPage?: (page: number) => void
-  returnEarly?: boolean
-  renderPageWrapper?: React.FC<PageProps>
-  pageWrapperProps?: any
-  width?: number
-  onScroll?: (event: ScrollEvent, args: { isLeft?: boolean; isRight?: boolean; x?: number }) => void
-  /** If TRUE render page, nextPage and prevPage only */
-  windowing?: boolean
-  scrollRightEnabled?: boolean
-  scrollLeftEnabled?: boolean
-  scrollDirectionThrottle?: number
-  onSwipeLastPage?: (event: ScrollEvent) => void
-  waitEventDispatchTimeout?: number
-} & ScrollViewProps>
-
-const defaultProps: Partial<PagerProps> = {
-  variants: [],
-  styles: {},
-  page: 0,
-  returnEarly: true,
-  windowing: false,
-  keyboardShouldPersistTaps: 'handled',
-  scrollEnabled: true,
-  scrollRightEnabled: true,
-  scrollLeftEnabled: true,
-  scrollDirectionThrottle: 650,
-  waitEventDispatchTimeout: 250,
-}
+export * from './styles'
+export * from './types'
 
 export const Pager = (pagerProps: PagerProps) => {
   const {
-    styles,
-    variants,
     width: widthProp,
     page,
-    style = {},
-    returnEarly = true,
+    style,
+    returnEarly,
     renderPageWrapper,
     pageWrapperProps = {},
     children,
-    windowing = false,
+    windowing,
     setPage,
-    scrollEnabled = true,
+    scrollEnabled,
     scrollLeftEnabled,
     scrollRightEnabled,
     onScroll,
@@ -88,7 +29,7 @@ export const Pager = (pagerProps: PagerProps) => {
     onSwipeLastPage,
     waitEventDispatchTimeout,
   } = {
-    ...defaultProps,
+    ...Pager.defaultProps,
     ...pagerProps,
   }
 
@@ -97,20 +38,14 @@ export const Pager = (pagerProps: PagerProps) => {
   const [positionX, setPositionX] = React.useState(0)
   const [scrollPositionX, setScrollPositionX] = React.useState(0)
   const [_scrollEnabled, setScrollEnabled] = React.useState(true)
-
   const waitEventDispatch = useRef(false)
 
-  const variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
-    'u:Pager',
-    {
-      styles,
-      transform: StyleSheet.flatten,
-      variants,
-    },
-  )
+  const styles = useStylesFor(Pager.styleRegistryName, style)
 
   const windowWidth = Dimensions.get('window').width
-  let width = widthProp ?? variantStyles.wrapper.width
+
+  // @ts-expect-error
+  let width = widthProp ?? styles?.wrapper?.width
 
   const validWidth = TypeGuards.isNumber(width)
 
@@ -118,12 +53,6 @@ export const Pager = (pagerProps: PagerProps) => {
     width = windowWidth
   }
 
-  useWarning(
-    !validWidth,
-    'Pager',
-    'provided width is not a number, using default width',
-  )
-
   const nChildren = React.Children.count(children)
 
   const lastPage = nChildren - 1
@@ -134,7 +63,7 @@ export const Pager = (pagerProps: PagerProps) => {
 
   const handleScrollEnd = useCallback((event: ScrollEvent) => {
     if (!scrollEnabled) return null
-    
+
     if (waitEventDispatch.current === true) return null
 
     waitEventDispatch.current = true
@@ -213,13 +142,12 @@ export const Pager = (pagerProps: PagerProps) => {
       onMomentumScrollEnd={handleScrollEnd}
       scrollEventThrottle={hasScrollDirectionDisabled ? 2000 : 300}
       showsHorizontalScrollIndicator={false}
-      style={[variantStyles.wrapper, style]}
       {...pagerProps}
+      style={styles?.wrapper}
       onScroll={handleScroll}
       scrollEnabled={childArr.length > 1 && scrollEnabled && _scrollEnabled}
     >
       {childArr.map((child: PagerProps['children'][number], index) => {
-
         const isActive = index === page
         const isLast = index === lastPage
         const isFirst = index === 0
@@ -246,8 +174,8 @@ export const Pager = (pagerProps: PagerProps) => {
 
         const wrapperProps = {
           key: index,
-          style: [{ height: '100%', width }, variantStyles.page],
           ...pageWrapperProps,
+          style: [{ height: '100%', width }, styles?.page],
         }
 
         return <WrapperComponent {...wrapperProps}>{content}</WrapperComponent>
@@ -256,4 +184,24 @@ export const Pager = (pagerProps: PagerProps) => {
   )
 }
 
-Pager.defaultProps = defaultProps
+Pager.styleRegistryName = 'Pager'
+Pager.elements = ['page', 'wrapper']
+Pager.rootElement = 'wrapper'
+
+Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Pager as (props: StyledComponentProps<PagerProps, typeof styles>) => IJSX
+}
+
+Pager.defaultProps = {
+  page: 0,
+  returnEarly: true,
+  windowing: false,
+  keyboardShouldPersistTaps: 'handled',
+  scrollEnabled: true,
+  scrollRightEnabled: true,
+  scrollLeftEnabled: true,
+  scrollDirectionThrottle: 650,
+  waitEventDispatchTimeout: 250,
+} as Partial<PagerProps>
+
+MobileStyleRegistry.registerComponent(Pager)

package/src/components/Pager/styles.ts

@@ -1,14 +1,2 @@
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-
-
-export type PagerComposition =
-  | 'page'
-  | 'wrapper'
-
-const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
-
-export const PagerPresets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })))
 
+export type PagerComposition = 'page' | 'wrapper'

package/src/components/Pager/types.ts

@@ -0,0 +1,37 @@
+import { StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps } from 'react-native'
+import { PagerComposition } from './styles'
+
+export type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+export type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
+
+export type PagerProps =
+  Omit<ScrollViewProps, 'style'> &
+  {
+    children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
+    page?: number
+    setPage?: (page: number) => void
+    returnEarly?: boolean
+    renderPageWrapper?: React.FC<PageProps>
+    pageWrapperProps?: any
+    width?: number
+    onScroll?: (event: ScrollEvent, args: { isLeft?: boolean; isRight?: boolean; x?: number }) => void
+    /** If TRUE render page, nextPage and prevPage only */
+    windowing?: boolean
+    scrollRightEnabled?: boolean
+    scrollLeftEnabled?: boolean
+    scrollDirectionThrottle?: number
+    onSwipeLastPage?: (event: ScrollEvent) => void
+    waitEventDispatchTimeout?: number
+    style?: StyledProp<PagerComposition>
+  }

package/src/components/PaginationIndicator/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { TypeGuards } from '@codeleap/common'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { Text } from '../Text'
+import { AnyRecord, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
+import { PaginationIndicatorProps } from './types'
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const {
+    hasMore,
+    isFetching,
+    noMoreItemsText,
+    style,
+    activityIndicator,
+  } = {
+    ...PaginationIndicator.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(PaginationIndicator.styleRegistryName, style)
+
+  const loaderStyles = useNestedStylesByKey('loader', styles)
+
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator style={loaderStyles} />
+  }
+
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text style={styles.text} text={noMoreItemsText.toString()} />
+    }
+
+    return noMoreItemsText
+  }
+
+  return null
+}
+
+PaginationIndicator.styleRegistryName = 'PaginationIndicator'
+PaginationIndicator.elements = ['text', 'loader']
+PaginationIndicator.rootElement = 'text'
+
+PaginationIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return PaginationIndicator as (props: StyledComponentProps<PaginationIndicatorProps, typeof styles>) => IJSX
+}
+
+PaginationIndicator.defaultProps = {} as PaginationIndicatorProps
+
+MobileStyleRegistry.registerComponent(PaginationIndicator)

package/src/components/PaginationIndicator/styles.ts

@@ -0,0 +1,3 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`

package/src/components/PaginationIndicator/types.ts

@@ -0,0 +1,10 @@
+import { StyledProp } from '@codeleap/styles'
+import { PaginationIndicatorComposition } from './styles'
+
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  noMoreItemsText: JSX.Element | string | number
+  hasMore?: boolean
+  activityIndicator?: JSX.Element
+  style?: StyledProp<PaginationIndicatorComposition>
+}

package/src/components/RadioInput/index.tsx

@@ -1,50 +1,18 @@
 import React from 'react'
-import { ReactNode, ComponentPropsWithoutRef } from 'react'
-
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
-import {
-  ComponentVariants,
-  FormTypes,
-  getNestedStylesByKey,
-  StylesOf,
-  TypeGuards,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
 import { View } from '../View'
-import { RadioInputComposition, RadioInputPresets } from './styles'
-import { InputLabel } from '../InputLabel'
-import { StyleSheet } from 'react-native'
-import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
-export * from './styles'
-
-type WrapperProps = InputBaseProps
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import { RadioGroupProps, RadioOptionProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
-type RadioOption<T> = FormTypes.Options<T>[number] & {
-  disabled?: boolean
-}
-export type RadioGroupProps<T extends string|number> = WrapperProps & {
-  options: RadioOption<T>[]
-  value: T
-  onValueChange(value: T): void
-  label: ReactNode
-  styles?: StylesOf<RadioInputComposition>
-  variants?: ComponentVariants<typeof RadioInputPresets>['variants']
-  radioOnRight?: boolean
-}
-
-type OptionProps<T extends string|number> = {
-  item: RadioOption<T>
-  selected: boolean
-  onSelect(): void
-  styles?: StylesOf<RadioInputComposition>
-  debugName?: string
-  disabled?: boolean
-  separator?: boolean
-  reverseOrder?: boolean
-}
+export * from './styles'
+export * from './types'
 
-const Option = <T extends string|number>(props: OptionProps<T>) => {
+const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
   const {
     debugName,
     item,
@@ -90,7 +58,6 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
       onPress={onSelect}
       disabled={isDisabled}
     >
-
       {reverseOrder ? (
         <>
           {label}
@@ -128,41 +95,38 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
       )}
 
     </Touchable>
-    {separator && <View style={styles.optionSeparator} />}
+    {separator ? <View style={styles.optionSeparator} /> : null}
   </>
 }
 
-export const RadioGroup = <T extends string|number>(
-  props: RadioGroupProps<T>,
-) => {
+export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps(props)
+  } = selectInputBaseProps({
+    ...RadioGroup.defaultProps,
+    ...props,
+  })
 
   const {
     options,
     value,
     onValueChange,
-    variants,
-    styles,
     disabled,
     debugName,
     radioOnRight,
+    style,
   } = others
 
-  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(RadioGroup.styleRegistryName, style)
 
-  const _radioOnRight = radioOnRight ?? variantStyles.__props?.radioOnRight
+  // @ts-expect-error icss type
+  const _radioOnRight = radioOnRight ?? styles?.__props?.radioOnRight
 
   return <InputBase
     {...inputBaseProps}
     disabled={disabled}
-    styles={variantStyles}
+    style={styles}
     debugName={debugName}
   >
     {options?.map((item, idx) => (
@@ -171,7 +135,7 @@ export const RadioGroup = <T extends string|number>(
         item={item}
         key={idx}
         disabled={disabled}
-        styles={variantStyles}
+        styles={styles}
         selected={value === item.value}
         onSelect={() => onValueChange(item.value)}
         separator={idx < options.length - 1}
@@ -179,5 +143,16 @@ export const RadioGroup = <T extends string|number>(
       />
     ))}
   </InputBase>
+}
+
+RadioGroup.styleRegistryName = 'RadioGroup'
+RadioGroup.elements = [...InputBase.elements, 'option', '__props']
+RadioGroup.rootElement = 'wrapper'
 
+RadioGroup.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return RadioGroup as (<T extends string | number>(props: StyledComponentProps<RadioGroupProps<T>, typeof styles>) => IJSX)
 }
+
+RadioGroup.defaultProps = {} as Partial<RadioGroupProps<string | number>>
+
+MobileStyleRegistry.registerComponent(RadioGroup)

package/src/components/RadioInput/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts } from '../InputBase'
 
 type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
@@ -6,9 +5,8 @@ type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
 
 type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
 
-export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}` | '__props'
-
-const createRadioStyle =
-  createDefaultVariantFactory<RadioInputComposition>()
-
-export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))
+export type RadioInputComposition =
+  IconLessInputBaseParts |
+  `${IconLessInputBaseParts}:disabled` |
+  `option${Capitalize<OptionComposition>}` |
+  '__props'

package/src/components/RadioInput/types.ts

@@ -0,0 +1,31 @@
+import { FormTypes, StylesOf } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { RadioInputComposition } from './styles'
+import { InputBaseProps } from '../InputBase'
+
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
+}
+
+export type RadioGroupProps<T extends string | number> =
+  Omit<InputBaseProps, 'style'> &
+  {
+    options: RadioOption<T>[]
+    value: T
+    onValueChange(value: T): void
+    label: ReactNode
+    radioOnRight?: boolean
+    style?: StyledProp<RadioInputComposition>
+  }
+
+export type RadioOptionProps<T extends string | number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+  reverseOrder?: boolean
+  styles?: StylesOf<RadioInputComposition>
+}

package/src/components/RefreshControl/index.tsx

@@ -1,28 +1,48 @@
-import { ComponentVariants, StylesOf, useDefaultComponentStyle } from '@codeleap/common'
-import { RefreshControl as RNRefreshControl, RefreshControlProps as RNRefreshControlProps } from 'react-native'
-import { RefreshControlComposition, RefreshControlPresets } from './styles'
+import React from 'react'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { RefreshControl as RNRefreshControl } from 'react-native'
+import { MobileStyleRegistry } from '../../Registry'
+import { RefreshControlProps } from './types'
+import { useStylesFor } from '../../hooks'
+import { ColorValue } from 'react-native'
 
-export type RefreshControlProps = {
-  styles?: StylesOf<RefreshControlComposition>
-} & RNRefreshControlProps & ComponentVariants<typeof RefreshControlPresets>
+export * from './styles'
+export * from './types'
+
+export const RefreshControl = (props: RefreshControlProps) => {
+  const {
+    style,
+    ...rest
+  } = {
+    ...RefreshControl.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(RefreshControl.styleRegistryName, style)
 
-export const RefreshControl = (props:RefreshControlProps) => {
-  const { variants = [], styles } = props
+  const color: ColorValue = (styles?.loadingAnimation as AnyRecord)?.color
+  const titleColor: ColorValue = (styles?.titleColor as AnyRecord)?.color
+  const progressBackgroundColor: ColorValue = (styles?.progressBackgroundColor as AnyRecord)?.color
 
-  const variantStyles = useDefaultComponentStyle<'u:RefreshControl', typeof RefreshControlPresets>('u:RefreshControl', {
-    variants,
-    styles,
-  })
   return (
     <RNRefreshControl
-      colors={[variantStyles.loadingAnimation?.color]}
-      tintColor={variantStyles.loadingAnimation?.color}
-      progressBackgroundColor={variantStyles.progressBackgroundColor?.color}
-      titleColor={variantStyles.titleColor?.color}
-      {...props}
+      colors={[color]}
+      tintColor={color}
+      progressBackgroundColor={progressBackgroundColor}
+      titleColor={titleColor}
+      {...rest}
     />
-
   )
 }
 
-export * from './styles'
+RefreshControl.styleRegistryName = 'RefreshControl'
+RefreshControl.elements = ['loadingAnimation', 'progressBackgroundColor', 'titleColor']
+RefreshControl.rootElement = 'wrapper'
+
+RefreshControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return RefreshControl as (props: StyledComponentProps<RefreshControlProps, typeof styles>) => IJSX
+}
+
+RefreshControl.defaultProps = {} as Partial<RefreshControlProps>
+
+MobileStyleRegistry.registerComponent(RefreshControl)

package/src/components/RefreshControl/styles.ts

@@ -1,7 +1,2 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-export type RefreshControlComposition = 'loadingAnimation' |'progressBackgroundColor' | 'titleColor'
-
-const createRefreshControlStyle = createDefaultVariantFactory<RefreshControlComposition>()
-
-export const RefreshControlPresets = includePresets(style => createRefreshControlStyle(() => ({ loadingAnimation: style })))
+export type RefreshControlComposition = 'loadingAnimation' | 'progressBackgroundColor' | 'titleColor'

package/src/components/RefreshControl/types.ts

@@ -0,0 +1,9 @@
+import { StyledProp } from '@codeleap/styles'
+import { RefreshControlProps as RNRefreshControlProps } from 'react-native'
+import { RefreshControlComposition } from './styles'
+
+export type RefreshControlProps =
+  Omit<RNRefreshControlProps, 'style'> &
+  {
+    style?: StyledProp<RefreshControlComposition>
+  }