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

package/README.md

@@ -2,14 +2,13 @@
 
 ![npm (scoped)](https://img.shields.io/npm/v/@brightlayer-ui/react-native-template-authentication-typescript?color=%23007bc1&label=%40brightlayer-ui%2Freact-native-template-authentication-typescript)
 
-This is an official Brightlayer UI template used internally by the [Brightlayer UI CLI](https://www.npmjs.com/package/@brightlayer-ui/cli).
 
 This template installs and configures the Brightlayer UI [react-native-auth-workflow](https://www.npmjs.com/package/@brightlayer-ui/react-native-auth-workflow) package to automatically wrap your main application with functions and screens for Login, Registration, Change Password, etc. This uses the same configurations as the sample project for that package — you will need to replace the API integrations with implementations specific to your API. This template also includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the Brightlayer UI [React Native Component Library](https://www.npmjs.com/package/@brightlayer-ui/react-native-components).
 
 ## Usage
-This template can be used with the Brightlayer UI CLI:
+To create a new project using the Authenication Template simply run :
 ```sh
-npx -p @brightlayer-ui/cli blui new react-native --name=myapp --cli=rnc --language=ts --template=authentication
+npx react-native init MyApp --template @brightlayer-ui/react-native-template-authentication-typescript
 ```
 
 ## Project Structure
@@ -18,19 +17,25 @@ Projects created using this template will start out with the following file stru
 ```
 |── /ios                              // ios project folder
 |── /android                          // android project folder
-|── /actions                          
-|   |── AuthUIActions.tsx             // handles the implementation of the authentication related actions (such as login and forgot password)
-|   └── RegistrationUIActions.tsx     // handles the implementation of the registration related actions (such as loading the EULA and registration by invitation)
-|── /assets                           // fonts and images used by the application
 |── App.tsx                           // app entry point
-|── /constants                          
-|   |── index.ts                      // application constants
-|   └── sampleEula.ts                 // sample Eula
-|── /pages                            // sample application pages
-|── /router                             
-|   |── index.tsx                     // sets up routing
-|   |── DeepLinking.ts                // sets up deep linking
-|   └── navigation-drawer.tsx         // sets up Drawer
-└── /store                             
-    └── local-storage.ts              // mock implementation for storing/retrieving user authentication session data 
+|── src
+|   |── actions                          
+|   |   |── AuthUIActions.tsx             // handles the implementation of the authentication related actions (such as login and forgot password)
+|   |   └── RegistrationUIActions.tsx     // handles the implementation of the registration related actions (such as loading the EULA and registration by invitation)
+|   |── assets                           // fonts and images used by the application
+|   |── constants                          
+|   |   |── index.ts                      // application constants
+|   |   └── sampleEula.ts                 // sample Eula
+|   |── contexts
+|   |   |── AppContextProvider.tsx          // handles context for Auth
+|   |   └── ThemeContext.ts                 // handles context for theme
+|   |── screens                            // sample application pages
+|   |── navigation                             
+|   |   |── index.tsx                     // sets up routing
+|   |   └── navigation-drawer.tsx         // sets up Drawer
+|   └── store                             
+|       └── local-storage.ts              // mock implementation for storing/retrieving user authentication session data
+└──/translations
+    |── /dictionary                     // translation dictionary for i18next       
+    |── i18n.ts                         // configuration for i18next
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-native-template-authentication-typescript",
-    "version": "2.1.0",
+    "version": "3.0.0-alpha.1",
     "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
     "keywords": [
         "react native",
@@ -11,7 +11,7 @@
     "description": "A template with pre-configured login workflow and routing for React Native projects created with the Brightlayer UI CLI.",
     "repository": {
         "type": "git",
-        "url": "https://github.com/brightlayer-ui/react-native-cli-templates.git"
+        "url": "https://github.com/etn-ccis/blui-react-native-cli-templates.git"
     },
     "scripts": {
         "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
@@ -22,6 +22,6 @@
         "node": ">=10"
     },
     "bugs": {
-        "url": "https://github.com/brightlayer-ui/react-native-cli-templates/issues"
+        "url": "https://github.com/etn-ccis/blui-react-native-cli-templates/issues"
     }
 }

package/template/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/template/.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    extends: ['@brightlayer-ui/eslint-config/tsx'],
+    parserOptions: {
+        project: './tsconfig.json',
+    },
+    plugins: ['react-hooks'],
+    rules: {
+        'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+        'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+        'react/display-name': 'off',
+        '@typescript-eslint/naming-convention': [
+            'error',
+            {
+                selector: 'default',
+                format: ['camelCase', 'PascalCase'],
+            },
+            {
+                selector: 'variable',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            },
+            {
+                selector: 'property',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            },
+            {
+                selector: 'property',
+                format: null,
+                modifiers: ['requiresQuotes'],
+            },
+            {
+                selector: 'enumMember',
+                format: ['UPPER_CASE'],
+            },
+            {
+                selector: 'parameter',
+                format: ['camelCase'],
+                leadingUnderscore: 'allow',
+            },
+            {
+                selector: 'memberLike',
+                modifiers: ['private'],
+                format: ['camelCase'],
+                leadingUnderscore: 'require',
+            },
+            {
+                selector: 'typeLike',
+                format: ['PascalCase'],
+            },
+            {
+                selector: 'import',
+                format: ['camelCase', 'PascalCase'],
+            },
+        ],
+    },
+};

package/template/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    arrowParens: 'avoid',
+    bracketSameLine: true,
+    bracketSpacing: false,
+    singleQuote: true,
+    trailingComma: 'all',
+};

package/template/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/template/App.tsx

@@ -5,60 +5,98 @@
 
  This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
  **/
-import React from 'react';
+import 'react-native-gesture-handler';
+import React, { useEffect, useState } from 'react';
 import { Provider as ThemeProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
 import { MainRouter } from './src/navigation';
-import { ProjectAuthUIActions } from './src/actions/AuthUIActions';
-import { ProjectRegistrationUIActions } from './src/actions/RegistrationUIActions';
-import {
-    SecurityContextProvider,
-    AuthNavigationContainer,
-    AuthUIContextProvider,
-    useSecurityActions,
-} from '@brightlayer-ui/react-native-auth-workflow';
-import { useLinking } from '@react-navigation/native';
-import { authLinkMapping, resolveInitialState } from './src/navigation/DeepLinking';
-
-export const AuthUIConfiguration: React.FC = (props) => {
-    const securityContextActions = useSecurityActions();
-    return (
-        <AuthUIContextProvider
-            authActions={ProjectAuthUIActions(securityContextActions)}
-            registrationActions={ProjectRegistrationUIActions}
-            showSelfRegistration={true}
-            allowDebugMode={true}
-            contactEmail={'something@email.com'}
-            contactPhone={'1-800-123-4567'}
-            contactPhoneLink={'1-800-123-4567'}
-            // projectImage={require('./src/assets/images/some_image.png')}
-        >
-            {props.children}
-        </AuthUIContextProvider>
-    );
-};
+import { ThemeContext, ThemeType } from './src/contexts/ThemeContext';
+import { blue, blueDark } from '@brightlayer-ui/react-native-themes';
+import i18nAppInstance from './translations/i18n';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import { AppContext, AppContextType } from './src/contexts/AppContextProvider';
+import { LocalStorage } from './src/store/local-storage';
+import { Spinner } from '@brightlayer-ui/react-native-auth-workflow';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { NativeModules, Platform } from 'react-native';
 
 export const App = (): JSX.Element => {
-    const ref = React.useRef(null);
-    const { getInitialState } = useLinking(ref, authLinkMapping);
-    const [initialState, setInitialState] = React.useState();
-    React.useEffect(() => {
-        resolveInitialState(getInitialState, setInitialState);
-    }, [getInitialState]);
+    const [theme, setTheme] = useState<ThemeType>('light');
+    const [language, setLanguage] = useState('en');
+    const [isAuthenticated, setAuthenticated] = useState<AppContextType['isAuthenticated']>(false);
+    const [loginData, setLoginData] = useState<AppContextType['loginData']>({
+        email: '',
+        rememberMe: false,
+    });
+    const [isLoading, setIsLoading] = useState(true);
+    const { i18n } = useTranslation();
+    const getLanguage = async (): Promise<void> => {
+        try {
+            const storedLanguage = await AsyncStorage.getItem('userLanguage');
+            if (storedLanguage !== null) {
+                setLanguage(storedLanguage);
+                void i18n.changeLanguage(storedLanguage);
+            } else {
+                const locale =
+                    Platform.OS === 'ios'
+                        ? NativeModules.SettingsManager.settings.AppleLocale
+                        : NativeModules.I18nManager.localeIdentifier;
+                setLanguage(locale?.substring(0, 2) || 'en');
+            }
+        } catch (error) {
+            console.error('Error getting language from Async Storage:', error);
+        }
+    };
+    // handle initialization of auth data on first load
+    useEffect(() => {
+        const initialize = async (): Promise<void> => {
+            try {
+                const userData = await LocalStorage.readAuthData();
+                setLoginData({ email: userData.rememberMeData.user, rememberMe: userData.rememberMeData.rememberMe });
+                setAuthenticated(Boolean(userData.userId));
+                await getLanguage();
+            } catch (e) {
+                // handle any error state, rejected promises, etc..
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        // eslint-disable-next-line
+        initialize();
+        // eslint-disable-next-line
+    }, []);
 
-    return (
-        <ThemeProvider theme={BLUIThemes.blue}>
-            <SafeAreaProvider>
-                <SecurityContextProvider>
-                    <AuthUIConfiguration>
-                        <AuthNavigationContainer initialState={initialState} ref={ref}>
+    return isLoading ? (
+        <Spinner visible={isLoading} />
+    ) : (
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            <I18nextProvider i18n={i18nAppInstance}>
+                <AppContext.Provider
+                    value={{
+                        isAuthenticated,
+                        onUserAuthenticated: (userData): void => {
+                            setAuthenticated(true);
+                            setLoginData(userData);
+                        },
+                        // eslint-disable-next-line
+                        onUserNotAuthenticated: (userData): void => {
+                            setAuthenticated(false);
+                        },
+                        loginData,
+                        setLoginData,
+                        language,
+                        setLanguage,
+                        setAuthenticated,
+                    }}
+                >
+                    <ThemeProvider theme={theme === 'light' ? blue : blueDark}>
+                        <SafeAreaProvider>
                             <MainRouter />
-                        </AuthNavigationContainer>
-                    </AuthUIConfiguration>
-                </SecurityContextProvider>
-            </SafeAreaProvider>
-        </ThemeProvider>
+                        </SafeAreaProvider>
+                    </ThemeProvider>
+                </AppContext.Provider>
+            </I18nextProvider>
+        </ThemeContext.Provider>
     );
 };
 

package/template/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

package/template/Gemfile.lock

@@ -0,0 +1,107 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (6.1.7.7)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.14.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.3)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.5)
+      concurrent-ruby (~> 1.0)
+    json (2.7.2)
+    minitest (5.22.3)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
+    ruby-macho (2.5.1)
+    strscan (3.1.0)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.24.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.6.13)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, < 7.1.0)
+  cocoapods (>= 1.13, < 1.15)
+
+RUBY VERSION
+   ruby 2.6.10p210
+
+BUNDLED WITH
+   1.17.2

package/template/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

package/template/__tests__/App.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shipped with jest.
+import { it } from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+    renderer.create(<App />);
+});

package/template/_gitignore

@@ -0,0 +1,74 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions