react-native-persona 2.9.2 → 2.9.4

package/src/persona-tool/Config.ts

@@ -1,86 +0,0 @@
-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 };
-  iosTheme: { [key: string]: string | null | undefined };
-}
-
-class Configuration {
-  config?: ConfigObject | null;
-
-  async loadConfig(): Promise<ConfigObject | null | undefined> {
-    if (this.config) return this.config;
-
-    try {
-      const explorer = cosmiconfig('persona', { packageProp: 'persona' });
-      const result = await explorer.search();
-      if (result == null) {
-        return null;
-      }
-
-      this.config = result.config;
-
-      return this.config;
-    } catch (e) {
-      console.error(e);
-      process.exit(1);
-    }
-  }
-
-  async get(): Promise<ConfigObject> {
-    let config = await this.loadConfig();
-
-    const androidThemeLines = [];
-    for (const key in ANDROID_THEME_CONFIG_KEY) {
-      androidThemeLines.push(`      "${key}": null`);
-    }
-
-    const iosThemeLines = [];
-    for (const key in IOS_THEME_CONFIG_KEY) {
-      iosThemeLines.push(`      "${key}": null`);
-    }
-
-    if (config == null) {
-      console.log(
-        `
-Missing configuration.
-
-In order to use this tool, it must be configured using a ${chalk.yellow(
-          'persona'
-        )} object within
-your package.json.
-
-To get started, paste the following configuration into your package.json
-
-{
-  ...
-
-  "persona": {
-    "androidTheme": {
-` +
-          androidThemeLines.join(',\n') +
-          `
-    },
-    "iosTheme": {
-` +
-          iosThemeLines.join(',\n') +
-          `
-    }
-  }
-
-  ...
-}
-
-and re-run this tool :).
-`
-      );
-      process.exit(1);
-    }
-
-    return config as ConfigObject;
-  }
-}
-
-export default new Configuration();

package/src/persona-tool/Theme.ts

@@ -1,243 +0,0 @@
-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',
-
-  bodyTextColor = 'bodyTextColor',
-  bodyTextFont = 'bodyTextFont',
-
-  footnoteTextColor = 'footnoteTextColor',
-  footnoteTextFont = 'footnoteTextFont',
-
-  // 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',
-  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',
-  errorColor = 'errorColor',
-  errorTextFont = 'errorTextFont',
-  overlayBackgroundColor = 'overlayBackgroundColor',
-  titleTextAlignment = 'titleTextAlignment',
-  titleTextColor = 'titleTextColor',
-  titleTextFont = 'titleTextFont',
-  cardTitleTextFont = 'cardTitleTextFont',
-  bodyTextAlignment = 'bodyTextAlignment',
-  bodyTextColor = 'bodyTextColor',
-  bodyTextFont = 'bodyTextFont',
-  footnoteTextColor = 'footnoteTextColor',
-  footnoteTextFont = 'footnoteTextFont',
-  formLabelTextColor = 'formLabelTextColor',
-  formLabelTextFont = 'formLabelTextFont',
-  textFieldTextColor = 'textFieldTextColor',
-  textFieldBackgroundColor = 'textFieldBackgroundColor',
-  textFieldBorderColor = 'textFieldBorderColor',
-  textFieldCornerRadius = 'textFieldCornerRadius',
-  textFieldFont = 'textFieldFont',
-  textFieldPlaceholderFont = 'textFieldPlaceholderFont',
-  pickerTextColor = 'pickerTextColor',
-  pickerTextFont = 'pickerTextFont',
-  buttonBackgroundColor = 'buttonBackgroundColor',
-  buttonDisabledBackgroundColor = 'buttonDisabledBackgroundColor',
-  buttonTouchedBackgroundColor = 'buttonTouchedBackgroundColor',
-  buttonTextColor = 'buttonTextColor',
-  buttonDisabledTextColor = 'buttonDisabledTextColor',
-  buttonTextAlignment = 'buttonTextAlignment',
-  buttonImageTintColor = 'buttonImageTintColor',
-  buttonCornerRadius = 'buttonCornerRadius',
-  buttonBorderWidth = 'buttonBorderWidth',
-  buttonBorderColor = 'buttonBorderColor',
-  buttonFont = 'buttonFont',
-  buttonSecondaryBackgroundColor = 'buttonSecondaryBackgroundColor',
-  buttonSecondaryDisabledBackgroundColor = 'buttonSecondaryDisabledBackgroundColor',
-  buttonSecondaryTouchedBackgroundColor = 'buttonSecondaryTouchedBackgroundColor',
-  buttonSecondaryTextColor = 'buttonSecondaryTextColor',
-  buttonSecondaryDisabledTextColor = 'buttonSecondaryDisabledTextColor',
-  buttonSecondaryTextAlignment = 'buttonSecondaryTextAlignment',
-  buttonSecondaryImageTintColor = 'buttonSecondaryImageTintColor',
-  buttonSecondaryCornerRadius = 'buttonSecondaryCornerRadius',
-  buttonSecondaryBorderWidth = 'buttonSecondaryBorderWidth',
-  buttonSecondaryBorderColor = 'buttonSecondaryBorderColor',
-  buttonSecondaryFont = 'buttonSecondaryFont',
-  selectedCellBackgroundColor = 'selectedCellBackgroundColor',
-  closeButtonTintColor = 'closeButtonTintColor',
-  cancelButtonBackgroundColor = 'cancelButtonBackgroundColor',
-  cancelButtonTextColor = 'cancelButtonTextColor',
-  cancelButtonAlternateBackgroundColor = 'cancelButtonAlternateBackgroundColor',
-  cancelButtonAlternateTextColor = 'cancelButtonAlternateTextColor',
-  processingLabelsTextAlignment = 'processingLabelsTextAlignment',
-  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-tool/index.ts

@@ -1,30 +0,0 @@
-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/src/persona-tool/prompts.ts

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

package/src/persona-tool/tools/AndroidThemeGenerator.ts

@@ -1,100 +0,0 @@
-import fs from 'fs';
-import chalk from 'chalk';
-import path from 'path';
-
-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';
-const ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH =
-  './android/app/src/main/res/drawable/rn_persona_button.xml';
-const ANDROID_BUTTON_COLOR_RESOURCE_PATH =
-  './android/app/src/main/res/color/rn_persona_button.xml';
-
-class ThemeGenerator {
-  async run() {
-    await Theme.print();
-
-    const { isConfirmed: themeValuesConfirmed } = await confirmThemeValues();
-
-    if (!themeValuesConfirmed) {
-      console.log(
-        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:'
-      )}\n
-      - ${ANDROID_STYLES_RESOURCE_PATH}
-      - ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}
-      - ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}\n`
-    );
-    console.log(
-      '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 { style, buttonDrawable, buttonColor } = new AndroidResourcePrinter(
-      theme
-    ).process();
-
-    let { isConfirmed: confirmed } = await confirmResourceFiles();
-
-    if (!confirmed) {
-      process.exit(1);
-    }
-
-    // Add a line after confirmation
-    console.log('');
-
-    fs.mkdirSync(path.dirname(ANDROID_STYLES_RESOURCE_PATH), {
-      recursive: true,
-    });
-    fs.writeFileSync(
-      ANDROID_STYLES_RESOURCE_PATH,
-      style.end({ prettyPrint: true })
-    );
-
-    console.log(
-      `${chalk.green(
-        'Saved an Android style file at path:'
-      )} ${ANDROID_STYLES_RESOURCE_PATH}.`
-    );
-
-    fs.mkdirSync(path.dirname(ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH), {
-      recursive: true,
-    });
-    fs.writeFileSync(
-      ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH,
-      buttonDrawable.end({ prettyPrint: true })
-    );
-    console.log(
-      `${chalk.green(
-        'Saved an Android drawable file at path:'
-      )} ${ANDROID_BUTTON_DRAWABLE_RESOURCE_PATH}.`
-    );
-
-    fs.mkdirSync(path.dirname(ANDROID_BUTTON_COLOR_RESOURCE_PATH), {
-      recursive: true,
-    });
-    fs.writeFileSync(
-      ANDROID_BUTTON_COLOR_RESOURCE_PATH,
-      buttonColor.end({ prettyPrint: true })
-    );
-    console.log(
-      `${chalk.green(
-        'Saved an Android color file at path:'
-      )} ${ANDROID_BUTTON_COLOR_RESOURCE_PATH}.`
-    );
-  }
-}
-
-export default new ThemeGenerator();

package/src/persona-tool/tools/IosThemeInstructions.ts

@@ -1,41 +0,0 @@
-import Theme from '../Theme';
-import { confirmThemeValues } from '../prompts';
-import chalk from 'chalk';
-
-class IosThemeInstructions {
-  async run() {
-    await Theme.print('ios');
-
-    const { isConfirmed: themeValuesConfirmed } = await confirmThemeValues();
-
-    if (!themeValuesConfirmed) {
-      console.log(
-        chalk.yellow('\nPlease adjust the values in package.json.\n')
-      );
-      return;
-    }
-
-    console.log(
-      `\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'
-    );
-
-    console.log(`
-    ${chalk.green(`+ import { persona } from '../package.json'`)}
-      ...
-      Inquiry.fromTemplate(selectedTemplateId)
-        .onSuccess(handleSuccess)
-        .onCanceled(handleCanceled)
-        .onFailed(handleFailed)
-        .onError(handleError)
-    ${chalk.green('+   .iosTheme(persona.iosTheme)')}
-        .build()
-        .start();
-      ...
-    `);
-  }
-}
-
-export default new IosThemeInstructions();