react-native-persona 1.2.10 → 1.3.1

package/{persona-tools/config.ts → src/persona-tools/Config.ts}

@@ -1,6 +1,6 @@
-import { cosmiconfig } from "cosmiconfig";
-import chalk from "chalk";
-import { ANDROID_THEME_CONFIG_KEY, IOS_THEME_CONFIG_KEY } from "./Theme";
+import { cosmiconfig } from 'cosmiconfig';
+import chalk from 'chalk';
+import { ANDROID_THEME_CONFIG_KEY, IOS_THEME_CONFIG_KEY } from './Theme';
 
 export interface ConfigObject {
   androidTheme: { [key: string]: string | null | undefined };
@@ -14,7 +14,7 @@ class Configuration {
     if (this.config) return this.config;
 
     try {
-      const explorer = cosmiconfig("persona", { packageProp: "persona" });
+      const explorer = cosmiconfig('persona', { packageProp: 'persona' });
       const result = await explorer.search();
       if (result == null) {
         return null;
@@ -48,7 +48,7 @@ class Configuration {
 Missing configuration.
 
 In order to use this tool, it must be configured using a ${chalk.yellow(
-          "persona"
+          'persona'
         )} object within
 your package.json.
 
@@ -60,12 +60,12 @@ To get started, paste the following configuration into your package.json
   "persona": {
     "androidTheme": {
 ` +
-          androidThemeLines.join(",\n") +
+          androidThemeLines.join(',\n') +
           `
     },
     "iosTheme": {
 ` +
-          iosThemeLines.join(",\n") +
+          iosThemeLines.join(',\n') +
           `
     }
   }

package/src/persona-tools/Theme.ts

@@ -0,0 +1,262 @@
+import Table from 'cli-table';
+import chalk from 'chalk';
+
+import Config from './Config';
+
+const COLOR_REGEX = /^[a-zA-Z0-9]{6}$/;
+
+export enum ANDROID_THEME_CONFIG_KEY {
+  backgroundColor = 'backgroundColor',
+  primaryColor = 'primaryColor',
+  darkPrimaryColor = 'darkPrimaryColor',
+  accentColor = 'accentColor',
+
+  titleTextColor = 'titleTextColor',
+  titleTextFont = 'titleTextFont',
+  titleTextSize = 'titleTextSize',
+
+  bodyTextColor = 'bodyTextColor',
+  bodyTextFont = 'bodyTextFont',
+  bodyTextSize = 'bodyTextSize',
+
+  footnoteTextColor = 'footnoteTextColor',
+  footnoteTextFont = 'footnoteTextFont',
+  footnoteTextSize = 'footnoteTextSize',
+
+  cameraInstructionsTextColor = 'cameraInstructionsTextColor',
+  cameraInstructionsTextFont = 'cameraInstructionsTextFont',
+  cameraInstructionsTextSize = 'cameraInstructionsTextSize',
+
+  cameraHintTextColor = 'cameraHintTextColor',
+  cameraHintTextFont = 'cameraHintTextFont',
+  cameraHintTextSize = 'cameraHintTextSize',
+
+  cameraGuideHintTextColor = 'cameraGuideHintTextColor',
+  cameraGuideHintTextFont = 'cameraGuideHintTextFont',
+  cameraGuideHintTextSize = 'cameraGuideHintTextSize',
+
+  // formLabelTextColor = "formLabelTextColor",
+  // formLabelTextFont = "formLabelTextFont",
+
+  textFieldTextColor = 'textFieldTextColor',
+  textFieldTextFont = 'textFieldTextFont',
+
+  pickerTextColor = 'pickerTextColor',
+  pickerTextFont = 'pickerTextFont',
+
+  buttonBackgroundColor = 'buttonBackgroundColor',
+  buttonDisabledBackgroundColor = 'buttonDisabledBackgroundColor',
+  buttonTouchedBackgroundColor = 'buttonTouchedBackgroundColor',
+  buttonTextColor = 'buttonTextColor',
+  buttonDisabledTextColor = 'buttonDisabledTextColor',
+  // buttonTextAlignment = "buttonTextAlignment",
+  buttonCornerRadius = 'buttonCornerRadius',
+  buttonFont = 'buttonFont',
+  buttonTextSize = 'buttonTextSize',
+  progressColor = 'progressColor',
+  successAsset = 'successAsset',
+  failAsset = 'failAsset',
+  loadingAnimationAsset = 'loadingAnimationAsset',
+  loadingAnimationWidthPercent = 'loadingAnimationWidthPercent',
+  selfieAnimationAsset = 'selfieAnimationAsset',
+  selfieAnimationWidthPercent = 'selfieAnimationWidthPercent',
+}
+
+export enum IOS_THEME_CONFIG_KEY {
+  backgroundColor = 'backgroundColor',
+  primaryColor = 'primaryColor',
+  darkPrimaryColor = 'darkPrimaryColor',
+  accentColor = 'accentColor',
+  progressColor = 'progressColor',
+  overlayBackgroundColor = 'overlayBackgroundColor',
+  titleTextColor = 'titleTextColor',
+  titleTextFont = 'titleTextFont',
+  titleTextSize = 'titleTextSize',
+  titleTextAlignment = 'titleTextAlignment',
+  bodyTextColor = 'bodyTextColor',
+  bodyTextFont = 'bodyTextFont',
+  bodyTextSize = 'bodyTextSize',
+  bodyTextAlignment = 'bodyTextAlignment',
+  footnoteTextColor = 'footnoteTextColor',
+  footnoteTextFont = 'footnoteTextFont',
+  footnoteTextSize = 'footnoteTextSize',
+  formLabelTextColor = 'formLabelTextColor',
+  formLabelTextFont = 'formLabelTextFont',
+  textFieldTextColor = 'textFieldTextColor',
+  textFieldBackgroundColor = 'textFieldBackgroundColor',
+  textFieldBorderColor = 'textFieldBorderColor',
+  pickerTextColor = 'pickerTextColor',
+  pickerTextFont = 'pickerTextFont',
+  cameraInstructionsTextColor = 'cameraInstructionsTextColor',
+  cameraInstructionsTextFont = 'cameraInstructionsTextFont',
+  cameraInstructionsTextSize = 'cameraInstructionsTextFont',
+  cameraHintTextColor = 'cameraHintTextColor',
+  cameraHintTextFont = 'cameraHintTextFont',
+  cameraHintTextSize = 'cameraHintTextSize',
+  cameraGuideHintTextColor = 'cameraGuideHintTextColor',
+  cameraGuideHintTextFont = 'cameraGuideHintTextFont',
+  cameraGuideHintTextSize = 'cameraGuideHintTextSize',
+  buttonBackgroundColor = 'buttonBackgroundColor',
+  buttonDisabledBackgroundColor = 'buttonDisabledBackgroundColor',
+  buttonTouchedBackgroundColor = 'buttonTouchedBackgroundColor',
+  buttonImageTintColor = 'buttonImageTintColor',
+  buttonImageHidden = 'buttonImageHidden',
+  buttonCornerRadius = 'buttonCornerRadius',
+  buttonTextAlignment = 'buttonTextAlignment',
+  buttonDisabledTextColor = 'buttonDisabledTextColor',
+  buttonTextColor = 'buttonTextColor',
+  buttonFont = 'buttonFont',
+  buttonTextSize = 'buttonTextSize',
+  selectedCellBackgroundColor = 'selectedCellBackgroundColor',
+  closeButtonTintColor = 'closeButtonTintColor',
+  cancelButtonBackgroundColor = 'cancelButtonBackgroundColor',
+  cameraButtonBackgroundColor = 'cameraButtonBackgroundColor',
+  cameraGuideCornersColor = 'cameraGuideCornersColor',
+  successAssetName = 'successAssetName',
+  successAssetWidth = 'successAssetWidth',
+  successAssetHeight = 'successAssetHeight',
+  verificationFailAssetName = 'verificationFailAssetName',
+  verificationFailAssetWidth = 'verificationFailAssetWidth',
+  verificationFailAssetHeight = 'verificationFailAssetHeight',
+  failAssetName = 'failAssetName',
+  failAssetWidth = 'failAssetWidth',
+  failAssetHeight = 'failAssetHeight',
+  loadingAnimationAssetName = 'loadingAnimationAssetName',
+  loadingAnimationAssetWidth = 'loadingAnimationAssetWidth',
+  loadingAnimationAssetHeight = 'loadingAnimationAssetHeight',
+  processingAnimationAssetName = 'processingAnimationAssetName',
+  processingAnimationAssetWidth = 'processingAnimationAssetWidth',
+  processingAnimationAssetHeight = 'processingAnimationAssetHeight',
+  selfieAnimationAssetName = 'selfieAnimationAssetName',
+  selfieAnimationAssetWidth = 'selfieAnimationAssetWidth',
+  selfieAnimationAssetHeight = 'selfieAnimationAssetHeight',
+}
+
+export type AndroidThemeObject = {
+  [key in ANDROID_THEME_CONFIG_KEY]: string | null | undefined;
+};
+
+export type IosThemeObject = {
+  [key in IOS_THEME_CONFIG_KEY]: string | null | undefined;
+};
+
+export type ThemeObject = AndroidThemeObject | IosThemeObject;
+
+class Theme {
+  async print(platform: string = 'android') {
+    const config = await Config.get();
+    const themeConfig =
+      platform === 'android' ? config.androidTheme : config.iosTheme;
+    let usesCustomFontAndroid = false;
+    let usesCustomFontIos = false;
+
+    const head =
+      platform === 'android'
+        ? ['Style Item', 'Value', 'Note']
+        : ['Style Item', 'Value', 'Note'];
+
+    const table = new Table({
+      head,
+      // prettier-ignore
+      chars: { 'mid': '', 'left-mid': '', 'mid-mid': '', 'right-mid': '' },
+    });
+
+    console.log('Specified theme values:');
+    const keyEnum =
+      platform === 'android' ? ANDROID_THEME_CONFIG_KEY : IOS_THEME_CONFIG_KEY;
+    for (const key in keyEnum) {
+      let override =
+        themeConfig[key as ANDROID_THEME_CONFIG_KEY | IOS_THEME_CONFIG_KEY];
+      let colorOverride = key.includes('Color') || key.includes('color');
+
+      if (override) {
+        if (colorOverride) {
+          override = normalizeColor(override, key);
+        } else {
+          override = override.toString();
+        }
+      }
+
+      if (key.includes('Font')) {
+        if (platform == 'android') {
+          usesCustomFontAndroid = true;
+        } else {
+          usesCustomFontIos = true;
+        }
+      }
+
+      let row;
+
+      row = [
+        key,
+        override
+          ? valueColor(colorOverride, override)
+          : chalk.yellow('unspecified'),
+        key.includes('Font')
+          ? chalk.cyan('Fonts that are not built-in need to be installed.')
+          : '',
+      ];
+
+      table.push(row);
+    }
+
+    console.log(table.toString());
+
+    if (usesCustomFontAndroid) {
+      console.log(
+        chalk.yellow('  NOTE') +
+          ': A font customization was made. If the font is not built-in to the Android platform (https://github.com/react-native-training/react-native-fonts#android), then the font(s) must first be installed. A guide to install a font can be found here: https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml'
+      );
+    }
+
+    if (usesCustomFontIos) {
+      console.log(
+        chalk.yellow('  NOTE') +
+          ': A font customization was made. If the font is not built-in iOS (https://github.com/react-native-training/react-native-ios), then the font(s) must first be installed. A guide to install a font can be found here: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app'
+      );
+    }
+
+    // Add newline for spacing
+    console.log('');
+  }
+}
+
+// set default print color for non-color overrides
+function valueColor(isColorOverride: boolean, override: string) {
+  return isColorOverride
+    ? chalk.hex(override)(override)
+    : chalk.magentaBright(override);
+}
+
+function normalizeColor(colorHex: string, themeKey: string) {
+  let hex = colorHex;
+  if (colorHex[0] === '#') {
+    hex = colorHex.slice(1);
+  }
+
+  if (!COLOR_REGEX.test(hex)) {
+    if (themeKey) {
+      console.error(
+        `Received a color value of ${chalk.yellow(colorHex)} for ${chalk.red(
+          themeKey
+        )}.\nFormat must follow standard 6 character hexadecimal color code. Eg. ${chalk
+          .bgHex('#FFFFFF')
+          .hex('#7E66B7')('#290087')}`
+      );
+    } else {
+      console.error(
+        `Received a color value of ${chalk.yellow(
+          colorHex
+        )}.\nFormat must follow standard 6 character hexadecimal color code. Eg. ${chalk
+          .bgHex('#FFFFFF')
+          .hex('#7E66B7')('#290087')}`
+      );
+    }
+    console.log('');
+    process.exit(1);
+  }
+
+  return colorHex;
+}
+
+export default new Theme();

package/src/persona-tools/index.ts

@@ -0,0 +1,30 @@
+import Config from './Config';
+import { TOOL_CHOICE, whatWouldYouLikePrompt } from './prompts';
+import AndroidThemeGenerator from './tools/AndroidThemeGenerator';
+import IosThemeInstructions from './tools/IosThemeInstructions';
+
+console.log('');
+console.log('============================================');
+console.log('Persona React Native SDK customization tool.');
+console.log('============================================');
+console.log('');
+
+const run = async () => {
+  // Run this once to print warning messages if it's not configured.
+  await Config.get();
+
+  const { choice } = await whatWouldYouLikePrompt();
+
+  switch (choice) {
+    case TOOL_CHOICE.AndroidTheme:
+      await AndroidThemeGenerator.run();
+      break;
+    case TOOL_CHOICE.iosTheme:
+      await IosThemeInstructions.run();
+      break;
+    default:
+      return;
+  }
+};
+
+run();

package/{persona-tools/lib → src/persona-tools}/prompts.ts

@@ -1,15 +1,15 @@
-import inquirer, { QuestionCollection } from "inquirer";
+import inquirer, { QuestionCollection } from 'inquirer';
 
 export const TOOL_CHOICE = {
-  AndroidTheme: "Update Android theme",
-  iosTheme: "Update iOS theme",
+  AndroidTheme: 'Update Android theme',
+  iosTheme: 'Update iOS theme',
 };
 export async function whatWouldYouLikePrompt() {
   const questions = {
-    name: "choice",
-    type: "list",
+    name: 'choice',
+    type: 'list',
     choices: [TOOL_CHOICE.AndroidTheme, TOOL_CHOICE.iosTheme],
-    message: "What would you like to do?",
+    message: 'What would you like to do?',
   } as QuestionCollection;
 
   return inquirer.prompt(questions);
@@ -17,9 +17,9 @@ export async function whatWouldYouLikePrompt() {
 
 export async function confirmThemeValues() {
   const questions = {
-    name: "isConfirmed",
-    type: "confirm",
-    message: "Do these values look right?",
+    name: 'isConfirmed',
+    type: 'confirm',
+    message: 'Do these values look right?',
   } as QuestionCollection;
 
   return inquirer.prompt(questions);
@@ -27,8 +27,8 @@ export async function confirmThemeValues() {
 
 export async function confirmResourceFiles() {
   const questions = {
-    name: "isConfirmed",
-    type: "confirm",
+    name: 'isConfirmed',
+    type: 'confirm',
     message: `Continue?`,
   } as QuestionCollection;
 

package/{persona-tools → src/persona-tools}/tools/AndroidThemeGenerator.ts

@@ -1,20 +1,20 @@
-import fs from "fs";
-import chalk from "chalk";
-import path from "path";
+import fs from 'fs';
+import chalk from 'chalk';
+import path from 'path';
 
-import Theme, { AndroidThemeObject } from "../Theme";
-import { confirmThemeValues, confirmResourceFiles } from "../lib/prompts";
-import AndroidResourcePrinter from "../lib/AndroidResourcePrinter";
-import Configuration from "../config";
+import Theme, { AndroidThemeObject } from '../Theme';
+import { confirmThemeValues, confirmResourceFiles } from '../prompts';
+import AndroidResourcePrinter from '../AndroidResourcePrinter';
+import Configuration from '../Config';
 
 const ANDROID_STYLES_RESOURCE_PATH =
-  "./android/app/src/main/res/values/styles_persona.xml";
+  './android/app/src/main/res/values/styles_persona.xml';
 const ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH =
-  "./android/app/src/main/res/drawable/rn_persona_button.xml";
+  './android/app/src/main/res/drawable/rn_persona_button.xml';
 const ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH =
-  "./android/app/src/main/res/drawable/rn_persona_button_secondary.xml";
+  './android/app/src/main/res/drawable/rn_persona_button_secondary.xml';
 const ANDROID_BUTTON_COLOR_RESOURCE_PATH =
-  "./android/app/src/main/res/color/rn_persona_button.xml";
+  './android/app/src/main/res/color/rn_persona_button.xml';
 
 class ThemeGenerator {
   async run() {
@@ -24,14 +24,14 @@ class ThemeGenerator {
 
     if (!themeValuesConfirmed) {
       console.log(
-        chalk.yellow("\nPlease adjust the values in package.json.\n")
+        chalk.yellow('\nPlease adjust the values in package.json.\n')
       );
       return;
     }
 
     console.log(
       `\n${chalk.yellow(
-        "Creating an Android Resource files for your project at:"
+        'Creating an Android Resource files for your project at:'
       )}\n
       - ${ANDROID_STYLES_RESOURCE_PATH}
       - ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}
@@ -39,18 +39,14 @@ class ThemeGenerator {
       - ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}\n`
     );
     console.log(
-      "Building your application with this resource file themes your Persona Inquiry flow.\n"
+      'Building your application with this resource file themes your Persona Inquiry flow.\n'
     );
 
     const config = await Configuration.get();
-    const theme = config["androidTheme"] as AndroidThemeObject;
+    const theme = config.androidTheme as AndroidThemeObject;
 
-    const {
-      style,
-      buttonDrawable,
-      buttonSecondaryDrawable,
-      buttonColor
-    } = new AndroidResourcePrinter(theme).process();
+    const { style, buttonDrawable, buttonSecondaryDrawable, buttonColor } =
+      new AndroidResourcePrinter(theme).process();
 
     let { isConfirmed: confirmed } = await confirmResourceFiles();
 
@@ -59,10 +55,10 @@ class ThemeGenerator {
     }
 
     // Add a line after confirmation
-    console.log("");
+    console.log('');
 
     fs.mkdirSync(path.dirname(ANDROID_STYLES_RESOURCE_PATH), {
-      recursive: true
+      recursive: true,
     });
     fs.writeFileSync(
       ANDROID_STYLES_RESOURCE_PATH,
@@ -71,12 +67,12 @@ class ThemeGenerator {
 
     console.log(
       `${chalk.green(
-        "Saved an Android style file at path:"
+        'Saved an Android style file at path:'
       )} ${ANDROID_STYLES_RESOURCE_PATH}.`
     );
 
     fs.mkdirSync(path.dirname(ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH), {
-      recursive: true
+      recursive: true,
     });
     fs.writeFileSync(
       ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH,
@@ -84,25 +80,28 @@ class ThemeGenerator {
     );
     console.log(
       `${chalk.green(
-        "Saved an Android drawable file at path:"
+        'Saved an Android drawable file at path:'
       )} ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}.`
     );
 
-    fs.mkdirSync(path.dirname(ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH), {
-      recursive: true
-    });
+    fs.mkdirSync(
+      path.dirname(ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH),
+      {
+        recursive: true,
+      }
+    );
     fs.writeFileSync(
       ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH,
       buttonSecondaryDrawable.end({ prettyPrint: true })
     );
     console.log(
       `${chalk.green(
-        "Saved an Android drawable file at path:"
+        'Saved an Android drawable file at path:'
       )} ${ANDROID_BUTTON_SECONDARY_DRAWABLE_RESOURCE_PATH}.`
     );
 
     fs.mkdirSync(path.dirname(ANDROID_BUTTON_COLOR_RESOURCE_PATH), {
-      recursive: true
+      recursive: true,
     });
     fs.writeFileSync(
       ANDROID_BUTTON_COLOR_RESOURCE_PATH,
@@ -110,7 +109,7 @@ class ThemeGenerator {
     );
     console.log(
       `${chalk.green(
-        "Saved an Android color file at path:"
+        'Saved an Android color file at path:'
       )} ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}.`
     );
   }

package/{persona-tools → src/persona-tools}/tools/IosThemeInstructions.ts

@@ -1,25 +1,25 @@
-import Theme from "../Theme";
-import { confirmThemeValues } from "../lib/prompts";
-import chalk from "chalk";
+import Theme from '../Theme';
+import { confirmThemeValues } from '../prompts';
+import chalk from 'chalk';
 
 class IosThemeInstructions {
   async run() {
-    await Theme.print("ios");
+    await Theme.print('ios');
 
     const { isConfirmed: themeValuesConfirmed } = await confirmThemeValues();
 
     if (!themeValuesConfirmed) {
       console.log(
-        chalk.yellow("\nPlease adjust the values in package.json.\n")
+        chalk.yellow('\nPlease adjust the values in package.json.\n')
       );
       return;
     }
 
     console.log(
-      `\n${chalk.yellow("To theme the Persona Inquiry flow for iOS:")}`
+      `\n${chalk.yellow('To theme the Persona Inquiry flow for iOS:')}`
     );
     console.log(
-      "Add the theme values to the Persona Inquiry SDK client by using the `.iosTheme` builder function"
+      'Add the theme values to the Persona Inquiry SDK client by using the `.iosTheme` builder function'
     );
 
     console.log(`
@@ -30,7 +30,7 @@ class IosThemeInstructions {
         .onCancelled(handleCancelled)
         .onFailed(handleFailed)
         .onError(handleError)
-    ${chalk.green("+   .iosTheme(persona.iosTheme)")}
+    ${chalk.green('+   .iosTheme(persona.iosTheme)')}
         .build()
         .start();
       ...

package/src/util.ts

@@ -6,13 +6,13 @@ export function processThemeValues(themeObject: Object) {
       continue;
     }
 
-    if (key.includes("Color")) {
+    if (key.includes('Color')) {
       let colorValue = value;
-      if (value[0] === "#") {
+      if (value[0] === '#') {
         colorValue = value.slice(1);
       }
 
-      if(HEX_REGEX.test(colorValue)) {
+      if (HEX_REGEX.test(colorValue)) {
         result[key] = `#${colorValue}`;
       } else {
         continue;

package/jest.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "node",
-  testPathIgnorePatterns: [
-    "<rootDir>/node_modules/",
-    "<rootDir>/example/",
-    ".js"
-  ],
-  moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx", "node"]
-};