@codeleap/mobile 1.2.1 → 1.4.0

package/src/components/Modal/index.tsx

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

@@ -0,0 +1,118 @@
+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) => ({})),
+}

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
+}
+

package/src/components/Overlay.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  OverlayComposition,
+  OverlayStyles,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { ReactNode } from 'react'
+import { InputLabel } from './TextInput'
+import { Button } from './Button'
+
+import { View } from './View'
+import { StylesOf } from '../types/utility'
+import { StyleSheet, ViewProps } from 'react-native'
+import { AnimatedTouchable } from './Touchable'
+
+export type OverlayProps = ViewProps & {
+  title?: ReactNode;
+  visible?: boolean;
+  showClose?: boolean;
+  variants?: ComponentVariants<typeof OverlayStyles>;
+  styles?: StylesOf<OverlayComposition>;
+  style?: any;
+  onPress?: () => void;
+} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>;
+
+export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
+  const {
+    showClose,
+    title,
+    children,
+    visible,
+    styles = {},
+    style,
+    variants,
+    ...props
+  } = overlayProps
+
+  const variantStyles = useDefaultComponentStyle('Overlay', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants: variants as any,
+  }) as StylesOf<OverlayComposition>
+
+  const touchableStyle = [
+    variantStyles.wrapper,
+    styles.wrapper,
+    visible && variantStyles['wrapper:visible'],
+    visible && styles['wrapper:visible'],
+  ]
+
+  return (
+    <AnimatedTouchable
+      // @ts-ignore
+      transition={'opacity'}
+      style={touchableStyle}
+      {...props}
+    >
+      <View>
+        {(title || showClose) && (
+          <View style={variantStyles.header}>
+            <InputLabel style={variantStyles.title} label={title} />
+            {showClose && (
+              <Button
+                variants={['icon']}
+                icon={'close' as IconPlaceholder}
+                style={variantStyles.closeButton}
+              />
+            )}
+          </View>
+        )}
+      </View>
+    </AnimatedTouchable>
+  )
+}