@boneframework/native-components 1.0.6 → 1.0.8

package/README.md

@@ -2,8 +2,11 @@
 React Native expo components for BoneFramework WIP
 ## project level files referred to in code
 ```
-@/config/settings
-@/config/cache
+config/settings
+config/cache
+assets/background.png
+assets/logo.png
+assets/animations/loader.json
 ```
 ## install these at root level:
 ```

package/api/client.js

@@ -1,8 +1,8 @@
 import {create} from 'apisauce';
 
 import cache from '../utilities/cache';
-import settings from '@/config/settings';
-import cacheSettings from '@/config/cache';
+import settings from '../../../../config/settings';
+import cacheSettings from '../../../../config/cache';
 
 const apiClient = create({
     baseURL: settings.apiUrl

package/components/ActivityIndicator.js

@@ -35,7 +35,7 @@ function ActivityIndicator({ visible = false , type="default"}) {
     return (
         <View style={style}>
             <Animation
-                source={require('../assets/animations/loader.json')}
+                source={require('../../../../assets/animations/loader.json')}
                 autoPlay={true}
                 loop={true}
                 style={{height: 100, width: 100, opacity: 1}}

package/components/Button.js

@@ -2,8 +2,8 @@ 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'
+import colors from '../../../../config/colors'
+import defaultStyles from '../../../../config/styles'
 
 function Button({title, onPress, color, textColor}) {
     return (

package/hooks/useStyle.js

@@ -0,0 +1,45 @@
+import {useEffect, useState} from "react";
+import * as Location from "expo-location";
+import {Platform, useColorScheme} from "react-native";
+
+import colors from "@/config/colors";
+import logger from "@/utility/logger";
+
+export default useStyle = () => {
+    const colorScheme = useColorScheme();
+    const [mode, setMode] = useState();
+    const dark = colorScheme == 'dark'
+    const style = {
+        dark: dark,
+        text: {
+            color: dark ? colors.light : colors.dark,
+            ...Platform.select({
+                ios: {
+                    fontSize: 20,
+                    fontFamily: "Helvetica",
+                },
+                android: {
+                    fontSize: 18,
+                    fontFamily: "Roboto",
+                },
+            })
+        },
+        box: {},
+        errorText: {},
+        flipswitch: {},
+        navButton: {},
+        formInput: {},
+        backgroundColor: dark ? colors.dark : colors.light,
+        colors: colors
+    };
+
+    style.box.backgroundColor = dark ? style.colors.darkish : style.colors.white;
+    style.flipswitch.onColor = dark ? style.colors.secondary : style.colors.secondary;
+    style.flipswitch.offColor = dark ? style.colors.darkish : style.colors.medium;
+    style.formInput.backgroundColor = dark ? style.colors.darkish : style.colors.white;
+    style.formInput.text = dark ? style.colors.medium : style.colors.dark;
+    style.errorText.color = dark ? style.colors.secondary : style.colors.primary;
+    style.navButton.color = dark ? style.colors.light : style.colors.white;
+
+    return style;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -34,6 +34,7 @@
     "expo-auth-session": "^5.5.2",
     "expo-secure-store": "^13.0.2",
     "jwt-decode": "^4.0.0",
+    "lottie-react-native": "^6.7.2",
     "react": "18.2.0",
     "yup": "^1.4.0"
   }

package/screens/RegisterScreen.tsx

@@ -39,12 +39,12 @@ function RegisterScreen({postRegisterUrl}) {
     return (
         <>
         <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
-        <ImageBackground blurRadius={10} style={styles.background} source={require('../assets/background.png')} >
+        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
             <View style={styles.container}>
                 <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                     <Icon size={75} name={'close'} />
                 </TouchableOpacity>
-                <Image style={styles.logo} source={require('../assets/logo.png')} />
+                <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
 
                 <Form
                     initialValues={{ email: ''}}

package/screens/WelcomeScreen.tsx

@@ -3,14 +3,14 @@ import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
 import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
 
 import Button from '../components/Button'
-import colors from '@/config/colors'
+import colors from '../../../../config/colors'
 
-function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}}) {
+function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK'}) {
     return (
-        <ImageBackground blurRadius={10} style={styles.background} source={require('@/assets/background.png')} >
+        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
             <View style={styles.logoContainer}>
-                <Image style={styles.logo} source={require('@/assets/logo.png')} />
-                <Text style={styles.tagline}>BONE FRAMEWORK</Text>
+                <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+                <Text style={styles.tagline}>{ title }</Text>
             </View>
             <View style={styles.buttonContainer}>
                 <Button title="login" color="primary" onPress={loginOnPress} ></Button>

package/utilities/cache.ts

@@ -0,0 +1,53 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import dayjs from "dayjs";
+
+import logger from './logger';
+
+const prefix = 'cache';
+const expiryInMinutes = 5;
+
+const store = async (key, value) => {
+    try {
+        const item = {
+            value: value,
+            timeatamp: Date.now()
+        };
+        await  AsyncStorage.setItem(prefix + key, JSON.stringify(item));
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+const get = async (key) => {
+    try {
+        const value = await AsyncStorage.getItem(prefix + key);
+        const item  = JSON.parse(value);
+
+        if (!item) {
+            return null;
+        }
+
+        if (isExpired(item)) {
+            await AsyncStorage.removeItem(prefix + key);
+
+            return null;
+        }
+
+        return item.value;
+
+    } catch (error) {
+        logger.log(error);
+    }
+};
+
+const isExpired = (item) => {
+    const now = dayjs();
+    const storedTime = dayjs(item.timeatamp);
+
+    return  now.diff(storedTime, 'minute') > expiryInMinutes;
+}
+
+export default {
+    get,
+    store
+}