@boneframework/native-components 1.0.2 → 1.0.5

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/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/components/forms/ErrorMessage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {StyleSheet} from "react-native";
+
+import Text from '../Text'
+
+function ErrorMessage({error, visible}) {
+    if (!visible || !error) return null;
+
+    return (
+        <Text style={styles.error}>{error}</Text>
+    );
+}
+
+const styles = StyleSheet.create({
+    error: {
+        color: 'tomato'
+    }
+});
+
+export default ErrorMessage;

package/components/forms/Form.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Formik} from "formik";
+import {View} from "react-native";
+
+function Form({initialValues, onSubmit, validationSchema, children}) {
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+            validationSchema={validationSchema}
+        >
+            {() => (
+                <View>
+                    {children}
+                </View>
+            )}
+        </Formik>
+    );
+}
+
+export default Form;

package/components/forms/FormDateTimePicker.js

@@ -0,0 +1,31 @@
+import RNDateTimePicker from '@react-native-community/datetimepicker';
+import React from 'react';
+import {Field, useFormikContext} from "formik";
+import DateTimePicker from "../DateTimePicker";
+import {StyleSheet} from "react-native";
+import useStyle from "../../hooks/useStyle";
+
+function FormDateTimePicker ({...props}) {
+
+    const { values, setFieldValue } = useFormikContext();
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        picker: {
+            flex: 1,
+            width: '50%',
+            backgroundColor: style.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            padding: 15,
+            marginVertical: 10,
+            marginHorizontal: 10,
+        }
+    });
+
+    return <Field style={styles.picker} component={DateTimePicker}  value={values[props.name]} {...props}  onChange={(event, value) => {
+        setFieldValue(props.name, new Date(value));
+    }} />
+}
+
+export default FormDateTimePicker;

package/components/forms/FormField.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {useFormikContext} from "formik";
+import {StyleSheet, View} from "react-native";
+
+import TextInput from "../TextInput";
+import ErrorMessage from "./ErrorMessage";
+import useStyle from "../../hooks/useStyle";
+
+function FormField({name, width,  ...otherProps}) {
+    const {setFieldTouched, handleChange, errors, values, touched} = useFormikContext();
+
+    return (
+        <View>
+            <TextInput
+                onChangeText={handleChange(name)}
+                onBlur={() => setFieldTouched(name)}
+                value={values[name]}
+                width={width}
+                {...otherProps}
+            />
+            <ErrorMessage error={errors[name]} visible={touched[name]}/>
+        </View>
+    );
+}
+
+export default FormField;

package/components/forms/FormImagePicker.js

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

package/components/forms/FormPicker.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from "react-native";
+
+import Picker from '../Picker'
+import PickerItemComponent from '../PickerItemComponent'
+import ErrorMessage from "./ErrorMessage";
+import {useFormikContext} from "formik";
+
+function FormPicker({items, name, PickerItemComponent, placeholder, width, numColumns, ...otherProps}) {
+    const {setFieldValue, touched, values, errors} = useFormikContext();
+
+    return (
+        <View>
+            <Picker
+                items={items}
+                numColumns={numColumns}
+                onSelectItem={(value) => {
+                    setFieldValue(name, value);
+                }}
+                PickerItemComponent={PickerItemComponent}
+                placeholder={placeholder}
+                selectedItem={values[name]} {...otherProps}
+                width={width}
+            />
+            <ErrorMessage error={errors[name]} visible={touched[name]} />
+        </View>
+    );
+}
+
+export default FormPicker;

package/components/forms/SubmitButton.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Button from "../Button";
+import {useFormikContext} from "formik";
+
+function SubmitButton({title, ...otherProps}) {
+    const {handleSubmit} = useFormikContext();
+
+    return (
+        <Button color="primary" title={title} onPress={handleSubmit} {...otherProps} />
+    );
+}
+
+export default SubmitButton;

package/components/forms/index.js

@@ -0,0 +1,7 @@
+export { default as Form} from './Form';
+export { default as FormDateTimePicker} from './FormDateTimePicker';
+export { default as FormField} from './FormField';
+export { default as FormImagePicker} from './FormImagePicker';
+export { default as FormPicker} from './FormPicker';
+export { default as ErrorMessage} from './ErrorMessage';
+export { default as SubmitButton} from './SubmitButton';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -31,8 +31,10 @@
   "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"
+    "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;