@boneframework/native-components 1.0.2 → 1.0.5

package/README.md

@@ -5,5 +5,9 @@ React Native expo components for BoneFramework WIP
 @/config/settings
 @/config/cache
 ```
+## install these at root level:
+```
+expo-auth-session
+```
 
 

package/Screens.ts

@@ -0,0 +1,4 @@
+import RegisterScreen from './screens/RegisterScreen'
+import WelcomeScreen from './screens/WelcomeScreen'
+
+export default { RegisterScreen, WelcomeScreen }

package/components/ActivityIndicator.js

@@ -0,0 +1,48 @@
+import React, {useEffect, useRef} from 'react';
+import {View, StyleSheet} from "react-native";
+
+import Animation from "./Animation";
+import useStyle from "../hooks/useStyle";
+
+function ActivityIndicator({ visible = false , type="default"}) {
+    const defaultStyles = useStyle();
+
+    const styles = StyleSheet.create({
+        overlay: {
+            flex:1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: defaultStyles.backgroundColor,
+            height: '100%',
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            opacity: 0.8
+        },
+        default: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+        }
+    });
+
+    if (!visible) {
+        return null;
+    }
+
+    const style = type === 'default' ? styles.default : styles.overlay;
+
+    return (
+        <View style={style}>
+            <Animation
+                source={require('../assets/animations/loader.json')}
+                autoPlay={true}
+                loop={true}
+                style={{height: 100, width: 100, opacity: 1}}
+                speed={1.5}
+            />
+        </View>
+    );
+}
+
+export default ActivityIndicator;

package/components/Animation.js

@@ -0,0 +1,21 @@
+import React, {useEffect, useRef} from 'react';
+import LottieView from "lottie-react-native";
+
+function Animation({source, style, onAnimationFinish, autoPlay = true, loop = true, speed = 1.5}) {
+
+    const lottieRef = useRef(null);
+
+    return(
+        <LottieView
+            source={source}
+            autoPlay={autoPlay}
+            loop={loop}
+            style={style}
+            speed={speed}
+            onAnimationFinish={onAnimationFinish}
+            ref={lottieRef}
+        />
+    );
+}
+
+export default Animation;

package/components/ApiInterceptor.js

@@ -0,0 +1,104 @@
+import React, {useEffect} from 'react';
+
+import apiClient from "../api/client";
+import authStorage from "../auth/storage";
+import settings from "../config/settings";
+import useAuth from '../hooks/useAuth';
+
+// call to refresh an access token using our refresh token
+const refreshToken = async (token) => {
+    const formData = new FormData();
+    formData.append('client_id', settings.clientId);
+    formData.append('grant_type', 'refresh_token');
+    formData.append('refresh_token', token);
+    formData.append('scope', 'basic');
+
+    const result = await apiClient.post(settings.discovery.tokenEndpoint, formData, {
+        headers: {'Content-Type': 'multipart/form-data'}
+    });
+
+    const newToken = {
+        accessToken: result.data.access_token,
+        expiresIn: result.data.expires_in,
+        refreshToken: result.data.refresh_token,
+        tokenType: result.data.token_type,
+    };
+    authStorage.storeAuthToken(newToken);
+
+    return newToken;
+}
+
+function ApiInterceptor(props) {
+    const {user, logout} = useAuth();
+    let refreshing = null;
+
+    const addTransformers = () => {
+
+        const requestTransformers = apiClient.asyncRequestTransforms.length;
+        const responseTransformers = apiClient.asyncResponseTransforms.length;
+        const transformersAdded = requestTransformers + responseTransformers > 1;
+
+        if (!transformersAdded) {
+            apiClient.addAsyncRequestTransform(async request => {
+                const authToken = await authStorage.getAuthToken();
+
+                if (!authToken) {
+                    return;
+                }
+
+                if (settings.xDebugHeader === true) {
+                    if (!request.params) {
+                        request.params = [];
+                    }
+                    request.params['XDEBUG_SESSION'] = 'PHPSTORM';
+                }
+
+                request.headers['Authorization']  = 'Bearer ' + authToken.accessToken;
+            });
+
+            // check for a 401 response (expired access token), use refresh token to fetch new access token, retry request
+            apiClient.addAsyncResponseTransform(async response => {
+                if (response.ok) {
+                    return response.data;
+                }
+
+                if (response.problem) {
+                    const originalConfig = response.config;
+
+                    //Access Token was expired, grab a fresh one using the refresh token and try again
+                    if (originalConfig.url !== settings.discovery.authEndpoint && response.status === 401 && !originalConfig.retry) {
+                        // settimng retry flag to allow retrying once and not loop infinitely
+                        originalConfig.retry = true;
+                        try {
+                            const token = await authStorage.getAuthToken();
+                            if (token) {
+                                // first request to refresh will call the method, all the other requests will await the promise
+                                // so only one call to refresh will be made in the case of multile async 401s
+                                refreshing = refreshing ? refreshing : refreshToken(token.refreshToken);
+                                await refreshing;
+                                refreshing = null;
+
+                                return apiClient.any(originalConfig);
+                            } else {
+                                return logout();
+                            }
+                        } catch (_error) {
+                            // if we get here, the refresh token has also expired, log the user out.
+                            return logout();
+                        }
+                    }
+
+                    return Promise.reject(response.problem);
+                }
+            });
+        }
+    }
+
+    useEffect( () => {
+        addTransformers();
+    }, []);
+
+    return null;
+}
+
+export default ApiInterceptor;

package/components/Button.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, Platform, TouchableOpacity, TouchableHighlight} from "react-native";
+
+import Text from '../components/Text'
+import colors from '../config/colors'
+import defaultStyles from '../config/styles'
+
+function Button({title, onPress, color, textColor}) {
+    return (
+        <TouchableHighlight style={[styles.roundbutton, {
+            backgroundColor: color ? colors[color]: styles.roundbutton.color,
+        }]} onPress={onPress}>
+            <Text style={[styles.text, {
+                color: textColor ? colors[textColor] : styles.text.color}]
+            }>{title}</Text>
+        </TouchableHighlight>
+    );
+}
+
+const styles = StyleSheet.create({
+    roundbutton: {
+        width: '100%',
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: colors.primary,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginVertical: 10,
+        color: colors.black
+    },
+    text: {
+        fontFamily: defaultStyles.text.fontFamily,
+        color: colors.white,
+        fontSize: 18,
+        textTransform: 'uppercase',
+        fontWeight: 'bold'
+    }
+});
+
+export default Button;

package/components/Card.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {Image} from 'react-native-expo-image-cache';
+
+import Text from './Text'
+import colors from '../config/colors'
+import useStyle from "../hooks/useStyle";
+
+function Card({title, subtitle, imageUrl, onPress, thumbnaiilUrl}) {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        card: {
+            borderRadius: 15,
+            backgroundColor: style.box.backgroundColor,
+            marginBottom: 20,
+            overflow: "hidden"
+        },
+        image: {
+            width: '100%',
+            height: 200,
+        },
+        detailsContainer: {
+            padding: 20,
+        },
+        title: {
+          color: style.text.color
+        },
+        subtitle: {
+            color: style.errorText.color
+        }
+    });
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress} >
+            <View style={styles.card}>
+                <Image
+                    style={styles.image}
+                    uri={imageUrl}
+                    preview={{uri: thumbnaiilUrl}}
+                    tint={'light'}
+                />
+                <View style={styles.detailsContainer}>
+                    <Text style={styles.title} numberOfLines={1}>
+                        {title}
+                    </Text>
+                    <Text style={styles.subtitle} numberOfLines={5}>
+                        {subtitle}
+                    </Text>
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+export default Card;

package/components/CategoryPickerItem.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View, StyleSheet, TouchableOpacity} from "react-native";
+
+import Text from '../components/Text'
+import Icon from '../components/Icon'
+import useStyle from "../hooks/useStyle";
+
+function CategoryPickerItem({item, onPress}) {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 15,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        label: {
+            paddingTop: 5,
+            textAlign: 'center',
+            color: style.text.color
+        }
+    })
+
+    return <TouchableOpacity onPress={onPress} style={styles.container}>
+        <Icon backgroundColor={item.backgroundColor} name={item.icon} size={80}/>
+        <Text style={styles.label}>{item.label}</Text>
+    </TouchableOpacity>;
+}
+export default CategoryPickerItem;

package/components/DateTimePicker.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import RNDateTimePicker from "@react-native-community/datetimepicker";
+
+function DateTimePicker({ ...props } ) {
+
+    return (
+        <RNDateTimePicker {...props} />
+    );
+}
+
+export default DateTimePicker;

package/components/Icon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, StyleSheet} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+function Icon({name, size = 40, backgroundColor, borderRadius , iconColor = 'white'}) {
+    borderRadius = borderRadius ? borderRadius : size /2;
+
+    const styles = StyleSheet.create({
+        icon: {
+            width: size,
+            height: size,
+            borderRadius: borderRadius,
+            backgroundColor: backgroundColor,
+            justifyContent: "center",
+            alignItems: "center"
+        }
+    });
+
+    return (
+        <View style={styles.icon}>
+            <MaterialCommunityIcons name={name} color={iconColor} size={size / 2} />
+        </View>
+    );
+}
+
+
+
+export default Icon;

package/components/Image.js

@@ -0,0 +1,61 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {Image as RNImage, StyleSheet, View} from "react-native";
+
+import storage from '../auth/storage';
+import * as Notifications from "expo-notifications";
+import useAuth from "../hooks/useAuth";
+import authStorage from "../auth/storage";
+import settings from '../config/api';
+import AuthContext from "../auth/context";
+
+function Image({style, uri, onPress, handleError, source}) {
+    const {user, setUser} = useContext(AuthContext);
+
+    const tryAgain = async error => {
+        if (handleError !== null) {
+            handleError();
+        }
+        setTimeout(() => {
+
+        }, 1000);
+    };
+    let imageSource;
+    let protectedUri = false;
+
+    if (typeof source === 'object' && 'uri' in source !== null && (typeof source.uri === 'string' || source.uri instanceof String)) {
+        imageSource = source;
+
+        if (source.uri.startsWith(settings.baseURL)) {
+            imageSource = { headers: {Authorization: 'Bearer ' + user.authToken.accessToken }, uri: source.uri};
+            protectedUri = true;
+        }
+    }
+    else if (uri) {
+        imageSource = {uri: uri}
+
+        if (uri.startsWith(settings.baseURL)) {
+            imageSource = { headers: {Authorization: 'Bearer ' + user.authToken.accessToken }, uri: uri};
+            protectedUri = true;
+        }
+    } else if (source) {
+        imageSource = source;
+    }
+
+    if ((null !== user.authToken.accessToken && protectedUri == true) || protectedUri == false) {
+        return (
+            <RNImage
+                source={imageSource}
+                style={style}
+                onError={tryAgain}
+            ></RNImage>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {}
+})
+
+export default Image;
+
+

package/components/ImageInput.tsx

@@ -0,0 +1,97 @@
+import React, {useEffect} from 'react';
+import {Alert, Image, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+
+import colors from '../config/colors'
+import Icon from './Icon';
+import useCamera from '../hooks/useCamera';
+import usePhotos from '../hooks/usePhotos';
+import useStyle from "../hooks/useStyle";
+
+function ImageInput({imageUri, onChangeImage, onCancel = () => {}, mode = 'both'}) {
+
+    const camera = useCamera();
+    const photos = usePhotos();
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            backgroundColor: style.formInput.backgroundColor,
+            color: style.formInput.color,
+            borderRadius: 15,
+            justifyContent: 'center',
+            height: 100,
+            width: 100,
+            overflow: 'hidden'
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+        }
+    })
+
+    const handlePress = async () => {
+        if (!imageUri) {
+            switch (mode) {
+                case 'camera':
+                    selectImage('camera')
+                    break;
+                case 'photos':
+                    selectImage('photos');
+                    break;
+                case 'both':
+                default:
+                    Alert.alert(
+                        'Please choose',
+                        null,
+                        [
+                            { text: 'Photos', onPress: () => selectImage('photos') },
+                            { text: 'Camera', onPress: () => selectImage('camera') },
+                            { text: 'Cancel', style: 'cancel' }
+                        ]
+                    );
+            }
+
+        } else {
+            Alert.alert('Remove', 'are you sure you want to remove this image?', [
+                { text: 'Yes', onPress: () => onChangeImage(null)},
+                { text: 'No'},
+            ]);
+        }
+    };
+
+    const selectImage = async (pickerType) => {
+        try {
+            if (pickerType === 'camera') {
+                const result = await camera.takePhoto({
+                    allowsEditing: true,
+                    quality: 0.5
+                });
+                result.canceled ? onCancel() : onChangeImage(result.assets[0].uri);
+            } else {
+                const result = await photos.selectImage({
+                    quality: 0.5
+                });
+                result.canceled ? onCancel() : onChangeImage(result.assets[0].uri);
+            }
+
+        } catch (error) {
+            Alert.alert('Image error', 'Error reading image');
+            console.log(error);
+        }
+    };
+
+    return (
+        <TouchableWithoutFeedback onPress={handlePress}>
+            <View style={styles.container}>
+                {!imageUri ? (
+                    <Icon name="camera" size={75} iconColor={colors.medium} />
+                ) : (
+                    <Image source={{ uri: imageUri }} style={styles.image} />
+                )}
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+export default ImageInput;

package/components/ImageInputList.tsx

@@ -0,0 +1,34 @@
+import React, {useRef} from 'react';
+import {FlatList, Image, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import ImageInput from "./ImageInput";
+
+function ImageInputList({imageUris = [], onAddImage, onRemoveImage}) {
+    const scrollView = useRef();
+
+    return <View>
+        <ScrollView ref={scrollView} horizontal onContentSizeChange={ () => scrollView.current.scrollToEnd() } >
+            <View style={styles.container}>
+                { imageUris.map( uri => (
+                    <View key={uri} style={styles.image}>
+                        <ImageInput imageUri={uri} onChangeImage={ () => onRemoveImage(uri)} />
+                    </View>
+                )) }
+                <ImageInput onChangeImage={ uri => onAddImage(uri) } />
+            </View>
+        </ScrollView>
+    </View>;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row'
+    },
+    image: {
+        marginRight: 5
+    },
+    list: {
+        backgroundColor: 'yellow'
+    }
+})
+
+export default ImageInputList;

package/components/ListItemDeleteAction.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+
+import colors from '../config/colors'
+
+function ListItemDeleteAction({onPress}) {
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.deleteBox} >
+                <MaterialCommunityIcons
+                    name="trash-can"
+                    size={35}
+                    color={colors.white}
+                />
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+const styles = StyleSheet.create({
+    deleteBox: {
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: colors.danger,
+        width: 70
+    }
+})
+
+export default ListItemDeleteAction;

package/components/ListItemFlipswitch.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import ToggleSwitch from "toggle-switch-react-native";
+import Image from "./Image";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import Text from '../components/Text'
+import colors from "../config/colors";
+import useStyle from "../hooks/useStyle";
+
+function ListItemFlipswitch({title, subtitle, IconComponent, isOn, onColor, offColor, onToggle = () => {}}) {
+    const style = useStyle();
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 15,
+            backgroundColor: style.box.backgroundColor
+        },
+        detailsContainer: {
+            flex: 1,
+            marginLeft: 10,
+            justifyContent: "center"
+        },
+        image: {
+            width: 70,
+            height: 70,
+            borderRadius: 35,
+        },
+        title: {
+            color: style.text.color,
+            fontWeight: "500",
+        },
+        subtitle: {
+            color: colors.medium
+        }
+    });
+
+    onColor = onColor ? onColor : style.flipswitch.onColor
+    offColor = offColor ? offColor : style.flipswitch.offColor
+
+    return (
+        <View style={styles.container}>
+            {IconComponent}
+            <View style={styles.detailsContainer}>
+                <Text style={styles.title} numberOfLines={1}>{title}</Text>
+                {subtitle && <Text numberOfLines={2} style={styles.subtitle}>{subtitle}</Text> }
+            </View>
+            <ToggleSwitch
+                isOn={isOn}
+                onColor={onColor}
+                offColor={offColor}
+                size="large"
+                onToggle={onToggle}
+            />
+        </View>
+    );
+}
+
+export default ListItemFlipswitch;

package/components/ListItemSeparator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+
+import colors from '../config/colors'
+import useStyle from "../hooks/useStyle";
+
+function ListItemSeparator() {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        separator: {
+            width: '100%',
+            height: 1,
+            backgroundColor: style.backgroundColor
+        }
+    })
+
+    return (
+        <View style={styles.separator} />
+    );
+}
+
+export default ListItemSeparator;