@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/{ripple/app-globals-B7cOtGhY.js → collection/global/global.js}

@@ -1,82 +1,5 @@
-import { a as setMode } from './index-CU5QNCKv.js';
-
-const name = "@watermarkinsights/ripple";
-const version = "5.12.0";
-const description = "Ripple Component Library";
-const module = "dist/index.js";
-const main = "dist/index.cjs.js";
-const types = "dist/types/components.d.ts";
-const collection = "dist/collection/collection-manifest.json";
-const files = [
-	"dist/"
-];
-const exports = {
-	".": {
-		"import": "./dist/ripple/ripple.esm.js",
-		require: "./dist/ripple/ripple.cjs.js",
-		types: "./dist/types/components.d.ts"
-	},
-	"./dist/components/*": {
-		"import": "./dist/components/*",
-		types: "./dist/components/*"
-	},
-	"./dist/types/*": {
-		types: "./dist/types/*"
-	},
-	"./dist/*": {
-		"import": "./dist/*",
-		types: "./dist/*"
-	},
-	"./components/*": {
-		"import": "./dist/components/*.js",
-		types: "./dist/components/*.d.ts"
-	},
-	"./loader": {
-		"import": "./loader/index.js",
-		require: "./loader/index.cjs",
-		types: "./loader/index.d.ts"
-	}
-};
-const scripts = {
-	build: "stencil build",
-	release: "bash ./scripts/release.sh",
-	start: "stencil build --dev --watch --serve",
-	test: "stencil test --spec --e2e",
-	"test.snapshot": "stencil test --spec --e2e -u",
-	"test.watch": "stencil test --spec --e2e --watch",
-	"test.watchAll": "stencil test --spec --e2e --watchAll",
-	"test.coverage": "stencil test --spec --coverage --collectCoverageFrom='src/**/*.{js,jsx,ts,tsx}'",
-	extract: "formatjs extract './src/global/intl.ts' './src/**/*.tsx' --out-file './src/lang/en.json' && node './src/lang/piglatin.js'",
-	compile: "formatjs compile-folder ./src/lang src/lang/compiled-lang/ --ast",
-	missing: "node ./src/lang/missing.js"
-};
-const dependencies = {
-	"@formatjs/intl": "^2.10.4"
-};
-const devDependencies = {
-	"@axe-core/puppeteer": "^4.9.1",
-	"@formatjs/cli": "^6.2.12",
-	"@stencil/core": "^4.20.0",
-	"@stencil/react-output-target": "^1.0.3",
-	"@stencil/sass": "^3.0.12",
-	"@types/jest": "^29.5.12",
-	jest: "^29.7.0"
-};
-var _package = {
-	name: name,
-	version: version,
-	description: description,
-	module: module,
-	main: main,
-	types: types,
-	collection: collection,
-	files: files,
-	exports: exports,
-	scripts: scripts,
-	dependencies: dependencies,
-	devDependencies: devDependencies
-};
-
+import { setMode } from "@stencil/core";
+import { version } from "../../package.json";
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length
 // do not print version number there as it causes issues
@@ -160,11 +83,17 @@ tooltipStyles.textContent = `
   opacity: 1;
 }
 `;
-document.head.appendChild(tooltipStyles);
-tooltipContainer.appendChild(tooltipEl);
-document.querySelector("body").appendChild(tooltipContainer);
-const globalFn = () => { };
-
-const globalScripts = globalFn;
-
-export { globalScripts as g };
+const body = document.querySelector("body");
+if (body) {
+    document.head.appendChild(tooltipStyles);
+    tooltipContainer.appendChild(tooltipEl);
+    body.appendChild(tooltipContainer);
+}
+else {
+    document.addEventListener("DOMContentLoaded", () => {
+        const body = document.querySelector("body");
+        document.head.appendChild(tooltipStyles);
+        tooltipContainer.appendChild(tooltipEl);
+        body.appendChild(tooltipContainer);
+    });
+}

package/dist/{ripple/interfaces-CrANcZM9.js → collection/global/interfaces.js}

@@ -1,5 +1,5 @@
 //List of icon codes with more indicative descriptors to create labels for icon-only buttons
-const iconLabels = {
+export const iconLabels = {
     f156: "Close",
     f3eb: "Edit",
     f739: "Cancel",
@@ -18,7 +18,7 @@ const iconLabels = {
     f645: "Sort hierarchically",
     f4bb: "Sort alphabetically",
 };
-function getIconCodeFromName(icon) {
+export function getIconCodeFromName(icon) {
     return iconCodes[icon] || icon;
 }
 const iconCodes = {
@@ -43,11 +43,30 @@ const iconCodes = {
     "account-settings": "f630",
     "backup-restore": "f06f",
 };
-const defaultMode = "planning";
-const getWmMode = (ref) => {
+export const defaultMode = "planning";
+export const getWmMode = (ref) => {
     return (ref.getAttribute("mode") ||
         document.documentElement.getAttribute("mode") ||
         defaultMode);
 };
-
-export { getIconCodeFromName as a, getWmMode as g };
+export const chartPalettes = {
+    discrete: [
+        "wmcolor-dataviz-discrete-01",
+        "wmcolor-dataviz-discrete-02",
+        "wmcolor-dataviz-discrete-03",
+        "wmcolor-dataviz-discrete-04",
+        "wmcolor-dataviz-discrete-05",
+        "wmcolor-dataviz-discrete-06",
+        "wmcolor-dataviz-discrete-07",
+    ],
+    semantic: [
+        "wmcolor-dataviz-semantic-positive-01",
+        "wmcolor-dataviz-semantic-positive-02",
+        "wmcolor-dataviz-semantic-negative-01",
+        "wmcolor-dataviz-semantic-negative-02",
+        "wmcolor-dataviz-semantic-neutral-01",
+        "wmcolor-dataviz-semantic-neutral-02",
+        "wmcolor-dataviz-semantic-neutral-03",
+        "wmcolor-dataviz-semantic-unspecified",
+    ],
+};

package/dist/collection/global/intl.js

@@ -0,0 +1,274 @@
+import { intl } from "./functions";
+export const globalMessages = {
+    characterLimitReached: intl.formatMessage({
+        id: "global.characterLimitReached",
+        defaultMessage: "No additional characters will be entered.",
+        description: "for screen readers",
+    }),
+    close: intl.formatMessage({
+        id: "global.closeVerb",
+        defaultMessage: "Close",
+        description: "For a button, to close a user interface element",
+    }),
+    genericError: intl.formatMessage({
+        id: "global.genericError",
+        defaultMessage: "An error occurred. Please try again.",
+    }),
+    hide: intl.formatMessage({
+        id: "global.hideVerb",
+        defaultMessage: "Hide",
+        description: "For a button, to hide something",
+    }),
+    locked: intl.formatMessage({
+        id: "global.locked",
+        defaultMessage: "locked",
+        description: "For an interactive element, indicating its state cannot be changed",
+    }),
+    newWindow: intl.formatMessage({
+        id: "global.newWindowLink",
+        defaultMessage: "Opens in a new window.",
+        description: "Indicates that a focused link will open in a new window",
+    }),
+    next: intl.formatMessage({
+        id: "global.next",
+        defaultMessage: "Next",
+        description: "Button text, indicating an action leading to a 'next' state",
+    }),
+    open: intl.formatMessage({
+        id: "global.openVerb",
+        defaultMessage: "Open",
+        description: "For a button, to open a user interface element",
+    }),
+    previous: intl.formatMessage({
+        id: "global.previous",
+        defaultMessage: "Previous",
+        description: "Button text, indicating an action leading to a 'previous' state",
+    }),
+    requiredError: intl.formatMessage({
+        id: "global.requiredError",
+        defaultMessage: "This field is required.",
+        description: "Error displayed under a required field when it has not been filled",
+    }),
+    requiredField: intl.formatMessage({
+        id: "global.requiredField",
+        defaultMessage: "required field",
+        description: "Screen reader text, indicating the currently focused field is required",
+    }),
+    show: intl.formatMessage({
+        id: "global.showVerb",
+        defaultMessage: "Show",
+        description: "For a button, to show something",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getCharactersEntered: (charCount, charLimit) => intl.formatMessage({
+        id: "global.charactersEntered",
+        defaultMessage: "{x, number} of {y, number} characters entered.",
+        description: "for screen readers",
+    }, { x: charCount, y: charLimit }),
+    getCharacterLimit: (characterLimit) => intl.formatMessage({
+        id: "global.characterLimit",
+        defaultMessage: "{limit, number} characters allowed.",
+        description: "for screen readers",
+    }, { limit: characterLimit }),
+};
+export const uploaderMessages = {
+    duplicateName: intl.formatMessage({
+        id: "uploader.duplicateName",
+        defaultMessage: "A file with this name already exists.",
+    }),
+    fileLimitExceeded: intl.formatMessage({
+        id: "uploader.fileUploadLimitExceeded",
+        defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+        description: "Message displayed when trying to upload too many files",
+    }),
+    fileLimitReached: intl.formatMessage({
+        id: "uploader.fileUploadLimitReached",
+        defaultMessage: "The maximum number of files has been reached",
+        description: "Message displayed when trying to upload additional files, but the limit has been reached",
+    }),
+    finishedUploading: intl.formatMessage({
+        id: "uploader.finishedUploading",
+        defaultMessage: "Finished uploading",
+    }),
+    waitToUpload: intl.formatMessage({
+        id: "uploader.waitToUpload",
+        defaultMessage: "Please wait for current upload to complete before uploading new files.",
+        description: "Message for screen reader users",
+    }),
+    zeroFileSize: intl.formatMessage({
+        id: "uploader.zeroFileSize",
+        defaultMessage: "The file must be more than 0 bytes",
+        description: "Error message when user attempts to upload a file of no size",
+    }),
+    dropInstructions: intl.formatMessage({
+        id: "uploader.dropInstructions",
+        defaultMessage: "Browse or Drag Files Here",
+        description: "Instructions for how to choose files to upload",
+    }),
+    dropFile: intl.formatMessage({
+        id: "uploader.dropFile",
+        defaultMessage: "Drop to Upload",
+        description: "Prompt for use to drop the file they're currently dragging",
+    }),
+    fileRequirements: intl.formatMessage({
+        id: "uploader.fileRequirements",
+        defaultMessage: "File Requirements",
+        description: "Expandable button revealing the uploader's file requirements",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getFilesAdded: (numFiles) => intl.formatMessage({
+        id: "uploader.filesAdded",
+        defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
+    }, { numFiles: numFiles }),
+    getFileCount: (fileListLength, maxFiles) => intl.formatMessage({
+        id: "uploader.fileCount",
+        defaultMessage: "{x} of {y} Files",
+        description: "A count of the number of files currently uploaded",
+    }, { x: fileListLength, y: maxFiles }),
+    getFileTooLarge: (maxSize) => intl.formatMessage({
+        id: "uploader.fileTooLarge",
+        defaultMessage: "The selected file is too large. Maximum file size is {size}",
+    }, { size: maxSize }),
+    getFilesUploading: (numFilesUploading) => intl.formatMessage({
+        id: "uploader.filesUploading",
+        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+    }, { num: numFilesUploading }),
+    getInvalidFileType: (validTypes) => intl.formatMessage({
+        id: "uploader.invalidFileType",
+        defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+    }, { validTypes }),
+    getUploadProgress: (percentage) => intl.formatMessage({
+        id: "uploader.uploadProgress",
+        defaultMessage: "Upload progress: {percentage}%",
+    }, { percentage: percentage }),
+};
+export const chartMessages = {
+    interactiveChart: intl.formatMessage({
+        id: "chart.interactiveChart",
+        defaultMessage: "Interactive chart",
+        description: "For screen readers only, a description clarifying the role of the chart widget",
+    }),
+};
+export const lineChartMessages = {
+    instructions: intl.formatMessage({
+        id: "linechart.instructions",
+        defaultMessage: "Use Tab and arrow keys to browse elements.",
+        description: "For screen readers only, instructions on how to interact with the line chart component",
+    }),
+    noData: intl.formatMessage({
+        id: "linechart.noData",
+        defaultMessage: "No Data",
+        description: "Message displayed when a data point has missing data",
+    }),
+    highlightQualifier: intl.formatMessage({
+        id: "linechart.highlightQualifier",
+        defaultMessage: "highlighted",
+        description: "Descriptor for highlighted areas of a chart",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getChangeSince: (prevXValue) => intl.formatMessage({
+        id: "linechart.changeSince",
+        defaultMessage: "Change since {time}",
+        description: "Indicates a comparison between current and previous data",
+    }, {
+        time: prevXValue,
+    }),
+    getToggleButtonLabel: (itemCount) => intl.formatMessage({
+        id: "linechart.toggleButtonLabel",
+        defaultMessage: "Toggle line visibility, list with {itemCount} items",
+    }, {
+        itemCount: itemCount,
+    }),
+    getToggleButtonState: (isPressed) => intl.formatMessage({
+        id: "linechart.toggleButtonState",
+        defaultMessage: "toggle {isPressed, select, true {pressed} other {}}",
+        description: "Descriptor and state for a toggle button UI element",
+    }, {
+        isPressed: isPressed,
+    }),
+    getLineFocusAnnouncement: (label, lineNumber, lineTotal, lineLength) => intl.formatMessage({
+        id: "linechart.getLineFocusAnnouncement",
+        defaultMessage: `{label}, line {lineNumber} of {lineTotal} with {lineLength} data points`,
+    }, {
+        label: label,
+        lineNumber: lineNumber,
+        lineTotal: lineTotal,
+        lineLength: lineLength,
+    }),
+};
+export const selectMessages = {
+    multiPlaceholder: intl.formatMessage({
+        id: "select.multiPlaceholder",
+        defaultMessage: "Make a selection",
+    }),
+    singlePlaceholder: intl.formatMessage({
+        id: "select.singlePlaceholder",
+        defaultMessage: "Select an Option",
+    }),
+    multiClearSelection: intl.formatMessage({
+        id: "select.multiClearSelection",
+        defaultMessage: "Clear all Selections",
+        description: "Clear as in remove. Use imperative",
+    }),
+    singleClearSelection: intl.formatMessage({
+        id: "select.singleClearSelection",
+        defaultMessage: "Clear Selection",
+        description: "Clear as in remove. Use imperative",
+    }),
+    selectionCleared: intl.formatMessage({
+        id: "select.selectionCleared",
+        defaultMessage: "Selection cleared",
+    }),
+    searchPlaceholder: intl.formatMessage({
+        id: "select.searchPlaceholder",
+        defaultMessage: "Search",
+        description: "Appears in a search field UI element",
+    }),
+    allSelected: intl.formatMessage({
+        id: "select.allSelected",
+        defaultMessage: "All selected",
+        description: "Indicates all possible options have been selected",
+    }),
+    selectAllMessage: intl.formatMessage({
+        id: "select.selectAll",
+        defaultMessage: "Select All",
+    }),
+    deselectAllMessage: intl.formatMessage({
+        id: "select.deselectAll",
+        defaultMessage: "Deselect All",
+    }),
+    allOptionsSelectedMessage: intl.formatMessage({
+        id: "select.allOptionsSelected",
+        defaultMessage: "All options selected",
+    }),
+    allOptionsDeselectedMessage: intl.formatMessage({
+        id: "select.allOptionsDeselected",
+        defaultMessage: "All options deselected",
+    }),
+    noSearchResults: intl.formatMessage({
+        id: "select.noSearchResults",
+        defaultMessage: "No results found. Please try your search again.",
+    }),
+    optgroupSingleSelectionCount: () => intl.formatMessage({
+        id: "select.optgroupSingleSelectionCount",
+        defaultMessage: "Item Selected",
+        description: "Item refers to an option in a list",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getOptgroupMultipleSelectionCount: (selectionCount) => intl.formatMessage({
+        id: "select.optgroupMultipleSelectionCount",
+        defaultMessage: "{numberSelected} selected",
+    }, { numberSelected: selectionCount }),
+    getSearchResultsFound: (numResults) => intl.formatMessage({
+        id: "select.searchResultsFound",
+        defaultMessage: "{numberResults, plural, one {1 option found} other {# options found}}",
+    }, { numberResults: numResults }),
+};

package/dist/collection/global/services/__mocks__/http-service.js

@@ -0,0 +1,130 @@
+const state = [
+    {
+        uuid: "d57a8104-a07e-4e58-97f6-705d55b15845",
+        uploader_member_uuid: "fd947ce1-ca75-4b88-ba47-4576104cf845",
+        updated_at: "2018-04-16T10:31:48.740000Z",
+        organization_uuid: "d57a8104-a07e-4e58-97f6-705d55b15845",
+        mime_type: "application/pdf",
+        institution_uuid: "c1dac227-b71c-44ae-a4be-eb20929c6e99",
+        inserted_at: "2018-09-17T09:33:45.550000Z",
+        file_path: "bogusurl.dev",
+        file_name: "test.pdf",
+        course_uuid: null,
+    },
+    {
+        uuid: "410ee9ed-af53-4f52-90b1-bf3f054ad86b",
+        uploader_member_uuid: "fd947ce1-ca75-4b88-ba47-4576104cf845",
+        updated_at: "2019-11-26T20:39:38.990000Z",
+        organization_uuid: "8d242cdf-4261-4003-9a91-45575eb7d44e",
+        mime_type: "application/pdf",
+        institution_uuid: "c1dac227-b71c-44ae-a4be-eb20929c6e99",
+        inserted_at: "2019-11-26T20:39:38.990000Z",
+        file_path: "anotherbogusurl.dev",
+        file_name: "brochure.pdf",
+        course_uuid: null,
+    },
+];
+const firstUploadResponseText = {
+    url: "aws-path.url",
+    updated_at: "2019-07-03T14:11:08.000Z",
+    path: "",
+    guid: "12345",
+};
+const secondUploadResponseText = {
+    url: "aws-path.url",
+    updated_at: "2019-07-02T10:14:29.000Z",
+    path: "",
+    guid: "67890",
+};
+const navigatorResponse = {
+    connection_name: "watermarkinsights-idp-qa",
+    current_product_id: "dm",
+    email: "user@email.net",
+    logout_url: "localhost:3333/logout",
+    products: [
+        {
+            description: "Some Aqua description",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/aqua.svg",
+            id: "aqua",
+            linkUrl: "https://aqua.taskstream.com/sso/login",
+            name: "Aqua",
+        },
+        {
+            description: "Some Digital Measures description",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg",
+            id: "dm",
+            linkUrl: "https://www.digitalmeasures.com/login/sso/authenticate",
+            name: "Digital Measures",
+        },
+        {
+            description: "Some Planning description",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg",
+            id: "planning",
+            linkUrl: "https://planning.watermarkinsights.com/login/sso",
+            name: "Planning",
+        },
+        {
+            description: "Checking that the component handles anything throwed at it",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/livetext.svg",
+            id: "something_bonkers",
+            linkUrl: "https://planning.watermarkinsights.com/login/sso",
+            name: "Bonkers",
+        },
+        {
+            description: "c1 = livetext",
+            iconUrl: "https://cdn.watermarkinsights.com/images/login/livetext.svg",
+            id: "c1",
+            linkUrl: "https://livetext.fakeurl/login/sso",
+            name: "Livetext",
+        },
+        {
+            description: "something with an id containing admin",
+            iconUrl: "not.important",
+            id: "banana_admin_shoe",
+            linkUrl: "irrelevant",
+            name: "Platform Admin",
+        },
+    ],
+};
+const responses = {
+    "get-path.url": state,
+    "request-upload-path.url0": firstUploadResponseText,
+    "request-upload-path.url1": secondUploadResponseText,
+    "/platform/navigator/userinfo": navigatorResponse,
+};
+export const getRequest = async (url) => {
+    return Promise.resolve(responses[url]);
+};
+export const postRequest = async (url, payload) => {
+    switch (url) {
+        case "upload-path.url":
+            state.push({
+                uuid: payload.document_uuid,
+                uploader_member_uuid: "fd947ce1-ca75-4b88-ba47-4576104cf845",
+                updated_at: "2019-12-10T20:48:10.138Z",
+                organization_uuid: payload.organization_uuid,
+                mime_type: payload.mime_type,
+                institution_uuid: "c1dac227-b71c-44ae-a4be-eb20929c6e99",
+                inserted_at: "2019-12-10T20:48:10.138Z",
+                file_path: payload.file_path,
+                file_name: payload.file_name,
+                course_uuid: null,
+            });
+            return Promise.resolve();
+        case "request-download-path.url":
+            return Promise.resolve({ url: "aws-download-path.url" });
+    }
+};
+export const deleteRequest = async (url) => {
+    const uuid = url.split("/").pop();
+    // console.log("uuid: ", uuid);
+    const index = state.findIndex((i) => i.uuid === uuid);
+    // console.log("index: ", index);
+    state.splice(index, 1);
+    // console.log("state from DELETE: ", state, Date.now());
+    // return new Promise(resolve => setTimeout(() => resolve(), 300));
+    return Promise.resolve();
+};
+export const putRequest = (_url, _file) => {
+    return Promise.resolve();
+};

package/dist/collection/global/services/http-service.js

@@ -0,0 +1,50 @@
+export const getRequest = async (url) => {
+    const response = await fetch(url);
+    if (!!response && !!response.ok) {
+        return await response.json();
+    }
+    else {
+        throw new Error(response.statusText);
+    }
+};
+export const postRequest = async (url, payload) => {
+    const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+        body: JSON.stringify(payload),
+    });
+    if (!!response && !!response.ok) {
+        return await response.json();
+    }
+    else {
+        throw new Error(response.statusText);
+    }
+};
+export const deleteRequest = async (url) => {
+    const response = await fetch(url, { method: "DELETE" });
+    if (!!response && !!response.ok) {
+        return await response.json();
+    }
+    else {
+        throw new Error(response.statusText);
+    }
+};
+export const putRequest = (url, file, onProgress) => {
+    return new Promise((resolve, reject) => {
+        // there's no way to track progress with the fetch API, so using XHR
+        const req = new XMLHttpRequest();
+        req.upload.addEventListener("progress", (ev) => onProgress(ev));
+        req.addEventListener("readystatechange", function () {
+            if (this.readyState === 4 && this.status === 200) {
+                resolve(this);
+            }
+            else if (this.readyState === 4 && this.status !== 200) {
+                reject();
+            }
+        });
+        req.onerror = () => reject();
+        req.open("PUT", url, true);
+        req.setRequestHeader("Content-Disposition", `attachment;filename="${file.name}"`);
+        req.send(file);
+    });
+};

package/dist/collection/lang/lang.js

@@ -0,0 +1,5 @@
+import en from "./compiled-lang/en.json";
+import fr from "./compiled-lang/fr.json";
+import es from "./compiled-lang/es.json";
+import pig from "./compiled-lang/pig.json";
+export { en, fr, es, pig };

package/dist/collection/lang/missing.js

@@ -0,0 +1,43 @@
+/* This script is useful when we translate internally, so we know which keys to translate.
+ * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
+ * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
+ */
+
+const fs = require("fs");
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+
+const keys = Object.keys(en);
+
+let missingFR = {};
+let missingES = {};
+
+keys.map((key) => {
+  if (!fr[key]) {
+    missingFR[key] = en[key];
+  }
+
+  if (!es[key]) {
+    missingES[key] = en[key];
+  }
+});
+
+const dataFR = JSON.stringify(missingFR, null, 2);
+const dataES = JSON.stringify(missingES, null, 2);
+
+const totalMissingFR = Object.entries(missingFR).length;
+if (totalMissingFR > 0) {
+  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingFR} french translations missing. See src/lang/missingTranslationsFR.json`);
+}
+
+const totalMissingES = Object.entries(missingES).length;
+if (totalMissingES > 0) {
+  fs.writeFile("src/lang/missingTranslationsES.json", dataES, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingES} spanish translations missing. See src/lang/missingTranslationsES.json`);
+}