@useinsider/guido 1.0.0-beta.83deaec → 1.0.0-beta.8f8745d

package/dist/utils/htmlCompiler.js

@@ -0,0 +1,70 @@
+var y = Object.defineProperty;
+var g = (p, e, r) => e in p ? y(p, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : p[e] = r;
+var u = (p, e, r) => g(p, typeof e != "symbol" ? e + "" : e, r);
+import { useToaster as m } from "../composables/useToaster.js";
+class d {
+  constructor(e = []) {
+    u(this, "rules");
+    this.rules = e;
+  }
+  compile(e, r) {
+    const l = performance.now(), t = e, o = e.length;
+    let s = e;
+    const a = [];
+    (r || this.rules).sort((n, c) => n.priority - c.priority).forEach((n) => {
+      const c = s.length;
+      s = this.applyRule(s, n), s.length !== c && a.push(n.id);
+    });
+    const i = s.length, R = o > 0 ? (o - i) / o * 100 : 0;
+    return {
+      originalHtml: t,
+      compiledHtml: s,
+      appliedRules: a,
+      // TODO: We can use stats for monitoring in the future
+      stats: {
+        originalSize: o,
+        compiledSize: i,
+        reductionPercentage: R,
+        executionTime: performance.now() - l
+      }
+    };
+  }
+  applyRule(e, r) {
+    try {
+      switch (r.type) {
+        case "replace":
+          return this.applyReplaceRule(e, r);
+        case "regex":
+          return this.applyRegexRule(e, r);
+        case "remove":
+          return this.applyRemoveRule(e, r);
+        case "custom":
+          return this.applyCustomRule(e, r);
+        default:
+          return e;
+      }
+    } catch (l) {
+      const { handleError: t } = m();
+      return t(l, `Failed to apply rule ${r.id}:`), e;
+    }
+  }
+  applyReplaceRule(e, r) {
+    const { search: l, replacement: t, replaceAll: o = !0 } = r;
+    return o ? e.replaceAll(l, t) : e.replace(l, t);
+  }
+  applyRegexRule(e, r) {
+    const { pattern: l, replacement: t, flags: o = "g" } = r, s = new RegExp(l, o);
+    return e.replace(s, t);
+  }
+  applyRemoveRule(e, r) {
+    return r.targets.reduce((l, t) => t instanceof RegExp ? l.replace(t, "") : l.replaceAll(t, ""), e);
+  }
+  applyCustomRule(e, r) {
+    return r.processor(e);
+  }
+}
+const A = (p = []) => new d(p);
+export {
+  d as HtmlCompilerEngine,
+  A as createHtmlCompiler
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.83deaec",
+  "version": "1.0.0-beta.8f8745d",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -10,9 +10,9 @@
   ],
   "exports": {
     ".": {
-        "import": "./dist/library.js",
-        "types": "./dist/components/Guido.vue.d.ts",
-        "require": "./dist/components/Guido.vue.js"
+      "import": "./dist/library.js",
+      "types": "./dist/components/Guido.vue.d.ts",
+      "require": "./dist/components/Guido.vue.js"
     },
     "./style": "./dist/guido.css"
   },
@@ -21,7 +21,6 @@
     "start": "vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.app.json",
     "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json"
@@ -30,6 +29,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@stripoinc/ui-editor-extensions": "^1.0.6",
     "@useinsider/design-system-vue": "0.14.8",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
@@ -42,6 +42,7 @@
     "@cspell/eslint-plugin": "8.17.5",
     "@eslint/eslintrc": "3.3.0",
     "@eslint/js": "8.57.1",
+    "@playwright/test": "^1.54.2",
     "@stylistic/eslint-plugin": "3.1.0",
     "@stylistic/eslint-plugin-migrate": "3.1.0",
     "@types/eslint": "8.56.12",

package/dist/components/organisms/base/ModalWrapper.vue.d.ts

@@ -1,72 +0,0 @@
-interface ModalWrapperProps {
-    isOpen: boolean;
-    title: string;
-    description?: string;
-    size?: 'small' | 'medium' | 'large' | 'extra-large';
-    primaryButtonText?: string;
-    primaryButtonDisabled?: boolean;
-    primaryButtonLoading?: boolean;
-    cancelButtonText?: string;
-    showCancelButton?: boolean;
-    className?: string;
-}
-declare var __VLS_12: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalWrapperProps>, {
-    description: string;
-    size: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-    className: string;
-}>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
-    close: () => void;
-    save: () => void;
-    cancel: () => void;
-}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalWrapperProps>, {
-    description: string;
-    size: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-    className: string;
-}>>>, {
-    className: string;
-    size: "small" | "medium" | "large" | "extra-large";
-    description: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-}>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $scopedSlots: S;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/organisms/base/ModalWrapper.vue.js

@@ -1,19 +0,0 @@
-import r from "./ModalWrapper.vue2.js";
-import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.InDrawer, { attrs: { id: "modal-wrapper", "description-text": t.description, "footer-button-group-options": e.drawerFooterOptions, size: t.size, status: t.isOpen, "title-text": t.title }, on: { cancelOrBackButtonEvent: e.handleCancel, onCloseEvent: e.handleClose, primaryButtonEvent: e.handleSave }, scopedSlots: t._u([{ key: "contentSlot", fn: function() {
-    return [n("div", { staticClass: "modal-content-wrapper", class: t.className }, [t._t("default")], 2)];
-  }, proxy: !0 }], null, !0) });
-}, a = [], l = /* @__PURE__ */ o(
-  r,
-  s,
-  a,
-  !1,
-  null,
-  null
-);
-const u = l.exports;
-export {
-  u as default
-};

package/dist/components/organisms/base/ModalWrapper.vue2.js

@@ -1,43 +0,0 @@
-import { defineComponent as o, computed as l } from "vue";
-import { InDrawer as r } from "@useinsider/design-system-vue";
-const i = /* @__PURE__ */ o({
-  __name: "ModalWrapper",
-  props: {
-    isOpen: { type: Boolean },
-    title: null,
-    description: { default: "" },
-    size: { default: "medium" },
-    primaryButtonText: { default: "Save" },
-    primaryButtonDisabled: { type: Boolean, default: !1 },
-    primaryButtonLoading: { type: Boolean, default: !1 },
-    cancelButtonText: { default: "Cancel" },
-    showCancelButton: { type: Boolean, default: !0 },
-    className: { default: "" }
-  },
-  emits: ["close", "save", "cancel"],
-  setup(a, { emit: t }) {
-    const e = a, n = l(() => ({
-      primaryButton: {
-        styling: "solid",
-        type: "primary",
-        labelText: e.primaryButtonText,
-        disabled: e.primaryButtonDisabled || e.primaryButtonLoading
-      },
-      cancelOrBackButton: e.showCancelButton ? {
-        type: "secondary",
-        styling: "ghost",
-        labelText: e.cancelButtonText
-      } : void 0
-    }));
-    return { __sfc: !0, props: e, emit: t, drawerFooterOptions: n, handleClose: () => {
-      t("close");
-    }, handleSave: () => {
-      t("save");
-    }, handleCancel: () => {
-      t("cancel");
-    }, InDrawer: r };
-  }
-});
-export {
-  i as default
-};

package/dist/components/organisms/save-template/SaveTemplateModal.vue.js

@@ -1,22 +0,0 @@
-import n from "./SaveTemplateModal.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var l = function() {
-  var r = this, e = r._self._c, t = r._self._setupProxy;
-  return e(t.ModalWrapper, { attrs: { "cancel-button-text": t.trans("products.cancel"), description: t.trans("newsletter.save-template-description"), "is-open": t.props.isOpen, "primary-button-loading": t.isSaving || t.isLoadingHtml, "primary-button-text": t.trans("products.save"), title: t.trans("products.save-template") }, on: { cancel: t.closeModal, close: t.closeModal, save: t.saveTemplate } }, [e(t.InTextInput, { staticClass: "mb-5 w-1", attrs: { id: "template-name-input", "with-label": "", name: "templateName", disabled: t.isSaving, invalid: !!t.validationError, "invalid-message": t.validationError, label: t.trans("products.template-name"), placeholder: t.trans("newsletter.enter-template-name") }, model: { value: t.templateNameInput, callback: function(a) {
-    t.templateNameInput = typeof a == "string" ? a.trim() : a;
-  }, expression: "templateNameInput" } }), e(t.InMultiSelect, { staticClass: "template-category-dropdown mb-5 w-1", attrs: { "create-option-status": "", "search-status": "", "button-status": !1, "character-limit-validation-text": t.trans("validation-v2.duration-value", {
-    min: 1,
-    max: t.templateCategorySearchInputLimit
-  }), "create-button-label": t.trans("products.create-new-category"), "label-text": t.trans("products.template-category"), "loading-state": t.categoriesData.loading || t.categoriesData.loadingCreate, "max-character-limit": t.templateCategorySearchInputLimit, options: t.categoriesData.mappedCategories, "placeholder-text": t.trans("products.select-template-category"), value: t.categoriesData.selectedCategories }, on: { addOption: t.addOption, change: t.categoryChangeHandler, resetAllOptions: t.categoryChangeHandler, selectAllOptions: t.categoryChangeHandler } })], 1);
-}, o = [], i = /* @__PURE__ */ s(
-  n,
-  l,
-  o,
-  !1,
-  null,
-  null
-);
-const d = i.exports;
-export {
-  d as default
-};

package/dist/components/organisms/save-template/SaveTemplateModal.vue2.js

@@ -1,81 +0,0 @@
-import { defineComponent as N, ref as r, watch as C } from "vue";
-import { useActionsApi as D } from "../../../composables/useActionsApi.js";
-import { useTemplateCategories as O } from "../../../composables/useTemplateCategories.js";
-import { useTemplateValidation as b } from "../../../composables/useTemplateValidation.js";
-import { useToaster as x } from "../../../composables/useToaster.js";
-import { useTranslations as A } from "../../../composables/useTranslations.js";
-import R from "../base/ModalWrapper.vue.js";
-import { InMultiSelect as V, InTextInput as W } from "@useinsider/design-system-vue";
-const J = /* @__PURE__ */ N({
-  __name: "SaveTemplateModal",
-  props: {
-    isOpen: { type: Boolean }
-  },
-  emits: ["close", "save"],
-  setup(E, { emit: l }) {
-    const p = E, M = A(), { handleError: o } = x(), { getCompiledEmail: u } = D(), {
-      data: S,
-      fetchCategories: f,
-      createCategory: v,
-      setSelectedCategories: d,
-      resetSelection: g,
-      getSelectedCategoryIds: y
-    } = O(), a = r(""), s = r(!1), n = r(!1), t = r(""), I = 40, {
-      validationError: w,
-      validateTemplateName: i,
-      clearValidation: c
-    } = b(), m = () => {
-      a.value = "", g(), c(), t.value = "";
-    }, h = () => {
-      m(), l("close");
-    }, H = async () => {
-      if (a.value.trim()) {
-        s.value = !0;
-        try {
-          if (!(await i(a.value)).isValid)
-            return;
-          if (!t.value) {
-            o(new Error("No HTML data available"), "Error saving template:");
-            return;
-          }
-          l("save", {
-            templateName: a.value,
-            htmlData: t.value,
-            categoryIds: y.value
-          }), h();
-        } catch (e) {
-          o(e, "Error saving template:");
-        } finally {
-          s.value = !1;
-        }
-      }
-    };
-    C(a, (e) => {
-      e.trim() ? i(e) : c();
-    });
-    const T = async () => {
-      n.value = !0;
-      try {
-        const { html: e } = await u();
-        t.value = e || "", e || o(new Error("No HTML content available"), "Warning:");
-      } catch (e) {
-        o(e, "Error fetching HTML data:"), t.value = "";
-      } finally {
-        n.value = !1;
-      }
-    }, _ = (e) => {
-      d(e);
-    }, L = async (e) => {
-      await v(e);
-    };
-    return C(() => p.isOpen, async (e) => {
-      e ? await Promise.all([
-        T(),
-        f()
-      ]) : m();
-    }), { __sfc: !0, props: p, emit: l, trans: M, handleError: o, getCompiledEmail: u, categoriesData: S, fetchCategories: f, createCategory: v, setSelectedCategories: d, resetSelection: g, getSelectedCategoryIds: y, templateNameInput: a, isSaving: s, isLoadingHtml: n, htmlData: t, templateCategorySearchInputLimit: I, validationError: w, validateTemplateName: i, clearValidation: c, resetModalState: m, closeModal: h, saveTemplate: H, fetchHtmlData: T, categoryChangeHandler: _, addOption: L, ModalWrapper: R, InTextInput: W, InMultiSelect: V };
-  }
-});
-export {
-  J as default
-};

package/dist/composables/useTemplateCategories.d.ts

@@ -1,38 +0,0 @@
-import type { TemplateCategory } from '@@/Types/template-categories';
-interface MappedCategory {
-    value: string;
-    text: string;
-}
-interface GetDataProps {
-    getInitialData?: boolean;
-}
-export declare const useTemplateCategories: ({ getInitialData }?: GetDataProps) => {
-    data: {
-        loading: boolean;
-        loadingCreate: boolean;
-        categories: {
-            id: number;
-            name: string;
-            partnerId: number;
-            isStripo: boolean;
-            templatesCount: number;
-        }[];
-        mappedCategories: {
-            value: string;
-            text: string;
-        }[];
-        selectedCategories: {
-            value: string;
-            text: string;
-        }[];
-    };
-    fetchCategories: () => Promise<void>;
-    createCategory: (name: string) => Promise<void>;
-    selectCategory: (category: MappedCategory) => void;
-    setSelectedCategories: (categories: MappedCategory[]) => void;
-    resetSelection: () => void;
-    getSelectedCategoryIds: import("vue").ComputedRef<number[]>;
-    getCategoryById: (id: number) => TemplateCategory | undefined;
-    getCategoryByName: (name: string) => TemplateCategory | undefined;
-};
-export {};

package/dist/composables/useTemplateCategories.js

@@ -1,80 +0,0 @@
-import { useHttp as x } from "./useHttp.js";
-import { useToaster as v } from "./useToaster.js";
-import { reactive as E, computed as I } from "vue";
-const T = ({ getInitialData: l = !1 } = {}) => {
-  const { get: c, post: d } = x(), { handleError: o, showToaster: n } = v(), e = E({
-    loading: !1,
-    loadingCreate: !1,
-    categories: [],
-    mappedCategories: [],
-    selectedCategories: []
-  }), i = async () => {
-    e.loading = !0;
-    try {
-      const a = (await c("/newsletter/template-library/get-template-categories")).data || [];
-      e.categories = a, e.mappedCategories = a.map((s) => ({
-        value: s.id.toString(),
-        text: s.name
-      }));
-    } catch (t) {
-      o(t, "Error fetching template categories:"), e.categories = [], e.mappedCategories = [];
-    } finally {
-      e.loading = !1;
-    }
-  }, p = async (t) => {
-    try {
-      const s = `/newsletter/template-library/category-name-exists?name=${encodeURIComponent(t)}`;
-      return (await c(s)).data.status;
-    } catch (a) {
-      return o(a, "Error checking category name:"), !1;
-    }
-  }, m = async (t) => {
-    e.loadingCreate = !0;
-    try {
-      if (await p(t)) {
-        n({
-          type: "error",
-          message: "Category name already exists"
-        });
-        return;
-      }
-      const r = (await d("/newsletter/template-library/create-category", { name: t })).data;
-      if (r) {
-        e.categories.push(r);
-        const g = {
-          value: r.id.toString(),
-          text: r.name
-        };
-        e.mappedCategories.push(g), e.selectedCategories.push(g), n({
-          type: "success",
-          message: "Category created successfully"
-        });
-      }
-    } catch (a) {
-      o(a, "Error creating category:");
-    } finally {
-      e.loadingCreate = !1;
-    }
-  }, C = (t) => {
-    const a = e.selectedCategories.findIndex((s) => s.value === t.value);
-    a === -1 ? e.selectedCategories.push(t) : e.selectedCategories.splice(a, 1);
-  }, y = (t) => {
-    e.selectedCategories = [...t];
-  }, u = () => {
-    e.selectedCategories = [];
-  }, f = I(() => e.selectedCategories.map((t) => parseInt(t.value))), h = (t) => e.categories.find((a) => a.id === t), w = (t) => e.categories.find((a) => a.name.toLowerCase() === t.toLowerCase());
-  return l && i(), {
-    data: e,
-    fetchCategories: i,
-    createCategory: m,
-    selectCategory: C,
-    setSelectedCategories: y,
-    resetSelection: u,
-    getSelectedCategoryIds: f,
-    getCategoryById: h,
-    getCategoryByName: w
-  };
-};
-export {
-  T as useTemplateCategories
-};

package/dist/composables/useTemplateValidation.d.ts

@@ -1,13 +0,0 @@
-export interface ValidationResult {
-    isValid: boolean;
-    message: string;
-}
-export declare const useTemplateValidation: () => {
-    validationError: import("vue").ComputedRef<string>;
-    isValidating: import("vue").ComputedRef<boolean>;
-    validateTemplateName: (name: string) => Promise<ValidationResult>;
-    clearValidation: () => void;
-    VALIDATION_RULES: {
-        readonly DEBOUNCE_TIME: 500;
-    };
-};

package/dist/composables/useTemplateValidation.js

@@ -1,57 +0,0 @@
-import { useHttp as T } from "./useHttp.js";
-import { useToaster as V } from "./useToaster.js";
-import { useTranslations as N } from "./useTranslations.js";
-import { ref as m, computed as u } from "vue";
-const c = {
-  DEBOUNCE_TIME: 500
-}, I = () => {
-  const { get: d } = T(), { handleError: p } = V(), l = N(), s = m(""), o = m(!1), r = m(null), v = (a) => a.trim() ? {
-    isValid: !0,
-    message: ""
-  } : {
-    isValid: !1,
-    message: l("validation.required-product-name-to-continue", { product: "template" })
-  }, f = async (a) => {
-    try {
-      const i = `/template-library/template-name-exists?name=${encodeURIComponent(a)}`;
-      return (await d(i)).data.status;
-    } catch (e) {
-      return p(e, "Error checking template name:"), !1;
-    }
-  }, E = (a) => (r.value && clearTimeout(r.value), new Promise((e) => {
-    const i = v(a);
-    if (!i.isValid) {
-      s.value = i.message, e(i);
-      return;
-    }
-    o.value = !0, r.value = setTimeout(async () => {
-      try {
-        const t = await f(a.trim()), n = {
-          isValid: !t,
-          message: t ? l("whatsapp-business.template-name-exists") : ""
-        };
-        s.value = n.message, e(n);
-      } catch (t) {
-        const n = {
-          isValid: !1,
-          message: t instanceof Error ? t.message : l("validation.unknown-error")
-        };
-        s.value = n.message, e(n);
-      } finally {
-        o.value = !1;
-      }
-    }, c.DEBOUNCE_TIME);
-  })), g = () => {
-    s.value = "", o.value = !1, r.value && clearTimeout(r.value);
-  };
-  return {
-    validationError: u(() => s.value),
-    isValidating: u(() => o.value),
-    validateTemplateName: E,
-    clearValidation: g,
-    VALIDATION_RULES: c
-  };
-};
-export {
-  I as useTemplateValidation
-};

package/dist/composables/useTemplates.d.ts

@@ -1,5 +0,0 @@
-import type { Template } from '@@/Types/stripo';
-export declare const useTemplates: () => {
-    getDefaultTemplate: () => Promise<Template>;
-    getTemplate: (templateName: string) => Promise<Template>;
-};

package/dist/composables/useTemplates.js

@@ -1,27 +0,0 @@
-const s = () => {
-  const t = async () => {
-    const [e, a] = await Promise.all([
-      // eslint-disable-next-line import/extensions
-      import("../static/templates/default/index.html.js"),
-      import("../static/templates/default/style.css.js")
-    ]);
-    return {
-      html: e.default,
-      css: a.default
-    };
-  };
-  return {
-    getDefaultTemplate: t,
-    getTemplate: async (e) => {
-      switch (e) {
-        case "default":
-          return t();
-        default:
-          return t();
-      }
-    }
-  };
-};
-export {
-  s as useTemplates
-};