@codeleap/mobile 2.3.4 → 2.3.6

package/src/components/List/styles.ts

@@ -1,19 +0,0 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
-import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
-
-export type ListComposition = ScrollComposition | 'separator'
-
-const createListStyle = createDefaultVariantFactory<ListComposition>()
-
-export const ListStyles = {
-  default: createListStyle((theme) => {
-    const defaultStyles = ScrollStyles.default(theme)
-    return {
-      ...defaultStyles,
-      separator: {
-        width: '100%',
-        height: theme.spacing.value(1),
-      },
-    }
-  }),
-}

package/src/components/Modal/index.tsx

@@ -1,218 +0,0 @@
-import * as React from 'react'
-import { View, ViewProps } from '../View'
-import { Button, ButtonProps } from '../Button'
-import { Scroll } from '../Scroll'
-import {
-  ComponentVariants,
-  getNestedStylesByKey,
-  IconPlaceholder,
-  onUpdate,
-  PropsOf,
-  TypeGuards,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import {
-  ModalComposition,
-  ModalStyles,
-  ModalParts,
-} from './styles'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types/utility'
-
-import { useDynamicAnimation } from 'moti'
-import { Backdrop } from '../Backdrop'
-import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
-import { Text, TextProps } from '../Text'
-import { Touchable } from '../Touchable'
-import { GetKeyboardAwarePropsOptions } from '../../utils'
-
-export * from './styles'
-
-export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof ModalStyles>['variants']
-  styles?: StylesOf<ModalComposition>
-  dismissOnBackdrop?: boolean
-  buttonProps?: ButtonProps
-  accessible?: boolean
-  showClose?: boolean
-  closable?: boolean
-  footer?: React.ReactNode
-  title?: React.ReactNode
-  debugName: string
-  closeIconName?: IconPlaceholder
-  visible: boolean
-  toggle?: () => void
-  zIndex?: number
-  scroll?: boolean
-  header?: React.ReactElement
-  closeOnHardwareBackPress?: boolean
-  renderHeader?: (props: ModalHeaderProps) => React.ReactElement
-  keyboardAware?: GetKeyboardAwarePropsOptions
-  scrollProps?: PropsOf<typeof Scroll>
-}
-
-export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
-  styles: {
-    wrapper: ViewProps['style']
-    title: TextProps['style']
-    closeButton: ButtonProps['styles']
-  }
-}
-
-const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
-  const { styles, title = null, showClose = false, closable, debugName, closeIconName = 'close', toggle } = props
-  return <>
-    {(title || showClose) && (
-      <View style={styles.wrapper}>
-        {typeof title === 'string' ? (
-          <Text text={title} style={styles.title} />
-        ) : (
-          title
-        )}
-
-        {(showClose && closable) && (
-          <Button
-            debugName={`${debugName} modal close button`}
-            icon={closeIconName as IconPlaceholder}
-            variants={['icon']}
-            onPress={toggle}
-            styles={styles.closeButton}
-          />
-        )}
-      </View>
-    )}</>
-}
-
-export const Modal: React.FC<ModalProps> = (modalProps) => {
-  const {
-    variants = [],
-    styles = {},
-    visible,
-
-    closable = true,
-
-    footer,
-    children,
-    toggle = () => null,
-    dismissOnBackdrop = true,
-    header = null,
-    debugName,
-    scroll = true,
-    renderHeader,
-    zIndex = null,
-    scrollProps = {},
-    closeOnHardwareBackPress = true,
-    ...props
-  } = modalProps
-
-  const variantStyles = useDefaultComponentStyle('u:Modal', {
-    variants: variants as any,
-    transform: StyleSheet.flatten,
-    styles,
-  }) as ModalProps['styles']
-
-  function getStyles(key: ModalParts) {
-    const s = [
-      variantStyles[key],
-      styles[key],
-    ]
-
-    return StyleSheet.flatten(s)
-  }
-  const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
-
-  const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
-
-  const boxAnimation = useDynamicAnimation(() => {
-    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
-  })
-
-  onUpdate(() => {
-    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
-  }, [visible])
-  const wrapperStyle = getStyles('wrapper')
-
-  const ScrollComponent = scroll ? Scroll : View
-  const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
-
-  const headerProps:ModalHeaderProps = {
-    ...modalProps,
-    styles: {
-      wrapper: getStyles('header'),
-      title: getStyles('title'),
-      closeButton: buttonStyles,
-    },
-  }
-  const Header = renderHeader || DefaultHeader
-
-  useBackButton(() => {
-    if (visible && closeOnHardwareBackPress) {
-      toggle()
-      return true
-    }
-  }, [visible, toggle, closeOnHardwareBackPress])
-
-  return (
-    <View
-      style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-
-      <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
-        'wrapper:hidden': variantStyles['backdrop:hidden'],
-        'wrapper:visible': variantStyles['backdrop:visible'],
-        wrapper: variantStyles.backdrop,
-      }}
-      wrapperProps={{
-        transition: { ...variantStyles['backdrop:transition'] },
-      }}
-      />
-      <ScrollComponent
-        style={scrollStyle}
-        contentContainerStyle={getStyles('scrollContent')}
-        keyboardAware= {{
-          adapt: 'marginBottom',
-          baseStyleProp: 'style',
-          animated: true,
-          enabled: visible,
-          enableOnAndroid: true,
-        }}
-        animated
-        { ...scrollProps}
-      >
-        {dismissOnBackdrop &&
-          <Touchable
-            onPress={ closable ? toggle : (() => {})}
-            debounce={400}
-            debugName={'Modal backdrop touchable'}
-            style={variantStyles.backdropTouchable}
-            android_ripple={null}
-            noFeedback
-          />}
-
-        <View
-          animated
-          state={boxAnimation}
-          style={getStyles('box')}
-          transition={{ ...variantStyles['box:transition'] }}
-
-          {...props}
-        >
-
-          {header ? header : <Header {...headerProps}/>}
-
-          <View style={getStyles('body')}>{children}</View>
-          {footer && (
-            <View style={getStyles('footer')}>
-              {typeof footer === 'string' ? <Text text={footer} /> : footer}
-            </View>
-          )}
-        </View>
-
-      </ScrollComponent>
-    </View>
-
-  )
-}
-
-export default Modal

package/src/components/Modal/styles.ts

@@ -1,153 +0,0 @@
-import {
-  assignTextStyle,
-  ButtonComposition,
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-
-export type AnimatableParts = 'box' | 'backdrop'
-
-export type ModalParts =
-  | AnimatableParts
-  | 'wrapper'
-  | 'innerWrapper'
-
-  | 'scrollContent'
-  | 'scroll'
-  | 'body'
-  | 'footer'
-  | 'header'
-  | 'backdropTouchable'
-  | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`
-
-export type ModalComposition =
-  | ModalParts
-  | `${AnimatableParts}:visible`
-  | `${AnimatableParts}:hidden`
-  | `${AnimatableParts}:transition`
-
-const createModalStyle = createDefaultVariantFactory<ModalComposition>()
-
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
-
-export const ModalStyles = {
-
-  ...presets,
-  default: createModalStyle((theme) => {
-    const fullSize = {
-      ...theme.presets.whole,
-      position: 'absolute',
-      width: theme.values.width,
-      height: theme.values.height,
-      maxHeight: theme.values.height,
-    }
-
-    return {
-      wrapper: {
-        zIndex: 1,
-        height: theme.values.height,
-        width: theme.values.width,
-        ...theme.presets.whole,
-        position: 'absolute',
-        ...theme.presets.safeAreaTop(),
-        paddingBottom: theme.values.bottomNavHeight,
-      },
-      'box:transition': {
-        scale: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      'backdrop:transition': {
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      backdrop: {
-
-        backgroundColor: theme.colors.black,
-        ...fullSize,
-      },
-      backdropTouchable: {
-        ...fullSize,
-      },
-      'backdrop:visible': {
-        opacity: 0.5,
-      },
-      'backdrop:hidden': {
-        opacity: 0,
-      },
-      innerWrapper: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        width: theme.values.width,
-        flex: 1,
-      },
-      scroll: {
-        width: theme.values.width,
-        height: theme.values.window.height,
-        maxHeight: theme.values.window.height,
-      },
-      scrollContent: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        ...theme.spacing.paddingVertical(2),
-        ...theme.presets.fullWidth,
-        flex: 1,
-      },
-      box: {
-        width: '80%',
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(2),
-      },
-
-      'box:hidden': {
-        opacity: 0,
-        scale: 0.8,
-
-      },
-      'box:visible': {
-        opacity: 1,
-        scale: 1,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-      },
-      closeButtonWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      title: {
-        ...theme.presets.textCenter,
-        ...assignTextStyle('h3')(theme).text,
-        ...theme.spacing.paddingBottom(1),
-        flex: 1,
-      },
-    }
-  }),
-  popup: createModalStyle(() => ({})),
-  fullscreen: createModalStyle((theme) => ({
-    overlay: {
-      backgroundColor: theme.colors.background,
-    },
-    'overlay:visible': {
-      opacity: 1,
-    },
-    box: {
-      flex: 1,
-      borderRadius: 0,
-      width: theme.values.width,
-      height: theme.values.window.height,
-      ...theme.presets.center,
-    },
-  })),
-}

package/src/components/MultiSelect/index.tsx

@@ -1,138 +0,0 @@
-import { IconPlaceholder,
-  getNestedStylesByKey,
-  useDefaultComponentStyle,
-  TypeGuards } from '@codeleap/common'
-import React, { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
-import { List } from '../List'
-import { TextInput } from '../TextInput'
-import { MultiSelectProps } from './types'
-import { ModalManager } from '../../utils'
-import { MultiSelectStyles } from './styles'
-import { SelectItem } from '../Select'
-
-export * from './styles'
-export const MultiSelect = <T extends string|number = string>(selectProps:MultiSelectProps<T>) => {
-  const {
-    value,
-    onValueChange,
-    label,
-    styles = {},
-    options,
-    style,
-    variants,
-    hideInput = false,
-    renderItem,
-    listProps,
-    placeholder = 'Select',
-    arrowIconName = 'selectArrow',
-    selectedIcon = 'multiSelectMarker',
-    inputProps = {},
-    clearable = false,
-    clearIconName = 'close',
-    validate = null,
-    ...drawerProps
-  } = selectProps
-
-  const variantStyles = useDefaultComponentStyle<'u:MultiSelect', typeof MultiSelectStyles>('u:MultiSelect', {
-    transform: StyleSheet.flatten,
-    rootElement: 'inputWrapper',
-    styles,
-    variants,
-  })
-
-  const inputStyles = useMemo(
-    () => getNestedStylesByKey('input', variantStyles),
-    [variantStyles],
-  )
-
-  const close = () => drawerProps?.toggle?.()
-
-  const select = (itemValue) => {
-    const newVal = [...value]
-
-    if (newVal.includes(itemValue)) {
-      newVal.splice(newVal.indexOf(itemValue), 1)
-    } else {
-      newVal.push(itemValue)
-    }
-    onValueChange(newVal)
-
-  }
-
-  const selectedLabel:string = useMemo(() => {
-    const current = options.filter(o => value.includes(o.value)).map(o => o.label)
-
-    const display = current?.join(', ') ?? placeholder
-
-    return TypeGuards.isString(display) ? display : ''
-  }, [value, placeholder, options])
-
-  const Item = renderItem || SelectItem
-
-  const renderListItem = ({ item }) => {
-    return <Item
-      isSelected={value.includes(item.value)}
-      item={item}
-      onPress={() => select(item.value)}
-      styles={variantStyles}
-      icon={selectedIcon as IconPlaceholder}
-    />
-  }
-
-  const isEmpty = value.length === 0
-  const showClearIcon = !isEmpty && clearable
-  const inputIcon = showClearIcon ? clearIconName : arrowIconName
-
-  const onPressInputIcon = () => {
-    if (showClearIcon) {
-      onValueChange([])
-    } else {
-      close?.()
-    }
-
-  }
-  return <>
-    {
-      !hideInput && (
-        <TextInput
-          caretHidden
-          value={selectedLabel}
-          rightIcon={{
-            icon: inputIcon as IconPlaceholder,
-            onPress: onPressInputIcon,
-          }}
-          editable={false}
-          touchableWrapper
-          wrapperProps={{
-            debugName: 'Select',
-            onPress: close,
-          }}
-          pointerEvents={'none'}
-          label={label}
-          debugName={'Select input'}
-          styles={inputStyles}
-          style={style}
-          validate={validate}
-          {...inputProps}
-        />
-      )
-    }
-
-    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
-      <List<MultiSelectProps<any>['options']>
-        data={options}
-        style={variantStyles.list}
-        contentContainerStyle={variantStyles.listContent}
-        keyExtractor={(i) => i.value}
-        renderItem={renderListItem}
-        {...listProps}
-      />
-    </ModalManager.Drawer>
-
-  </>
-}
-
-export * from './styles'
-export * from './types'
-

package/src/components/MultiSelect/styles.ts

@@ -1,18 +0,0 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
-import { SelectComposition, SelectStyles } from '../Select'
-type ItemStates = '' | ':selected'
-export type MultiSelectComposition =
-  SelectComposition | `itemIcon${ItemStates}`
-
-const createMultiSelectStyle = createDefaultVariantFactory<MultiSelectComposition>()
-
-export const MultiSelectStyles = {
-  ...SelectStyles,
-  default: createMultiSelectStyle((theme) => {
-    const defaultStyle = SelectStyles.default(theme)
-    return {
-      ...defaultStyle,
-
-    }
-  }),
-}

package/src/components/MultiSelect/types.ts

@@ -1,42 +0,0 @@
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-} from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
-import { DrawerProps } from '../Drawer'
-import { FlatListProps } from '../List'
-import { TextInputProps } from '../TextInput'
-import { MultiSelectComposition, MultiSelectStyles } from './styles'
-
-export type MultiSelectRenderFNProps<T> = {
-  styles: StylesOf<MultiSelectComposition>
-  onPress: () => void
-  isSelected?: boolean
-  item: FormTypes.Options<T>[number]
-  icon?: IconPlaceholder
-}
-
-export type MultiSelectRenderFN<T> = (props: MultiSelectRenderFNProps<T>) => JSX.Element
-
-type MultiSelectDrawerProps = Omit<DrawerProps, 'variants' | 'styles'>
-
-export type MultiSelectProps<T> = MultiSelectDrawerProps & {
-    value: T[]
-    placeholder?: FormTypes.Label
-    label?: FormTypes.Label
-    options?: FormTypes.Options<T>
-    onValueChange?: (value: T[]) => void
-    renderItem?: MultiSelectRenderFN<T>
-    styles?: StylesOf<MultiSelectComposition>
-    style?: any
-    arrowIconName?: IconPlaceholder
-    inputProps?: Partial<TextInputProps>
-    selectedIcon?: IconPlaceholder
-    hideInput?: boolean
-    listProps?: Partial<FlatListProps>
-    clearable?: boolean
-    clearIconName?: IconPlaceholder
-    validate?: TextInputProps['validate']
-  } & ComponentVariants<typeof MultiSelectStyles>
-

package/src/components/Navigation/Navigation.tsx

@@ -1,54 +0,0 @@
-// @ts-nocheck
-import * as React from 'react'
-import {
-  TypeGuards,
-} from '@codeleap/common'
-import { Icon } from '../Icon'
-import { NavigationProps, NavigatorType, PropTypes, TNavigators } from './types'
-import { Navigators } from './constants'
-
-export const Navigation = <T extends NavigatorType>({ type, scenes, ...props }: NavigationProps<T>) => {
-  const NavigationComponent = Navigators[type] as TNavigators[T]
-
-  // console.log('render Navigation', { type, scenes, props, defaultProps })
-
-  return <NavigationComponent.Navigator {...props}>
-    {
-      Object.entries(scenes).map(([name, content], idx) => {
-        const isFunction = TypeGuards.isFunction(content)
-
-        let screenProps = {
-          name,
-        } as PropTypes[T]['Screen']
-
-        if (isFunction) {
-          screenProps.component = content
-          // console.log('Render NavigationScreen', { scenes, screenProps, content, isFunction }, 'PACKAGES')
-        } else {
-          screenProps.component = content?.component?.default || content?.component || content?.default
-          const nameParts = name.split('.')
-          const title = content?.title || nameParts[nameParts.length - 1] || name.replace('.', '')
-
-          screenProps = {
-            ...screenProps,
-            options: (optionProps) => ({
-              title,
-              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>,
-              tabBarIconFocused: content?.iconFocused ? (style) => <Icon name={content?.iconFocused} style={style}/> : null,
-              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps) : content.options),
-            }),
-          }
-          // console.log('Render NavigationScreen loop', { scenes, screenProps, content, title, isFunction, props }, 'PACKAGES')
-        }
-
-        return (
-          // @ts-ignore
-          <NavigationComponent.Screen
-            key={idx}
-            {...screenProps}
-          />
-        )
-      })
-    }
-  </NavigationComponent.Navigator>
-}

package/src/components/Navigation/constants.ts

@@ -1,8 +0,0 @@
-// @ts-nocheck
-import { createBottomTabNavigator, createDrawerNavigator, createStackNavigator } from '../../modules/reactNavigation'
-
-export const Navigators = {
-  Drawer: createDrawerNavigator(),
-  Stack: createStackNavigator(),
-  Tab: createBottomTabNavigator(),
-}

package/src/components/Navigation/index.tsx

@@ -1,3 +0,0 @@
-export * from './Navigation'
-export * from './types'
-export * from './utils'

package/src/components/Navigation/types.ts

@@ -1,35 +0,0 @@
-import { IconPlaceholder } from '@codeleap/common'
-import { Navigators } from './constants'
-
-export type TNavigators = typeof Navigators
-export type NavigatorType = keyof TNavigators
-
-export type PropTypes = {
-    [P in NavigatorType] : {
-        Screen: Omit<React.ComponentPropsWithRef<TNavigators[P]['Screen']>, 'children'|'name'>
-        Navigator: Omit<React.ComponentPropsWithRef<TNavigators[P]['Navigator']>, 'children'|'name'>
-        Group: Omit<React.ComponentPropsWithRef<TNavigators[P]['Group']>, 'children'|'name'>
-    }
-}
-export type SceneComponent<K extends NavigatorType> = PropTypes[K]['Screen']
-export type SceneOptions<K extends NavigatorType> =
-    { icon?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']
-export type Scene<K extends NavigatorType> = SceneComponent<K> | SceneOptions<K>
-
-export type Scenes<K extends NavigatorType> = {
-    [x:string] : Scene<K>
-}
-
-export type SceneProps = any
-
-export type NavigationProps<T extends NavigatorType> = {
-    type: T
-    scenes: Scenes<T>
-} & PropTypes[T]['Navigator']
-
-// export type NavigationStructure  = {
-//     [module:string] : {
-//         scenes: Scenes,
-
-//     }
-// }