@codeleap/mobile 2.3.0 → 2.3.2

package/src/components/Modal/styles.ts

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

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

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

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

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

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

package/src/components/Navigation/index.tsx

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

package/src/components/Navigation/types.ts

@@ -0,0 +1,35 @@
+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,
+
+//     }
+// }

package/src/components/Navigation/utils.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Navigation } from './Navigation'
+
+export function createAppNavigation(Scenes:any) {
+
+  const AllScenes = Object.entries<any>(Scenes).reduce((allScenes, [moduleName, content]) => {
+
+    const subScenes = []
+
+    for (const [name, sceneContent] of Object.entries(content.scenes)) {
+      subScenes.push(
+        [`${moduleName}.${name}`, sceneContent],
+      )
+    }
+
+    return [
+      ...allScenes,
+      ...subScenes,
+    ]
+  }, [])
+
+  const AppScenes = Object.fromEntries(AllScenes)
+
+  const SCENES_RESULT = Object.fromEntries(
+    Object.entries<any>(Scenes)
+      .map(([S, { _ig_scenes, exclude, type, navigationProps, ...otherProps }]) => {
+        let filterScenes = null
+
+        if (exclude) {
+          filterScenes = Object.fromEntries(
+            AllScenes.filter(([path]) => !exclude.some(param => path.startsWith(param))),
+          )
+        }
+
+        const Component = () => <Navigation
+          type={type || 'Stack'}
+          scenes={filterScenes || AppScenes}
+          screenOptions={{
+            headerShown: false,
+            ...navigationProps?.screenOptions,
+          }}
+          {...navigationProps}
+        />
+        // console.log('SCENES_RESULT create', { _ig_scenes, exclude, type, navigationProps, otherProps })
+
+        return [S, {
+          ...otherProps,
+          component: Component,
+        }]
+      }),
+  )
+
+  // console.log('SCENES_RESULT', SCENES_RESULT)
+
+  return SCENES_RESULT
+}
+

package/src/components/Pager/index.tsx

@@ -0,0 +1,121 @@
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import React, {
+  ReactNode,
+} from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+import { View } from '../View'
+import { PagerStyles, PagerComposition } from './styles'
+export * from './styles'
+
+export type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+export type PagerProps = {
+  variants?: ComponentVariants<typeof PagerStyles>['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
+}
+
+export const Pager:React.FC<PagerProps> = (pagerProps) => {
+  const {
+
+    styles,
+    variants,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+    children,
+  } = pagerProps
+
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerStyles>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      variants,
+    },
+  )
+  const nChildren = React.Children.count(children)
+
+  const lastPage = nChildren - 1
+
+  const childArr = React.Children.toArray(children)
+
+  const WrapperComponent = renderPageWrapper || View
+
+  // Reamimated seems to glitch if this is not done
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+
+  return (
+    <View style={[variantStyles.wrapper, style]} >
+      {
+        childArr.map((child:PagerProps['children'][number], index) => {
+          const isActive = index === page
+          const isLast = index === lastPage
+          const isFirst = index === 0
+          const isNext = index === page + 1
+          const isPrevious = index === page - 1
+          const shouldRender = isActive || isNext || isPrevious
+
+          if (!shouldRender && returnEarly) return null
+          let pos = 0
+
+          if (isActive) {
+            pos = 1
+          } else if (index > page) {
+            pos = 2
+          } else {
+            pos = 0
+          }
+
+          const pageProps = {
+            isLast,
+            isActive,
+            isFirst,
+            isNext,
+            isPrevious,
+            index,
+            page,
+          }
+
+          const content = typeof child === 'function' ? child(pageProps) : child
+
+          const wrapperProps = {
+            key: index,
+            style: variantStyles.page,
+            animated: true,
+            transition: variantStyles['page:transition'],
+            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
+            ...pageWrapperProps,
+          }
+
+          return (
+            <WrapperComponent {...wrapperProps}>
+              {content}
+            </WrapperComponent>
+          )
+
+        })
+      }
+    </View>
+  )
+}