@foxford/sdk 5.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@foxford/sdk",
+  "version": "5.0.0",
+  "description": "Foxford sdk for external projects",
+  "keywords": [],
+  "license": "MIT",
+  "author": "Foxford Co",
+  "homepage": "https://github.com/foxford/frontend-platform",
+  "bugs": "https://github.com/foxford/frontend-platform/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/foxford/frontend-platform.git"
+  },
+  "maintainers": [
+    {
+      "name": "Roman Olin",
+      "email": "r.v.olin@foxford.ru",
+      "team": "@frontend/core"
+    }
+  ],
+  "type": "module",
+  "flowTypes": "./index.js.flow",
+  "peerDependencies": {
+    "camelcase-keys-deep": "^0.1.0",
+    "decamelize-keys-deep": "^0.1.1",
+    "js-levenshtein": "^1.1.6",
+    "lodash": "^4.17.23",
+    "@foxford/services": "1.5.0",
+    "@foxford/types": "1.2.0"
+  },
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "flowTypes": "./index.js.flow",
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./plugins/autocomplete-email": {
+      "flowTypes": "./plugins/autocomplete-email.js.flow",
+      "import": "./plugins/autocomplete-email.mjs",
+      "require": "./plugins/autocomplete-email.js",
+      "types": "./plugins/autocomplete-email.d.ts"
+    },
+    "./plugins/confirm-phone": {
+      "flowTypes": "./plugins/confirm-phone.js.flow",
+      "import": "./plugins/confirm-phone.mjs",
+      "require": "./plugins/confirm-phone.js",
+      "types": "./plugins/confirm-phone.d.ts"
+    }
+  },
+  "files": [
+    "README.mdx",
+    "index.cjs",
+    "index.d.cts",
+    "index.d.ts",
+    "index.js",
+    "index.js.flow",
+    "package.json",
+    "plugins"
+  ],
+  "sha": "673ae4d",
+  "scripts": {}
+}

package/plugins/autocomplete-email.cjs

@@ -0,0 +1,305 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/autocomplete-email/index.ts
+var autocomplete_email_exports = {};
+__export(autocomplete_email_exports, {
+  EmailAutocomplete: () => EmailAutocomplete
+});
+module.exports = __toCommonJS(autocomplete_email_exports);
+var import_js_levenshtein = __toESM(require("js-levenshtein"), 1);
+var import_merge = __toESM(require("lodash/merge"), 1);
+var DEFAULT_DOMAINS = [
+  "gmail.com",
+  "mail.ru",
+  "yandex.ru",
+  "icloud.com",
+  "bk.ru",
+  "list.ru",
+  "inbox.ru",
+  "rambler.ru",
+  "internet.ru",
+  "ya.ru",
+  "mail.com",
+  "yandex.com",
+  "foxford.ru",
+  "hotmail.com",
+  "vk.com",
+  "yahoo.com",
+  "outlook.com",
+  "yandex.by",
+  "yandex.kz",
+  "xmail.ru",
+  "tut.by",
+  "msn.com",
+  "me.com"
+];
+var DEFAULT_OPTIONS = {
+  emailDomains: DEFAULT_DOMAINS,
+  suggestionClass: "emailAutoSugg",
+  suggestionColor: "var(--silver, #b8b8b8)",
+  suitableColor: "var(--silver, #b8b8b8)",
+  suitableEmailColor: "var(--accent, #1A96F6)",
+  suitableFontSize: "12px",
+  suitableLevenshteinTreshold: 5,
+  suitableLineHeight: "1.7"
+};
+var KEY_CODES = {
+  BACKSPACE: "Backspace",
+  DELETE: "Delete",
+  DOWN_ARROW: "ArrowDown",
+  ENTER: "Enter",
+  RIGHT_ARROW: "ArrowRight",
+  TAB: "Tab"
+};
+var EmailAutocomplete = class {
+  constructor(node, options) {
+    this.options = DEFAULT_OPTIONS;
+    this.containerValue = null;
+    this.suggOverlay = null;
+    this.value = "";
+    this.suggestion = "";
+    this.leftOffset = null;
+    this.suitableExists = false;
+    this.suitableContainer = null;
+    this.bindListeners = () => {
+      if (this.suggOverlay) this.suggOverlay.addEventListener("mousedown touchstart", this.onFocus);
+      this.node.addEventListener("keyup", this.displaySuggestion);
+      this.node.addEventListener("paste", this.onPaste);
+      this.node.addEventListener("blur", this.autocomplete);
+      this.node.addEventListener("keydown", this.onKeydown);
+    };
+    this.onFocus = () => {
+      this.node.focus();
+    };
+    this.onKeydown = (e) => {
+      if ([KEY_CODES.BACKSPACE, KEY_CODES.DELETE].includes(e.code)) {
+        this.hideSuitableEmail();
+        return;
+      }
+      if (![KEY_CODES.DOWN_ARROW, KEY_CODES.ENTER, KEY_CODES.RIGHT_ARROW, KEY_CODES.TAB].includes(e.code) || KEY_CODES.TAB === e.code && !this.suggestion)
+        return;
+      this.node.addEventListener("blur", this.autocomplete);
+      const { target } = e;
+      if (target instanceof HTMLElement) {
+        target.blur();
+      }
+    };
+    this.onPaste = (e) => {
+      if (!e.clipboardData) throw new Error("Not found clipboardData");
+      const text = e.clipboardData.getData("text/plain");
+      this.value = text;
+      this.node.removeEventListener("blur", this.autocomplete);
+      const list = this.findSuitableEmails(text);
+      this.showSuitableEmail(list);
+    };
+    this.findSuitableEmails = (text) => {
+      const strArr = text.split("@");
+      let lastPart = text;
+      if (strArr.length <= 1) return [];
+      lastPart = strArr.pop() || "";
+      const distances = (this.options.emailDomains || []).map((item) => ({ distance: (0, import_js_levenshtein.default)(lastPart, item), item }));
+      const treshold = this.options.suitableLevenshteinTreshold;
+      const preparedDistances = distances.sort((a, b) => a.distance - b.distance).filter((item) => item.distance <= treshold);
+      const suitableList = preparedDistances.slice(0, 3).map((obj) => `${strArr.join("")}@${obj.item}`);
+      return suitableList;
+    };
+    this.showSuitableEmail = (suitableList) => {
+      if (suitableList.length === 0) return;
+      if (this.suitableContainer) this.hideSuitableEmail();
+      const suitableEmail = suitableList[0];
+      if (this.value === suitableEmail) return;
+      const text = document.createTextNode("\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0432\u044B \u0438\u043C\u0435\u043B\u0438 \u0432 \u0432\u0438\u0434\u0443 ");
+      const email = document.createElement("span");
+      const suitableMessage = document.createElement("span");
+      suitableMessage.style.display = "block";
+      suitableMessage.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+      suitableMessage.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+      suitableMessage.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+      suitableMessage.style.color = this.options.suitableColor || "";
+      suitableMessage.style.fontSize = this.options.suitableFontSize || "";
+      suitableMessage.style.lineHeight = this.options.suitableLineHeight || "";
+      email.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+      email.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+      email.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+      email.style.color = this.options.suitableEmailColor || "";
+      email.style.fontSize = this.options.suitableFontSize || "";
+      email.style.lineHeight = this.options.suitableLineHeight || "";
+      email.style.cursor = "pointer";
+      if (suitableEmail) email.textContent = suitableEmail;
+      suitableMessage.append(text);
+      suitableMessage.append(email);
+      this.suitableContainer = suitableMessage;
+      this.node.after(this.suitableContainer);
+      email.addEventListener("click", this.onClickSuitableEmail, { once: true });
+      this.suitableExists = true;
+      if (typeof this.options.onShowSuitableEmail === "function") this.options.onShowSuitableEmail();
+    };
+    this.hideSuitableEmail = () => {
+      if (this.suitableContainer) {
+        this.suitableContainer.remove();
+        this.suitableContainer = null;
+      }
+      if (this.suggOverlay) {
+        this.suggOverlay.textContent = "";
+      }
+      this.suitableExists = false;
+      if (typeof this.options.onHideSuitableEmail === "function") this.options.onHideSuitableEmail();
+    };
+    this.onClickSuitableEmail = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!(e.target instanceof HTMLSpanElement)) return;
+      this.changeValue(e.target.textContent || "");
+      this.hideSuitableEmail();
+      this.node.addEventListener("blur", this.autocomplete);
+      if (typeof this.options.onClickSuitableEmail === "function") this.options.onClickSuitableEmail();
+    };
+    this.autocomplete = (e) => {
+      e.stopPropagation();
+      if (this.suitableExists) this.hideSuitableEmail();
+      if (typeof this.suggestion === "undefined" || typeof this.suggestion === "string" && this.suggestion.length < 1) {
+        const list = this.findSuitableEmails(this.value || "");
+        this.showSuitableEmail(list);
+        return false;
+      }
+      const value = `${this.value || ""}${this.suggestion || ""}`;
+      this.clear();
+      this.changeValue(value);
+      return true;
+    };
+    this.changeValue = (value) => {
+      if (typeof this.options.onAutocomplete === "function") this.options.onAutocomplete(value);
+      else this.node.value = value;
+    };
+    this.displaySuggestion = (event) => {
+      this.value = this.node.value;
+      this.suggestion = this.suggest(this.value);
+      if (!this.suggOverlay || !this.containerValue) return;
+      if (!this.suggestion.length) {
+        this.suggOverlay.textContent = "";
+      } else {
+        event.preventDefault();
+      }
+      this.suggOverlay.textContent = this.suggestion;
+      this.containerValue.textContent = this.value || "";
+      if (this.leftOffset === null) {
+        let w = this.node.clientWidth;
+        w -= parseFloat(this.nodeStyle.paddingLeft) + parseFloat(this.nodeStyle.paddingRight);
+        this.leftOffset = (this.node.offsetWidth - w) / 2;
+      }
+      const cvalWidth = this.containerValue.clientWidth;
+      if (this.node.offsetWidth > cvalWidth) {
+        this.suggOverlay.style.left = `${this.leftOffset + cvalWidth}px`;
+      }
+    };
+    this.destroy = () => {
+      var _a;
+      (_a = this.suggOverlay) == null ? void 0 : _a.removeEventListener("mousedown touchstart", this.onFocus);
+      this.node.removeEventListener("keyup", this.displaySuggestion);
+      this.node.removeEventListener("paste", this.onPaste);
+      this.node.removeEventListener("blur", this.autocomplete);
+      this.node.removeEventListener("keydown", this.onKeydown);
+      this.suggOverlay = null;
+      this.containerValue = null;
+      this.suitableContainer = null;
+    };
+    this.clear = () => {
+      if (this.suggOverlay instanceof HTMLSpanElement) this.suggOverlay.textContent = "";
+      if (this.containerValue instanceof HTMLSpanElement) this.containerValue.textContent = "";
+    };
+    if (!(node instanceof HTMLInputElement)) throw new TypeError("Node must be html input element");
+    this.node = node;
+    this.nodeRects = this.node.getBoundingClientRect();
+    this.options = (0, import_merge.default)(this.options, options);
+    this.suggOverlay = document.createElement("span");
+    this.containerValue = document.createElement("span");
+    this.suitableContainer = document.createElement("span");
+    this.nodeStyle = getComputedStyle(this.node);
+  }
+  apply() {
+    if (this.node.eac !== void 0 && this.node.eac !== null) return;
+    this.node.eac = this;
+    const parentNode = this.node.parentElement;
+    let topOffset = 0;
+    if (parentNode) {
+      const parentRects = parentNode.getBoundingClientRect();
+      topOffset = Math.abs(parentRects.top - this.nodeRects.top);
+    }
+    this.containerValue = document.createElement("span");
+    this.containerValue.style.visibility = "hidden";
+    this.containerValue.style.position = "absolute";
+    this.containerValue.style.display = "inline-block";
+    this.containerValue.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+    this.containerValue.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+    this.containerValue.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.containerValue.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+    const border = (this.node.offsetHeight - this.node.clientHeight) / 2;
+    this.suggOverlay = document.createElement("span");
+    if (typeof this.options.suggestionClass === "string") this.suggOverlay.classList.add(this.options.suggestionClass);
+    this.suggOverlay.style.display = "flex";
+    this.suggOverlay.style.alignItems = "center";
+    this.suggOverlay.style.position = "absolute";
+    this.suggOverlay.style.top = `${topOffset}px`;
+    this.suggOverlay.style.left = "0";
+    this.suggOverlay.style.height = `${this.node.offsetHeight}px`;
+    this.suggOverlay.style.paddingTop = `${parseInt(this.nodeStyle.getPropertyValue("padding-top"), 10) + border}px`;
+    this.suggOverlay.style.paddingBottom = `${parseInt(this.nodeStyle.getPropertyValue("padding-bottom"), 10) + border}px`;
+    this.suggOverlay.style.lineHeight = this.nodeStyle.getPropertyValue("line-height");
+    this.suggOverlay.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.suggOverlay.style.color = this.options.suggestionColor || "";
+    this.containerValue.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+    this.containerValue.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+    this.containerValue.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.containerValue.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+    this.node.after(this.containerValue);
+    this.containerValue.after(this.suggOverlay);
+    this.bindListeners();
+  }
+  suggest(str) {
+    const strArr = str.split("@");
+    let lastPart = str;
+    if (strArr.length > 1) {
+      lastPart = strArr.pop() || "";
+      if (!lastPart.length) {
+        return "";
+      }
+    } else {
+      return "";
+    }
+    const match = (this.options.emailDomains || []).filter((domain) => {
+      return domain.indexOf(lastPart) === 0;
+    }).shift() || "";
+    return match.replace(lastPart, "");
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailAutocomplete
+});

package/plugins/autocomplete-email.d.cts

@@ -0,0 +1,49 @@
+import { S as SdkPlugin } from './types-CFv3gSlt.cjs';
+import '@foxford/services';
+import '@foxford/types';
+
+interface EacOptions {
+    emailDomains?: Array<string>;
+    suggestionClass?: string;
+    suggestionColor?: string;
+    onAutocomplete?: (_value: string) => void;
+    onShowSuitableEmail?: () => void;
+    onClickSuitableEmail?: () => void;
+    onHideSuitableEmail?: () => void;
+    suitableColor?: string;
+    suitableEmailColor?: string;
+    suitableFontSize?: string;
+    suitableLineHeight?: string;
+    suitableLevenshteinTreshold?: number;
+}
+declare class EmailAutocomplete implements SdkPlugin {
+    private node;
+    private nodeRects;
+    private nodeStyle;
+    private options;
+    private containerValue;
+    private suggOverlay;
+    private value;
+    private suggestion;
+    private leftOffset;
+    private suitableExists;
+    private suitableContainer;
+    constructor(node: HTMLInputElement, options?: EacOptions);
+    apply(): void;
+    private bindListeners;
+    private onFocus;
+    private onKeydown;
+    private onPaste;
+    private findSuitableEmails;
+    private showSuitableEmail;
+    private hideSuitableEmail;
+    private onClickSuitableEmail;
+    private suggest;
+    private autocomplete;
+    private changeValue;
+    private displaySuggestion;
+    destroy: () => void;
+    clear: () => void;
+}
+
+export { EmailAutocomplete };

package/plugins/autocomplete-email.d.ts

@@ -0,0 +1,49 @@
+import type { SdkPlugin } from '../index.d.ts';
+import '@foxford/services';
+import '@foxford/types';
+
+interface EacOptions {
+    emailDomains?: Array<string>;
+    suggestionClass?: string;
+    suggestionColor?: string;
+    onAutocomplete?: (_value: string) => void;
+    onShowSuitableEmail?: () => void;
+    onClickSuitableEmail?: () => void;
+    onHideSuitableEmail?: () => void;
+    suitableColor?: string;
+    suitableEmailColor?: string;
+    suitableFontSize?: string;
+    suitableLineHeight?: string;
+    suitableLevenshteinTreshold?: number;
+}
+declare class EmailAutocomplete implements SdkPlugin {
+    private node;
+    private nodeRects;
+    private nodeStyle;
+    private options;
+    private containerValue;
+    private suggOverlay;
+    private value;
+    private suggestion;
+    private leftOffset;
+    private suitableExists;
+    private suitableContainer;
+    constructor(node: HTMLInputElement, options?: EacOptions);
+    apply(): void;
+    private bindListeners;
+    private onFocus;
+    private onKeydown;
+    private onPaste;
+    private findSuitableEmails;
+    private showSuitableEmail;
+    private hideSuitableEmail;
+    private onClickSuitableEmail;
+    private suggest;
+    private autocomplete;
+    private changeValue;
+    private displaySuggestion;
+    destroy: () => void;
+    clear: () => void;
+}
+
+export { EmailAutocomplete };