@brightlayer-ui/react-native-template-authentication-typescript 2.1.0 → 3.0.0-alpha.1

package/template/src/navigation/navigation-drawer.tsx

@@ -1,50 +1,68 @@
-import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components';
-import React, { useState, useCallback } from 'react';
-import * as Colors from '@brightlayer-ui/colors';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup } from '@brightlayer-ui/react-native-components';
+import React, { useState, useCallback, useEffect } from 'react';
 import { RootStackParamList } from './index';
-
-export const navGroupItems: NavItem[] = [
-    {
-        title: 'Home Page',
-        itemID: 'Home',
-        icon: { name: 'home' },
-    },
-    {
-        title: 'Page One',
-        itemID: 'PageOne',
-        icon: { name: 'looks-one' },
-    },
-    {
-        title: 'Page Two',
-        itemID: 'PageTwo',
-        icon: { name: 'looks-two' },
-    },
-];
+import { DrawerActions } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type NavDrawerProps = {
-    navigation: StackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
+    navigation: NativeStackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
 };
 
 export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
     const [selected, setSelected] = useState('Home');
+    const { t } = useTranslation();
+    const navigationState = navigation.getState();
+
+    const Homepage: IconFamily = { family: 'material', name: 'home', direction: 'ltr' };
+    const Dashboard: IconFamily = { family: 'material', name: 'dashboard', direction: 'ltr' };
+    const Notifications: IconFamily = { family: 'material', name: 'notifications', direction: 'ltr' };
+
     const selectItem = useCallback(
-        (id) => {
+        (id: any) => {
             navigation.navigate(id);
             setSelected(id);
         },
         [navigation]
     );
 
+    const navGroupItems = React.useMemo(
+        () => [
+            {
+                title: `${t('TOOLBAR_MENU.HOME_PAGE')}`,
+                itemID: 'Homepage',
+                icon: Homepage,
+            },
+            {
+                title: `${t('DRAWER_MENU.DASHBOARD')}`,
+                itemID: 'Dashboard',
+                icon: Dashboard,
+            },
+            {
+                title: `${t('DRAWER_MENU.LOCATIONS')}`,
+                itemID: 'Locations',
+                icon: Notifications,
+            },
+        ], // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+
+    useEffect(() => {
+        const id = navGroupItems[navigationState.index]?.itemID;
+        if (id) {
+            setSelected(id);
+        }
+    }, [navigationState.index, navGroupItems]);
+
     return (
         <Drawer activeItem={selected} onItemSelect={(id: string): void => selectItem(id)}>
             <DrawerHeader
                 title={'Brightlayer UI'}
                 subtitle={'React Native Project'}
-                fontColor={Colors.white[50]}
                 icon={{ name: 'menu' }}
                 onIconPress={(): void => {
-                    navigation.closeDrawer();
+                    navigation.dispatch(DrawerActions.closeDrawer());
                 }}
             />
             <DrawerBody>

package/template/src/screens/ChangePassword.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChangePasswordScreen } from '@brightlayer-ui/react-native-auth-workflow';
+import { useApp } from '../contexts/AppContextProvider';
+import { LocalStorage } from '../store/local-storage';
+
+export const ChangePassword = (): JSX.Element => {
+    const app = useApp();
+    const logOut = (): void => {
+        LocalStorage.clearAuthCredentials();
+        app.onUserNotAuthenticated();
+        app.setLoginData({ email: '', rememberMe: false });
+    };
+
+    return <ChangePasswordScreen onFinish={(): void => logOut()} showSuccessScreen />;
+};

package/template/src/screens/Dashboard.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    TextStyle,
+    ViewStyle,
+    Animated,
+    Easing,
+    I18nManager,
+} from 'react-native';
+import { EmptyState, Header } from '@brightlayer-ui/react-native-components';
+import RNRestart from 'react-native-restart';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes';
+import { UserMenuExample } from '../components/UserMenuExample';
+import { useThemeContext } from '../contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
+import { DrawerActions } from '@react-navigation/native';
+
+const styles = (
+    theme: ExtendedTheme
+): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    pxbLogoWrapper: ViewStyle;
+    pxbLogo: ViewStyle;
+    title: TextStyle;
+    subtitle: TextStyle;
+    bold: TextStyle;
+    divider: ViewStyle;
+    openURLButtonText: TextStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        pxbLogoWrapper: {
+            justifyContent: 'center',
+            marginTop: 16,
+        },
+        pxbLogo: {
+            alignSelf: 'center',
+            height: 100,
+            width: 100,
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: 16,
+        },
+        subtitle: {
+            textAlign: 'center',
+        },
+        bold: {
+            fontWeight: 'bold',
+        },
+        divider: {
+            marginVertical: 24,
+        },
+        openURLButtonText: {
+            color: theme.colors.primary,
+            padding: 8,
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'Dashboard'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+const Dashboard: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const theme = useExtendedTheme();
+    const { t } = useTranslation();
+    const { theme: themeType, setTheme } = useThemeContext();
+
+    const defaultStyles = styles(theme);
+    const spinValue = new Animated.Value(0);
+    const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' };
+    Animated.loop(
+        Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 2500,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })
+    ).start();
+
+    return (
+        <>
+            <Header
+                title={`${t('DRAWER_MENU.DASHBOARD')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('DRAWER_MENU.DASHBOARD')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Dashboard;

package/template/src/screens/Homepage.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    TextStyle,
+    ViewStyle,
+    Animated,
+    Easing,
+    I18nManager,
+} from 'react-native';
+import { EmptyState, Header } from '@brightlayer-ui/react-native-components';
+import RNRestart from 'react-native-restart';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes';
+import { UserMenuExample } from '../components/UserMenuExample';
+import { useThemeContext } from '../contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
+import { DrawerActions } from '@react-navigation/native';
+
+const styles = (
+    theme: ExtendedTheme
+): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    pxbLogoWrapper: ViewStyle;
+    pxbLogo: ViewStyle;
+    title: TextStyle;
+    subtitle: TextStyle;
+    bold: TextStyle;
+    divider: ViewStyle;
+    openURLButtonText: TextStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        pxbLogoWrapper: {
+            justifyContent: 'center',
+            marginTop: 16,
+        },
+        pxbLogo: {
+            alignSelf: 'center',
+            height: 100,
+            width: 100,
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: 16,
+        },
+        subtitle: {
+            textAlign: 'center',
+        },
+        bold: {
+            fontWeight: 'bold',
+        },
+        divider: {
+            marginVertical: 24,
+        },
+        openURLButtonText: {
+            color: theme.colors.primary,
+            padding: 8,
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'Homepage'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+export const Homepage: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const theme = useExtendedTheme();
+    const { t } = useTranslation();
+    const { theme: themeType, setTheme } = useThemeContext();
+
+    const defaultStyles = styles(theme);
+    const spinValue = new Animated.Value(0);
+    const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' };
+    Animated.loop(
+        Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 2500,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })
+    ).start();
+
+    return (
+        <>
+            <Header
+                title={`${t('TOOLBAR_MENU.HOME_PAGE')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('TOOLBAR_MENU.HOME_PAGE')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};

package/template/src/screens/Locations.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    TextStyle,
+    ViewStyle,
+    Animated,
+    Easing,
+    I18nManager,
+} from 'react-native';
+import { EmptyState, Header } from '@brightlayer-ui/react-native-components';
+import RNRestart from 'react-native-restart';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+import { ExtendedTheme, useExtendedTheme } from '@brightlayer-ui/react-native-themes';
+import { UserMenuExample } from '../components/UserMenuExample';
+import { useThemeContext } from '../contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
+import { IconFamily } from '@brightlayer-ui/react-native-components/core/__types__';
+import { DrawerActions } from '@react-navigation/native';
+
+const styles = (
+    theme: ExtendedTheme
+): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    pxbLogoWrapper: ViewStyle;
+    pxbLogo: ViewStyle;
+    title: TextStyle;
+    subtitle: TextStyle;
+    bold: TextStyle;
+    divider: ViewStyle;
+    openURLButtonText: TextStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        pxbLogoWrapper: {
+            justifyContent: 'center',
+            marginTop: 16,
+        },
+        pxbLogo: {
+            alignSelf: 'center',
+            height: 100,
+            width: 100,
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: 16,
+        },
+        subtitle: {
+            textAlign: 'center',
+        },
+        bold: {
+            fontWeight: 'bold',
+        },
+        divider: {
+            marginVertical: 24,
+        },
+        openURLButtonText: {
+            color: theme.colors.primary,
+            padding: 8,
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'Locations'>;
+};
+
+const toggleRTL = (): void => {
+    if (I18nManager.isRTL) {
+        I18nManager.forceRTL(false);
+    } else {
+        I18nManager.forceRTL(true);
+    }
+    RNRestart.Restart();
+};
+const Locations: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const theme = useExtendedTheme();
+    const { t } = useTranslation();
+    const { theme: themeType, setTheme } = useThemeContext();
+
+    const defaultStyles = styles(theme);
+    const spinValue = new Animated.Value(0);
+    const Event: IconFamily = { family: 'material', name: 'event', direction: 'ltr' };
+    Animated.loop(
+        Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 2500,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })
+    ).start();
+
+    return (
+        <>
+            <Header
+                title={`${t('DRAWER_MENU.LOCATIONS')}`}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.dispatch(DrawerActions.openDrawer());
+                }}
+                actionItems={[
+                    {
+                        icon: { name: 'more' },
+                        onPress: (): void => {},
+                        component: (
+                            <UserMenuExample
+                                onToggleRTL={toggleRTL}
+                                onToggleTheme={(): void => setTheme(themeType === 'light' ? 'dark' : 'light')}
+                            />
+                        ),
+                    },
+                ]}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView
+                    contentContainerStyle={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <EmptyState
+                        icon={Event}
+                        title={`${t('DRAWER_MENU.LOCATIONS')}`}
+                        description={`${t('PAGE_DETAILS.AUTHORISED_MESSAGE')}`}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Locations;

package/template/src/screens/Login.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { DebugComponent } from '../components/DebugComponent';
+import { LoginScreenProps, LoginScreen } from '@brightlayer-ui/react-native-auth-workflow';
+
+export const Login: React.FC<React.PropsWithChildren<LoginScreenProps>> = () => (
+    <LoginScreen
+        projectImage={
+            <Image
+                style={{ width: '100%' }}
+                resizeMode="contain"
+                source={require('../assets/images/eaton_stacked_logo.png')}
+            />
+        }
+        header={<DebugComponent />}
+    />
+);

package/template/src/screens/Registration.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RegistrationWorkflow } from '@brightlayer-ui/react-native-auth-workflow';
+
+export const Registration: React.FC = () => <RegistrationWorkflow />;

package/template/src/screens/RegistrationInvite.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RegistrationWorkflow } from '@brightlayer-ui/react-native-auth-workflow';
+export const RegistrationInvite: React.FC = () => (
+    <RegistrationWorkflow isInviteRegistration initialRegistrationParams={{ code: '123', email: 'aa@aa.aa' }} />
+);

package/template/src/screens/index.ts

@@ -0,0 +1,12 @@
+// App Screens
+export * from './Homepage';
+export * from './Dashboard';
+export * from './Locations';
+
+// Auth Screens
+export * from './Login';
+export * from './ChangePassword';
+
+// Registration Screens
+export * from './Registration';
+export * from './RegistrationInvite';

package/template/src/store/local-storage.ts

@@ -30,21 +30,21 @@ async function readAuthData(): Promise<AuthData> {
     return {
         userId: userData.userId,
         email: userData.user,
-        rememberMeData: rememberMeData,
+        rememberMeData,
     };
 }
 
 function saveAuthCredentials(user: string, userId: string): void {
     const userData = {
-        user: user,
-        userId: userId,
+        user,
+        userId,
     };
     void window.localStorage.setItem(LOCAL_USER_DATA, JSON.stringify(userData));
 }
 function saveRememberMeData(user: string, rememberMe: boolean): void {
     const RememberMeData = {
         user: rememberMe ? user : '',
-        rememberMe: rememberMe,
+        rememberMe,
     };
     void window.localStorage.setItem(REMEMBER_ME_DATA, JSON.stringify(RememberMeData));
 }

package/template/translations/dictionary/chinese.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: '標題',
+            DASHBOARD: '儀表板',
+            LOCATIONS: '地點',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: '主頁',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: '授權留言',
+        },
+        USER_MENU: {
+            LOG_OUT: '登出',
+            CHANGE_PASSWORD: '更改密碼',
+            MY_ACCOUNT: '我的賬戶',
+            TOGGLE_RTL: '切换 RTL',
+            TOGGLE_THEME: '切换主题',
+            LANGUAGE: '语言',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: '机构名称',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/english.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Title',
+            DASHBOARD: 'Dashboard',
+            LOCATIONS: 'Locations',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: 'Home Page',
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Authorised Message',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Log out',
+            CHANGE_PASSWORD: 'Change Password',
+            MY_ACCOUNT: 'My Account',
+            TOGGLE_RTL: 'Toggle RTL',
+            TOGGLE_THEME: 'Toggle Theme',
+            LANGUAGE: 'Language',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'Organisation Name',
+        },
+    },
+};
+export default resources;

package/template/translations/dictionary/french.ts

@@ -0,0 +1,29 @@
+import { AppTranslationsFile } from './types';
+
+const resources: AppTranslationsFile = {
+    translation: {
+        DRAWER_MENU: {
+            TITLE: 'Titre',
+            DASHBOARD: 'Tableau de bord',
+            LOCATIONS: 'Emplacements',
+        },
+        TOOLBAR_MENU: {
+            HOME_PAGE: "Page d'accueil",
+        },
+        PAGE_DETAILS: {
+            AUTHORISED_MESSAGE: 'Authorised Message',
+        },
+        USER_MENU: {
+            LOG_OUT: 'Se déconnecter',
+            CHANGE_PASSWORD: 'changer le mot de passe',
+            MY_ACCOUNT: 'Mon compte',
+            TOGGLE_RTL: 'basculer RTL',
+            TOGGLE_THEME: 'basculer le thème',
+            LANGUAGE: 'Langue',
+        },
+        ORGANAIZATION_DETAILS: {
+            NAME: 'Nom de lorganisme',
+        },
+    },
+};
+export default resources;