@codeleap/mobile 1.3.1 → 1.4.0

package/src/components/Modal/index.tsx

@@ -1,13 +1,20 @@
-import * as React from 'react' 
-import { 
-    View,
-    ViewProps,
-    AnimatedView
-} from '../View'
-import {  Button, ButtonProps } from '../Button'
+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 {
+  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'
 
@@ -15,57 +22,55 @@ 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
+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, 
+  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,
+    toggle = () => null,
     dismissOnBackdrop = true,
     closeIconName = 'close',
     debugName,
+    scroll = true,
     ...props
-    } = modalProps
-  
-  const variantStyles = useComponentStyle('Modal', {
-    variants:  variants as any,
+  } = modalProps
+
+  const variantStyles = useDefaultComponentStyle('Modal', {
+    variants: variants as any,
     transform: StyleSheet.flatten,
-    styles
+    styles,
   }) as ModalProps['styles']
 
-
-  function getStyles(key:MobileModalParts){
-    const s =  [
+  function getStyles(key: MobileModalParts) {
+    const s = [
       variantStyles[key],
-     styles[key],
-      visible ?  variantStyles[key + ':visible'] : {},
-      visible ?  styles[key + ':visible'] : {},
+      styles[key],
+      visible ? variantStyles[key + ':visible'] : {},
+      visible ? styles[key + ':visible'] : {},
     ]
 
     return s
@@ -74,70 +79,80 @@ export const Modal:React.FC<ModalProps> = (modalProps) => {
   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
-        }
+    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 : {
+    hidden: {
       ...variantStyles['box:pose'],
       ...styles['box:pose'],
     },
-    visible : {
+    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>
+    <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
+export default Modal

package/src/components/Modal/styles.ts

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

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,51 @@
+// @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]
+
+
+  return <NavigationComponent.Navigator {...(props as any)}>
+    {
+      Object.entries(scenes).map(([name, content], idx) => {
+        const isFunction = TypeGuards.isFunction(content)
+ 
+        let screenProps = {
+          name,  
+        } as PropTypes[T]['Screen']
+        
+        if (isFunction){
+          screenProps.component = content
+        } else {
+          screenProps.component = content?.component?.default || content?.component  || content?.default
+          const nameParts = name.split('.')
+
+          screenProps = {
+            ...screenProps,
+            options: (optionProps) => ({
+              title: nameParts[nameParts.length - 1] || name.replace('.', ''),
+              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>, 
+              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps)  : content.options), 
+            }),
+          }
+        }
+
+        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,37 @@
+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,
+
+//     }
+// }

package/src/components/Navigation/utils.tsx

@@ -0,0 +1,54 @@
+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}
+        />
+        
+        return [S, {
+          ...otherProps,
+          component: Component,
+        }]
+      }),
+  )
+
+  return SCENES_RESULT
+}
+