Integrate presets into Creator

.eslintignore

@@ -9,6 +9,7 @@ example/
 examples/
 .gitignore
 webpack.config.js
+webpack.presets.config.js
 index.js
 copy-vrt-tests.js
 copy-src-tests.js

.eslintrc.js

@@ -120,7 +120,10 @@ module.exports = {
       }
     },
     {
-      "files": ["packages/survey-creator-core/src/localization/*.ts"],
+      "files": [
+        "packages/survey-creator-core/src/localization/*.ts",
+        "packages/survey-creator-core/src/presets/localization/*.ts"
+      ],
       "rules": {
         "surveyjs/eslint-plugin-i18n/only-english-or-code": "off"
       }

e2e/helper.ts

@@ -2,6 +2,12 @@ import type { Locator, Page } from "@playwright/test";
 import { expect, test as baseTest } from "@playwright/test";
 
 export const url = "http://127.0.0.1:8080/testCafe/testcafe";
+export const urlByPage = "http://127.0.0.1:8080/testCafe/by-page";
+export const urlPreviewThemeSwitcher = "http://127.0.0.1:8080/testCafe/preview-theme-switcher";
+export const urlThemeForPreview = "http://127.0.0.1:8080/testCafe/theme-for-preview-option";
+export const urlDropdownCollapseView = "http://127.0.0.1:8080/testCafe/dropdown-collapse-view";
+export const urlLocalized_de = "http://127.0.0.1:8080/testCafe/testcafe_localized_ui";
+export const urlPresets = "http://127.0.0.1:8080/testCafe/presets";
 
 export async function compareScreenshot(page: Page, elementSelector: string | Locator | undefined, screenshotName: string, elementIndex = 0) {
   let currentElement = elementSelector;
@@ -42,17 +48,41 @@ export const setJSON = async (page: Page, json: object) => {
   }, json);
 };
 
-export async function doDrag({ page, element, target, options }: { page: Page, element: Locator, target: Locator, options: any }):Promise<void> {
-  await element.hover({ force: true });
+interface IDragToElementOptions {
+  elementPosition?: {x: number, y: number};
+  targetPosition?: {x: number, y: number};
+  steps?: number;
+}
+
+export async function doDrag({ page, element, target, options }: { page: Page, element: Locator, target: Locator, options?: IDragToElementOptions }):Promise<void> {
+  if (options?.elementPosition) {
+    await element.hover({ force: true, position: { x: (options.targetPosition?.x || 0), y: (options.targetPosition?.y || 0) } });
+  } else {
+    await element.hover({ force: true });
+  }
   await page.mouse.down();
+  await target.scrollIntoViewIfNeeded();
   const { x, y, width, height } = await <any>target.boundingBox();
 
-  await page.mouse.move(x + width / 2 + (options.destinationOffsetX || 0), y + height / 2 + (options.destinationOffsetY || 0), { steps: 20 });
+  if (options?.targetPosition) {
+    await page.mouse.move(x + (options?.targetPosition?.x || 0), y + (options?.targetPosition?.y || 0), { steps: options?.steps || 20 });
+  } else {
+    await page.mouse.move(x + width / 2, y + height / 2, { steps: options?.steps || 20 });
+
+  }
 }
 
-export async function doDragDrop({ page, element, target, options }: { page: Page, element: Locator, target: Locator, options: any }):Promise<void> {
+export async function doDragDrop({ page, element, target, options }: { page: Page, element: Locator, target: Locator, options?: IDragToElementOptions }):Promise<void> {
   await doDrag({ page, element, target, options: options || {} });
   await page.mouse.up();
 }
 
+export async function showCreatorSettings(page) {
+  await page.locator(".svc-sidebar-tabs__bottom-container .svc-menu-action__button").click();
+}
+export async function showPresets(page) {
+  await showCreatorSettings(page);
+  await page.locator(".sps-launch__card").click();
+}
+
 export { expect };

e2e/presets.spec.ts

@@ -0,0 +1,169 @@
+import { urlPresets, test, expect, showPresets, doDragDrop } from "./helper";
+
+const title = "Presets";
+async function getRowsInputValues(matrix: any) {
+  const values = await matrix.locator("tr input").evaluateAll((inputs: any) =>
+    inputs.map((input: any) => (input as HTMLInputElement).value)
+  );
+  return values;
+}
+
+async function getTabsTexts(page: any) {
+  return (await page.locator(".svc-tabbed-menu-item").filter({ visible: true }).allTextContents()).map(t => t.trim());
+}
+
+async function getToolboxTexts(page: any) {
+  return (await page.locator(".svc-toolbox__item-title").filter({ visible: true }).allTextContents()).map(t => t.trim());
+}
+
+test.describe(title, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.waitForLoadState("networkidle");
+    await page.goto(`${urlPresets}`);
+    await page.setViewportSize({ width: 1440, height: 1400 });
+    await showPresets(page);
+  });
+
+  test("Check presets tabs", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Tabs").click();
+
+    const items = page.locator(".sps-question--matrixdynamic table").nth(0);
+    const hidden = page.locator(".sps-question--matrixdynamic table").nth(1);
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Themes", "JSON Editor"]);
+    expect(await getTabsTexts(page)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+
+    await items.locator("tr").nth(1).getByTitle("Delete").click();
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Logic", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Themes", "JSON Editor", "Preview"]);
+    expect(await getTabsTexts(page)).toEqual(["Designer", "Logic", "Translations"]);
+
+    await hidden.locator("tr").nth(1).getByTitle("Add").click();
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Logic", "Translations", "JSON Editor"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Themes", "Preview"]);
+    expect(await getTabsTexts(page)).toEqual(["Designer", "Logic", "Translations", "JSON Editor"]);
+  });
+
+  test("Check presets tabs - drag-drop", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Tabs").click();
+
+    const items = page.locator(".sps-question--matrixdynamic table").nth(0);
+    const hidden = page.locator(".sps-question--matrixdynamic table").nth(1);
+
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Themes", "JSON Editor"]);
+    expect(await getTabsTexts(page)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+
+    await doDragDrop({ page, element: items.locator("tr").nth(1).locator(".sd-table__cell--drag"), target: hidden, options: { targetPosition: { x: 5, y: 5 } } });
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Logic", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Preview", "Themes", "JSON Editor"]);
+    expect(await getTabsTexts(page)).toEqual(["Designer", "Logic", "Translations"]);
+
+    await doDragDrop({ page, element: hidden.locator("tr").nth(2).locator(".sd-table__cell--drag"), target: items, options: { targetPosition: { x: 5, y: 5 } } });
+    expect(await getRowsInputValues(items)).toEqual(["JSON Editor", "Designer", "Logic", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Preview", "Themes"]);
+    expect(await getTabsTexts(page)).toEqual(["JSON Editor", "Designer", "Logic", "Translations"]);
+
+    await doDragDrop({ page, element: items.locator("tr").nth(1).locator(".sd-table__cell--drag"), target: items.locator("tr").nth(3).locator(".sd-table__cell--drag"), options: { targetPosition: { x: 5, y: 5 } } });
+    expect(await getRowsInputValues(items)).toEqual(["JSON Editor", "Logic", "Designer", "Translations"]);
+    expect(await getRowsInputValues(hidden)).toEqual(["Preview", "Themes"]);
+    expect(await getTabsTexts(page)).toEqual(["JSON Editor", "Logic", "Designer", "Translations"]);
+  });
+
+  test("Check presets tabs - edit", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Tabs").click();
+    const items = page.locator(".sps-question--matrixdynamic table").nth(0);
+
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+    expect(await items.locator("tr").nth(0).locator(".sps-action-button--icon use").nth(0).getAttribute("xlink:href")).toBe("#icon-wrench-24x24");
+
+    await page.getByRole("row", { name: "Designer" }).hover();
+    await page.getByRole("row", { name: "Designer" }).getByRole("button").nth(1).click();
+    await page.getByRole("textbox", { name: "Title", exact: true }).fill("Designer1");
+    await page.getByRole("combobox", { name: "Icon name" }).focus();
+    await page.waitForTimeout(500);
+    await page.getByRole("combobox", { name: "Icon name" }).click();
+    await page.getByText("icon-actual-size-24x24").click();
+    await page.getByRole("button", { name: "Apply" }).click();
+    expect(await items.locator("tr").nth(0).locator(".sps-action-button--icon use").nth(0).getAttribute("xlink:href")).toBe("#icon-actual-size-24x24");
+    expect(await getRowsInputValues(items)).toEqual(["Designer1", "Preview", "Logic", "Translations"]);
+
+    await page.getByRole("row", { name: "Designer1" }).hover();
+    expect(await page.getByRole("row", { name: "Designer1" }).getByRole("button").nth(1)).toBeVisible();
+    await page.getByRole("row", { name: "Designer1" }).getByRole("button").nth(1).click();
+    await page.getByRole("button", { name: "Reset to default" }).waitFor({ state: "visible" });
+    await page.getByRole("button", { name: "Reset to default" }).click();
+    await page.getByRole("button", { name: "Apply" }).click();
+    expect(await items.locator("tr").nth(0).locator(".sps-action-button--icon use").nth(0).getAttribute("xlink:href")).toBe("#icon-wrench-24x24");
+    expect(await getRowsInputValues(items)).toEqual(["Designer", "Preview", "Logic", "Translations"]);
+  });
+
+  test("Check presets toolbox", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Toolbox").click();
+    expect((await getToolboxTexts(page)).slice(0, 3)).toEqual(["Radio Button Group", "Rating Scale", "Slider"]);
+
+    const items = page.locator(".sps-row--multiple > div").nth(0).locator(".sps-question--matrixdynamic table").nth(0);
+    const hidden = page.locator(".sps-row--multiple > div").nth(1).locator(".sps-question--matrixdynamic table").nth(0);
+    await items.getByRole("row", { name: "Choice Questions" }).locator("#show-detail").getByRole("button").click();
+    await items.getByRole("row", { name: "Slider" }).getByRole("button").nth(3).click();
+    await items.getByText("Remove from Toolbox").click();
+    expect((await getToolboxTexts(page)).slice(0, 3)).toEqual(["Radio Button Group", "Rating Scale", "Checkboxes"]);
+
+    await hidden.getByRole("button", { name: "More" }).nth(0).click();
+    await hidden.getByRole("menuitem", { name: "Text Input Questions" }).locator("span").click();
+    expect((await getToolboxTexts(page)).slice(9, 13)).toEqual(["Single-Line Input", "Long Text", "Multiple Textboxes", "Slider"]);
+
+    await items.getByRole("button", { name: "Collapse" }).click();
+    await items.getByRole("button", { name: "Delete" }).nth(2).click();
+    expect((await getToolboxTexts(page)).slice(12, 14)).toEqual(["Slider", "Single-Select Matrix"]);
+
+    await hidden.getByRole("button", { name: "More" }).first().click();
+
+    await hidden.getByText("Move to new category").click();
+    expect((await getToolboxTexts(page)).slice(20, 21)).toEqual(["Panel"]);
+  });
+
+  test("Check presets tabs - drag-drop categories", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Toolbox").click();
+    expect((await getToolboxTexts(page)).slice(0, 3)).toEqual(["Radio Button Group", "Rating Scale", "Slider"]);
+
+    const items = page.locator(".sps-row--multiple > div").nth(0).locator(".sps-question--matrixdynamic table").nth(0);
+    const hidden = page.locator(".sps-row--multiple > div").nth(1).locator(".sps-question--matrixdynamic table").nth(0);
+
+    expect(await getRowsInputValues(items)).toEqual(["Choice Questions", "Text Input Questions", "Containers", "Matrix Questions", "Misc"]);
+    expect(await getRowsInputValues(hidden)).toEqual([]);
+    expect((await getToolboxTexts(page)).slice(0, 4)).toEqual(["Radio Button Group", "Rating Scale", "Slider", "Checkboxes"]);
+
+    await doDragDrop({ page, element: items.locator("tr").filter({ visible: true }).nth(2).locator(".sd-table__cell--drag"), target: items.locator("tr").filter({ visible: true }).nth(0).locator(".sd-table__cell--drag"), options: { targetPosition: { x: 5, y: 5 } } });
+    expect(await getRowsInputValues(items)).toEqual(["Containers", "Choice Questions", "Text Input Questions", "Matrix Questions", "Misc"]);
+    expect(await getRowsInputValues(hidden)).toEqual([]);
+    expect((await getToolboxTexts(page)).slice(0, 4)).toEqual(["Panel", "Dynamic Panel", "Radio Button Group", "Rating Scale"]);
+  });
+
+  test("Check presets toolbox - drag-drop items", async ({ page }) => {
+    await page.locator(".sps-list__container").getByText("Toolbox").click();
+    expect((await getToolboxTexts(page)).slice(0, 3)).toEqual(["Radio Button Group", "Rating Scale", "Slider"]);
+
+    const items = page.locator(".sps-row--multiple > div").nth(0).locator(".sps-question--matrixdynamic table").nth(0);
+    const hidden = page.locator(".sps-row--multiple > div").nth(1).locator(".sps-question--matrixdynamic table").nth(0);
+    await items.getByRole("row", { name: "Choice Questions" }).locator("#show-detail").getByRole("button").click();
+    await doDragDrop({ page, element: items.getByRole("row", { name: "Slider" }).locator(".sd-table__cell--drag"), target: hidden, options: { targetPosition: { x: 5, y: 5 } } });
+
+    expect((await getToolboxTexts(page)).slice(0, 3)).toEqual(["Radio Button Group", "Rating Scale", "Checkboxes"]);
+
+    await items.getByRole("row", { name: "Text Input Questions" }).locator("#show-detail").getByRole("button").click();
+    await doDragDrop({ page, element: hidden.getByRole("row", { name: "Slider" }).locator(".sd-table__cell--drag"), target: items.getByRole("row", { name: "Multiple Textboxes" }), options: { targetPosition: { x: 25, y: 25 } } });
+
+    expect((await getToolboxTexts(page)).slice(9, 13)).toEqual(["Single-Line Input", "Long Text", "Slider", "Multiple Textboxes"]);
+
+    await doDragDrop({ page, element: items.getByRole("row", { name: "Long Text" }).locator(".sd-table__cell--drag"), target: items.getByRole("row", { name: "Ranking" }), options: { targetPosition: { x: 5, y: 5 } } });
+    expect((await getToolboxTexts(page)).slice(7, 12)).toEqual(["Image Picker", "Long Text", "Ranking", "Single-Line Input", "Slider"]);
+
+    await items.getByRole("row", { name: "Rating" }).locator("#show-detail").getByRole("button").click();
+    await doDragDrop({ page, element: items.getByRole("row", { name: "Slider" }).locator(".sd-table__cell--drag"), target: items.getByRole("row", { name: "Stars" }) });
+    await page.locator(".svc-toolbox__item-submenu-button").nth(0).hover();
+    expect(await page.locator(".svc-toolbox-subtypes .sv-popup__container").filter({ visible: true })).toBeVisible();
+    expect((await page.locator(".svc-toolbox__item-subtype").filter({ visible: true }).allTextContents()).map(t => t.trim())).toEqual(["Labels", "Stars", "Slider", "Smileys"]);
+  });
+
+});

packages/survey-creator-angular/angular.json

@@ -78,7 +78,8 @@
             ],
             "styles": [
               "./node_modules/survey-core/survey-core.css",
-              "./node_modules/survey-creator-core/survey-creator-core.css"
+              "./node_modules/survey-creator-core/survey-creator-core.css",
+              "./node_modules/survey-creator-core/presets/index.css"
             ],
             "scripts": []
           },

packages/survey-creator-angular/example/angular-ui/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { AppComponent } from "./app.component";
 import { SurveyCreatorModule } from "survey-creator-angular";
+import { PresetsModule } from "survey-creator-angular/presets";
 import { SurveyModule } from "survey-angular-ui";
 import { ExampleComponent } from "./example.component";
 import { AppRoutingModule } from "./router.module";
@@ -17,13 +18,14 @@ import { TestDropdownCollapseComponent } from "./test/dropdown-collapse.componen
 import { TestLocalizationComponent } from "./test/localization.component";
 import { ThemeTabComponent } from "./test/test-theme-tab.component";
 import { NoLicenseComponent } from "./test/test-no-license.component";
+import { PresetsComponent } from "./test/presets.component";
 
 @NgModule({
   declarations: [
-    AppComponent, ExampleComponent, TestDefaultComponent, TestThemeSwitcherComponent, ThemePreviewComponent, TestByPageComponent, TestCustomWidgetComponent, TestDropdownCollapseComponent, TestLocalizationComponent, ThemeTabComponent, NoLicenseComponent
+    AppComponent, ExampleComponent, TestDefaultComponent, TestThemeSwitcherComponent, ThemePreviewComponent, TestByPageComponent, TestCustomWidgetComponent, TestDropdownCollapseComponent, TestLocalizationComponent, ThemeTabComponent, NoLicenseComponent, PresetsComponent
   ],
   imports: [
-    BrowserModule, SurveyCreatorModule, FormsModule, SurveyModule, AppRoutingModule
+    BrowserModule, SurveyCreatorModule, FormsModule, SurveyModule, AppRoutingModule, PresetsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

packages/survey-creator-angular/example/angular-ui/src/app/example.component.ts

@@ -4,7 +4,8 @@ import { SurveyCreatorModel } from "survey-creator-core";
 import * as Survey from "survey-core";
 import "survey-core/survey.i18n";
 import "survey-creator-core/survey-creator-core.i18n";
-
+import "survey-creator-core/presets/index.css";
+import { TabPresetsPlugin } from "survey-creator-core/presets";
 const json = {
   "logoPosition": "right",
   "completedHtml": "<h3>Thank you for your feedback.</h3><h5>Your thoughts and ideas will help us to create a great product!</h5>",
@@ -85,6 +86,7 @@ export class ExampleComponent {
     this.creator.JSON = json;
     (<any>window).creator = this.creator;
     (<any>window).Survey = Survey;
+    new TabPresetsPlugin(this.creator)
   }
 
   public survey = new SurveyModel(json);

packages/survey-creator-angular/example/angular-ui/src/app/router.module.ts

@@ -9,6 +9,7 @@ import { TestThemeSwitcherComponent } from "./test/theme-switcher.component";
 import { TestLocalizationComponent } from "./test/localization.component";
 import { ThemeTabComponent } from "./test/test-theme-tab.component";
 import { NoLicenseComponent } from "./test/test-no-license.component";
+import { PresetsComponent } from "./test/presets.component";
 import { ExampleComponent } from "./example.component";
 
 const routes = [
@@ -21,6 +22,7 @@ const routes = [
   { path: "testCafe/dropdown-collapse-view", component: TestDropdownCollapseComponent },
   { path: "testCafe/testcafe-theme-tab", component: ThemeTabComponent },
   { path: "testCafe/testcafe-no-license", component: NoLicenseComponent },
+  { path: "testCafe/presets", component: PresetsComponent },
   { path: "", component: ExampleComponent }
 ];
 

packages/survey-creator-angular/example/angular-ui/src/app/test/presets.component.ts

@@ -0,0 +1,25 @@
+import { Component, ViewEncapsulation } from "@angular/core";
+import { SurveyCreatorModel } from "survey-creator-core";
+import { settings } from "survey-core";
+import { TestDefaultComponent } from "./default.component";
+import { TabPresetsPlugin } from "survey-creator-core/presets";
+@Component({
+  selector: "test-theme-preview",
+  templateUrl: "./test.component.html",
+  encapsulation: ViewEncapsulation.None
+})
+export class PresetsComponent extends TestDefaultComponent {
+  constructor() {
+    super();
+  }
+  protected override getSlk(): boolean { return false; }
+  protected override createCreator(): void {
+    this.creator = new SurveyCreatorModel({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true, showJSONEditorTab: false });
+    this.creator.tabResponsivenessMode = "menu";
+    this.creator["animationEnabled"] = false;
+    settings.animationEnabled = false;
+    this.creator.allowZoom = false;
+    this.creator.showOneCategoryInPropertyGrid = true;
+    new TabPresetsPlugin(this.creator);
+  }
+}

packages/survey-creator-angular/ng-package.json

@@ -1,6 +1,7 @@
 {
   "$schema": "node_modules/ng-packagr/ng-package.schema.json",
   "dest": "./build",
+  "deleteDestPath": false,
   "lib": {
     "entryFile": "src/angular-ui.ts"
   }