@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/View/index.tsx

@@ -1,38 +1,107 @@
 import React from 'react'
-import { View as RNView } from 'react-native'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
+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 Animated from 'react-native-reanimated'
-import { ViewProps } from './types'
-import { useStylesFor } from '../../hooks'
-
-export * from './types'
 export * from './styles'
 
-export const View = <T extends React.ComponentType = typeof RNView>(props: ViewProps<T>) => {
+type NativeViewProps = RNViewProps
+
+export type ViewRefType = NativeView
+
+export type ViewProps = {
+  ref?: AnyRef<ViewRefType>
+  component?: any
+  animated?: boolean
+  keyboardAware?: boolean
+  transition?: Partial<TransitionConfig>
+}
+  & NativeViewProps
+  & ComponentVariants<typeof ViewStyles>
+
+export const View = forwardRef<NativeView, ViewProps>((viewProps, ref) => {
   const {
+    responsiveVariants = {},
+    variants = [],
+    children,
     style,
-    component: _Component = RNView,
+    keyboardAware,
+    component,
     animated = false,
-    animatedStyle,
-    ...viewProps
-  } = props
+    ...props
+  } = viewProps
 
-  const styles = useStylesFor(View.styleRegistryName, style)
-
-  const Component: React.ComponentType<AnyRecord> = animated ? Animated.View : _Component
+  const variantStyles = useDefaultComponentStyle('View', {
+    responsiveVariants,
+    variants,
+  })
+  const Component = animated ? Animated.View : component || NativeView
 
   return (
-    <Component {...viewProps} style={[styles.wrapper, animatedStyle]} />
+    <Component {...props} style={[variantStyles.wrapper, style]}>
+      {children}
+    </Component>
   )
+}) as unknown as ((props: ViewProps) => JSX.Element)
+
+type GapProps = ViewProps & {
+  value: number
+  crossValue?: number
+  defaultProps?: any
 }
 
-View.styleRegistryName = 'View'
-View.elements = ['wrapper']
-View.rootElement = 'wrapper'
+export const Gap = ({ children, value, defaultProps = {}, crossValue = null, ...props }: GapProps) => {
+  const { Theme } = useCodeleapContext()
+  const childArr = React.Children.toArray(children)
 
-View.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return View as (<T extends React.ComponentType = typeof RNView>(props: StyledComponentProps<ViewProps<T>, typeof styles>) => IJSX)
-}
+  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)
 
-MobileStyleRegistry.registerComponent(View)
+      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>
+  )
+}

package/src/components/View/styles.ts

@@ -1,2 +1,8 @@
+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/components.ts

@@ -7,6 +7,7 @@ export * from './Checkbox'
 export * from './TextInput'
 export * from './RadioInput'
 export * from './Switch'
+export * from './ContentView'
 export * from './Sections'
 export * from './Select'
 export * from './FileInput'
@@ -17,6 +18,7 @@ export * from './Scroll'
 export * from './List'
 export * from './ActivityIndicator'
 export * from './Button'
+export * from './ContentView'
 export * from './Modal'
 export * from './Calendar'
 export * from './ImageView'
@@ -24,9 +26,11 @@ 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'
@@ -36,5 +40,5 @@ export * from './Avatar'
 export * from './AvatarGroup'
 export * from './NumberIncrement'
 export * from './Badge'
-export * from './SearchInput'
-export * from './PaginationIndicator'
+
+export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -0,0 +1,77 @@
+import { ViewPresets } from './View'
+import { IconPresets } from './Icon'
+import { TouchablePresets } from './Touchable'
+import { TextPresets } from './Text'
+import { ImagePresets } from './Image'
+import { CheckboxPresets } from './Checkbox'
+import { TextInputPresets } from './TextInput'
+import { RadioInputPresets } from './RadioInput'
+import { SwitchPresets } from './Switch'
+import { SelectPresets } from './Select'
+import { FileInputPresets } from './FileInput'
+import { SliderPresets } from './Slider'
+import { SegmentedControlPresets } from './SegmentedControl'
+import { ActivityIndicatorPresets } from './ActivityIndicator'
+import { ButtonPresets } from './Button'
+import { ContentViewPresets } from './ContentView'
+import { ModalPresets } from './Modal'
+import { EmptyPlaceholderPresets } from './EmptyPlaceholder'
+import { BackdropPresets } from './Backdrop'
+import { PagerPresets } from './Pager'
+import { CalendarPresets } from './Calendar'
+import { DrawerPresets } from './Drawer/styles'
+import { ListPresets, PaginationIndicatorPresets } from './List'
+
+import { ScrollPresets } from './Scroll'
+import { ActionIconPresets } from './ActionIcon'
+import { GridPresets } from './Grid'
+import { InputLabelPresets } from './InputLabel'
+import { LoadingOverlayPresets } from './LoadingOverlay'
+import { InputBasePresets } from './InputBase'
+import { RefreshControlPresets } from './RefreshControl'
+import { AvatarPresets } from './Avatar'
+import { AvatarGroupPresets } from './AvatarGroup'
+import { SectionsPresets } from './Sections'
+import { DatePickerModalPresets } from './DatePickerModal'
+import { NumberIncrementPresets } from './NumberIncrement'
+import { BadgePresets } from './Badge'
+
+export const defaultStyles = {
+  View: ViewPresets,
+  Icon: IconPresets,
+  Avatar: AvatarPresets,
+  AvatarGroup: AvatarGroupPresets,
+  Touchable: TouchablePresets,
+  Text: TextPresets,
+  Image: ImagePresets,
+  Checkbox: CheckboxPresets,
+  TextInput: TextInputPresets,
+  RadioInput: RadioInputPresets,
+  Switch: SwitchPresets,
+  Select: SelectPresets,
+  FileInput: FileInputPresets,
+  List: ListPresets,
+  Slider: SliderPresets,
+  SegmentedControl: SegmentedControlPresets,
+  ActivityIndicator: ActivityIndicatorPresets,
+  Button: ButtonPresets,
+  ContentView: ContentViewPresets,
+  Modal: ModalPresets,
+  EmptyPlaceholder: EmptyPlaceholderPresets,
+  Backdrop: BackdropPresets,
+  Calendar: CalendarPresets,
+  Pager: PagerPresets,
+  Drawer: DrawerPresets,
+  Scroll: ScrollPresets,
+  Sections: SectionsPresets,
+  ActionIcon: ActionIconPresets,
+  Grid: GridPresets,
+  LoadingOverlay: LoadingOverlayPresets,
+  InputLabel: InputLabelPresets,
+  InputBase: InputBasePresets,
+  DatePickerModal: DatePickerModalPresets,
+  RefreshControl: RefreshControlPresets,
+  PaginationIndicator: PaginationIndicatorPresets,
+  NumberIncrement: NumberIncrementPresets,
+  Badge: BadgePresets,
+}

package/src/index.ts

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

package/src/utils/KeyboardAware/context.tsx

@@ -11,9 +11,11 @@ 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, TypeGuards } from '@codeleap/common'
+import { PropsOf, useCodeleapContext, TypeGuards } from '@codeleap/common'
 import { ScrollView, Platform, StyleSheet, Dimensions, EasingFunction, Easing } from 'react-native'
 import { TransitionConfig } from '../../types'
 import { useKeyboard } from './context'
@@ -26,6 +26,7 @@ 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,8 +1,9 @@
-import React from 'react'
+import * as 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
@@ -81,3 +82,31 @@ 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 React from 'react'
-import { AnyFunction, onUpdate, TypeGuards, useState } from '@codeleap/common'
+import * as React from 'react'
+import { AnyFunction, onUpdate, TypeGuards, useCodeleapContext, 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 = 300
+  const codeleapCtx = useCodeleapContext()
+  const defaultDuration = codeleapCtx?.Theme?.values?.transitions?.modal?.duration || 300
   const transition:TModalContext['transition'] = (from, to, options) => {
     return new Promise((resolve) => {
       setTimeout(() => {

package/src/utils/ModalManager/index.ts

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

package/src/utils/hooks.ts

@@ -6,7 +6,6 @@ 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)
@@ -200,16 +199,6 @@ 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
@@ -364,5 +353,5 @@ export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
 
   const totalPadding = softInputHeight + bottomPadding
 
-  return isSoftInputShown && enabled ? mergeStyles([propStyle, { paddingBottom: totalPadding }]) : propStyle
+  return isSoftInputShown && enabled ? [propStyle, { paddingBottom: totalPadding }] : [propStyle]
 }

package/src/Registry.ts

@@ -1,52 +0,0 @@
-import { AnyStyledComponent, CodeleapStyleRegistry, ICSS, StylePersistor } from '@codeleap/styles'
-import { StyleSheet } from 'react-native'
-import { MMKV } from 'react-native-mmkv'
-
-const mmkvStorage = new MMKV()
-
-const persistor = new StylePersistor({
-  set(key, value) {
-    return mmkvStorage?.set(key, value)
-  },
-  get(key) {
-    return mmkvStorage?.getString(key)
-  },
-  del(key) {
-    return mmkvStorage?.delete(key)
-  },
-})
-
-let instance: MobileStyleRegistry
-
-const components: CodeleapStyleRegistry['components'][string][] = []
-
-export class MobileStyleRegistry extends CodeleapStyleRegistry {
-  constructor() {
-    super(persistor)
-
-    components.forEach((component) => {
-      this.registerComponent(component)
-    })
-
-    if (!instance) {
-      instance = this
-    }
-
-    return instance
-  }
-
-  createStyle(css: ICSS): ICSS {
-    return StyleSheet.create({ s: css }).s
-  }
-
-  static get current() {
-    return instance
-  }
-
-  static registerComponent(component: AnyStyledComponent) {
-    components.push(component)
-    if (instance) {
-      instance.registerComponent(component)
-    }
-  }
-}

package/src/components/ActionIcon/types.ts

@@ -1,15 +0,0 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { BadgeComponentProps } from '../Badge'
-import { IconProps } from '../Icon'
-import { TouchableProps } from '../Touchable'
-import { ActionIconComposition } from './styles'
-
-export type ActionIconProps =
-  Omit<TouchableProps, 'style'> &
-  BadgeComponentProps & 
-  {
-    iconProps?: Partial<IconProps>
-    icon?: AppIcon
-    name?: AppIcon
-    style?: StyledProp<ActionIconComposition>
-  }

package/src/components/ActivityIndicator/types.ts

@@ -1,9 +0,0 @@
-import { PropsOf } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { ActivityIndicator as RNActivityIndicator } from 'react-native'
-import { ActivityIndicatorComposition } from './styles'
-
-export type ActivityIndicatorProps<T extends React.ComponentType = typeof RNActivityIndicator> = {
-  style?: StyledProp<ActivityIndicatorComposition>
-  component?: T
-} & PropsOf<T>

package/src/components/Avatar/types.ts

@@ -1,23 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { BadgeComponentProps } from '../Badge'
-import { IconProps } from '../Icon'
-import { ImageProps } from '../Image'
-import { ViewProps } from '../View'
-import { AvatarComposition } from './styles'
-
-export type AvatarProps =
-  Omit<ViewProps, 'style'> &
-  BadgeComponentProps &
-  {
-    image?: ImageProps['source']
-    name?: string | string[]
-    debugName: string
-    firstNameOnly?: boolean
-    text?: string
-    description?: string
-    icon?: IconProps['name']
-    badgeIcon?: IconProps['name']
-    style?: StyledProp<AvatarComposition>
-    onPress?: () => void
-    noFeedback?: boolean
-  }

package/src/components/AvatarGroup/types.ts

@@ -1,10 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { AvatarProps } from '../Avatar/types'
-import { AvatarGroupComposition } from './styles'
-
-export type AvatarGroupProps = {
-  style?: StyledProp<AvatarGroupComposition>
-  avatars: Partial<AvatarProps>[]
-  displacement?: number
-  debugName: string
-}

package/src/components/Backdrop/types.ts

@@ -1,14 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { TouchableProps } from '../Touchable'
-import { ViewProps } from '../View/types'
-import { BackdropComposition } from './styles'
-
-export type BackdropProps =
-  Omit<TouchableProps, 'style'> &
-  {
-    children?: ReactNode
-    visible: boolean
-    wrapperProps?: ViewProps
-    style?: StyledProp<BackdropComposition>
-  }

package/src/components/Badge/types.ts

@@ -1,27 +0,0 @@
-import { PropsOf } from '@codeleap/common'
-import { StyledProp } from '@codeleap/styles'
-import { Text } from '../Text'
-import { View, ViewProps } from '../View'
-import { BadgeComposition } from './styles'
-
-export type BadgeProps =
-  Omit<ViewProps, 'style'> &
-  {
-    style?: StyledProp<BadgeComposition>
-    maxCount?: number
-    minCount?: number
-    debugName?: string
-    innerWrapperProps?: Partial<PropsOf<typeof View>>
-    textProps?: Partial<PropsOf<typeof Text>>
-    getBadgeContent?: (props: BadgeContent) => string
-    renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
-    disabled?: boolean
-    badge?: number | boolean
-  }
-
-export type BadgeContent = BadgeProps & { count: number }
-
-export type BadgeComponentProps = {
-  badge?: BadgeProps['badge']
-  badgeProps?: Partial<BadgeProps>
-}

package/src/components/Button/types.ts

@@ -1,20 +0,0 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { ReactNode } from 'react'
-import { BadgeComponentProps } from '../Badge'
-import { TouchableProps } from '../Touchable'
-import { ButtonComposition } from './styles'
-
-export type ButtonProps =
-  Omit<TouchableProps, 'style'> &
-  BadgeComponentProps &
-  {
-    text?: string
-    rightIcon?: AppIcon
-    icon?: AppIcon
-    loading?: boolean
-    debounce?: number
-    debugName: string
-    selected?: boolean
-    children?: ReactNode
-    style?: StyledProp<ButtonComposition>
-  }

package/src/components/Checkbox/types.ts

@@ -1,13 +0,0 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
-import { CheckboxComposition } from './styles'
-
-export type CheckboxProps =
-  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
-  {
-    value: boolean
-    onValueChange: (value: boolean) => void
-    style?: StyledProp<CheckboxComposition>
-    checkboxOnLeft?: boolean
-    checkIcon?: AppIcon
-  }

package/src/components/EmptyPlaceholder/types.ts

@@ -1,21 +0,0 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { ReactElement } from 'react'
-import { ImageProps } from '../Image'
-import { EmptyPlaceholderComposition } from './styles'
-
-type RenderEmpty = (props: {
-  emptyText: string | ReactElement
-  emptyIconName?: AppIcon
-  style?: StyledProp<EmptyPlaceholderComposition>
-}) => ReactElement
-
-export type EmptyPlaceholderProps = {
-  itemName?: string
-  title?: ReactElement | string
-  description?: ReactElement | string
-  image?: ImageProps['source']
-  icon?: AppIcon
-  loading?: boolean
-  style?: StyledProp<EmptyPlaceholderComposition>
-  renderEmpty?: RenderEmpty
-}

package/src/components/FileInput/types.ts

@@ -1,27 +0,0 @@
-import { AnyRef, FormTypes } from '@codeleap/common'
-import { DocumentPickerOptions } from 'react-native-document-picker'
-import { Options } from 'react-native-image-crop-picker'
-import { OSAlert } from '../../utils'
-
-export type FileInputImageSource = 'camera' | 'library' | 'fs'
-
-export type FileResult = FormTypes.AnyFile
-
-export type FileInputRef = {
-  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
-}
-
-export type FileInputProps = {
-  mode: 'hidden' | 'button'
-  onFileSelect?: (files: FileResult[]) => void
-  options?: DocumentPickerOptions<any>
-  ref?: AnyRef<FileInputRef>
-  type?: 'image' | 'anyFile'
-  alertProps?: Parameters<typeof OSAlert.ask>[0]
-  pickerOptions?: Partial<Options>
-  required?: boolean
-  onOpenCamera?: (resolve: (() => void)) => Promise<void>
-  onOpenFileSystem?: (resolve: (() => void)) => Promise<void>
-  onOpenGallery?: (resolve: (() => void)) => Promise<void>
-  onError?: (error: any) => void
-}