@codeleap/mobile 1.0.0 → 1.3.0

package/dist/index.js

@@ -13,8 +13,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OSAlert = void 0;
+exports.posed = exports.OSAlert = void 0;
 __exportStar(require("./components"), exports);
 var OSAlert_1 = require("./utils/OSAlert");
 Object.defineProperty(exports, "OSAlert", { enumerable: true, get: function () { return __importDefault(OSAlert_1).default; } });
+var react_native_pose_1 = require("react-native-pose");
+Object.defineProperty(exports, "posed", { enumerable: true, get: function () { return __importDefault(react_native_pose_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,2CAAmD;AAA3C,mHAAA,OAAO,OAAW"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,2CAAmD;AAA3C,mHAAA,OAAO,OAAW;AAC1B,uDAAkD;AAA1C,2HAAA,OAAO,OAAS"}

package/dist/modules/cropPicker.d.ts

@@ -0,0 +1 @@
+export { default as ImagePicker } from 'react-native-image-crop-picker';

package/dist/modules/cropPicker.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePicker = void 0;
+// @ts-ignore
+var react_native_image_crop_picker_1 = require("react-native-image-crop-picker");
+Object.defineProperty(exports, "ImagePicker", { enumerable: true, get: function () { return __importDefault(react_native_image_crop_picker_1).default; } });
+//# sourceMappingURL=cropPicker.js.map

package/dist/modules/cropPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropPicker.js","sourceRoot":"","sources":["../../src/modules/cropPicker.ts"],"names":[],"mappings":";;;;;;AAAA,aAAa;AACb,iFAAqE;AAA7D,8IAAA,OAAO,OAAe"}

package/dist/modules/documentPicker.d.ts

@@ -0,0 +1 @@
+export { default as DocumentPicker } from 'react-native-document-picker';

package/dist/modules/documentPicker.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentPicker = void 0;
+// @ts-ignore 
+var react_native_document_picker_1 = require("react-native-document-picker");
+Object.defineProperty(exports, "DocumentPicker", { enumerable: true, get: function () { return __importDefault(react_native_document_picker_1).default; } });
+//# sourceMappingURL=documentPicker.js.map

package/dist/modules/documentPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentPicker.js","sourceRoot":"","sources":["../../src/modules/documentPicker.ts"],"names":[],"mappings":";;;;;;AAAA,cAAc;AACd,6EAAsE;AAA9D,+IAAA,OAAO,OAAkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "main": "src/index.ts",
   "repository": "git@github.com:codeleap-uk/codeleap-lib.git",
   "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
@@ -13,7 +13,8 @@
   },
   "scripts": {
     "build": "tsc --build",
-    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\""
+    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "publish": "npm publish"
   },
   "peerDependencies": {
     "@codeleap/common": "*",
@@ -27,6 +28,8 @@
   },
   "dependencies": {
     "@miblanchard/react-native-slider": "^2.1.0",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5"
+    "react-native-animatable": "^1.3.3",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-pose": "^0.9.1"
   }
 }

package/src/components/Animated.tsx

@@ -0,0 +1,31 @@
+import { onUpdate } from '@codeleap/common'
+import React, { useRef } from 'react'
+
+import posed from 'react-native-pose'
+import {Touchable} from './Touchable'
+import {View} from './View'
+const Components = {
+    Touchable,
+    View
+}
+
+
+const PosedComponents = Object.fromEntries(Object.entries(Components).map(([key,Render]) => [key, posed(Render)]))
+
+type AnimatedComponents = typeof Components
+type CP = keyof AnimatedComponents
+
+type AnimatedProps<T extends CP, CFG = Record<string,any>>  = {
+    component: T
+    config: CFG
+    pose: keyof CFG
+    initialPose?: keyof CFG
+} & Omit<Parameters<AnimatedComponents[T]>[0],'component'>
+
+export const Animated = <T extends CP, CFG = any>({config,component, ...props}:AnimatedProps<T, CFG>) => {
+
+    const Component = useRef(PosedComponents[component](config)).current
+
+    return <Component {...props} />
+}
+

package/src/components/Button.tsx

@@ -54,7 +54,8 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>( (buttonProps,re
     >
       {loading && <ActivityIndicator style={[variantStyles.loader, styles.loader]} />}
       {!loading && <Icon name={icon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.leftIcon, styles.leftIcon])}/>}
-      {children || <Text text={text} style={[variantStyles.text, styles.text]}/>}
+      {text ? <Text text={text} style={[variantStyles.text, styles.text]}/> : null}
+      {children}
       <Icon name={rightIcon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.rightIcon, styles.rightIcon])}/>
     </Touchable>
   )

package/src/components/ContentView.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ComponentVariants, ContentViewStyles, useComponentStyle, ViewComposition } from '@codeleap/common'
+import { ViewProps, View } from './View'
+import { Text } from './Text'
+import { StylesOf } from '../types/utility'
+import { ActivityIndicator } from './ActivityIndicator'
+
+export type ContentViewProps = Omit<ViewProps, 'variants' | 'responsiveVariants'> & {
+  placeholderMsg: string
+  loading?: boolean
+  styles?: StylesOf<ViewComposition>
+} & ComponentVariants<typeof ContentViewStyles>
+
+const WrapContent = ({ children, ...props }) => <View {...props}>{children}</View>
+
+export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
+  const {
+    children,
+    placeholderMsg,
+    loading,
+    variants,
+    styles,
+    ...props
+  } = rawProps
+
+  const variantStyle = useComponentStyle('ContentView', {
+    variants,
+    styles,
+  })
+
+  if (loading) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        <ActivityIndicator styles={{wrapper: variantStyle.loader}}/>
+      </WrapContent>
+    )
+  }
+  const hasChildren = Object.keys(children || {}).length > 0
+  if (hasChildren) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        {children}
+      </WrapContent>
+    )
+  }
+
+  return (
+    <WrapContent {...props} style={styles}>
+      <Text text={placeholderMsg} />
+    </WrapContent>
+  )
+}

package/src/components/FileInput.tsx

@@ -1,6 +1,69 @@
-import * as React from 'react'
-import { Text } from 'react-native'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import { DocumentPicker } from '../modules/documentPicker'
+import { ComponentVariants, FileInputComposition, FileInputStyles, IconPlaceholder, MobileInputFile, useComponentStyle, useStyle} from '@codeleap/common'
+import { StylesOf } from '../types/utility'
+import { Button, ButtonProps } from './Button'
+import { View } from './View'
+import { InputLabel } from './TextInput'
 
-export const FileInput = React.forwardRef(() => {
-    return <Text >Not implemented</Text>
+export type FileInputRef = {
+    openFilePicker: () => void
+}
+
+export type FileInputProps = {
+    label?: string;
+    iconName?: IconPlaceholder
+    styles?: StylesOf<FileInputComposition>;
+    mode: 'hidden' | 'button'
+    variants?: ComponentVariants<typeof FileInputStyles>['variants']
+    onFileSelect(files:MobileInputFile[]): void
+    options?: DocumentPicker.DocumentPickerOptions
+    buttonProps?: ButtonProps
+}
+
+export const FileInput: React.FC<FileInputProps> = forwardRef<FileInputRef, FileInputProps>((fileInputProps,ref) => {
+    const {mode = 'hidden', onFileSelect, iconName, styles, label, variants, options, buttonProps} = fileInputProps
+    
+    const [file, setFile] = React.useState(null)
+
+    const {logger} = useStyle() 
+    
+    const openFilePicker = async () => {
+        try {
+            let files = await DocumentPicker.pick(options)
+            if(!Array.isArray(files)){
+                files = [files]
+            } 
+            setFile(files)
+            onFileSelect(files.map((file) => ({preview: file, file})))
+        } catch (err) {
+            if (DocumentPicker.isCancel(err)) {
+               logger.log('User cancelled the picker.', null, 'Component')
+            } else {
+                throw err
+            }
+        }
+    }
+    
+    const variantStyles = useComponentStyle('FileInput', {
+        styles,
+        variants,
+        
+    })
+
+
+    useImperativeHandle(ref, () => ({
+        openFilePicker
+    }))
+    
+    const filenames = file ? file.map((f) => f.name) : ''  
+    if(mode === 'button'){
+        return (<View style={variantStyles.wrapper}>
+            <InputLabel label={label} style={variantStyles.label}/>
+            <Button  onPress={() => openFilePicker()}  text={filenames } icon={ iconName || 'fileInputButton' as IconPlaceholder} variants={filenames ? '' : 'icon' } {...buttonProps}/>
+        </View>
+        )
+    }
+
+    return null
 })

package/src/components/Image.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ComponentVariants, ImageStyles, useComponentStyle } from "@codeleap/common"
+import { ComponentVariants, ImageStyles, MobileInputFile, useComponentStyle } from "@codeleap/common"
 import { ComponentPropsWithoutRef } from "react"
 import { Image as NativeImage } from 'react-native'
 import {FastImage} from '../modules/fastImage'
@@ -10,7 +10,7 @@ export type ImageProps = Omit<NativeImageProps, 'source'> & {
     fast?: boolean
     source: NativeImageProps['source'] & {
         priority?: keyof typeof FastImage.priority
-    }
+    } | MobileInputFile | string
     resizeMode?: keyof typeof FastImage.resizeMode
 }
 
@@ -38,6 +38,6 @@ export const Image:React.FC<ImageProps> = (props) => {
     }
     return <NativeImage 
         style={styles}
-        {...imageProps}
+        {...(imageProps as any)}
     />
 }

package/src/components/Modal/index.tsx

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

package/src/components/Modal/styles.ts

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

package/src/components/Overlay.tsx

@@ -0,0 +1,72 @@
+import * as  React from 'react'
+import * as Animatable from 'react-native-animatable'
+import { ComponentVariants, IconPlaceholder, OverlayComposition, OverlayStyles, useComponentStyle } 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 '.'
+
+
+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 = useComponentStyle('Overlay', {
+        styles,
+        transform: StyleSheet.flatten,
+        variants: variants as any
+    })
+
+    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>
+    
+}

package/src/components/TextInput.tsx

@@ -195,7 +195,7 @@ import {
     
     switch (typeof label){
       case 'string':
-        return <Text variants={['p2']} style={style} text={label}/>
+        return <Text style={style} text={label}/>
       case 'object':
       
         return label