wip

_dev/jest.config.js

@@ -8,4 +8,7 @@ module.exports = {
   },
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  errorOnDeprecated: true,
+  verbose: true,
+  forceExit: false,
 };

_dev/launch.json

@@ -0,0 +1,18 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jest Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/node_modules/.bin/jest",
+        "--runInBand"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
+    }
+  ]
+}

_dev/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@pinia/testing": "^0.1.3",
     "@types/jest": "^29.5.12",
-    "jest": "^29.7.0",
+    "jest": "^29.6.2",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.5",
     "vue-feather": "2"

_dev/src/core-logic/store/zoneStore.ts

@@ -32,9 +32,8 @@ export const useZoneStore = defineStore("zone", {
     deleteBlock(blockIndex: number) {
       deleteBlock(this, blockIndex);
     },
-    addComponent(blockIndex: number, componentId: string) {
-      console.debug("Hello");
-      addComponent(this, blockIndex, componentId);
+    addComponent(blockId: string, root: string, componentId: string) {
+      addComponent(this, blockId, root, componentId);
     },
   },
 });

_dev/src/core-logic/tests/addComponent.test.ts

@@ -10,33 +10,33 @@ import { useZoneStore } from "../store/zoneStore";
 
 describe("Add Component", () => {
   const newColumnBlock: BlockContent = {
-    id: "some_random_id",
+    id: "block_id",
     block_id: "columnBlock",
     fields: [
       {
-        id: "some_random_id",
+        id: "title",
         type: "text" as PrimitiveFieldType.TEXT,
         label: "Column block title",
         content: {
           value: "Column title",
         },
       },
       {
-        id: "some_random_id",
+        id: "banner",
         component_id: "banner",
         type: "component",
         label: "Banner",
         fields: [
           {
-            id: "some_random_id",
+            id: "banner_image",
             type: "text" as PrimitiveFieldType.TEXT,
             label: "Image",
             content: {
               value: "BannerImage",
             },
           },
           {
-            id: "some_random_id",
+            id: "banner_intro",
             type: "text" as PrimitiveFieldType.TEXT,
             label: "Intro",
             content: {
@@ -46,7 +46,7 @@ describe("Add Component", () => {
         ],
       },
       {
-        id: "columnComponentId",
+        id: "column",
         component_id: "column",
         type: "repeater",
         label: "Columns",
@@ -73,7 +73,20 @@ describe("Add Component", () => {
       (zoneStore.content[0].fields[2] as Repeater<ComponentContent>)
         .sub_elements
     ).toHaveLength(0);
-    zoneStore.addComponent(0, "undefinedId");
+    zoneStore.addComponent("block_id", "column", "undefinedId");
+    expect(
+      (zoneStore.content[0].fields[2] as Repeater<ComponentContent>)
+        .sub_elements
+    ).toHaveLength(0);
+  });
+
+  it("does not change state if root does not exist", () => {
+    const zoneStore = useZoneStore();
+    expect(
+      (zoneStore.content[0].fields[2] as Repeater<ComponentContent>)
+        .sub_elements
+    ).toHaveLength(0);
+    zoneStore.addComponent("block_id", "undefinedRoot", "card");
     expect(
       (zoneStore.content[0].fields[2] as Repeater<ComponentContent>)
         .sub_elements
@@ -82,16 +95,17 @@ describe("Add Component", () => {
 
   it("adds a new component at indicated place", () => {
     const zoneStore = useZoneStore();
-    zoneStore.addComponent(0, "column");
+    zoneStore.addComponent("block_id", "column", "column");
     expect(
       (zoneStore.content[0].fields[2] as Repeater<ComponentContent>)
         .sub_elements
     ).toHaveLength(1);
+    // expect(1).toEqual(1);
   });
 
-  it("adds component fields to new component", () => {});
+  // it("adds component after existing components", () => {});
 
-  it("adds component after existing components", () => {});
+  // it("adds sub-components", () => {});
 
-  it("adds sub-components", () => {});
+  // it("adds recursively nested components", () => {});
 });

_dev/src/core-logic/tests/finder.test.ts

@@ -1,11 +1,17 @@
+import { findComponentById, findComponentStructure } from "../utils/finder";
+
 import { BlockContent } from "../entities/BlockContent";
+import { BlockStructure } from "../entities/BlockStructure";
+import columnStructure from "./columnStructure.json";
 import filledColumnContent from "./filledColumnContentWithId.json";
-import { findComponentById } from "../utils/finder";
 
 describe("Component finder", () => {
   let blockContent: BlockContent;
+  let blockStructure: BlockStructure;
+
   beforeAll(() => {
     blockContent = filledColumnContent as BlockContent;
+    blockStructure = columnStructure as BlockStructure;
   });
 
   it("finds block id", () => {
@@ -43,4 +49,14 @@ describe("Component finder", () => {
     const component = findComponentById(blockContent, "field_2_1_1_0_0");
     expect(component.parent.id).toEqual("field_2_1_1_0");
   });
+
+  it("finds a 1st level component structure", () => {
+    const componentStructure = findComponentStructure(blockStructure, "banner");
+    expect(componentStructure.label).toEqual("Banner");
+  });
+
+  it("finds a repeated nested component structure", () => {
+    const componentStructure = findComponentStructure(blockStructure, "card");
+    expect(componentStructure.label).toEqual("Cards");
+  });
 });

_dev/src/core-logic/usecases/addComponent.ts

@@ -1,61 +1,53 @@
+import { ComponentContent, FieldContent } from "../entities/ComponentContent";
 import {
   ComponentFieldStructure,
   ComponentStructure,
 } from "../entities/ComponentStructure";
+import { findComponentById, findComponentStructure } from "../utils/finder";
 
 import { BlockContent } from "../entities/BlockContent";
 import { BlockStructure } from "../entities/BlockStructure";
-import { ComponentContent } from "../entities/ComponentContent";
 import { Repeater } from "../entities/Repeater";
 import { buildNewSingleComponentFromStructure } from "../utils/builder";
 
 export const addComponent = (
   zoneStore,
-  blockIndex: number,
-  componentId: string
+  blockId: string,
+  rootId: string,
+  componentStructureId: string
 ) => {
-  console.debug("Coucou");
-  const blockStructure: BlockStructure = zoneStore.getBlockStructure(
-    zoneStore.content[blockIndex].block_id
+  console.debug("coucou");
+  const blockIndex = zoneStore.content.findIndex(
+    (block: BlockContent) => block.id === blockId
   );
   const blockContent: BlockContent = zoneStore.content[blockIndex];
-  const componentStructure: ComponentStructure = findBlockStructure(
+  const blockStructure: BlockStructure = zoneStore.getBlockStructure(blockId);
+  const componentStructure: ComponentStructure = findComponentStructure(
     blockStructure,
-    componentId
+    componentStructureId
   );
-  console.debug("Structure found : " + componentStructure);
   const componentContent: ComponentContent | Repeater<ComponentContent> =
     buildNewSingleComponentFromStructure(componentStructure);
   const newBlockContent = insertNewComponent(
     blockContent,
     componentContent,
-    componentId
+    rootId
   );
   zoneStore.content[blockIndex] = newBlockContent;
-};
-
-const findBlockStructure = (
-  structure: BlockStructure | ComponentStructure,
-  componentId: string
-): ComponentStructure => {
-  return Object.values(structure.fields).find(
-    (field: ComponentFieldStructure) => {
-      if (field.type !== "component") return false;
-      return field.id === componentId;
-    }
-  ) as ComponentStructure;
+  return 2;
 };
 
 const insertNewComponent = (
   content: BlockContent | ComponentContent,
   newComponentContent: ComponentContent,
-  componentId: string
+  rootId: string
 ): BlockContent | ComponentContent => {
-  const repeater = content.fields.find((field) => {
-    if (field.type !== "repeater") return false;
-    field.component_id === componentId;
-  }) as Repeater<ComponentContent>;
-  repeater.sub_elements.push(newComponentContent);
-  console.debug(content);
+  const { node: foundComponent } = findComponentById(content, rootId);
+  if ((foundComponent as FieldContent).type !== "repeater")
+    throw new Error("Cannot insert component into non repeater parent");
+  (foundComponent as Repeater<ComponentContent>).sub_elements.push(
+    newComponentContent
+  );
+  console.log(content);
   return content;
 };

_dev/src/core-logic/utils/finder.ts

@@ -1,6 +1,11 @@
 import { ComponentContent, FieldContent } from "../entities/ComponentContent";
+import {
+  ComponentFieldStructure,
+  ComponentStructure,
+} from "../entities/ComponentStructure";
 
 import { BlockContent } from "../entities/BlockContent";
+import { BlockStructure } from "../entities/BlockStructure";
 import { Repeater } from "../entities/Repeater";
 
 export type SearchComponentResult = {
@@ -46,3 +51,14 @@ const findComponentByIdInRepeater = (
     if (foundElement) return foundElement;
   }
 };
+
+export const findComponentStructure = (
+  structure: BlockStructure | ComponentStructure,
+  componentId: string
+): ComponentStructure => {
+  for (const field of Object.values(structure.fields)) {
+    if (field.type !== "component") continue;
+    if (field.id === componentId) return field;
+    if (field.repeatable) return findComponentStructure(field, componentId);
+  }
+};

_dev/yarn.lock

@@ -2037,7 +2037,7 @@ jest-worker@^29.7.0:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest@^29.0.0, jest@^29.7.0:
+jest@^29.0.0, jest@^29.6.2:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz"
   integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==