@crowdin/app-project-module 0.26.6 → 0.28.0-10

package/out/models/index.d.ts

@@ -1,4 +1,4 @@
-import Crowdin, { LanguagesModel, SourceFilesModel, SourceStringsModel } from '@crowdin/crowdin-api-client';
+import Crowdin, { LanguagesModel, SourceFilesModel, SourceStringsModel, TranslationStatusModel } from '@crowdin/crowdin-api-client';
 import { JwtPayload, VerifyOptions } from '@crowdin/crowdin-apps-functions';
 import { Request } from 'express';
 import { MySQLStorageConfig } from '../storage/mysql';
@@ -187,7 +187,7 @@ export interface IntegrationLogic {
     /**
      * function to update crowdin files (e.g. pull integration data to crowdin source files)
      */
-    updateCrowdin: (projectId: number, client: Crowdin, apiCredentials: any, request: IntegrationFile[], appRootFolder?: SourceFilesModel.Directory, config?: any) => Promise<void | ExtendedResult<void>>;
+    updateCrowdin: (projectId: number, client: Crowdin, apiCredentials: any, request: IntegrationFile[], appRootFolder?: SourceFilesModel.Directory, config?: any, uploadTranslations?: boolean) => Promise<void | ExtendedResult<void>>;
     /**
      * function to update integration content (e.g. load crowdin translations and push them to integration service)
      */
@@ -235,8 +235,22 @@ export interface IntegrationLogic {
      * Enable integration next page event
      */
     integrationPagination?: boolean;
+    /**
+     * Enable the option to upload translations to crowdin that are already present in the integration.
+     */
+    uploadTranslations?: boolean;
+    /**
+     * function to get crowdin file translation progress
+     */
+    getFileProgress?: (projectId: number, client: Crowdin, fileId: number) => Promise<{
+        [key: number]: TranslationStatusModel.LanguageProgress[];
+    }>;
+    /**
+     * Register Crowdin webhook to get notified when translations are ready
+     */
+    webhooks?: Webhooks;
 }
-export declare type FormEntity = FormField | FormDelimeter;
+export type FormEntity = FormField | FormDelimeter;
 export interface FormDelimeter {
     label: string;
 }
@@ -358,7 +372,7 @@ export interface FormField {
     helpText?: string;
     helpTextHtml?: string;
     label: string;
-    type?: 'text' | 'password' | 'checkbox' | 'select';
+    type?: 'text' | 'password' | 'checkbox' | 'select' | 'textarea' | 'file';
     defaultValue?: any;
     /**
      * only for select
@@ -375,19 +389,27 @@ export interface FormField {
         label: string;
         value: string;
     }[];
+    /**
+     * only for type file
+     */
+    accept?: string;
+    /**
+     * field dependency settings
+     */
+    dependencySettings?: string;
 }
 export interface ExtendedResult<T> {
     data?: T;
     message?: string;
     stopPagination?: boolean;
 }
-export declare type TreeItem = File | Folder;
+export type TreeItem = File | Folder;
 /**
  * 0 - folder
  * 1 - file
  * 2 - branch
  */
-declare type IntegrationTreeElementType = '0' | '1' | '2';
+type IntegrationTreeElementType = '0' | '1' | '2';
 export interface File {
     id: string;
     name: string;
@@ -574,10 +596,29 @@ export interface CustomMTRequest {
     strings: string[];
 }
 export interface UiModule {
+    /**
+     * Form schema for react-jsonschema-doc to be used as front-end
+     * https://rjsf-team.github.io/react-jsonschema-form/docs
+     */
+    formSchema?: object;
+    /**
+     * URL to custom endpoint that can be used instead of default one to save form data.
+     * Endpoint should accept POST requests.
+     */
+    formPostDataUrl?: string;
+    /**
+     * URL to custom endpoint that can be used instead of default one to retrieve form data.
+     * Endpoint should accept GET requests.
+     */
+    formGetDataUrl?: string;
+    /**
+     * Additional attributes for react-jsonschema-doc
+     */
+    formUiSchema?: object;
     /**
      * path to ui folder (e.g. {@example join(__dirname, 'public')})
      */
-    uiPath: string;
+    uiPath?: string;
     /**
      * page name (default index.html)
      */
@@ -637,4 +678,35 @@ export interface Pricing {
     cachingSeconds?: number;
     infoDisplayDaysThreshold?: number;
 }
+export interface Webhooks {
+    crowdinWebhookUrl?: string;
+    integrationWebhookUrl?: string;
+    urlParam?: string;
+    crowdinWebhooks?: (client: Crowdin, projectId: number, available: boolean, config?: any) => Promise<void>;
+    integrationWebhooks?: (apiCredentials: any, urlParam: string, available: boolean, config?: any, syncSettings?: any) => Promise<void>;
+    crowdinWebhookInterceptor?: (projectId: number, client: Crowdin, appRootFolder?: SourceFilesModel.Directory, config?: any, syncSettings?: any, webhookRequest?: any) => Promise<UpdateIntegrationRequest>;
+    integrationWebhookInterceptor?: (projectId: number, client: Crowdin, apiCredentials: any, appRootFolder?: SourceFilesModel.Directory, config?: any, syncSettings?: any, webhookRequest?: any) => Promise<IntegrationFile[]>;
+    queueUrl: string;
+}
+export declare enum SyncCondition {
+    ALL = 0,
+    TRANSLATED = 1,
+    APPROVED = 2
+}
+export declare enum SyncType {
+    NONE = 0,
+    SCHEDULE = 1,
+    WEBHOOKS = 2
+}
+export type Payload = {
+    event: string;
+    projectId: string;
+    language: string;
+    fileId: string;
+};
+export type WebhookUrlParams = {
+    projectId: number;
+    crowdinId: string;
+    clientId: string;
+};
 export {};

package/out/models/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorPanelsMode = exports.ProcessFileJobType = exports.SubscriptionInfoType = exports.AccountType = exports.Scope = exports.AuthenticationType = void 0;
+exports.SyncType = exports.SyncCondition = exports.EditorPanelsMode = exports.ProcessFileJobType = exports.SubscriptionInfoType = exports.AccountType = exports.Scope = exports.AuthenticationType = void 0;
 var AuthenticationType;
 (function (AuthenticationType) {
     AuthenticationType["CODE"] = "authorization_code";
@@ -47,3 +47,15 @@ var EditorPanelsMode;
     EditorPanelsMode["TRANSLATE"] = "TRANSLATE";
     EditorPanelsMode["PROOFREAD"] = "proofread";
 })(EditorPanelsMode = exports.EditorPanelsMode || (exports.EditorPanelsMode = {}));
+var SyncCondition;
+(function (SyncCondition) {
+    SyncCondition[SyncCondition["ALL"] = 0] = "ALL";
+    SyncCondition[SyncCondition["TRANSLATED"] = 1] = "TRANSLATED";
+    SyncCondition[SyncCondition["APPROVED"] = 2] = "APPROVED";
+})(SyncCondition = exports.SyncCondition || (exports.SyncCondition = {}));
+var SyncType;
+(function (SyncType) {
+    SyncType[SyncType["NONE"] = 0] = "NONE";
+    SyncType[SyncType["SCHEDULE"] = 1] = "SCHEDULE";
+    SyncType[SyncType["WEBHOOKS"] = 2] = "WEBHOOKS";
+})(SyncType = exports.SyncType || (exports.SyncType = {}));

package/out/static/css/styles.css

@@ -55,4 +55,100 @@
 
 .m-0 {
     margin: 0;
+}
+
+.info-text {
+    max-width: 800px;
+}
+
+#translation-info {
+    margin: 12px 0 12px 0;
+}
+
+.dismiss-alert {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.file-field {
+    font-family: Roboto,‘Segoe UI’,-apple-system,BlinkMacSystemFont,‘Helvetica Neue’,Arial,sans-serif;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    -ms-text-size-adjust: 100%;
+    text-rendering: optimizeLegibility;
+    color: rgba(38,50,56,.87);
+}
+
+.file-field .help-text {
+    font-size: .75rem;
+    color: rgba(38,50,56,.54);
+}
+
+.file-field .upload {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.file-field .uploaded-file {
+    font-style: italic;
+    display: flex;
+    align-items: center;
+}
+
+.loader {
+    background: rgba(255, 255, 255, 0.3);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+}
+
+.loader crowdin-progress-indicator {
+    position: absolute;
+    top: calc(50% - 20px);
+    left: calc(50% - 20px);
+}
+
+.hidden {
+    width:0 !important;
+    height: 0 !important;
+    opacity: 0 !important;
+    z-index: -1 !important;
+    display: block !important;
+    overflow: hidden !important;
+}
+
+[data-dependency]:not(.dependency-show):not(input) {
+    display : none;
+}
+
+
+#form-loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(251 251 251 / 70%);
+}
+
+#form .MuiButtonBase-root[type="submit"] {
+    background: #fff;
+    color: #263238;
+    box-shadow: none;
+    border: 1px solid rgba(38,50,56,.24);
+}
+
+#form .MuiButtonBase-root[type="submit"]:hover {
+    background: rgba(236, 239, 241, .54);
 }

package/out/static/js/dependent.js

@@ -0,0 +1,307 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const fields = document.querySelectorAll('[data-dependency]');
+
+    if (fields.length > 0) {
+        fields.forEach((field) => {
+            const conditionString = field.dataset['dependency'].replace(/'/g, '"');
+            const conditions = JSON.parse(conditionString);
+            action(field, conditions);
+
+            const success = check(conditions);
+            showHide(field, success);
+        });
+    }
+});
+
+function action(field, conditions) {
+    conditions.forEach((rules) => {
+        for (const [selector, rule] of Object.entries(rules)) {
+            ['input', 'change'].forEach((event) => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    element.addEventListener(event, () => {
+                        const success = check(conditions);
+                        showHide(field, success);
+                    });
+                }
+            });
+        }
+    });
+}
+
+function showHide(element, success) {
+    if (success) {
+        element.classList.remove('dependency-show');
+        element.classList.add('dependency-show');
+        return true;
+    } else {
+        element.classList.remove('dependency-show');
+        return false;
+    }
+}
+
+function check(conditions) {
+    return conditions.every((conditionObj) => {
+        const selectors = Object.keys(conditionObj);
+        return selectors.every((selector) => {
+            const condition = conditionObj[selector];
+            return decision(selector, condition);
+        });
+    });
+}
+
+function decision(selector, condition) {
+    const type = condition['type'];
+    const currentValue = getValue(selector);
+
+    let checkValue = typeof condition['value'] === 'undefined' ? false : condition['value'];
+
+    let minValue = typeof condition['min'] === 'undefined' ? false : parseInt(condition['min']);
+    let maxValue = typeof condition['max'] === 'undefined' ? false : parseInt(condition['max']);
+
+    const allowEmpty = typeof condition['empty'] === 'undefined' ? false : condition['empty'];
+    const isEmpty = !allowEmpty && currentValue.length < 1;
+
+    const likeSelector = typeof condition['like'] === 'undefined' ? false : condition['like'];
+    const likeSelectorValue = getValue(likeSelector);
+
+    const regExpPattern = typeof condition['pattern'] === 'undefined' ? false : condition['pattern'];
+    const regExpModifier = typeof condition['modifier'] === 'undefined' ? 'gi' : condition['modifier'];
+    const sign = typeof condition['sign'] === 'undefined' ? false : condition['sign'];
+    const strict = typeof condition['strict'] === 'undefined' ? false : condition['strict'];
+
+    const emptyTypes = ['empty', 'blank'];
+    const notEmptyTypes = ['!empty', 'notEmpty', 'not-empty', 'notempty'];
+
+    const equalTypes = ['equal', '=', '==', '==='];
+    const notEqualTypes = ['!equal', '!=', '!==', '!===', 'notEqual', 'not-equal', 'notequal'];
+
+    const regularExpressionTypes = ['regexp', 'exp', 'expression', 'match'];
+
+    // if empty return true
+    if (emptyTypes.includes(type)) {
+        return currentValue.length < 1;
+    }
+
+    // if not empty return true
+    if (notEmptyTypes.includes(type)) {
+        return currentValue.length > 0;
+    }
+
+    // if equal return true
+    if (equalTypes.includes(type)) {
+        if (isEmpty) {
+            return false;
+        }
+
+        // Match two selector value/s
+        if (likeSelector) {
+            if (strict) {
+                return likeSelectorValue.every((value) => {
+                    return currentValue.includes(value);
+                });
+            } else {
+                return likeSelectorValue.some((value) => {
+                    return currentValue.includes(value);
+                });
+            }
+        }
+
+        // Match pre-defined value/s
+        if (strict) {
+            if (checkValue && Array.isArray(checkValue)) {
+                return checkValue.every((value) => {
+                    return currentValue.includes(value);
+                });
+            }
+
+            if (checkValue && !Array.isArray(checkValue)) {
+                return currentValue.includes(checkValue);
+            }
+        } else {
+            if (checkValue && Array.isArray(checkValue)) {
+                return checkValue.some((value) => {
+                    return currentValue.includes(value);
+                });
+            }
+
+            if (checkValue && !Array.isArray(checkValue)) {
+                return currentValue.includes(checkValue);
+            }
+        }
+    }
+
+    // if not equal return true
+    if (notEqualTypes.includes(type)) {
+        if (isEmpty) {
+            return false;
+        }
+
+        // Match two selector value/s
+        if (likeSelector) {
+            if (strict) {
+                return likeSelectorValue.every((value) => {
+                    return !currentValue.includes(value);
+                });
+            } else {
+                return likeSelectorValue.some((value) => {
+                    return !currentValue.includes(value);
+                });
+            }
+        }
+
+        // Match pre-defined value/s
+        if (strict) {
+            if (checkValue && Array.isArray(checkValue)) {
+                return checkValue.every((value) => {
+                    return !currentValue.includes(value);
+                });
+            }
+
+            if (checkValue && !Array.isArray(checkValue)) {
+                return !currentValue.includes(checkValue);
+            }
+        } else {
+            if (checkValue && Array.isArray(checkValue)) {
+                return checkValue.some((value) => {
+                    return !currentValue.includes(value);
+                });
+            }
+
+            if (checkValue && !Array.isArray(checkValue)) {
+                return !currentValue.includes(checkValue);
+            }
+        }
+    }
+
+    // if regexp match
+    if (regularExpressionTypes.includes(type) && regExpPattern) {
+        if (isEmpty) {
+            return false;
+        }
+
+        const exp = new RegExp(regExpPattern, regExpModifier);
+        return currentValue.every((value) => {
+            return exp.test(value);
+        });
+    }
+
+    // if length
+    if ('length' === type) {
+        if (isEmpty) {
+            return false;
+        }
+
+        if (checkValue && Array.isArray(checkValue)) {
+            minValue = parseInt(checkValue[0]);
+            maxValue = typeof checkValue[1] === 'undefined' ? false : parseInt(checkValue[1]);
+        }
+
+        if (checkValue && !Array.isArray(checkValue)) {
+            minValue = parseInt(checkValue);
+            maxValue = false;
+        }
+
+        return currentValue.every((value) => {
+            if (!maxValue) {
+                return value.length >= minValue;
+            }
+
+            if (!minValue) {
+                return value.length <= maxValue;
+            }
+
+            return value.length >= minValue && value.length <= maxValue;
+        });
+    }
+
+    // if range
+    if ('range' === type) {
+        if (isEmpty) {
+            return false;
+        }
+
+        if (checkValue && Array.isArray(checkValue)) {
+            minValue = parseInt(checkValue[0]);
+            maxValue = typeof checkValue[1] === 'undefined' ? false : parseInt(checkValue[1]);
+        }
+
+        return currentValue.every((value) => {
+            if (!maxValue) {
+                return parseInt(value) > minValue;
+            }
+
+            if (!minValue) {
+                return parseInt(value) < maxValue;
+            }
+
+            return parseInt(value) > minValue && parseInt(value) < maxValue;
+        });
+    }
+
+    // if compare
+    if ('compare' === type && sign && checkValue) {
+        if (isEmpty) {
+            return false;
+        }
+
+        checkValue = parseInt(checkValue);
+
+        switch (sign) {
+            case '<':
+                return currentValue.every((value) => {
+                    return parseInt(value) < checkValue;
+                });
+                break;
+
+            case '<=':
+                return currentValue.every((value) => {
+                    return parseInt(value) <= checkValue;
+                });
+                break;
+
+            case '>':
+                return currentValue.every((value) => {
+                    return parseInt(value) > checkValue;
+                });
+                break;
+
+            case '>=':
+                return currentValue.every((value) => {
+                    return parseInt(value) >= checkValue;
+                });
+                break;
+
+            case '=':
+            case '==':
+                return currentValue.every((value) => {
+                    return parseInt(value) === checkValue;
+                });
+                break;
+        }
+    }
+}
+
+function getValue(selector) {
+    const values = [];
+    if (selector && document.querySelector(selector)) {
+        const inputType = document.querySelector(selector).tagName.toLowerCase();``
+
+        let currentSelector = selector;
+
+        if ('crowdin-select' === inputType) {
+            currentSelector = `${selector} option:checked`;
+        }
+
+        if ('crowdin-checkbox' === inputType) {
+            currentSelector = `${selector}:not(input)`;
+        }
+
+        document.querySelectorAll(`${currentSelector}`).forEach((element) => {
+            const value = element.value || element.checked;
+            values.push(value);
+        });
+    }
+
+    return values.filter((value) => value !== '');
+}