@boneframework/native-components 1.0.55 → 1.0.57

package/contexts/api.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+interface ApiContextProps {
+   baseURL: string;
+};
+
+
+const ApiContext = createContext<ApiContextProps>({
+    baseURL: ""
+});
+
+export default ApiContext;

package/contexts/cache.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+interface CacheContextProps {
+    blacklist: string[];
+    cacheExpiryMinutes: number;
+};
+
+
+const CacheContext = createContext<CacheContextProps>({
+    blacklist: [],
+    cacheExpiryMinutes: 0
+});
+
+export default CacheContext;

package/contexts/colors.ts

@@ -1,11 +1,11 @@
-import { ThemeColors, defaultTheme } from "@boneframework/native-components/contexts/theme";
+import { ThemeColors, defaultTheme } from "../contexts/theme";
 import { createContext } from "react";
 
-const ColorContext = createContext<ThemeColors>(defaultTheme);
+const ColorContext = createContext<ThemeColors>(defaultTheme.colors);
 
 export type ColorsProviderProps = {
     children: React.ReactNode;
     value: ThemeColors;
 };
 
-export default ColorContext; 
+export default ColorContext;

package/contexts/settings.ts

@@ -0,0 +1,33 @@
+import { createContext } from "react";
+import Constants from "expo-constants";
+import { bool } from "yup";
+
+const apiUrl = process.env.EXPO_PUBLIC_API_URL;
+const clientId = process.env.EXPO_PUBLIC_API_CLIENT_ID;
+
+interface SettingsContextProps {
+    apiUrl: string,
+    authCallbackURL: 'oauth2/callback',
+    clientId: string,
+    discovery: {
+        authEndpoint: string,
+        tokenEndpoint: string,
+    },
+    scheme: 'bone',
+    xDebugHeader: boolean,
+};
+
+
+const SettingsContext = createContext<SettingsContextProps>({
+    apiUrl: apiUrl,
+        authCallbackURL: 'oauth2/callback',
+        clientId: clientId,
+        discovery: {
+            authEndpoint: apiUrl + '/en_GB/oauth2/authorize',
+            tokenEndpoint: apiUrl + '/en_GB/oauth2/token',
+        },
+        scheme: 'bone',
+        xDebugHeader: false,
+});
+
+export default SettingsContext;

package/contexts/theme.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import {Context, createContext} from 'react';
 
 type ThemeColors = {
     primary: string;
@@ -14,22 +14,28 @@ type ThemeColors = {
     bgGradient: string[];
 };
 
-const defaultTheme: ThemeColors = {
-    primary: '#fc5c65',
-    secondary: '#4ecdc4',
-    black: '#000',
-    white: '#fff',
-    light: '#f0f4f4',
-    whitish: '#ddd',
-    medium: '#999',
-    darkish: '#333',
-    dark: '#222',
-    danger: '#ff5200',
-    bgGradient: ['#001C50', '#003698']
+type ThemeColorsProp = {
+    colors: ThemeColors
 };
 
-const ThemeContext = createContext<ThemeColors>(defaultTheme);
+const defaultTheme: ThemeColorsProp = {
+    colors: {
+        primary: '#fc5c65',
+        secondary: '#4ecdc4',
+        black: '#000',
+        white: '#fff',
+        light: '#f0f4f4',
+        whitish: '#ddd',
+        medium: '#999',
+        darkish: '#333',
+        dark: '#222',
+        danger: '#ff5200',
+        bgGradient: ['#001C50', '#003698']
+    }
+};
+
+const ThemeContext: Context<ThemeColors> = createContext<ThemeColors>(defaultTheme);
 
 export default ThemeContext;
-export { defaultTheme, ThemeColors };
+export { defaultTheme, ThemeColors, ThemeColorsProp };
 

package/hooks/useColors.ts

@@ -1,11 +1,9 @@
 
-// import { useContext } from "react";
-import colors from "../../../../config/colors";
-// import ColorContext from "@boneframework/native-components/contexts/colors";
+import { useContext } from "react";
+import ColorContext from "../contexts/colors";
 
 const useColors = () => {
-    // return useContext(ColorContext);
-    return colors
+    return useContext(ColorContext);
 }
 
-export default useColors;
+export default useColors;

package/hooks/useNotifications.web.ts

@@ -0,0 +1,14 @@
+import * as Device from "expo-device";
+import * as Notifications from "expo-notifications";
+import {useEffect} from "react";
+import {Platform} from "react-native";
+import Constants from "expo-constants";
+
+import expoPushTokensApi from "../api/notifications";
+import {useStorageState} from "./useStorageState";
+
+const useNotifications = (notificationReceivedListener = notification => {}) => {
+    
+}
+
+export default useNotifications;

package/hooks/useSettings.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+
+import SettingsContext from "@boneframework/native-components/contexts/settings";
+
+const useSettings = () => {
+    return useContext(SettingsContext);
+}
+
+export default useSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -29,6 +29,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.17.12",
+    "@lottiefiles/dotlottie-react-native": "^0.7.1",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-native-community/netinfo": "^11.4.1",
@@ -48,7 +50,7 @@
     "formik": "^2.4.9",
     "jwt-decode": "^4.0.0",
     "lottie-react-native": "^7.3.4",
-    "react": "^19.1.0",
+    "react": "19.1.0",
     "react-native-gesture-handler": "^2.29.1",
     "react-native-maps": "^1.26.19",
     "react-native-progress": "^5.0.1",

package/screens/ActivateUserScreen.tsx

@@ -11,7 +11,7 @@ import useApi from "../hooks/useApi";
 import useAuth from "../hooks/useAuth";
 
 import userApi from "../api/users";
-import colors from '../../../../config/colors';
+import useColors from "@boneframework/native-components/hooks/useColors";
 
 function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedirect, backgroundSource = null}) {
     const STATUS_BEGIN = 'start_validating';
@@ -32,6 +32,8 @@ function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedir
     const email = params.email;
     const token = params.token;
 
+    const colors = useColors();
+
     const validateEmailToken = async () => {
         setStatus(STATUS_VALIDATE);
         const result = await validateEmailTokenApi.request(email, token);

package/screens/CheckEmailScreen.tsx

@@ -4,18 +4,51 @@ import React from "react";
 import Animation from "../components/Animation";
 import Background from "../components/Background";
 import Text from '../components/Text';
+import useColors from "@boneframework/native-components/hooks/useColors";
 
-import colors from "../../../../config/colors";
 
 function CheckEmailScreen({backgroundSource = null}) {
 
+    const colors = useColors();
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingHorizontal: 20
+        },
+        animationContainer: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 1,
+            paddingHorizontal: 10,
+            marginTop: -50
+        },
+        animation: {
+            width: 150,
+            height: 150,
+        },
+        activate: {
+            marginTop: 20,
+            textTransform: 'uppercase',
+            fontSize: 24,
+            fontWeight: 'bold',
+            marginBottom: 20,
+            color: colors.white,
+            textAlign: 'center'
+        },
+        info: {
+            color: colors.white,
+            textAlign: 'center'
+        },
+    })
+
     return (
         <Background blurRadius={10} style={styles.container} imageSource={backgroundSource} gradientColors={colors.bgGradient} >
             <View style={styles.animationContainer}>
                 <Animation
                     autoPlay={true}
                     loop={true}
-                    source={require('../../../../assets/animations/email.json')}
+                    source={require('../assets/animations/email.json')}
                     style={styles.animation}
                     speed={1}
                 />
@@ -26,35 +59,6 @@ function CheckEmailScreen({backgroundSource = null}) {
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        paddingHorizontal: 20
-    },
-    animationContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 1,
-        paddingHorizontal: 10,
-        marginTop: -50
-    },
-    animation: {
-        width: 150,
-        height: 150,
-    },
-    activate: {
-        marginTop: 20,
-        textTransform: 'uppercase',
-        fontSize: 24,
-        fontWeight: 'bold',
-        marginBottom: 20,
-        color: colors.white,
-        textAlign: 'center'
-    },
-    info: {
-        color: colors.white,
-        textAlign: 'center'
-    },
-})
+
 
 export default CheckEmailScreen;

package/screens/EditProfileScreen.tsx

@@ -20,8 +20,7 @@ import useAuth from "../hooks/useAuth";
 import useCamera from "../hooks/useCamera";
 import usePhotos from "../hooks/usePhotos";
 import useStyle from "../hooks/useStyle";
-
-import colors from '../../../../config/colors';
+import useColors from '@boneframework/native-components/hooks/useColors';
 
 const validationSchema = Yup.object().shape({
     firstname: Yup.string().required().min(2).max(60).label('First name'),
@@ -39,7 +38,7 @@ function EditProfileScreen(props) {
     const [profileImage, setProfileImage] = useState(null);
     const [profileBackground, setProfileBackground] = useState(null);
     const style = useStyle();
-
+    const colors = useColors();
     const { updateUser, user} = useAuth();
     const updateProfileApi = useApi(userApi.updateProfile);
     const userImageUploadApi = useApi(userApi.uploadUserImage);

package/screens/MapScreen.web.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {StyleSheet, Text, View} from "react-native";
+
+function MapScreen(props) {
+    return (
+        <View style={styles.container}>
+            <Text>Map Screen Web, use Pigeon Maps - @todo</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    map: {
+        width: '100%',
+        height: '100%',
+    },
+});
+
+export default MapScreen;

package/screens/RegisterScreen.tsx

@@ -9,17 +9,17 @@ import useApi from "../hooks/useApi";
 import usersApi from '../api/users';
 import {ErrorMessage, FormField, Form, SubmitButton} from '../components/forms'
 import Icon from "../components/Icon";
-
-import colors from "../../../../config/colors";
+import useColors from '@boneframework/native-components/hooks/useColors';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string().required().email().label('Email'),
 });
 
-function RegisterScreen({postRegisterUrl, backgroundSource = null}) {
+function RegisterScreen({postRegisterUrl, backgroundSource = null, logoSource = null}) {
     const registerApi = useApi(usersApi.register);
     const [error, setError] = useState();
     const onClose = () => router.back();
+    const colors = useColors();
 
     const handleSubmit = async userInfo => {
         Keyboard.dismiss();
@@ -39,6 +39,10 @@ function RegisterScreen({postRegisterUrl, backgroundSource = null}) {
         router.navigate(postRegisterUrl);
     };
 
+    if (!logoSource) {
+        logoSource = require('../assets/logo.png');
+    }
+
     return (
         <>
         <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
@@ -47,7 +51,7 @@ function RegisterScreen({postRegisterUrl, backgroundSource = null}) {
                 <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                     <Icon size={75} name={'chevron-left'} />
                 </TouchableOpacity>
-                <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+                <Image style={styles.logo} source={require(logoSource)} />
 
                 <Form
                     initialValues={{ email: ''}}

package/screens/ResendActivationlScreen.tsx

@@ -3,14 +3,45 @@ import {StyleSheet, View} from "react-native";
 import Text from '../components/Text';
 import Button from "../components/Button";
 import Image from "../components/Image";
-
-import colors from "../../../../config/colors";
-
-function ResendActivationScreen({tokenError, submitCallback}) {
+import useColors from "@boneframework/native-components/hooks/useColors";
+
+
+function ResendActivationScreen({tokenError, submitCallback, logosource}) {
+    const colors = useColors();
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+        },
+        logo: {
+            width: 150,
+            height: 105,
+            alignSelf: "center",
+            marginTop: 50,
+            marginBottom: 20,
+        },
+        resendText: {
+            color: colors.white,
+            fontSize: 17,
+            marginBottom: 20,
+            textAlign: 'center'
+        },
+        tokenError: {
+            color: colors.white,
+            fontSize: 25,
+            marginBottom: 10,
+            textAlign: 'center'
+        },
+    })
+
+    if (!logosource) {
+        logosource = require('../assets/logo.png');
+    }
 
     return (
         <View style={styles.container}>
-            <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+            <Image style={styles.logo} source={logosource} />
             <Text style={styles.tokenError}>{tokenError}</Text>
             <Text style={styles.resendText}>You will need a fresh acivation email in order to continue creating your account.</Text>
             <Button color={'primary'} title={'Resend email'} onPress={submitCallback}/>
@@ -18,32 +49,6 @@ function ResendActivationScreen({tokenError, submitCallback}) {
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-    },
-    logo: {
-        width: 150,
-        height: 105,
-        alignSelf: "center",
-        marginTop: 50,
-        marginBottom: 20,
-    },
-    resendText: {
-        color: colors.white,
-        fontSize: 17,
-        marginBottom: 20,
-        textAlign: 'center'
-    },
-    tokenError: {
-        color: colors.white,
-        fontSize: 25,
-        marginBottom: 10,
-        textAlign: 'center'
-    },
-})
-
 export default ResendActivationScreen;
 
 

package/screens/SetPasswordScreen.tsx

@@ -10,11 +10,15 @@ const validationSchema = Yup.object().shape({
     confirm: Yup.string().required().oneOf([Yup.ref('password'), null], 'Passwords must match').label('Confirm')
 });
 
-function SetPasswordScreen({submitCallback, error}) {
+function SetPasswordScreen({submitCallback, error, logosource}) {
+    if (!logosource) {
+        logosource = require('../assets/logo.png');
+    }
+
 
     return(
         <View style={styles.container}>
-            <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+            <Image style={styles.logo} source={logosource} />
             <Form
                 initialValues={{ password: '', confirm: ''}}
                 onSubmit={submitCallback}

package/screens/UploadScreen.tsx

@@ -3,9 +3,11 @@ import {Modal, StyleSheet, View} from "react-native";
 import * as Progress from 'react-native-progress';
 
 import Animation from "../components/Animation";
-import colors from '../../../../config/colors';
+import useColors from "../hooks/useColors";
 
 function UploadScreen({onDone, progress = 0, visible = false, animationSource = '../../../../assets/animations/done.json'}) {
+    const colors = useColors();
+
     return (
         <Modal visible={visible}>
             <View style={styles.container}>

package/screens/WelcomeScreen.tsx

@@ -5,8 +5,7 @@ import {Image, StyleSheet, Text, View} from "react-native";
 import ActivityIndicator from "../components/ActivityIndicator";
 import Background from '../components/Background';
 import Button from '../components/Button';
-
-import colors from '../../../../config/colors';
+import useColors from "@boneframework/native-components/hooks/useColors";
 
 function WelcomeScreen({
     loginOnPress = () => {},
@@ -16,8 +15,10 @@ function WelcomeScreen({
     logoTopMargin = 70,
     logoWidth = 150,
     logoHeight = 105,
-    backgroundSource = null
+    backgroundSource = null,
+    logoSource = null,
 }) {
+    const colors = useColors();
     const styles = StyleSheet.create({
         background: {
             flex: 1,
@@ -46,11 +47,19 @@ function WelcomeScreen({
         },
     });
 
+    if (!backgroundSource) {
+        backgroundSource = require('../assets/background.png');
+    }
+
+    if (!logoSource) {
+        logoSource = require('../assets/logo.png');
+    }
+
     return (
         <Background imageSource={backgroundSource} blurRadius={10} style={styles.background} gradientColors={colors.bgGradient}>
             <ActivityIndicator visible={isLoading} type={'overlay'} />
             <View style={styles.logoContainer}>
-                <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+                <Image style={styles.logo} source={require(logoSource)} />
                 <Text style={styles.tagline}>{ title }</Text>
             </View>
             <View style={styles.buttonContainer}>

package/api/notifications.js

@@ -1,11 +0,0 @@
-import client from './client';
-
-const register = pushToken => client.post('/api/notifications/register-token', {token: pushToken});
-
-const send = (message, data) => {
-    return client.post('/api/notifications/send-notification', {message, data})
-};
-
-export default {
-    register, send
-};

package/api/users.js

@@ -1,35 +0,0 @@
-import client from './client';
-
-const activateAccount = (email, token, clientId, password) => client.post('/api/user/activate', {email: email, token: token, clientId: clientId, password: password});
-const getProfile = token => client.get('/api/user/profile', {}, {
-    headers: { 'Authorization': 'Bearer ' + token},
-});
-const register = userInfo => client.post('/api/user/register', userInfo);
-const resendactivationEmail = email => client.post('/api/user/resend-activation-email', {email: email});
-const updateProfile = profileInfo => client.put('/api/user/profile', profileInfo);
-const validateEmailToken = (email, token) => client.post('/api/user/validate-email-token', {email: email, token: token});
-const uploadUserImage = formData => client.post('/api/user/image', formData, {
-    headers: { 'Content-Type': 'multipart/form-data'},
-});
-const userImage = () => client.get('/api/user/image');
-const userSettings = () => client.get('/api/user/settings');
-const updateUserSettings = settings => client.put('/api/user/settings', settings);
-const uploadUserBackgroundImage = formData => client.post('/api/user/background-image', formData, {
-    headers: { 'Content-Type': 'multipart/form-data' },
-});
-const userBackgroundImage = () => client.get('/api/user/background-image');
-
-export default {
-    activateAccount,
-    getProfile,
-    register,
-    resendactivationEmail,
-    updateProfile,
-    uploadUserImage,
-    uploadUserBackgroundImage,
-    userBackgroundImage,
-    userImage,
-    userSettings,
-    updateUserSettings,
-    validateEmailToken
-};

package/components/ColorProvider.tsx

@@ -1,10 +0,0 @@
-import ColorContext from "@boneframework/native-components/contexts/colors";
-import { defaultTheme, ThemeColors } from "@boneframework/native-components/contexts/theme";
-
-const ColorProvider = ({value, children}: {value?: ThemeColors; children: React.ReactNode}) => {
-  return <ColorContext value={value ?? defaultTheme}>
-            {children}
-        </ColorContext>; 
-};
-
-export default ColorProvider; 

package/components/forms/FormImagePicker.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import {View} from "react-native";
-import {useFormikContext} from "formik";
-
-import ErrorMessage from './ErrorMessage'
-import ImageInputList from '../ImageInputList'
-
-function FormImagePicker({ name }) {
-    const {setFieldValue, touched, values, errors} = useFormikContext();
-    const imageUris = values[name]
-    const handleAdd = (uri) => {
-        setFieldValue(name, [...imageUris, uri])
-    };
-    const handleRemove = (uri) => {
-        setFieldValue(name, imageUris.filter(imageUri => imageUri !== uri))
-    };
-
-    return (
-        <View>
-            <ImageInputList
-                imageUris={imageUris}
-                onAddImage={handleAdd}
-                onRemoveImage={handleRemove}
-            />
-            <ErrorMessage error={errors[name]} visible={touched[name]} />
-        </View>
-    );
-}
-
-export default FormImagePicker;