@codeleap/mobile 3.24.3 → 4.0.0

package/src/components/View/index.tsx

@@ -1,107 +1,38 @@
 import React from 'react'
-import { forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  ViewStyles,
-  useCodeleapContext,
-  useMemo,
-  AnyRef,
-  TypeGuards,
-} from '@codeleap/common'
-import { View as NativeView, ViewProps as RNViewProps } from 'react-native'
-import { TransitionConfig } from '../../types'
+import { View as RNView } from 'react-native'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
 import Animated from 'react-native-reanimated'
-export * from './styles'
-
-type NativeViewProps = RNViewProps
-
-export type ViewRefType = NativeView
+import { ViewProps } from './types'
+import { useStylesFor } from '../../hooks'
 
-export type ViewProps = {
-  ref?: AnyRef<ViewRefType>
-  component?: any
-  animated?: boolean
-  keyboardAware?: boolean
-  transition?: Partial<TransitionConfig>
-}
-  & NativeViewProps
-  & ComponentVariants<typeof ViewStyles>
+export * from './types'
+export * from './styles'
 
-export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
+export const View = <T extends React.ComponentType = typeof RNView>(props: ViewProps<T>) => {
   const {
-    responsiveVariants = {},
-    variants = [],
-    children,
     style,
-    keyboardAware,
-    component,
+    component: _Component = RNView,
     animated = false,
-    ...props
-  } = viewProps
+    animatedStyle,
+    ...viewProps
+  } = props
 
-  const variantStyles = useDefaultComponentStyle('View', {
-    responsiveVariants,
-    variants,
-  })
-  const Component = animated ? Animated.View : component || NativeView
+  const styles = useStylesFor(View.styleRegistryName, style)
+
+  const Component: React.ComponentType<AnyRecord> = animated ? Animated.View : _Component
 
   return (
-    <Component {...props} style={[variantStyles.wrapper, style]}>
-      {children}
-    </Component>
+    <Component {...viewProps} style={[styles.wrapper, animatedStyle]} />
   )
-}) as unknown as ((props: ViewProps) => JSX.Element)
-
-type GapProps = ViewProps & {
-  value: number
-  crossValue?: number
-  defaultProps?: any
 }
 
-export const Gap = ({ children, value, defaultProps = {}, crossValue = null, ...props }: GapProps) => {
-  const { Theme } = useCodeleapContext()
-  const childArr = React.Children.toArray(children)
-
-  const horizontal = props.variants?.includes('row')
-
-  const spacings = useMemo(() => {
-    return childArr.map((_, idx) => {
-
-      const space = Theme.spacing.value(value)
-      const crossSpace = Theme.spacing.value(crossValue)
+View.styleRegistryName = 'View'
+View.elements = ['wrapper']
+View.rootElement = 'wrapper'
 
-      const isLast = idx === childArr.length - 1
-
-      const spacingProperty = horizontal ? 'marginRight' : 'marginBottom'
-      const crossSpacingProperty = horizontal ? 'marginBottom' : 'marginRight'
-
-      const style = isLast ? {} : {
-        [spacingProperty]: space,
-      }
-
-      if (!TypeGuards.isNil(crossValue)) {
-        style[crossSpacingProperty] = crossSpace
-      }
-
-      return style
-    })
-
-  }, [childArr.length, horizontal])
-
-  return (
-    <View {...props}>
-      {
-        childArr.map((Element, idx, childArr) => {
-          if (React.isValidElement(Element)) {
-            const props = { ...Element.props, ...defaultProps }
-
-            props.style = [props.style, spacings[idx]]
-            return React.cloneElement(Element, props)
-          }
-          return Element
-        })
-      }
-    </View>
-  )
+View.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return View as (<T extends React.ComponentType = typeof RNView>(props: StyledComponentProps<ViewProps<T>, typeof styles>) => IJSX)
 }
+
+MobileStyleRegistry.registerComponent(View)

package/src/components/View/styles.ts

@@ -1,8 +1,2 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type ViewComposition = 'wrapper'
-
-const createViewStyle = createDefaultVariantFactory<ViewComposition>()
-
-export const ViewPresets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })))
-

package/src/components/View/types.ts

@@ -0,0 +1,13 @@
+import { PropsOf } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { ImageStyle, TextStyle, View as RNView, ViewStyle } from 'react-native'
+import { AnimatedStyleProp } from 'react-native-reanimated'
+import { ViewComposition } from './styles'
+
+export type ViewProps<T extends React.ComponentType = typeof RNView> = {
+  component?: T
+  style?: StyledProp<ViewComposition>
+  animated?: boolean
+  children?: React.ReactNode
+  animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
+} & PropsOf<T>

package/src/components/components.ts

@@ -7,7 +7,6 @@ export * from './Checkbox'
 export * from './TextInput'
 export * from './RadioInput'
 export * from './Switch'
-export * from './ContentView'
 export * from './Sections'
 export * from './Select'
 export * from './FileInput'
@@ -18,7 +17,6 @@ export * from './Scroll'
 export * from './List'
 export * from './ActivityIndicator'
 export * from './Button'
-export * from './ContentView'
 export * from './Modal'
 export * from './Calendar'
 export * from './ImageView'
@@ -26,11 +24,9 @@ export * from './Navigation'
 export * from './Pager'
 export * from './EmptyPlaceholder'
 export * from './Backdrop'
-export * from './Drawer'
 export * from './SegmentedControl'
 export * from './Autocomplete'
 export * from './Grid'
-export * from './InputLabel'
 export * from './LoadingOverlay'
 export * from './ActionIcon'
 export * from './InputBase'
@@ -40,5 +36,5 @@ export * from './Avatar'
 export * from './AvatarGroup'
 export * from './NumberIncrement'
 export * from './Badge'
-
-export * from './defaultStyles'
+export * from './SearchInput'
+export * from './PaginationIndicator'

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+import { StyleProp, useStyleObserver } from '@codeleap/styles'
+import { useMemo } from 'react'
+import { MobileStyleRegistry } from '../Registry'
+
+export const useStylesFor = <T = unknown>(componentName: string, style: StyleProp<T, string>): T => {
+  const styleObserver = useStyleObserver(style)
+
+  const styles = useMemo(() => {
+    return MobileStyleRegistry.current.styleFor(componentName, style)
+  }, [styleObserver])
+
+  return styles
+}

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from './components/components'
 export { Linking } from 'react-native'
 export * from './utils'
+export * from './hooks'
 import uuid from 'react-native-uuid'
 import * as RNKeyboardAwareScrollView from './utils/KeyboardAware'
 export { uuid, RNKeyboardAwareScrollView }
+export { MobileStyleRegistry } from './Registry'

package/src/modules/PressableRipple/type.ts

@@ -10,6 +10,7 @@ export type PressableRippleProps = {
   rippleCentered?: boolean;
   rippleSequential?: boolean;
   rippleFades?: boolean;
+  color?: string
   onRippleAnimation?: (
     animation: Animated.CompositeAnimation,
     callback: () => void,

package/src/utils/KeyboardAware/context.tsx

@@ -11,11 +11,9 @@ type TKeyboardCtx = {
  * @deprecated useKeyboard does not need to be wrapped in a provider
  */
 export const KeyboardProvider = ({ children }) => {
-
   return <>
     {children}
   </>
-
 }
 
 export const useKeyboard = (): TKeyboardCtx => {

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -1,4 +1,4 @@
-import { PropsOf, useCodeleapContext, TypeGuards } from '@codeleap/common'
+import { PropsOf, TypeGuards } from '@codeleap/common'
 import { ScrollView, Platform, StyleSheet, Dimensions, EasingFunction, Easing } from 'react-native'
 import { TransitionConfig } from '../../types'
 import { useKeyboard } from './context'
@@ -26,7 +26,6 @@ type UseKeyboardAwareViewParams = {
 
 export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
   const keyboard = useKeyboard()
-  const { logger } = useCodeleapContext()
   const options = params || {}
 
   const _options:GetKeyboardAwarePropsOptions = {

package/src/utils/ModalManager/components.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react'
+import React from 'react'
 import { usePrevious, onMount, onUpdate, PropsOf } from '@codeleap/common'
 import { useModalContext } from './context'
 import { Portal } from '@gorhom/portal'
 import { Modal as _Modal } from '../../components/Modal'
-import { Drawer as _Drawer } from '../../components/Drawer'
 
 type UseManagedModalArgs = {
   id?: string
@@ -82,31 +81,3 @@ export const Modal:React.FC<ManagedModalProps> = ({
 
   return content
 }
-
-export type ManagedDrawerProps<T = PropsOf<typeof _Drawer>> = Omit<T, 'visible' | 'toggle'> & UseManagedModalArgs & {
-
-  absolute?: boolean
-
-}
-
-export const Drawer:React.FC<ManagedDrawerProps> = ({
-  children,
-  absolute = true,
-  ...props
-}) => {
-  const componentProps = useManagedModal(props)
-
-  const content = (
-    <_Drawer {...componentProps}>
-      {children}
-    </_Drawer>
-  )
-
-  if (absolute) {
-    return <Portal>
-      {content}
-    </Portal>
-  }
-
-  return content
-}

package/src/utils/ModalManager/context.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { AnyFunction, onUpdate, TypeGuards, useCodeleapContext, useState } from '@codeleap/common'
+import React from 'react'
+import { AnyFunction, onUpdate, TypeGuards, useState } from '@codeleap/common'
 import { PortalProvider } from '@gorhom/portal'
 import { KeyboardProvider } from '../KeyboardAware'
 
@@ -69,8 +69,8 @@ export function Provider({ children }) {
 
   }
 
-  const codeleapCtx = useCodeleapContext()
-  const defaultDuration = codeleapCtx?.Theme?.values?.transitions?.modal?.duration || 300
+  // const codeleapCtx = useCodeleapContext()
+  const defaultDuration = 300
   const transition:TModalContext['transition'] = (from, to, options) => {
     return new Promise((resolve) => {
       setTimeout(() => {

package/src/utils/ModalManager/index.ts

@@ -1,16 +1,13 @@
 import { useModalContext, useModalSequence, Provider } from './context'
-import { Modal, ManagedModalProps, Drawer, ManagedDrawerProps } from './components'
+import { Modal, ManagedModalProps } from './components'
 
 export const ModalManager = {
   useModalContext,
   Modal,
-  Drawer,
   Provider,
   useModalSequence,
 }
 
 export type {
   ManagedModalProps,
-  ManagedDrawerProps,
-
 }

package/src/utils/hooks.ts

@@ -6,6 +6,7 @@ import { AnimatedStyleProp, Easing, EasingFn, interpolateColor, runOnJS, useAnim
 import { PressableRippleProps } from '../modules/PressableRipple/type'
 import { useSoftInputState } from 'react-native-avoid-softinput'
 import { useMemo } from 'react'
+import { mergeStyles } from '@codeleap/styles'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -199,6 +200,16 @@ type RippleConfig = {
 }
 export type TouchableFeedbackConfig = RippleConfig | FeedbackConfig
 
+export type TouchFeedbackConfig = {
+  type?: 'ripple' | 'opacity' | 'highlight' | 'styles' | 'none'
+  config?: PressableRippleProps
+  iosFallback?: FeedbackConfig
+  value?: number
+  brightness?: number
+  shiftOpacity?: number
+  styles?: StyleProp<ViewStyle>
+}
+
 export type UsePressableFeedbackConfig = {
   disabled?: boolean
   feedbackConfig?: TouchableFeedbackConfig
@@ -353,5 +364,5 @@ export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
 
   const totalPadding = softInputHeight + bottomPadding
 
-  return isSoftInputShown && enabled ? [propStyle, { paddingBottom: totalPadding }] : [propStyle]
+  return isSoftInputShown && enabled ? mergeStyles([propStyle, { paddingBottom: totalPadding }]) : propStyle
 }

package/src/components/Calendar/style.ts

@@ -1,6 +0,0 @@
-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/ContentView/index.tsx

@@ -1,63 +0,0 @@
-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

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

package/src/components/Drawer/index.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react'
-
-import { ComponentVariants, useDefaultComponentStyle } from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-import Modal, { ModalProps } from '../Modal'
-import { DrawerPresets } from './styles'
-export * from './styles'
-export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerPresets>
-
-export const Drawer:React.FC<DrawerProps> = (props) => {
-  const { variants, styles, scrollProps, ...modalProps } = props
-
-  const variantStyles = useDefaultComponentStyle('u:Drawer', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
-
-  return <Modal
-    styles={variantStyles}
-    scroll={false}
-
-    {...modalProps}
-    scrollProps={{
-      ...scrollProps,
-    }}
-  />
-}

package/src/components/Drawer/styles.ts

@@ -1,8 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ModalComposition } from '../Modal'
-
-export type DrawerComposition = ModalComposition
-
-const createModalStyle = createDefaultVariantFactory<DrawerComposition>()
-
-export const DrawerPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/FileInput/styles.ts

@@ -1,8 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type FileInputComposition = 'label' | 'wrapper' | 'input'
-
-const createFileInputStyle =
-  createDefaultVariantFactory<FileInputComposition>()
-
-export const FileInputPresets = includePresets((styles) => createFileInputStyle(() => ({ wrapper: styles })))

package/src/components/InputLabel/index.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
-import { StylesOf } from '../../types'
-import { View, ViewProps } from '../View'
-import { InputLabelComposition, InputLabelPresets } from './styles'
-import { Text } from '../Text'
-import { StyleSheet } from 'react-native'
-
-export type InputLabelProps = ViewProps & {
-    styles?: StylesOf<InputLabelComposition>
-    label?: FormTypes.Label
-    required?: boolean
-} & ComponentVariants<typeof InputLabelPresets>
-
-export * from './styles'
-
-export const InputLabel:React.FC<InputLabelProps> = (props) => {
-  const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
-  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelPresets>('u:InputLabel', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
-
-  if (!label) return null
-
-  switch (typeof label) {
-    case 'string':
-      return <View {...viewProps} style={[variantStyles.wrapper, style]}>
-        <Text style={variantStyles.text} text={label} />
-        {required && <Text style={variantStyles.asterisk} text={' *'} />}
-      </View>
-    case 'object':
-      return <>
-        {label as React.ReactNode}
-      </>
-    default:
-      return null
-  }
-}

package/src/components/InputLabel/styles.ts

@@ -1,7 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
-
-const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
-
-export const InputLabelPresets = includePresets(style => createInputLabelStyle(() => ({ wrapper: style, text: style })))

package/src/components/List/PaginationIndicator.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import {
-  ComponentVariants,
-  createDefaultVariantFactory,
-  getNestedStylesByKey,
-  includePresets,
-  TypeGuards,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { StyleSheet, ViewStyle } from 'react-native'
-import { StylesOf } from '../../types'
-import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
-import { Text } from '../Text'
-
-export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`
-
-const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
-
-export const PaginationIndicatorPresets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
-
-export type PaginationIndicatorProps = {
-  isFetching?: boolean
-  noMoreItemsText: React.ReactChild
-  hasMore?: boolean
-  activityIndicator?: JSX.Element
-  styles?: StylesOf<PaginationIndicatorComposition>
-  style?: ViewStyle
-} & ComponentVariants<typeof PaginationIndicatorPresets>
-
-export const PaginationIndicator = (props: PaginationIndicatorProps) => {
-  const { hasMore, isFetching, noMoreItemsText, style, activityIndicator, styles = {}, variants = [] } = props
-
-  const variantStyles = useDefaultComponentStyle<
-    'u:PaginationIndicator',
-    typeof PaginationIndicatorPresets
-    >('u:PaginationIndicator', {
-      variants,
-      styles,
-      transform: StyleSheet.flatten,
-    })
-
-  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
-
-  if (isFetching) {
-    return activityIndicator || <ActivityIndicator style={style} styles={loaderStyles}/>
-  }
-  if (!hasMore) {
-    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
-      return <Text style={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
-    }
-    return noMoreItemsText
-  }
-  return null
-}