@boneframework/native-components 1.0.0 → 1.0.4

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;

package/components/ListItemSwipable.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {StyleSheet, TouchableHighlight, View} from "react-native";
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+
+import Image from '../components/Image'
+import Text from '../components/Text'
+import colors from '../config/colors'
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import useStyle from "../hooks/useStyle";
+
+function ListItemSwipable({title, subtitle, image, IconComponent, onPress, renderRightActions, displayCheverons}) {
+    const style = useStyle();
+
+    if (!title && subtitle) {
+        title = subtitle;
+        subtitle = null;
+    }
+
+    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
+        }
+    });
+
+    return (
+        <Swipeable renderRightActions={renderRightActions}>
+            <TouchableHighlight underlayColor={colors.light} onPress={onPress} >
+                <View style={styles.container}>
+                    { IconComponent }
+                    { image && <Image style={styles.image} source={image}></Image> }
+                    <View style={styles.detailsContainer}>
+                        <Text style={styles.title} numberOfLines={1}>
+                            { title }
+                        </Text>
+                        {subtitle && <Text numberOfLines={2} style={styles.subtitle}>{subtitle}</Text> }
+                    </View>
+                    { displayCheverons && <MaterialCommunityIcons name={'chevron-right'} size={25} color={colors.medium}/> }
+                </View>
+            </TouchableHighlight>
+        </Swipeable>
+    );
+}
+
+export default ListItemSwipable;

package/components/OfflineNotice.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import {useNetInfo} from "@react-native-community/netinfo";
+
+import colors from "../config/colors";
+import Text from "./Text";
+
+function OfflineNotice(props) {
+    const netInfo = useNetInfo();
+
+    if (netInfo.type !== 'unkown' && netInfo.isInternetReachable === false) {
+        return(
+            <View style={styles.container}>
+                <Text style={styles.text}>No Internet connection</Text>
+            </View>
+        );
+    }
+
+    return null;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: colors.primary,
+        color: colors.white,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 10,
+        paddingTop: 20
+    },
+    text: {
+        color: colors.white,
+    }
+})
+
+export default OfflineNotice;

package/components/Picker.tsx

@@ -0,0 +1,87 @@
+import React, {useState} from 'react';
+import {FlatList, Modal, StyleSheet, TextInput, TouchableWithoutFeedback, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import Button from './Button'
+import Text from './Text'
+import PickerItem from './PickerItem'
+import PickerItemComponent from './PickerItemComponent'
+import Screen from './Screen'
+import useStyle from "../hooks/useStyle";
+
+function Picker({
+   icon,
+   items,
+   onSelectItem,
+   PickerItemComponent = PickerItem,
+   placeholder,
+   selectedItem,
+   width = '100%',
+   numColumns = 1
+}) {
+    const [modalVisible, setModalVisible] = useState(false);
+    const defaultStyles = useStyle();
+
+    const style = StyleSheet.create({
+        container: {
+            backgroundColor: defaultStyles.formInput.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            width: '100%',
+            padding: 15,
+            marginVertical: 10,
+        },
+        icon: {
+            marginRight: 10
+        },
+        modal: {
+            flex: 1,
+            padding: 15,
+            backgroundColor: defaultStyles.backgroundColor,
+            color: defaultStyles.text.color
+        },
+        placeholder: {
+            flex: 1,
+            color: defaultStyles.colors.medium
+        },
+        text: {
+            flex: 1
+        }
+    })
+
+    return (
+        <View>
+            <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
+                <View style={[style.container, {width: width}]}>
+                    {icon && <MaterialCommunityIcons name={icon} size={25} color={defaultStyles.colors.medium} style={style.icon} />}
+                    <Text style={selectedItem ? [defaultStyles.text, style.text] : [defaultStyles.text, style.placeholder] } >
+                        { selectedItem ? selectedItem.label : placeholder }
+                    </Text>
+                    <MaterialCommunityIcons name="chevron-down" size={25} color={defaultStyles.colors.medium} />
+                </View>
+            </TouchableWithoutFeedback>
+
+            <Modal visible={modalVisible}  animationType="slide">
+                <Screen style={style.modal}>
+                    <Button title="Close" onPress={() => setModalVisible(false)}/>
+                    <FlatList
+                        data={items}
+                        keyExtractor={item => item.value}
+                        numColumns={numColumns}
+                        renderItem={({item}) =>
+                            <PickerItemComponent
+                                item={item}
+                                label={item.label}
+                                onPress={() => {
+                                    setModalVisible(false);
+                                    onSelectItem(item);
+                                }}
+                            />
+                    } />
+                </Screen>
+            </Modal>
+        </View>
+    );
+}
+
+export default Picker;

package/components/PickerItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View} from "react-native";
+
+import Text from './Text';
+
+function PickerItem({ item, onPress }) {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <Text style={styles.text}>{item.label}</Text>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    text: {
+        padding: 20
+    }
+});
+
+export default PickerItem;

package/components/PickerItemComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+
+function PickerItemComponent({item, onPress}) {
+    return <View style={styles.container}></View>;
+}
+
+const styles = StyleSheet.create({
+    container: {
+
+    }
+})
+
+export default PickerItemComponent;

package/components/RoundIconButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import colors from '../config/colors'
+
+function RoundIconButton({ icon, onPress = () => {}, style }) {
+    const combinedStyle =  { ...styles.container, ...style };
+
+    return (
+        <TouchableOpacity onPress={ onPress } >
+            <View style={combinedStyle}>
+                <MaterialCommunityIcons style={styles.icon} name={icon} size={40}/>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.primary,
+        borderColor: colors.white,
+        borderWidth: 5,
+        borderRadius: 40,
+        height: 80,
+        width: 80,
+        bottom: 25
+    },
+    icon: {
+        color: colors.white
+    }
+})
+
+export default RoundIconButton;

package/components/Screen.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {SafeAreaView, StyleSheet, View} from "react-native";
+import Constants from "expo-constants";
+
+function Screen({children, style}) {
+    return (
+        <SafeAreaView style={[style, styles.screen]}>
+            <View style={[style, styles.view]}>
+                {children}
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        paddingTop: Constants.statusBarHeight,
+        flex: 1,
+        height: '100%'
+    },
+    view: {
+        flex: 1
+    }
+})
+
+export default Screen;

package/components/SessionProvider.tsx

@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+
+import AuthContext from "../contexts/auth";
+import useAuth from "../hooks/useAuth";
+
+function SessionProvider(props: object) {
+    const [user, setUser] = useState(null);
+    const auth = useAuth();
+    setUser(auth.user);
+
+    return (
+        <AuthContext.Provider
+            value={{
+                signIn: async (authToken: string) => {
+                    auth.login(authToken);
+                    setUser(auth.user);
+                },
+                signOut: () => {
+                    auth.logout();
+                    setUser(null);
+                },
+                user,
+            }}>
+            {props.children}
+        </AuthContext.Provider>
+    )
+}
+
+
+
+export default SessionProvider;

package/components/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Text as NativeText, StyleSheet} from "react-native";
+
+import defaultStyles from '../config/styles'
+import colors from "../config/colors";
+
+function Text({children, style, ...otherProps}) {
+    return (
+        <NativeText style={[defaultStyles.text, style]} {...otherProps} >
+            {children}
+        </NativeText>
+    )
+}
+
+export default Text;

package/components/TextInput.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {StyleSheet, TextInput as NativeTextInput, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import useStyle from "../hooks/useStyle";
+
+function TextInput({ icon, width = '100%', ...otherProps }) {
+    const defaultStyles = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: defaultStyles.formInput.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            padding: 15,
+            marginVertical: 10,
+        },
+        input: {
+            flex: 1,
+            color: defaultStyles.formInput.color,
+        },
+        icon: {
+            marginRight: 10
+        },
+    })
+
+    return (
+        <View style={ [styles.container, {width}] }>
+            {icon && <MaterialCommunityIcons name={icon} size={25} color={defaultStyles.colors.medium} style={styles.icon} />}
+            <NativeTextInput
+                placeholderTextColor={defaultStyles.colors.medium}
+                style={[styles.input, defaultStyles.text]}
+                {...otherProps}
+            />
+        </View>
+    );
+}
+
+export default TextInput;

package/contexts/auth.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const AuthContext = React.createContext();
+
+export default AuthContext;

package/hooks/useApi.js

@@ -0,0 +1,20 @@
+import {useState} from "react";
+
+export default useApi = (apiFunc) => {
+    const [error, setError] = useState(false);
+    const [headers, setHeaders] = useState([]);
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const request = async (...args) => {
+        setLoading(true);
+        const response = await apiFunc(...args);
+        setLoading(false);
+        setError(!response.ok);
+        setHeaders(response.headers);
+        setData(response.data);
+        return response;
+    }
+
+    return {data, error, headers, loading, request}
+}

package/hooks/useAuth.js

@@ -0,0 +1,37 @@
+import {useContext} from "react";
+
+import AuthContext from "../contexts/auth";
+import authStorage from "../utilities/authStorage";
+import useApi from "./useApi";
+import usersApi from "../api/users";
+
+export default useAuth = () => {
+    const profileApi = useApi(usersApi.getProfile);
+    const {user, setUser} = useContext(AuthContext);
+
+    const login = async authToken => {
+        // possibly don't wait here?
+        await authStorage.storeAuthToken(authToken).then(async () => {
+            const user = await profileApi.request(authToken);
+            authStorage.storeUser(user.data);
+            user.data.authToken = authToken;
+            setUser(user.data);
+        });
+    }
+
+    const updateUser = async user => {
+        const authToken = user.authToken;
+        await delete user.authToken;
+        authStorage.storeUser(user);
+        user.authToken = authToken;
+        setUser({...user});
+    }
+
+    const logout = () => {
+        setUser(null);
+        authStorage.removeAuthToken();
+        authStorage.removeUser();
+    }
+
+    return {login, logout, updateUser, user};
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "Expo Components for Bone Framework",
-  "main": "index.js",
+  "main": "src/Bone.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -25,5 +25,16 @@
     "url": "https://github.com/boneframework/native-components/issues"
   },
   "homepage": "https://github.com/boneframework/native-components#readme",
-  "publishConfig": {"access": "public"}
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "apisauce": "^3.0.1",
+    "expo-auth-session": "^5.5.2",
+    "expo-secure-store": "^13.0.2",
+    "jwt-decode": "^4.0.0",
+    "react": "18.2.0",
+    "yup": "^1.4.0"
+  }
 }

package/screens/RegisterScreen.tsx

@@ -0,0 +1,87 @@
+import { router } from 'expo-router';
+import React, {useState} from 'react';
+import {Image, ImageBackground, Keyboard, StyleSheet, TouchableOpacity, View} from "react-native";
+import * as Yup from 'yup'
+
+import ActivityIndicator from "@/components/ActivityIndicator";
+import useApi from "@/hooks/useApi";
+import usersApi from '@/api/users';
+import {ErrorMessage, FormField, Form, SubmitButton} from '../components/forms'
+import Icon from "@/components/Icon";
+
+const validationSchema = Yup.object().shape({
+    email: Yup.string().required().email().label('Email'),
+});
+
+function RegisterScreen({postRegisterUrl}) {
+    const registerApi = useApi(usersApi.register);
+    const [error, setError] = useState();
+    const onClose = () => router.back();
+
+    const handleSubmit = async userInfo => {
+        Keyboard.dismiss();
+        const result = await registerApi.request(userInfo);
+
+        if (!result.ok) {
+            if (result.data) {
+                setError(result.data.error);
+            } else {
+                setError('An unexpected error occured');
+                console.error(result);
+            }
+
+            return;
+        }
+
+        router.navigate(postRegisterUrl);
+    };
+
+    return (
+        <>
+        <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
+        <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')} />
+
+                <Form
+                    initialValues={{ email: ''}}
+                    onSubmit={handleSubmit}
+                    validationSchema={validationSchema}
+                >
+                    <ErrorMessage error={error} visible={error} />
+                    <FormField
+                        name="email"
+                        icon="email"
+                        placeholder="Email"
+                        autoCapitalize="none"
+                        keyboardType="email-address"
+                        textContentType="emailAddress"
+                    />
+                    <SubmitButton color="primary" title="Register" />
+                </Form>
+            </View>
+        </ImageBackground>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 20,
+    },
+    logo: {
+        width: 150,
+        height: 105,
+        alignSelf: "center",
+        marginTop: 50,
+        marginBottom: 20,
+    },
+    background: {
+        height: '100%'
+    }
+})
+
+export default RegisterScreen;