@media-quest/builder 0.0.1 → 0.0.2

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Builder library for Media-quest schemas",
-  "main": "./src/public-api.ts",
+  "main": "dist/public-api.js",
+  "module": "dist/public-api.mjs",
+  "types": "dist/public-api.d.ts",
   "license": "MIT",
+  "scripts": {
+    "check": "tsc --watch --noEmit",
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsup src/public-api.ts --format cjs,esm --dts",
+    "prepublishOnly": "npm run build",
+    "postpublish": "npm run clean"
+  },
   "dependencies": {
-    "@media-quest/engine": "0.0.1"
+    "@media-quest/engine": "0.0.2"
   }
 }

package/src/Builder-option.ts

@@ -0,0 +1,67 @@
+import { BuilderObjectId, BuilderObject } from "./BuilderObject";
+import type { BuilderOptionTheme } from "./theme/IDefaultTheme";
+import { DefaultTheme } from "./theme/IDefaultTheme";
+import { AudioFile } from "./media-files";
+
+export interface BuilderOptionDto {
+    readonly id: BuilderObjectId.QuestionOptionID;
+    readonly value: number;
+    readonly label: string;
+    readonly labelAudio?: AudioFile;
+    // readonly theme: BuilderPageTheme['nextButtonTheme'];
+}
+
+export class BuilderOption extends BuilderObject<"builder-question-option", BuilderOptionDto> {
+    readonly objectType = "builder-question-option";
+    theme: BuilderOptionTheme = DefaultTheme.responseButtons;
+
+    id: BuilderObjectId.QuestionOptionID;
+    value: number;
+    label = "";
+    private _labelAudioFile: AudioFile | false = false;
+    get labelAudioFile() {
+        return this._labelAudioFile;
+    }
+    set labelAudioFile(audioFile: AudioFile | false) {
+        this._labelAudioFile = audioFile;
+    }
+
+    private constructor(dto: BuilderOptionDto) {
+        super(dto);
+        this.id = dto.id;
+        this.value = dto.value;
+        this.label = dto.label;
+        // this.theme = dto.theme;
+    }
+    public static create(value: number, label: string) {
+        const id = BuilderObjectId.questionOptionId();
+        const dto: BuilderOptionDto = {
+            id,
+            value,
+            label,
+        };
+        const instance = new BuilderOption(dto);
+        return instance;
+    }
+
+    public static fromJson(dto: BuilderOptionDto) {
+        const instance = new BuilderOption(dto);
+        return instance;
+    }
+
+    toJson(): BuilderOptionDto {
+        const dto: BuilderOptionDto = {
+            id: this.id,
+            value: this.value,
+            label: this.label,
+        };
+        return dto;
+    }
+
+    clone(): BuilderOptionDto {
+        const cloneId = BuilderObjectId.questionOptionId();
+        const dto = this.toJson();
+        const cloneDto: BuilderOptionDto = { ...dto, id: cloneId };
+        return cloneDto;
+    }
+}

package/src/Builder-page.spec.ts

@@ -0,0 +1,313 @@
+import { BuilderPage } from "./Builder-page";
+import type { BuilderPageDto } from "./Builder-page";
+import type { BuilderQuestionDto } from "./Builder-question";
+import { BuilderQuestion } from "./Builder-question";
+import type { BuilderObjectId } from "./BuilderObject";
+import { DUtil } from "@media-quest/engine";
+
+const U = DUtil;
+const deleteIdsFromPage = (page: BuilderPageDto) => {
+  const deleteIdsFromQuestion = (q: BuilderQuestionDto) => {
+    U.deleteProp(q, "id");
+    q.options.forEach((o) => {
+      U.deleteProp(o, "id");
+    });
+  };
+  U.deleteProp(page, "id");
+  page.questions.forEach(deleteIdsFromQuestion);
+  deleteIdsFromQuestion(page.defaultQuestion);
+  return page;
+};
+
+const questionPageDto: BuilderPageDto = {
+  _type: "question",
+  autoplaySequence: [],
+  mainText: {
+    text: "Velkommen til denne undersøkelsen.",
+    audioFile: false,
+    autoplayDelay: 0,
+    autoplay: false,
+  },
+  tags: [],
+
+  nextButton: {
+    id: "next-button-id-5" as BuilderObjectId.QuestionOptionID,
+    label: "Neste",
+    value: -1,
+  },
+  defaultQuestion: {
+    id: "q1" as BuilderObjectId.QuestionID,
+    prefix: "q1",
+    text: "sadf",
+    options: [
+      {
+        id: "q1-opt1" as BuilderObjectId.QuestionOptionID,
+        value: 0,
+        label: "Nei",
+      },
+      {
+        id: "q1-opt2" as BuilderObjectId.QuestionOptionID,
+        value: 1,
+        label: "Ja",
+      },
+      {
+        id: "q1-opt3" as BuilderObjectId.QuestionOptionID,
+        value: 9,
+        label: "Vet ikke",
+      },
+    ],
+    _type: "select-one",
+  },
+  id: "p1" as BuilderObjectId.PageID,
+  prefix: "",
+  questions: [],
+};
+
+const multiQuestionPageDto: BuilderPageDto = {
+  _type: "multi-select",
+  mainText: {
+    text: "Velkommen til denne undersøkelsen.",
+    audioFile: false,
+    autoplay: false,
+    autoplayDelay: 0,
+  },
+  autoplaySequence: [],
+  defaultQuestion: {
+    id: "q1" as BuilderObjectId.QuestionID,
+    prefix: "",
+    text: "",
+    options: [],
+    _type: "select-one",
+  },
+  tags: [],
+  nextButton: {
+    id: "next-button-id-3" as BuilderObjectId.QuestionOptionID,
+    label: "Neste",
+    value: -1,
+  },
+
+  id: "p2" as BuilderObjectId.PageID,
+  prefix: "",
+  questions: [
+    {
+      id: "q3" as BuilderObjectId.QuestionID,
+      prefix: "a",
+      text: "har du..",
+      _type: "select-one",
+      // options: []
+      options: [
+        {
+          id: "q3-opt1" as BuilderObjectId.QuestionOptionID,
+          value: 0,
+          label: "Nei",
+        },
+        {
+          id: "q3-opt2" as BuilderObjectId.QuestionOptionID,
+          value: 1,
+          label: "Ja",
+        },
+        {
+          id: "q3-opt3" as BuilderObjectId.QuestionOptionID,
+          value: 9,
+          label: "Vet ikke",
+        },
+      ],
+    },
+    {
+      id: "q4" as BuilderObjectId.QuestionID,
+      prefix: "a",
+      text: "har du..",
+      _type: "select-one",
+      // options: []
+      options: [
+        {
+          id: "q4-opt1" as BuilderObjectId.QuestionOptionID,
+          value: 0,
+          label: "Nei",
+        },
+        {
+          id: "q4-opt2" as BuilderObjectId.QuestionOptionID,
+          value: 1,
+          label: "Ja",
+        },
+        {
+          id: "q4-opt3" as BuilderObjectId.QuestionOptionID,
+          value: 9,
+          label: "Vet ikke",
+        },
+      ],
+    },
+  ],
+};
+
+let page = BuilderPage.create("info-page", "a");
+
+beforeEach(() => {
+  page = BuilderPage.create("info-page", "a");
+});
+
+describe("Builder Page", () => {
+  test("Can create page, and convert to json, and back", () => {
+    const page1 = BuilderPage.fromJson(questionPageDto);
+    const asJson = page1.toJson();
+    expect(questionPageDto).toStrictEqual(asJson);
+    const page2 = BuilderPage.fromJson(multiQuestionPageDto);
+    const asJson2 = page2.toJson();
+    expect(multiQuestionPageDto).toStrictEqual(asJson2);
+    // expect(page1.prefix).toBe(pageDto.prefix);
+  });
+  test("Can change question type", () => {
+    expect(page.questions.length).toBe(0);
+    page.addQuestion("select-one");
+    page.addQuestion("select-one");
+    expect(page.questions.length).toBe(2);
+    page.pageType = "question";
+    expect(page.questions.length).toBe(0);
+  });
+  test("Can add and delete questions", () => {
+    page.pageType = "multi-select";
+    expect(page.questions.length).toBe(1);
+    const q1 = page.addQuestion("select-one");
+    const q2 = page.addQuestion("select-one");
+    expect(page.questions.length).toBe(3);
+    page.deleteQuestion(q1);
+    expect(page.questions.length).toBe(2);
+    page.deleteQuestion(q2);
+    expect(page.questions.length).toBe(1);
+    // page.pageType = 'question';
+    // expect(page.questions.length).toBe(0);
+  });
+  test("Can add question at concrete index. ", () => {
+    page.pageType = "multi-select";
+    expect(page.questions.length).toBe(1);
+    const q1 = page.addQuestion("select-one", 0);
+    expect(page.questions[0].id).toBe(q1.id);
+    const q2 = page.addQuestion("select-one", 1);
+    expect(page.questions[1].id).toBe(q2.id);
+    expect(page.questions.length).toBe(3);
+    const q3 = page.addQuestion("email", 2);
+    expect(page.questions[2]).toBe(q3);
+    expect(q3.type).toBe("email");
+  });
+  test("Can clone a page and everything except id is equal ", () => {
+    const page1 = BuilderPage.create("info-page", "as");
+    const clone1 = BuilderPage.fromJson(page1.clone());
+    const page1Json = deleteIdsFromPage(page1.clone());
+    const clone1Json = deleteIdsFromPage(page1.clone());
+    expect(page1Json).toStrictEqual(clone1Json);
+
+    const page2 = BuilderPage.fromJson(questionPageDto);
+    const clone2 = BuilderPage.fromJson(page2.clone());
+    const page2Json = deleteIdsFromPage(page2.toJson());
+    const clone2Json = deleteIdsFromPage(clone2.toJson());
+    expect(page2Json).toStrictEqual(clone2Json);
+
+    const page3 = BuilderPage.fromJson(multiQuestionPageDto);
+    const clone3 = BuilderPage.fromJson(page3.clone());
+    const page3Json = deleteIdsFromPage(page3.toJson());
+    const clone3Json = deleteIdsFromPage(clone3.toJson());
+    expect(page3Json).toStrictEqual(clone3Json);
+  });
+  test("Can clone a page and no id is equal", () => {
+    const page1 = BuilderPage.create("info-page", "as");
+    const clone1 = BuilderPage.fromJson(page1.clone());
+    expect(page1.id).not.toBe(clone1.id);
+
+    const testDtoIds = (dto: BuilderPageDto) => {
+      const instance = BuilderPage.fromJson(dto);
+      const clone = BuilderPage.fromJson(instance.clone());
+      const p2QuestionIds = instance.questions.map((q) => q.id);
+      const cloneQuestionIds = clone.questions.map((q) => q.id);
+
+      // expect(instance.id).to.not.eq(clone.id);
+      // expect(instance.defaultQuestion.id).to.not.eq(clone.defaultQuestion.id);
+      expect(p2QuestionIds.length).toBe(cloneQuestionIds.length);
+      p2QuestionIds.forEach((id, index) => {
+        expect(id).not.toBe(cloneQuestionIds[index]);
+      });
+
+      instance.questions.forEach((q, qIndex) => {
+        const cloneQ = clone.questions[qIndex];
+        expect(cloneQ).toBeDefined();
+        expect(q.id).not.toBe(cloneQ.id);
+        q.options.forEach((op, opIndex) => {
+          const cloneOp = cloneQ.options[opIndex];
+          expect(cloneOp).toBeDefined();
+          expect(op.id).not.toBe(cloneOp.id);
+        });
+      });
+
+      // expect(p)
+    };
+    testDtoIds(questionPageDto);
+    testDtoIds(multiQuestionPageDto);
+  });
+  test("Can insert a new Question at index", () => {
+    const page1 = BuilderPage.create("form", "as");
+    const q1 = page1.addQuestion("select-one");
+    const q2 = page1.addQuestion("select-many");
+    expect(page1.questions.length).toBe(3);
+    expect(page1.questions[1]).toBe(q1);
+    const q1Clone = BuilderQuestion.fromJson(q1.clone());
+    const result10 = page1.insertQuestion(q1Clone, 10);
+    expect(result10).toBeFalsy();
+    const result1 = page1.insertQuestion(q1Clone, 1);
+    expect(result1).toBeTruthy();
+    expect(page1.questions[1]).toBe(q1Clone);
+  });
+  test("Can not  insert a duplicate question", () => {
+    const page1 = BuilderPage.create("form", "as");
+    const q1 = page1.addQuestion("select-one");
+    expect(page1.questions.length).toBe(2);
+    expect(page1.questions[1]).toBe(q1);
+    const result1 = page1.insertQuestion(q1, 0);
+    expect(page1.questions.length).toBe(2);
+    expect(result1).toBeFalsy();
+  });
+
+  test("Can move a question", () => {
+    const page1 = BuilderPage.create("form", "as1");
+    const q1 = page1.addQuestion("select-many");
+    const q2 = page1.addQuestion("select-one");
+    const q3 = page1.addQuestion("select-one");
+    const q4 = page1.addQuestion("select-one");
+    expect(page1.questions.length).toBe(5);
+    const m1 = page1.moveQuestion(q1, 0);
+    expect(page1.questions.length).toBe(5);
+    expect(page1.questions[0]).toBe(q1);
+    expect(m1).toBeTruthy();
+    const illegalMove = page1.moveQuestion(q2, -1);
+    expect(illegalMove).toBeFalsy();
+    expect(page1.questions.length).toBe(5);
+    const m3 = page1.moveQuestion(q4, 1);
+    expect(m3).toBe(true);
+    expect(page1.questions[1]).toBe(q4);
+  });
+
+  test("Can not move a question that is not in questions-array", () => {
+    const page1 = BuilderPage.create("form", "as1");
+    const q1 = page1.addQuestion("select-many");
+    const q2 = page1.addQuestion("select-one");
+    expect(page1.questions.length).toBe(3);
+    const newQuestion = BuilderQuestion.create("select-one");
+    const m1 = page1.moveQuestion(newQuestion, 0);
+    expect(page1.questions.length).toBe(3);
+    expect(m1).toBe(false);
+  });
+  test("Can get all rule-variables.", () => {
+    const page = BuilderPage.create("question", "as1");
+    page.mainText.text = "Hva heter du?";
+    page.defaultQuestion.addOption("Ja", 1);
+    page.defaultQuestion.addOption("Nei", 0);
+    const variables = page.getQuestionVariables("ax", 1);
+    const first = variables[0];
+    expect(variables.length).toBe(1);
+    expect(first.options.length).toBe(2);
+    expect(first.options[0].value).toBe(1);
+    expect(first.kind === "question-variable").toBe(true);
+    // const newQuestion = BuilderQuestion.create('select-one');
+    // const m1 = page1.moveQuestion(newQuestion, 0);
+    // expect(page1.questions.length).toBe(3);
+    // expect(m1).toBe(false);
+  });
+});

package/src/Builder-page.ts

@@ -0,0 +1,249 @@
+import type { BuilderQuestionDto, BuilderQuestionType } from "./Builder-question";
+import { BuilderQuestion } from "./Builder-question";
+import { BuilderObject, BuilderObjectId } from "./BuilderObject";
+import type { BuilderOptionDto } from "./Builder-option";
+import { BuilderOption } from "./Builder-option";
+import type { BuilderMainVideoDto } from "./BuilderMainVideoDto";
+import type { BuilderMainImageDto } from "./BuilderMainImageDto";
+import type { BuilderMainTextDto } from "./BuilderMainText";
+import { BuilderMainText } from "./BuilderMainText";
+import { BuilderVariableOption, QuestionVariable } from "./rulebuilder/RuleVariable";
+import { DUtil } from "@media-quest/engine";
+
+const U = DUtil;
+export type BuilderPageType = "info-page" | "question" | "multi-select" | "form";
+
+export interface BuilderPageDto {
+  readonly id: BuilderObjectId.PageID;
+  prefix: string;
+  _type: BuilderPageType;
+  mainText: BuilderMainTextDto;
+  nextButton: BuilderOptionDto;
+  defaultQuestion: BuilderQuestionDto;
+  questions: Array<BuilderQuestionDto>;
+  mainMedia?: BuilderMainImageDto | BuilderMainVideoDto;
+  autoplaySequence: Array<string>;
+  tags: ReadonlyArray<string>;
+}
+
+export class BuilderPage extends BuilderObject<"builder-page", BuilderPageDto> {
+  readonly objectType: "builder-page" = "builder-page";
+  readonly id: BuilderObjectId.PageID;
+  private _pageType: BuilderPageType;
+  private _prefix = "";
+  private _questions: Array<BuilderQuestion> = [];
+  private readonly _tags: Set<string>;
+  private _backgroundColor = "#FFFFFF";
+  mainMedia: BuilderMainVideoDto | BuilderMainImageDto | false = false;
+  defaultQuestion: BuilderQuestion;
+  mainText: BuilderMainText;
+  nextButton = BuilderOption.create(-1, "Neste");
+
+  public static create(type: BuilderPageType, _prefix: string) {
+    const id = BuilderObjectId.pageId();
+    const mainTextDto: BuilderMainTextDto = {
+      text: "",
+      audioFile: false,
+      autoplay: false,
+      autoplayDelay: 0,
+    };
+    const nextButtonDto = BuilderOption.create(-1, "page-next-button-text").toJson();
+    const defaultQuestionDto = BuilderQuestion.create("select-one").toJson();
+    const dto: BuilderPageDto = {
+      _type: type,
+      autoplaySequence: [],
+      defaultQuestion: defaultQuestionDto,
+      id,
+      nextButton: nextButtonDto,
+      mainText: mainTextDto,
+      prefix: "",
+      questions: [],
+      tags: [],
+    };
+
+    const page = new BuilderPage(dto);
+    return page;
+  }
+  public static fromJson(dto: BuilderPageDto): BuilderPage {
+    const page = new BuilderPage(dto);
+    return page;
+  }
+
+  private constructor(dto: BuilderPageDto) {
+    super(dto);
+    this.id = dto.id;
+    this._pageType = dto._type;
+    this._prefix = dto.prefix;
+    this.mainText = BuilderMainText.fromJson(dto.mainText);
+    this.nextButton = BuilderOption.fromJson(dto.nextButton);
+    this.defaultQuestion = BuilderQuestion.fromJson(dto.defaultQuestion);
+    this._questions = dto.questions.map((q) => BuilderQuestion.fromJson(q));
+    const tagList: string[] = Array.isArray(dto.tags) ? dto.tags : [];
+    this._tags = new Set(tagList);
+    if (dto.mainMedia) {
+      this.mainMedia = dto.mainMedia;
+    }
+    this.updateRows();
+  }
+
+  insertQuestion(question: BuilderQuestion, atIndex: number): boolean {
+    const validIndexFn = U.isInRange(0, this._questions.length);
+    if (!validIndexFn(atIndex)) {
+      return false;
+    }
+    const hasQuestion = !!this._questions.find((q) => q.id === question.id);
+    if (hasQuestion) {
+      return false;
+    }
+    this._questions.splice(atIndex, 0, question);
+    return true;
+  }
+
+  addQuestion(type: BuilderQuestionType, atIndex = -1): BuilderQuestion {
+    const question = BuilderQuestion.create(type);
+    if (atIndex < this._questions.length && atIndex >= 0) {
+      this._questions.splice(atIndex, 0, question);
+    } else {
+      this._questions.push(question);
+    }
+    return question;
+  }
+
+  /**
+   * Move a question in questions-array
+   * @param question (reference)
+   * @param toIndex
+   */
+  moveQuestion(question: BuilderQuestion, toIndex: number): boolean {
+    const validToIndexFn = U.isInRange(0, this._questions.length);
+    if (!validToIndexFn(toIndex)) {
+      return false;
+    }
+    const currentIndex = this._questions.indexOf(question);
+    if (currentIndex < 0) {
+      return false;
+    }
+    this._questions.splice(currentIndex, 1);
+    this._questions.splice(toIndex, 0, question);
+    return true;
+  }
+
+  deleteQuestion(question: BuilderQuestion) {
+    this._questions = this._questions.filter((q) => q !== question);
+    // TODO EMIT DELETED QUESTION.
+    this.updateRows();
+  }
+  private updateRows() {
+    if (this._pageType === "question" || this._pageType === "info-page") {
+      this._questions = [];
+    }
+    if (this._pageType === "form" && this._questions.length === 0) {
+      this._questions = [];
+      this.addQuestion("text");
+    }
+    if (this._pageType === "multi-select" && this._questions.length === 0) {
+      this._questions = [];
+      this.addQuestion("text");
+    }
+  }
+
+  public addTag(tag: string) {
+    this._tags.add(tag);
+  }
+  public deleteTag(tag: string) {
+    this._tags.delete(tag);
+  }
+
+  set pageType(value: BuilderPageType) {
+    this._pageType = value;
+    // TODO Emit All questions that are deleted? Listen for removed variables??
+    this.updateRows();
+  }
+
+  getQuestionVariables(modulePrefix: string, pageNumber: number): ReadonlyArray<QuestionVariable> {
+    const variables: QuestionVariable[] = [];
+
+    if (this._pageType === "question") {
+      const pagePrefix = this.prefix;
+      const id = modulePrefix ? modulePrefix + "_" + pagePrefix : pagePrefix;
+      const label = this.mainText.text;
+      const op = this.defaultQuestion.options.map((o) => {
+        const label = o.label;
+        const value = o.value;
+        return new BuilderVariableOption(label, value);
+      });
+      const singleVar = new QuestionVariable(id, label, op, pageNumber);
+      variables.push(singleVar);
+    }
+    return variables;
+  }
+
+  get tags(): ReadonlyArray<string> {
+    return [...this._tags];
+  }
+  get pageType() {
+    return this._pageType;
+  }
+
+  get prefix() {
+    return this._prefix;
+  }
+
+  set prefix(value: string) {
+    this._prefix = value;
+  }
+
+  toJson(): BuilderPageDto {
+    const questions = this._questions.map((q) => q.toJson());
+    const mainText = this.mainText.toJson();
+    const nextButton = this.nextButton.toJson();
+    const mainMedia = this.mainMedia;
+    const dto: BuilderPageDto = {
+      _type: this.pageType,
+      mainText,
+      autoplaySequence: [],
+      nextButton,
+      id: this.id,
+      tags: [...this.tags],
+      prefix: this._prefix,
+      defaultQuestion: this.defaultQuestion.toJson(),
+      questions,
+    };
+    if (mainMedia) {
+      dto.mainMedia = mainMedia;
+    }
+    return dto;
+  }
+
+  clone(): BuilderPageDto {
+    const dto = this.toJson();
+    const defaultQuestionClone = this.defaultQuestion.clone();
+    const mainTextClone = JSON.parse(JSON.stringify(this.mainText));
+    // const pagesClone = this
+    const questionsClone = this.questions.map((q) => q.clone());
+    const newId = BuilderObjectId.pageId();
+    const clone: BuilderPageDto = {
+      ...dto,
+      id: newId,
+      defaultQuestion: defaultQuestionClone,
+      mainText: mainTextClone,
+      questions: questionsClone,
+    };
+    // const cloneDto
+    return clone;
+  }
+
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+
+  set backgroundColor(color: string) {
+    if (typeof color === "string") {
+      this._backgroundColor = color;
+    }
+  }
+
+  get questions(): ReadonlyArray<BuilderQuestion> {
+    return this._questions;
+  }
+}