@codeleap/mobile 1.3.1 → 1.4.2

package/src/components/Modal/index.tsx

@@ -1,143 +1,158 @@
-import * as React from 'react' 
-import { 
-    View,
-    ViewProps,
-    AnimatedView
-} from '../View'
-import {  Button, ButtonProps } from '../Button'
-import { Scroll } from '../Scroll'
-import { capitalize, ComponentVariants, IconPlaceholder, onUpdate, useComponentStyle, useStyle } from '@codeleap/common'
-import { MobileModalComposition, MobileModalStyles, MobileModalParts } from './styles'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types/utility'
-
-import { Touchable } from '../Touchable'
-import { Text } from '../Text'
-import { Animated } from '../Animated'
-
-
-export * from './styles'
-
-export type ModalProps = Omit<ViewProps, 'variants'|'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
-  styles?: StylesOf<MobileModalComposition>
-  dismissOnBackdrop?: boolean
-  buttonProps?: ButtonProps
-  accessible?:boolean
-  showClose?: boolean
-  closable?: boolean
-  footer?: React.ReactNode
-  title?: React.ReactNode;
-  debugName?: string
-  closeIconName?: IconPlaceholder
-  visible: boolean
-  toggle: () => void
-}
- 
-export const Modal:React.FC<ModalProps> = (modalProps) => {
-
-   const {
-    variants = [], 
-    styles = { }, 
-    style, 
-    visible,
-    showClose,
-    closable = true,
-    title,
-    footer,
-    children,
-    toggle,
-    dismissOnBackdrop = true,
-    closeIconName = 'close',
-    debugName,
-    ...props
-    } = modalProps
-  
-  const variantStyles = useComponentStyle('Modal', {
-    variants:  variants as any,
-    transform: StyleSheet.flatten,
-    styles
-  }) as ModalProps['styles']
-
-
-  function getStyles(key:MobileModalParts){
-    const s =  [
-      variantStyles[key],
-     styles[key],
-      visible ?  variantStyles[key + ':visible'] : {},
-      visible ?  styles[key + ':visible'] : {},
-    ]
-
-    return s
-  }
-
-  const buttonStyles = React.useMemo(() => {
-    const buttonEntries = {}
-
-    for(const [key,style] of Object.entries(variantStyles)){
-        if(key.startsWith('closeButton')){
-            buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
-        }
-    }
-    return buttonEntries
-  }, [variantStyles])
-
-  const boxAnimation = {
-    hidden : {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible : {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    }
-  }
-
-  return (
-
-      <View style={getStyles('wrapper')} pointerEvents={visible ? 'auto' : 'none'} >
-        <AnimatedView style={getStyles('overlay')} transition={'opacity'}/>
-        <Scroll style={getStyles('innerWrapper')} contentContainerStyle={getStyles('innerWrapperScroll')}>
-           {
-            dismissOnBackdrop &&
-              <Touchable
-                debugName={`${debugName} modal backdrop`}
-                activeOpacity={1}
-                onPress={() =>  toggle()}
-                style={getStyles('touchableBackdrop')}
-              
-              />
-            }
-              <Animated component='View' config={boxAnimation} pose={visible ? 'visible' : 'hidden'}  style={getStyles('box')}>
-                {
-                  (title || showClose) && 
-
-                    <View   style={getStyles('header')}>
-                  
-                      {typeof title === 'string' ? <Text text={title} style={getStyles('title')}/> : title}
-                    
-                      {
-                        (showClose && closable) &&
-                          <Button debugName={`${debugName} modal close button`} icon={closeIconName as IconPlaceholder} variants={['icon']} onPress={toggle} styles={buttonStyles}/>
-                      }
-                    </View>
-                }
-            
-                <View style={getStyles('body')}>
-                  {children}
-                </View>
-                {
-                  footer && <View style={getStyles('footer')}> 
-                    {footer}
-                  </View>
-                }
-            </Animated>
-          
-        </Scroll>
-      </View>
-  )
-}
-
-
-
-export default Modal
+import * as React from 'react'
+import { View, ViewProps, AnimatedView } from '../View'
+import { Button, ButtonProps } from '../Button'
+import { Scroll } from '../Scroll'
+import {
+  capitalize,
+  ComponentVariants,
+  IconPlaceholder,
+  onUpdate,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  MobileModalComposition,
+  MobileModalStyles,
+  MobileModalParts,
+} from './styles'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+
+import { Touchable } from '../Touchable'
+import { Text } from '../Text'
+import { Animated } from '../Animated'
+
+export * from './styles'
+
+export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
+  styles?: StylesOf<MobileModalComposition>
+  dismissOnBackdrop?: boolean
+  buttonProps?: ButtonProps
+  accessible?: boolean
+  showClose?: boolean
+  closable?: boolean
+  footer?: React.ReactNode
+  title?: React.ReactNode
+  debugName?: string
+  closeIconName?: IconPlaceholder
+  visible: boolean
+  toggle?: () => void
+  scroll?: boolean
+}
+
+export const Modal: React.FC<ModalProps> = (modalProps) => {
+  const {
+    variants = [],
+    styles = {},
+    visible,
+    showClose,
+    closable = true,
+    title,
+    footer,
+    children,
+    toggle = () => null,
+    dismissOnBackdrop = true,
+    closeIconName = 'close',
+    debugName,
+    scroll = true,
+    ...props
+  } = modalProps
+
+  const variantStyles = useDefaultComponentStyle('Modal', {
+    variants: variants as any,
+    transform: StyleSheet.flatten,
+    styles,
+  }) as ModalProps['styles']
+
+  function getStyles(key: MobileModalParts) {
+    const s = [
+      variantStyles[key],
+      styles[key],
+      visible ? variantStyles[key + ':visible'] : {},
+      visible ? styles[key + ':visible'] : {},
+    ]
+
+    return s
+  }
+
+  const buttonStyles = React.useMemo(() => {
+    const buttonEntries = {}
+
+    for (const [key, style] of Object.entries(variantStyles)) {
+      if (key.startsWith('closeButton')) {
+        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
+      }
+    }
+    return buttonEntries
+  }, [variantStyles])
+
+  const boxAnimation = {
+    hidden: {
+      ...variantStyles['box:pose'],
+      ...styles['box:pose'],
+    },
+    visible: {
+      ...variantStyles['box:pose:visible'],
+      ...styles['box:pose:visible'],
+    },
+  }
+
+  return (
+    <View
+      style={getStyles('wrapper')}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
+      <Scroll
+        style={getStyles('innerWrapper')}
+        contentContainerStyle={getStyles('innerWrapperScroll')}
+        scrollEnabled={scroll}
+      >
+        {dismissOnBackdrop && (
+          <Touchable
+            debugName={`${debugName} modal backdrop`}
+            activeOpacity={1}
+            onPress={() => toggle()}
+            style={getStyles('touchableBackdrop')}
+          />
+        )}
+        <Animated
+          component='View'
+          config={boxAnimation}
+          pose={visible ? 'visible' : 'hidden'}
+          style={getStyles('box')}
+        >
+          {(title || showClose) && (
+            <View style={getStyles('header')}>
+              {typeof title === 'string' ? (
+                <Text text={title} style={getStyles('title')} />
+              ) : (
+                title
+              )}
+
+              {showClose && closable && (
+                <Button
+                  debugName={`${debugName} modal close button`}
+                  icon={closeIconName as IconPlaceholder}
+                  variants={['icon']}
+                  onPress={toggle}
+                  styles={buttonStyles}
+                />
+              )}
+            </View>
+          )}
+
+          <View style={getStyles('body')}>{children}</View>
+          {footer && (
+            <View style={getStyles('footer')}>
+              {typeof footer === 'string' ? <Text text={footer} /> : footer}
+            </View>
+          )}
+        </Animated>
+      </Scroll>
+    </View>
+  )
+}
+
+export default Modal

package/src/components/Modal/styles.ts

@@ -1,122 +1,133 @@
-import { ButtonComposition, createDefaultVariantFactory, includePresets, ModalComposition, ModalStyles } from '@codeleap/common'
-
-
-export const backgroundTransition = {
-    duration: 200,
-    ease: 'easeOut',
-    useNativeDriver: false,
-} 
-  
-export const modalTransition = {
-    duration: 150,
-    ease: 'easeOut',
-    useNativeDriver: false,
-}
-  
-
-export type MobileModalParts = 
-| 'wrapper' 
-| 'overlay' 
-| 'innerWrapper' 
-| 'innerWrapperScroll' 
-| 'box' 
-| 'footer' 
-| 'body' 
-| 'header'
-| 'touchableBackdrop'
-| 'box:pose'
-
-| 'title'
-| `closeButton${Capitalize<ButtonComposition>}`
-
-export type MobileModalComposition = MobileModalParts | `${MobileModalParts}:visible`
-
-const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
-    
-const presets = includePresets((style ) =>  createModalStyle(() => ({wrapper: style})))
-
-const defaultModalStyles = ModalStyles
-
-export const MobileModalStyles = {
-   ...presets,
-   ...defaultModalStyles,
-   default: createModalStyle((Theme) => {
-
-    const fullSize = {
-      ...Theme.presets.whole,
-      position: 'absolute',
-      width: Theme?.values?.width,
-      height: Theme?.values?.height,
-    }
-
-    return {
-      wrapper: {
-        zIndex:1,
-
-        ...fullSize
-      },
-      
-      overlay: {
-        opacity: 0,
-        zIndex: 2,
-        
-        backgroundColor: Theme.colors.black,
-        ...fullSize
-      },
-      "overlay:visible": {
-        opacity: 0.5
-      },
-      innerWrapper: {
-     
-        zIndex: 3,
-       },
-      innerWrapperScroll: {
-        display: 'flex',
-        alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        minHeight: Theme.values.height,
-        zIndex: 3
-      },
-      box: {
-        width: '80%',
-        backgroundColor: Theme.colors.white,
-        zIndex: 10,
-        borderRadius: Theme.borderRadius.medium,
-        ...Theme.spacing.padding(1)
-      
-      },
-      touchableBackdrop: {
-        ...fullSize,
-    
-        zIndex:5
-      },
-      "box:pose": {
-        opacity: 0,
-        scale: 0.8,
-        y: Theme.values.height * 0.15,
-        transition: modalTransition,
-      },
-      "box:pose:visible": {
-        y: 0,
-        opacity: 1,
-        scale: 1,
-        transition: modalTransition,
-      },
-      header: {
-        flexDirection: 'row',
-        ...Theme.presets.justifySpaceBetween,
-        ...Theme.presets.alignCenter
-      },
-      closeButtonWrapper: {
-        alignSelf: 'center',
-
-      }
-    
-     
-    }
-
-   }),
-   popup: createModalStyle((Theme) => ({
-
-   }))
-}
+import {
+  ButtonComposition,
+  createDefaultVariantFactory,
+  includePresets,
+  ModalComposition,
+  ModalStyles,
+  assignTextStyle,
+} from '@codeleap/common'
+
+export const backgroundTransition = {
+  duration: 200,
+  ease: 'easeOut',
+  useNativeDriver: false,
+}
+
+export const modalTransition = {
+  duration: 150,
+  ease: 'easeOut',
+  useNativeDriver: false,
+}
+
+export type MobileModalParts =
+  | 'wrapper'
+  | 'overlay'
+  | 'innerWrapper'
+  | 'innerWrapperScroll'
+  | 'box'
+  | 'footer'
+  | 'body'
+  | 'header'
+  | 'touchableBackdrop'
+  | 'box:pose'
+  | 'title'
+  | `closeButton${Capitalize<ButtonComposition>}`
+
+export type MobileModalComposition =
+  | MobileModalParts
+  | `${MobileModalParts}:visible`
+
+const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
+
+const presets = includePresets((style) => createModalStyle(() => ({ body: style })),
+)
+
+const defaultModalStyles = ModalStyles
+
+export const MobileModalStyles = {
+  ...defaultModalStyles,
+  ...presets,
+  default: createModalStyle((Theme) => {
+    const fullSize = {
+      ...Theme.presets.whole,
+      position: 'absolute',
+      width: Theme?.values?.width,
+      height: Theme?.values?.height,
+    }
+
+    return {
+      wrapper: {
+        zIndex: 1,
+
+        ...fullSize,
+      },
+
+      overlay: {
+        opacity: 0,
+
+        backgroundColor: Theme.colors.black,
+        ...fullSize,
+      },
+      'overlay:visible': {
+        opacity: 0.5,
+      },
+      innerWrapper: {},
+      innerWrapperScroll: {
+        display: 'flex',
+        alignItems: 'center',
+        ...Theme.presets.justifyCenter,
+        minHeight: Theme.values.height,
+      },
+      box: {
+        width: '80%',
+        backgroundColor: Theme.colors.background,
+        borderRadius: Theme.borderRadius.medium,
+        ...Theme.spacing.padding(2),
+      },
+      touchableBackdrop: {
+        ...fullSize,
+      },
+      'box:pose': {
+        opacity: 0,
+        scale: 0.8,
+        transition: modalTransition,
+      },
+      'box:pose:visible': {
+        opacity: 1,
+        scale: 1,
+        transition: modalTransition,
+      },
+      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((theme) => ({})),
+  fullscreen: createModalStyle((theme) => ({
+    overlay: {
+      backgroundColor: theme.colors.background,
+    },
+    'overlay:visible': {
+      opacity: 1,
+    },
+    box: {
+      flex: 1,
+      borderRadius: 0,
+      width: theme.values.width,
+      height: theme.values.height,
+      ...theme.presets.center,
+    },
+  })),
+}

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,58 @@
+// @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]
+
+  const defaultProps = {}
+  if (type === 'Tab') {
+    defaultProps.screenOptions = { headerShown: false }
+  }
+  // console.log('render Navigation', { type, scenes, props, defaultProps })
+
+  return <NavigationComponent.Navigator {...(props as any)} {...defaultProps}>
+    {
+      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']['component']
+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,
+
+//     }
+// }