react-native-persona 2.0.1 → 2.1.1

package/persona-tools/config.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const cosmiconfig_1 = require("cosmiconfig");
+const chalk_1 = __importDefault(require("chalk"));
+const Theme_1 = require("./Theme");
+class Configuration {
+    async loadConfig() {
+        if (this.config)
+            return this.config;
+        try {
+            const explorer = cosmiconfig_1.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() {
+        let config = await this.loadConfig();
+        const androidThemeLines = [];
+        for (const key in Theme_1.ANDROID_THEME_CONFIG_KEY) {
+            androidThemeLines.push(`      "${key}": null`);
+        }
+        const iosThemeLines = [];
+        for (const key in Theme_1.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_1.default.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;
+    }
+}
+exports.default = new Configuration();

package/persona-tools/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = __importDefault(require("./config"));
+const prompts_1 = require("./lib/prompts");
+const AndroidThemeGenerator_1 = __importDefault(require("./tools/AndroidThemeGenerator"));
+const IosThemeInstructions_1 = __importDefault(require("./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_1.default.get();
+    const { choice } = await prompts_1.whatWouldYouLikePrompt();
+    switch (choice) {
+        case prompts_1.TOOL_CHOICE.AndroidTheme:
+            await AndroidThemeGenerator_1.default.run();
+            break;
+        case prompts_1.TOOL_CHOICE.iosTheme:
+            await IosThemeInstructions_1.default.run();
+            break;
+        default:
+            return;
+    }
+};
+run();

package/persona-tools/index.ts

@@ -1,4 +1,4 @@
-import Config from "./Config";
+import Config from "./config";
 import { TOOL_CHOICE, whatWouldYouLikePrompt } from "./lib/prompts";
 import AndroidThemeGenerator from "./tools/AndroidThemeGenerator";
 import IosThemeInstructions from "./tools/IosThemeInstructions";

package/persona-tools/lib/AndroidResourcePrinter.js

@@ -0,0 +1,573 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const xmlbuilder2_1 = require("xmlbuilder2");
+class AndroidResourcePrinter {
+    constructor(theme) {
+        this.preprintQueue = [];
+        this.printQueue = [];
+        this.postPrintQueue = [];
+        this.theme = theme;
+        this.root = xmlbuilder2_1.create({ version: "1.0" }).ele("resources");
+        this.buttonDrawable = xmlbuilder2_1.create({ version: "1.0" }).ele("selector", {
+            "xmlns:android": "http://schemas.android.com/apk/res/android",
+        });
+        this.buttonColor = xmlbuilder2_1.create({ version: "1.0" }).ele("selector", {
+            "xmlns:android": "http://schemas.android.com/apk/res/android",
+        });
+    }
+    process() {
+        if (!this.hasTheme()) {
+            this.root = this.root.up();
+        }
+        else {
+            this.print();
+        }
+        return {
+            style: this.root,
+            buttonDrawable: this.buttonDrawable,
+            buttonColor: this.buttonColor,
+        };
+    }
+    print() {
+        this.primaryColor();
+        this.accentColor();
+        this.darkPrimaryColor();
+        this.backgroundColor();
+        this.titleText();
+        this.bodyText();
+        this.footnoteText();
+        // this.formLabelText();
+        this.textField();
+        this.pickerText();
+        this.button();
+        this.progressColor();
+        this.successAsset();
+        this.failAsset();
+        this.loadingAnimationAsset();
+        this.selfieAnimationAsset();
+        this.preprintQueue.forEach((fn) => fn());
+        // Precreate some style namespaces
+        this.root = this.root
+            .ele("style", {
+            name: "RN",
+        })
+            .up();
+        this.root = this.root
+            .ele("style", {
+            name: "RN.Persona",
+        })
+            .up();
+        this.root = this.root
+            .ele("style", {
+            name: "RN.Persona.Text",
+        })
+            .up();
+        this.root = this.root.ele("style", {
+            name: "Persona.Inquiry.Theme",
+            parent: "Base.Persona.Inquiry.Theme.Light",
+        });
+        this.printQueue.forEach((fn) => fn());
+        this.root = this.root.up();
+        this.postPrintQueue.forEach((fn) => fn());
+    }
+    hasTheme() {
+        return (Object.keys(this.theme).length > 0 &&
+            Object.values(this.theme).filter(Boolean).length > 0);
+    }
+    primaryColor() {
+        if (!this.theme.primaryColor)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "colorPrimary" })
+                .txt(this.theme.primaryColor)
+                .up()
+                .txt(" ");
+        });
+    }
+    accentColor() {
+        if (!this.theme.accentColor)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "colorAccent" })
+                .txt(this.theme.accentColor)
+                .up()
+                .txt(" ");
+        });
+    }
+    darkPrimaryColor() {
+        if (!this.theme.darkPrimaryColor)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "colorPrimaryDark" })
+                .txt(this.theme.darkPrimaryColor)
+                .up()
+                .txt(" ");
+        });
+    }
+    backgroundColor() {
+        if (!this.theme.backgroundColor)
+            return;
+        this.preprintQueue.push(() => {
+            this.root = this.root
+                .ele("color", { name: "customPersonaBackgroundColor" })
+                .txt(this.theme.backgroundColor)
+                .up()
+                .txt(" ");
+        });
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "android:colorBackground" })
+                .txt("@color/customPersonaBackgroundColor")
+                .up()
+                .txt(" ");
+        });
+    }
+    titleText() {
+        if (this.theme.titleTextColor || this.theme.titleTextFont) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "personaTitleTextAppearance" })
+                    .txt("@style/RN.Persona.Text.Title")
+                    .up();
+            });
+            // Create a text appearance
+            this.postPrintQueue.push(() => {
+                this.root = this.root.ele("style", {
+                    name: "RN.Persona.Text.Title",
+                    parent: "Persona.Text.Body",
+                });
+                if (this.theme.titleTextColor) {
+                    this.root = this.root
+                        .ele("item", { name: "android:textColor" })
+                        .txt(this.theme.titleTextColor)
+                        .up();
+                }
+                if (this.theme.titleTextFont) {
+                    // TODO: Add notice about how to add a custom font that can be
+                    // referenced here on Android
+                    this.root = this.root
+                        .ele("item", { name: "android:fontFamily" })
+                        .txt(this.theme.titleTextFont)
+                        .up();
+                }
+                // Default values taken from `Persona.Text.Title`
+                // in shared/src/main/res/values/styles.xml
+                this.root = this.root
+                    .ele("item", { name: "android:textSize" })
+                    .txt("26sp")
+                    .up()
+                    .ele("item", { name: "android:textStyle" })
+                    .txt("bold")
+                    .up();
+                this.root = this.root.up();
+            });
+        }
+        else {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "personaTitleTextAppearance" })
+                    .txt("@style/Persona.Text.Title")
+                    .up();
+            });
+        }
+    }
+    bodyText() {
+        if (this.theme.bodyTextColor || this.theme.bodyTextFont) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "personaBodyTextAppearance" })
+                    .txt("@style/RN.Persona.Text.Body")
+                    .up();
+            });
+            // Create a text appearance
+            this.postPrintQueue.push(() => {
+                this.root = this.root.ele("style", {
+                    name: "RN.Persona.Text.Body",
+                    parent: "Persona.Text.Body",
+                });
+                if (this.theme.bodyTextColor) {
+                    this.root = this.root
+                        .ele("item", { name: "android:textColor" })
+                        .txt(this.theme.bodyTextColor)
+                        .up();
+                }
+                if (this.theme.bodyTextFont) {
+                    // TODO: Add notice about how to add a custom font that can be
+                    // referenced here on Android
+                    this.root = this.root
+                        .ele("item", { name: "android:fontFamily" })
+                        .txt(this.theme.bodyTextFont)
+                        .up();
+                }
+                // Default values taken from `Persona.Text.Body`
+                // in shared/src/main/res/values/styles.xml
+                this.root = this.root
+                    .ele("item", { name: "android:textSize" })
+                    .txt("18sp")
+                    .up();
+                this.root = this.root.up();
+            });
+        }
+        else {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "personaBodyTextAppearance" })
+                    .txt("@style/Persona.Text.Body")
+                    .up();
+            });
+        }
+    }
+    footnoteText() {
+        if (this.theme.footnoteTextColor || this.theme.footnoteTextFont) {
+            this.postPrintQueue.push(() => {
+                var _a, _b;
+                this.root = this.root
+                    .ele("style", { name: "TextAppearance.AppCompat.Small" })
+                    .ele("item", { name: "android:textSize" })
+                    // Used default value found in the Android SDK
+                    .txt("@dimen/abc_text_size_small_material")
+                    .up()
+                    .ele("item", { name: "android:textColor" })
+                    .txt(
+                // Used default value found in the Android SDK
+                (_a = this.theme.footnoteTextColor) !== null && _a !== void 0 ? _a : "?android:attr/textColorTertiary")
+                    .up();
+                if (this.theme.footnoteTextFont) {
+                    this.root = this.root
+                        .ele("item", { name: "android:fontFamily" })
+                        .txt(
+                    // Used default value found in the Android SDK
+                    (_b = this.theme.footnoteTextFont) !== null && _b !== void 0 ? _b : "?android:attr/textColorTertiary")
+                        .up();
+                }
+                this.root = this.root.up();
+            });
+        }
+    }
+    textField() {
+        if (this.theme.textFieldTextColor || this.theme.textFieldTextFont) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "editTextStyle" })
+                    .txt("@style/RN.Persona.EditText")
+                    .up();
+            });
+            this.postPrintQueue.push(() => {
+                this.root = this.root
+                    .ele("style", {
+                    name: "RN.Persona.EditText",
+                    parent: "Widget.AppCompat.EditText",
+                })
+                    .ele("item", { name: "android:textAppearance" })
+                    .txt("@style/RN.Persona.EditText.TextAppearance")
+                    .up()
+                    .ele("item", { name: "android:textColor" })
+                    .txt(this.theme.textFieldTextColor)
+                    .up()
+                    .up();
+                this.root = this.root.ele("style", {
+                    name: "RN.Persona.EditText.TextAppearance",
+                    parent: "Base.TextAppearance.AppCompat.Medium",
+                });
+                if (this.theme.textFieldTextColor) {
+                    this.root = this.root
+                        .ele("item", { name: "android:textSize" })
+                        .txt("18sp")
+                        .up();
+                }
+                if (this.theme.textFieldTextFont) {
+                    this.root = this.root
+                        .ele("item", { name: "android:fontFamily" })
+                        .txt(this.theme.textFieldTextFont)
+                        .up();
+                }
+                this.root = this.root.up();
+            });
+        }
+    }
+    pickerText() {
+        if (this.theme.pickerTextColor || this.theme.pickerTextFont) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "spinnerStyle" })
+                    .txt("@style/RN.Persona.Spinner")
+                    .up();
+                this.root = this.root
+                    .ele("item", { name: "spinnerDropDownItemStyle" })
+                    .txt("@style/RN.Persona.DropDownItem.Spinner")
+                    .up();
+            });
+            this.postPrintQueue.push(() => {
+                var _a, _b;
+                // Build Rn.Persona.Spinner
+                this.root = this.root
+                    .ele("style", {
+                    name: "RN.Persona.Spinner",
+                    parent: "Widget.AppCompat.Spinner",
+                })
+                    .ele("item", { name: "android:textColor" })
+                    .txt((_a = this.theme.pickerTextColor) !== null && _a !== void 0 ? _a : "?android:attr/textColorPrimary")
+                    .up()
+                    .ele("item", { name: "android:textAppearance" })
+                    .txt(this.theme.pickerTextFont
+                    ? "@style/RN.Persona.Text.Spinner"
+                    : "@style/Persona.Text.Body")
+                    .up()
+                    .up();
+                // Build RN.Persona.DropDownItem.Spinner
+                this.root = this.root
+                    .ele("style", {
+                    name: "RN.Persona.DropDownItem.Spinner",
+                    parent: "Widget.AppCompat.DropDownItem.Spinner",
+                })
+                    .ele("item", { name: "android:textColor" })
+                    .txt((_b = this.theme.pickerTextColor) !== null && _b !== void 0 ? _b : "?android:attr/textColorPrimary")
+                    .up()
+                    .ele("item", { name: "android:textAppearance" })
+                    .txt(this.theme.pickerTextFont
+                    ? "@style/RN.Persona.Text.Spinner"
+                    : "@style/Persona.Text.Body")
+                    .up()
+                    .up();
+                // Build RN.Persona.Text.Spinner
+                this.root = this.root.ele("style", {
+                    name: "RN.Persona.Text.Spinner",
+                });
+                if (this.theme.pickerTextColor) {
+                    this.root = this.root
+                        .ele("item", { name: "android:textColor" })
+                        .txt(this.theme.pickerTextColor)
+                        .up();
+                }
+                if (this.theme.pickerTextFont) {
+                    // TODO: Add notice about how to add a custom font that can be
+                    // referenced here on Android
+                    this.root = this.root
+                        .ele("item", { name: "android:fontFamily" })
+                        .txt(this.theme.pickerTextFont)
+                        .up();
+                }
+                this.root = this.root.up();
+            });
+        }
+    }
+    button() {
+        if (this.theme.buttonBackgroundColor ||
+            this.theme.buttonDisabledBackgroundColor ||
+            this.theme.buttonTouchedBackgroundColor ||
+            this.theme.buttonTextColor ||
+            this.theme.buttonDisabledTextColor ||
+            this.theme.buttonCornerRadius ||
+            this.theme.buttonFont) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "buttonStyle" })
+                    .txt("@style/RN.Persona.Button")
+                    .up();
+            });
+            this.postPrintQueue.push(() => {
+                var _a, _b, _c, _d, _e;
+                this.root = this.root
+                    .ele("style", {
+                    name: "RN.Persona.Button",
+                    parent: "android:style/Widget.Button",
+                })
+                    // Taken from
+                    // appcompat's res/values/values.xml
+                    .ele("item", {
+                    name: "android:minHeight",
+                })
+                    .txt("48dip")
+                    .up()
+                    // Taken from
+                    // appcompat's res/values/values.xml
+                    .ele("item", {
+                    name: "android:minWidth",
+                })
+                    .txt("88dip")
+                    .up()
+                    // Taken from
+                    // persona-android's shared/src/main/res/values/styles.xml
+                    .ele("item", {
+                    name: "android:textSize",
+                })
+                    .txt("18sp")
+                    .up()
+                    .ele("item", {
+                    name: "android:background",
+                })
+                    .txt("@drawable/rn_persona_button")
+                    .up()
+                    .ele("item", {
+                    name: "android:textColor",
+                })
+                    .txt("@color/rn_persona_button")
+                    .up()
+                    .up();
+                // Disabled
+                this.buttonDrawable = this.buttonDrawable
+                    .ele("item", {
+                    "android:state_enabled": "false",
+                })
+                    .ele("shape", { "android:shape": "rectangle" })
+                    .ele("corners", {
+                    "android:radius": this.theme.buttonCornerRadius
+                        ? `${this.theme.buttonCornerRadius}dp`
+                        : "@dimen/abc_control_corner_material",
+                })
+                    .up()
+                    .ele("padding", {
+                    "android:left": "@dimen/abc_button_padding_horizontal_material",
+                    "android:top": "@dimen/abc_button_padding_vertical_material",
+                    "android:right": "@dimen/abc_button_padding_horizontal_material",
+                    "android:bottom": "@dimen/abc_button_padding_vertical_material",
+                })
+                    .up()
+                    .ele("solid", {
+                    "android:color": this.theme.buttonDisabledBackgroundColor
+                        ? this.theme.buttonDisabledBackgroundColor
+                        : "?attr/colorPrimaryDark",
+                })
+                    .up()
+                    .up()
+                    .up();
+                // touched
+                this.buttonDrawable = this.buttonDrawable
+                    .ele("item", {
+                    "android:state_pressed": "true",
+                })
+                    .ele("shape", { "android:shape": "rectangle" })
+                    .ele("corners", {
+                    "android:radius": this.theme.buttonCornerRadius
+                        ? `${this.theme.buttonCornerRadius}dp`
+                        : "@dimen/abc_control_corner_material",
+                })
+                    .up()
+                    .ele("solid", {
+                    "android:color": (_a = this.theme.buttonTouchedBackgroundColor) !== null && _a !== void 0 ? _a : "?attr/colorPrimaryDark",
+                })
+                    .up()
+                    .ele("padding", {
+                    "android:left": "@dimen/abc_button_padding_horizontal_material",
+                    "android:top": "@dimen/abc_button_padding_vertical_material",
+                    "android:right": "@dimen/abc_button_padding_horizontal_material",
+                    "android:bottom": "@dimen/abc_button_padding_vertical_material",
+                })
+                    .up()
+                    .up()
+                    .up();
+                this.buttonDrawable = this.buttonDrawable
+                    .ele("item")
+                    .ele("shape", { "android:shape": "rectangle" })
+                    .ele("corners", {
+                    "android:radius": this.theme.buttonCornerRadius
+                        ? `${this.theme.buttonCornerRadius}dp`
+                        : "@dimen/abc_control_corner_material",
+                })
+                    .up()
+                    .ele("solid", {
+                    "android:color": (_b = this.theme.buttonBackgroundColor) !== null && _b !== void 0 ? _b : "?attr/colorPrimary",
+                })
+                    .up()
+                    .ele("padding", {
+                    "android:left": "@dimen/abc_button_padding_horizontal_material",
+                    "android:top": "@dimen/abc_button_padding_vertical_material",
+                    "android:right": "@dimen/abc_button_padding_horizontal_material",
+                    "android:bottom": "@dimen/abc_button_padding_vertical_material",
+                })
+                    .up()
+                    .up()
+                    .up();
+                // Finish button drawable
+                this.buttonDrawable = this.buttonDrawable.up();
+                this.buttonColor = this.buttonColor
+                    .ele("item", {
+                    "android:state_enabled": "false",
+                    "android:color": (_c = this.theme.buttonDisabledTextColor) !== null && _c !== void 0 ? _c : "@android:color/darker_gray",
+                })
+                    .up()
+                    .ele("item", {
+                    "android:state_pressed": "true",
+                    "android:color": (_d = this.theme.buttonTextColor) !== null && _d !== void 0 ? _d : "@android:color/white",
+                })
+                    .up()
+                    .ele("item", {
+                    "android:color": (_e = this.theme.buttonTextColor) !== null && _e !== void 0 ? _e : "@android:color/white",
+                })
+                    .up();
+                this.buttonColor = this.buttonColor.up();
+                this.root = this.root.up();
+            });
+        }
+    }
+    progressColor() {
+        if (this.theme.progressColor) {
+            this.printQueue.push(() => {
+                this.root = this.root
+                    .ele("item", { name: "colorControlActivated" })
+                    .txt(this.theme.progressColor)
+                    .up();
+            });
+        }
+    }
+    successAsset() {
+        if (!this.theme.successAsset)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "personaInquiryCompleteImage" })
+                .txt(this.theme.successAsset)
+                .up()
+                .txt(" ");
+        });
+    }
+    failAsset() {
+        if (!this.theme.failAsset)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "personaInquiryFailImage" })
+                .txt(this.theme.failAsset)
+                .up()
+                .txt(" ");
+        });
+    }
+    loadingAnimationAsset() {
+        if (!this.theme.loadingAnimationAsset ||
+            !this.theme.loadingAnimationWidthPercent)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "personaInquiryLoadingLottieRaw" })
+                .txt(this.theme.loadingAnimationAsset)
+                .up()
+                .txt(" ");
+            this.root = this.root
+                .ele("item", { name: "personaInquiryLoadingLottieWidthPercent" })
+                .txt(this.theme.loadingAnimationWidthPercent)
+                .up()
+                .txt(" ");
+        });
+    }
+    selfieAnimationAsset() {
+        if (!this.theme.selfieAnimationAsset ||
+            !this.theme.selfieAnimationWidthPercent)
+            return;
+        this.printQueue.push(() => {
+            this.root = this.root
+                .ele("item", { name: "personaInquirySelfieLottieRaw" })
+                .txt(this.theme.selfieAnimationAsset)
+                .up()
+                .txt(" ");
+            this.root = this.root
+                .ele("item", { name: "personaInquirySelfieLottieWidthPercent" })
+                .txt(this.theme.selfieAnimationWidthPercent)
+                .up()
+                .txt(" ");
+        });
+    }
+}
+exports.default = AndroidResourcePrinter;