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

package/template.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    placeholderName: 'blankTemplate',
+    templateDir: './template',
+};

package/CHANGELOG.md

@@ -1,69 +0,0 @@
-# Changelog
-
-## v2.1.0 (unreleased)
-
-### Changed
-
--   Update to build with React Native 0.70.
-
-## v2.0.0 (December 16, 2021)
-
-### Changed
-
--   Changed package namespace from `@pxblue` to `@brightlayer-ui`.
-
-## Package Migration Notice
-
-Previous versions listed after this indicator refer to our deprecated `@pxblue` packages.
-
----
-
-## v2.0.0 (November 3, 2021)
-
-### Changed
-
-- Updated to use latest APIs from `@pxblue/react-native-components`.
-
-## v1.3.2 (October 1, 2021)
-
-### Fixed
-
-- Added dependency for `@pxblue/react-native-vector-icons`
-
-## v1.3.1 (October 1, 2021)
-
-### Fixed
-
-- Issue with template using the wrong dependency for `@pxblue/react-native-auth-workflow`
-
-## v1.3.0 (September 30, 2021)
-
-### Changed
-- Upgrade PX Blue packages
-- Changed default drawer width to 300.
-
-## v1.2.0 (July 26, 2021)
-
-### Changed
-- Updated version of react-native-modal dependency to 12.0.2
-
-## v1.1.1 (June 30, 2021)
-
-### Changed
--   Dropped version of react-native-webview peerDependency to match requirements of @pxblue/react-native-auth-workflow.
-
-## v1.1.0 (March 31, 2021)
-
-### Changed
--   Updated dependencies to use latest packages.
--   Reorganized folder structure
-
-### Fixed
--   Jest configuration allows default tests to pass.
-
-
-## v1.0.0 (March 1, 2021)
-
-### Added
-
--   Initial authentication template for TypeScript projects

package/dependencies.json

@@ -1,31 +0,0 @@
-{
-    "dependencies": [
-        "@brightlayer-ui/colors@^3.0.1",
-        "@brightlayer-ui/icons-svg@^1.8.0",
-        "@brightlayer-ui/react-native-auth-workflow@5.0.0-alpha.5",
-        "@brightlayer-ui/react-native-components@7.0.0",
-        "@brightlayer-ui/react-native-themes@^6.0.0",
-        "@brightlayer-ui/react-native-vector-icons@2.0.0",
-        "@react-native-async-storage/async-storage@^1.14.1",
-        "@react-native-community/masked-view@^0.1.10",
-        "@react-navigation/drawer@^5.12.3",
-        "@react-navigation/native@^5.9.3",
-        "@react-navigation/stack@^5.14.3",
-        "date-fns@^2.19.0",
-        "i18next@^20.0.0",
-        "react-i18next@^11.8.7",
-        "react-native-gesture-handler@^1.10.3",
-        "react-native-keyboard-aware-scroll-view@^0.9.3",
-        "react-native-modal@^12.0.2",
-        "react-native-pager-view@^5.0.0",
-        "react-native-paper@^4.7.2",
-        "react-native-reanimated@^2.0.0",
-        "react-native-safe-area-context@^3.2.0",
-        "react-native-screens@^3.0.0",
-        "react-native-svg@^12.1.0",
-        "react-native-svg-transformer@^0.14.3",
-        "react-native-vector-icons@^9.2.0",
-        "react-native-webview@^11.23.1"
-    ],
-    "devDependencies": ["@types/react-native-vector-icons", "jest-transform-stub"]
-}

package/images/Logo.svg

@@ -1,11 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 82 82" width='82' height='82'>
-
-						<ellipse cx="41" cy="41" rx="11.2" ry="11.1"/>
-						<path d="M72.7,33.9c2.4,10.9-0.8,22.1-8.7,30C51.4,76.6,30.8,76.6,18.2,64S5.4,30.8,18,18.1c5-5,11.4-8.2,18.4-9.2
-							c0.3,0.9,0.8,1.8,1.5,2.5c2.3,2.3,6.1,2.3,8.4,0c0.9-0.9,1.5-2.1,1.7-3.5l0,0c0.2-1.8-0.4-3.6-1.7-4.9c-2.3-2.3-6.1-2.3-8.4,0
-							c-0.9,0.9-1.5,2.1-1.7,3.3c-7.6,1-14.6,4.6-20,10C2.6,30,2.7,52.2,16.3,65.8s35.9,13.6,49.5-0.1c8.4-8.5,11.9-20.5,9.4-32.2l0,0
-							c-1.4-6.4-4.8-12.1-9.5-16.8l0,0C65.7,16.7,71.2,23.3,72.7,33.9z M37.4,7.5L37.4,7.5L37.4,7.5L37.4,7.5z M45.5,7.6
-							c-0.1,0.8-0.4,1.5-1,2.1c-1.4,1.4-3.6,1.4-4.9,0c-0.6-0.6-1-1.4-1-2.3l0,0c-0.1-1,0.3-2,1-2.7c1.4-1.4,3.6-1.4,4.9,0
-							C45.3,5.5,45.7,6.6,45.5,7.6z"/>
-					</svg>

package/template/__mocks__/svgMock.js

@@ -1,8 +0,0 @@
-/**
- * SVG setup to mock react components transformed into images from SVGs
- * Place this file in your project's root __mocks__ directory.
- * https://github.com/kristerkari/react-native-svg-transformer#usage-with-jest
- */
-
-module.exports = 'SvgMock';
-module.exports.ReactComponent = 'SvgMock';

package/template/jestSetupFile.js

@@ -1,17 +0,0 @@
-import 'react-native-gesture-handler/jestSetup';
-import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
-
-jest.useFakeTimers();
-jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
-jest.mock('react-native-reanimated', () => {
-    const Reanimated = require('react-native-reanimated/mock');
-
-    // The mock for `call` immediately calls the callback which is incorrect
-    // So we override it with a no-op
-    Reanimated.default.call = () => {};
-
-    return Reanimated;
-});
-
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/template/react-native.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    assets: ['./assets/fonts/'],
-};

package/template/src/navigation/DeepLinking.ts

@@ -1,62 +0,0 @@
-import { LinkingOptions } from '@react-navigation/native/lib/typescript/src/types';
-
-/**
- * Map a Deep Link or Universal link to a screen in the application
- * https://reactnavigation.org/docs/deep-linking
- */
-
-export const authLinkMapping: LinkingOptions = {
-    prefixes: ['https://authui.com', 'authui://'],
-    config: {
-        screens: {
-            Login: 'login',
-            PasswordResetInitiation: {
-                initialRouteName: 'Login',
-                path: 'password/reset/initiate',
-            },
-            PasswordResetCompletion: {
-                initialRouteName: 'Login',
-                // email can be passed in as parameter if needed for the api
-                path: 'password/reset/:code',
-            },
-            RegistrationInvite: {
-                initialRouteName: 'Login',
-                // email can be passed in as parameter if needed for the api
-                path: 'invite/:code',
-            },
-            Registration: {
-                initialRouteName: 'Login',
-                // email can be passed in as parameter if needed for the api
-                path: 'register/:code',
-            },
-            SupportContact: {
-                initialRouteName: 'Login',
-                path: 'support',
-            },
-        },
-    },
-};
-
-/**
- * React Native boilerplate to get the initial state from open link, or fail after 150ms
- * @param getInitialState
- * @param setInitialState
- */
-export const resolveInitialState = (getInitialState: () => any, setInitialState: (state: any) => void): void => {
-    Promise.race([
-        getInitialState(),
-        new Promise((resolve) =>
-            // Timeout in 150ms if `getInitialState` doesn't resolve
-            // Workaround for https://github.com/facebook/react-native/issues/25675
-            setTimeout(resolve, 150)
-        ),
-    ])
-        .then((state) => {
-            if (state !== undefined) {
-                setInitialState(state);
-            }
-        })
-        .catch((e) => {
-            console.error(e);
-        });
-};

package/template/src/screens/home.tsx

@@ -1,198 +0,0 @@
-import React, { useCallback } from 'react';
-import {
-    SafeAreaView,
-    ScrollView,
-    StyleSheet,
-    Linking,
-    TextStyle,
-    ViewStyle,
-    View,
-    Animated,
-    Easing,
-} from 'react-native';
-import { Avatar, Button, Divider, useTheme } from 'react-native-paper';
-import { Body1, H4, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
-import { Theme } from 'react-native-paper/lib/typescript/types';
-import Logo from '../../assets/images/Logo.svg';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RootStackParamList } from '../navigation';
-import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
-import { LocalStorage } from '../store/local-storage';
-import * as Colors from '@brightlayer-ui/colors';
-
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
-const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
-const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
-
-const styles = (
-    theme: Theme
-): StyleSheet.NamedStyles<{
-    content: ViewStyle;
-    pxbLogoWrapper: ViewStyle;
-    pxbLogo: ViewStyle;
-    title: TextStyle;
-    subtitle: TextStyle;
-    bold: TextStyle;
-    divider: ViewStyle;
-    openURLButtonText: TextStyle;
-}> =>
-    StyleSheet.create({
-        content: {
-            flex: 1,
-        },
-        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.text,
-            padding: 8,
-        },
-    });
-
-const OpenURLButton = (props: any): JSX.Element => {
-    const { url, title } = props;
-    const theme = useTheme();
-    const defaultStyles = styles(theme);
-
-    const handlePress = useCallback(async () => {
-        await Linking.openURL(url);
-    }, [url]);
-
-    return (
-        <Button
-            onPress={(): Promise<void> => handlePress()}
-            labelStyle={defaultStyles.openURLButtonText}
-            uppercase={false}
-        >
-            {title}
-        </Button>
-    );
-};
-
-type AppProps = {
-    navigation: StackNavigationProp<RootStackParamList, 'Home'>;
-};
-
-const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
-    const theme = useTheme();
-    const defaultStyles = styles(theme);
-    const spinValue = new Animated.Value(0);
-    const securityHelper = useSecurityActions();
-
-    Animated.loop(
-        Animated.timing(spinValue, {
-            toValue: 1,
-            duration: 2500,
-            easing: Easing.linear,
-            useNativeDriver: true,
-        })
-    ).start();
-
-    const spin = spinValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
-
-    const changePassword = (): void => {
-        securityHelper.showChangePassword();
-    };
-
-    const logOut = (): void => {
-        LocalStorage.clearAuthCredentials();
-        securityHelper.onUserNotAuthenticated();
-    };
-
-    const menuItems: InfoListItemProps[] = [
-        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
-        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
-    ];
-
-    return (
-        <>
-            <Header
-                title={'Home Page'}
-                icon={MenuIcon}
-                onIconPress={(): void => {
-                    navigation.openDrawer();
-                }}
-                actionItems={[
-                    {
-                        component: (
-                            <UserMenu
-                                menuItems={menuItems}
-                                avatar={
-                                    <Avatar.Text
-                                        label="UN"
-                                        size={40}
-                                        color={Colors.blue[500]}
-                                        style={{ backgroundColor: Colors.blue[50] }}
-                                    />
-                                }
-                            />
-                        ),
-                    },
-                ]}
-            />
-            <SafeAreaView style={defaultStyles.content}>
-                <ScrollView>
-                    <View style={defaultStyles.pxbLogoWrapper}>
-                        <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
-                            <Logo height={100} width={100} fill={'#007bc1'} />
-                        </Animated.View>
-                    </View>
-                    <H4 style={defaultStyles.title}>
-                        Welcome to Brightlayer <H4 color={'primary'}>UI</H4>.
-                    </H4>
-                    <Body1 style={defaultStyles.subtitle}>
-                        Edit <Body1 style={defaultStyles.bold}>screens/home.tsx</Body1> and save to reload.
-                    </Body1>
-                    <Divider style={defaultStyles.divider} />
-                    <OpenURLButton title={'Brightlayer UI Documentation'} url={'https://brightlayer-ui.github.io/'} />
-                    <OpenURLButton
-                        title={'React Native Getting Started Guide'}
-                        url={'https://brightlayer-ui.github.io/development/frameworks-mobile/react-native'}
-                    />
-                    <OpenURLButton
-                        title={'Design Pattern Descriptions'}
-                        url={'https://brightlayer-ui.github.io/patterns'}
-                    />
-                    <OpenURLButton
-                        title={'React Native Component Library'}
-                        url={'https://brightlayer-ui-components.github.io/react-native/'}
-                    />
-                    <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/brightlayer-ui'} />
-                    <OpenURLButton
-                        title={'Design Pattern Source on GitHub'}
-                        url={'https://github.com/brightlayer-ui/react-native-design-patterns'}
-                    />
-                    <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
-                    <OpenURLButton
-                        title={'Send Feedback or Suggestions'}
-                        url={'https://brightlayer-ui.github.io/community/contactus'}
-                    />
-                </ScrollView>
-            </SafeAreaView>
-        </>
-    );
-};
-
-export default Home;

package/template/src/screens/index.tsx

@@ -1,3 +0,0 @@
-export * from './home';
-export * from './pageOne';
-export * from './pageTwo';

package/template/src/screens/pageOne.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { EmptyState, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RootStackParamList } from '../navigation';
-import { Avatar } from 'react-native-paper';
-import { LocalStorage } from '../store/local-storage';
-import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
-import * as Colors from '@brightlayer-ui/colors';
-
-const Event: IconFamily = { name: 'event', direction: 'rtl' };
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
-const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
-const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
-const styles = (): StyleSheet.NamedStyles<{
-    content: ViewStyle;
-    scrollViewContent: ViewStyle;
-}> =>
-    StyleSheet.create({
-        content: {
-            flex: 1,
-        },
-        scrollViewContent: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    });
-
-type AppProps = {
-    navigation: StackNavigationProp<RootStackParamList, 'PageOne'>;
-};
-
-const PageOne: React.FC<AppProps> = ({ navigation }): JSX.Element => {
-    const defaultStyles = styles();
-    const securityHelper = useSecurityActions();
-
-    const changePassword = (): void => {
-        securityHelper.showChangePassword();
-    };
-
-    const logOut = (): void => {
-        LocalStorage.clearAuthCredentials();
-        securityHelper.onUserNotAuthenticated();
-    };
-
-    const menuItems: InfoListItemProps[] = [
-        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
-        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
-    ];
-
-    return (
-        <>
-            <Header
-                title={'Page One'}
-                icon={MenuIcon}
-                onIconPress={(): void => {
-                    navigation.openDrawer();
-                }}
-                actionItems={[
-                    {
-                        component: (
-                            <UserMenu
-                                menuItems={menuItems}
-                                avatar={
-                                    <Avatar.Text
-                                        label="UN"
-                                        size={40}
-                                        color={Colors.blue[500]}
-                                        style={{ backgroundColor: Colors.blue[50] }}
-                                    />
-                                }
-                            />
-                        ),
-                    },
-                ]}
-            />
-            <SafeAreaView style={defaultStyles.content}>
-                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
-                    <EmptyState
-                        icon={Event}
-                        title={'Coming Soon'}
-                        description={'Replace this page with your own content'}
-                    />
-                </ScrollView>
-            </SafeAreaView>
-        </>
-    );
-};
-
-export default PageOne;

package/template/src/screens/pageTwo.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { EmptyState, Header, IconFamily, InfoListItemProps, UserMenu } from '@brightlayer-ui/react-native-components';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RootStackParamList } from '../navigation';
-import { useSecurityActions } from '@brightlayer-ui/react-native-auth-workflow';
-import { LocalStorage } from '../store/local-storage';
-import { Avatar } from 'react-native-paper';
-import * as Colors from '@brightlayer-ui/colors';
-
-const Event: IconFamily = { name: 'event', direction: 'rtl' };
-const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
-const LockIcon: IconFamily = { name: 'lock', direction: 'ltr' };
-const ExitToAppIcon: IconFamily = { name: 'exit-to-app', direction: 'ltr' };
-
-const styles = (): StyleSheet.NamedStyles<{
-    content: ViewStyle;
-    scrollViewContent: ViewStyle;
-}> =>
-    StyleSheet.create({
-        content: {
-            flex: 1,
-        },
-        scrollViewContent: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    });
-
-type AppProps = {
-    navigation: StackNavigationProp<RootStackParamList, 'PageTwo'>;
-};
-
-const PageTwo: React.FC<AppProps> = ({ navigation }): JSX.Element => {
-    const defaultStyles = styles();
-    const securityHelper = useSecurityActions();
-
-    const changePassword = (): void => {
-        securityHelper.showChangePassword();
-    };
-
-    const logOut = (): void => {
-        LocalStorage.clearAuthCredentials();
-        securityHelper.onUserNotAuthenticated();
-    };
-
-    const menuItems: InfoListItemProps[] = [
-        { title: 'Change Password', icon: LockIcon, onPress: (): void => changePassword() },
-        { title: 'Log Out', icon: ExitToAppIcon, onPress: (): void => logOut() },
-    ];
-
-    return (
-        <>
-            <Header
-                title={'Page Two'}
-                icon={MenuIcon}
-                onIconPress={(): void => {
-                    navigation.openDrawer();
-                }}
-                actionItems={[
-                    {
-                        component: (
-                            <UserMenu
-                                menuItems={menuItems}
-                                avatar={
-                                    <Avatar.Text
-                                        label="UN"
-                                        size={40}
-                                        color={Colors.blue[500]}
-                                        style={{ backgroundColor: Colors.blue[50] }}
-                                    />
-                                }
-                            />
-                        ),
-                    },
-                ]}
-            />
-            <SafeAreaView style={defaultStyles.content}>
-                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
-                    <EmptyState
-                        icon={Event}
-                        title={'Coming Soon'}
-                        description={'Replace this page with your own content'}
-                    />
-                </ScrollView>
-            </SafeAreaView>
-        </>
-    );
-};
-
-export default PageTwo;