[TASK] !!! Make extension TYPO3 12 compatible

.devbox/composer.json

@@ -1,45 +1,45 @@
 {
-    "name": "friendsoftypo3/extension-builder-devbox",
-    "type": "project",
-    "description": "Devbox for Extension Builder",
-    "homepage": "https://github.com/FriendsOfTYPO3/extension_builder",
-    "support": {
-        "issues": "https://github.com/FriendsOfTYPO3/extension_builder/issues"
-    },
-    "license": "GPL-3.0",
-    "authors": [
-        {
-            "name": "Philipp Kuhlmay",
-            "email": "[email protected]",
-            "role": "Developer"
-        }
-    ],
-    "require": {
-        "typo3/minimal": "^11.5",
-        "typo3/cms-introduction": "~4.0",
-        "typo3/cms-belog": "^10.4 || ^11.5",
-        "bk2k/bootstrap-package": "^12",
-        "helhum/typo3-console": "*",
-        "friendsoftypo3/extension-builder": "*@dev"
-    },
-    "repositories": [
-        {
-            "type": "path",
-            "url": "./packages"
-        }
-    ],
-    "config": {
-        "vendor-dir": "vendor",
-        "bin-dir": "bin",
-        "allow-plugins": {
-            "typo3/cms-composer-installers": true,
-            "typo3/class-alias-loader": true
-        }
-    },
-    "extra": {
-        "typo3/cms": {
-            "cms-package-dir": "{$vendor-dir}/typo3/cms",
-            "web-dir": "public"
-        }
+  "name": "friendsoftypo3/extension-builder-devbox",
+  "type": "project",
+  "description": "Devbox for Extension Builder",
+  "homepage": "https://github.com/FriendsOfTYPO3/extension_builder",
+  "support": {
+    "issues": "https://github.com/FriendsOfTYPO3/extension_builder/issues"
+  },
+  "license": "GPL-3.0",
+  "authors": [
+    {
+      "name": "Philipp Kuhlmay",
+      "email": "[email protected]",
+      "role": "Developer"
     }
+  ],
+  "require": {
+    "typo3/minimal": "^11.5",
+    "typo3/cms-introduction": "~4.0",
+    "typo3/cms-belog": "^10.4 || ^11.5",
+    "bk2k/bootstrap-package": "^12",
+    "helhum/typo3-console": "*",
+    "friendsoftypo3/extension-builder": "*@dev"
+  },
+  "repositories": [
+    {
+      "type": "path",
+      "url": "./packages"
+    }
+  ],
+  "config": {
+    "vendor-dir": "vendor",
+    "bin-dir": "bin",
+    "allow-plugins": {
+      "typo3/cms-composer-installers": true,
+      "typo3/class-alias-loader": true
+    }
+  },
+  "extra": {
+    "typo3/cms": {
+      "cms-package-dir": "{$vendor-dir}/typo3/cms",
+      "web-dir": "public"
+    }
+  }
 }

.editorconfig

@@ -14,11 +14,12 @@ trim_trailing_whitespace = true
 
 # TS/JS-Files
 [*.{ts,js}]
-indent_size = 2
+indent_size = 4
 
 # JSON-Files
 [*.json]
-indent_style = tab
+indent_style = space
+indent_size = 4
 
 # ReST-Files
 [{*.rst,*.rstt}]
@@ -55,8 +56,10 @@ indent_size = 2
 [{_.htaccess,.htaccess,htaccess.t}]
 indent_style = tab
 
-[*{.phpt,htmlt}]
+[*{.phpt,htmlt,.php}]
 insert_final_newline = false
+indent_style = space
+indent_size = 4
 
 # Makefile
 [{Makefile,**.mk}]

.env

@@ -0,0 +1 @@
+PUBLIC_URL=.Build

.github/workflows/test-documentation.yml

@@ -7,10 +7,10 @@ jobs:
     name: documentation
     runs-on: ubuntu-latest
     steps:
-      - name: "Checkout code"
+      - name: Checkout
         uses: actions/checkout@v4
 
-      - name: "Test if the documentation will render without warnings"
+      - name: Test if the documentation will render without warnings
         run: |
           mkdir -p Documentation-GENERATED-temp \
           && docker run --rm --pull always -v $(pwd):/project \

.github/workflows/tests.yml

@@ -16,8 +16,8 @@ jobs:
       fail-fast: true
       matrix:
         os: [ubuntu-latest]
-        php: [7.4, 8.0, 8.1, 8.2, 8.3]
-        typo3: [^11.5]
+        php: [8.1, 8.2, 8.3]
+        typo3: [^12.2]
 
     name: P${{ matrix.php }} - T${{ matrix.typo3 }}
 

.gitignore

@@ -29,3 +29,6 @@ sass-lint.html
 .devbox/.ddev/providers/
 .devbox/.ddev/xhprof/
 .devbox/.ddev/composer.lock
+.phpunit.cache
+coverage
+.phpunit.result.cache

Build/Scss/App.scss

@@ -0,0 +1,54 @@
+$transition-timing: 0.5s ease;
+$btn-background: #F4F4F4;
+$generic-z-index: 1;
+
+#settings-column, #right-column {
+    height: 100vh;
+    z-index: $generic-z-index;
+    transition: $transition-timing;
+}
+
+#settings-column {
+    width: 400px;
+    overflow-y: auto;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+#right-column {
+    position: absolute;
+    left: 0;
+    overflow-y: hidden;
+}
+
+.no-padding {
+    padding: 0 !important;
+}
+
+#show-advanced-options,
+#btn-sidebar-collapse {
+    z-index: 999999999;
+    top: 80px;
+    position: fixed;
+    transition: left $transition-timing;
+    color: #515151;
+    background-color: $btn-background;
+    border-color: $btn-background;
+
+    &.collapsed {
+        left: 20px;
+    }
+
+    &.expanded {
+        left: 415px;
+    }
+}
+
+#show-advanced-options {
+    top: 30px;
+}

Build/Scss/ReactFlow/Nodes/customModel.scss

@@ -0,0 +1,74 @@
+$custom-model-accordion-padding: 0.5rem;
+$gray: #CCC;
+$light-gray: #777;
+$orange: #DFA23A;
+$dark-orange: #FF8700;
+
+@mixin fullWidth {
+    width: 100%;
+}
+.custom-model-node {
+    @include fullWidth;
+    min-width: 300px;
+    border: 1px solid $gray;
+    padding: 5px;
+    border-radius: 5px;
+    background: #FFF;
+
+    .custom-model-node__header {
+        height: 70px;
+    }
+
+    label {
+        display: block;
+        color: $light-gray;
+        font-size: 12px;
+    }
+
+    .react-flow__handle {
+        width: 20px;
+        height: 20px;
+        top: -10px;
+        background-color: $orange;
+        border: 3px solid $orange;
+    }
+
+    input[type="text"],
+    textarea {
+        @include fullWidth;
+    }
+
+    .drag-handle {
+        @include fullWidth;
+        width:42%;
+        background-color: $dark-orange;
+        position: absolute;
+        top: -24px;
+        left: 29%;
+        min-width: 20px;
+        min-height: 30px;
+        border-radius: 4px;
+        border: 2px solid $dark-orange;
+    }
+
+    .accordion-header {
+        .accordion-button {
+            padding: 5px $custom-model-accordion-padding;
+        }
+    }
+
+    .accordion-body {
+        padding-left: $custom-model-accordion-padding;
+        padding-right: $custom-model-accordion-padding;
+    }
+
+    .relation {
+        margin-top: -20px;
+    }
+
+    .btn-delete-node {
+        position: absolute;
+        top: -7px;
+        right: -7px;
+    }
+}

Build/Scss/ReactFlow/_sidebar.scss

@@ -0,0 +1,4 @@
+.react-flow__sidebar {
+    overflow-y: scroll;
+    background-color: #FEDCBA;
+}

Build/Scss/ReactFlow/reactflow.scss

@@ -0,0 +1,52 @@
+$dndflow-border-color: #1A192B;
+$aside-background: #FCFCFC;
+$aside-border-color: #EEE;
+$description-margin: 10px;
+$dndnode-border-color: #0303B3;
+$selectall-margin-top: 10px;
+
+.dndflow {
+    flex: 1;
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+    background-color: #D3D3D3;
+
+    aside {
+        border-right: 1px solid $aside-border-color;
+        padding: 15px 10px;
+        font-size: 12px;
+        background: $aside-background;
+
+        .debug-output {
+            max-height: 100px;
+        }
+    }
+
+    aside .description {
+        margin-bottom: $description-margin;
+    }
+
+    .dndnode {
+        height: 20px;
+        padding: 4px;
+        border: 1px solid $dndflow-border-color;
+        border-radius: 2px;
+        margin-bottom: $description-margin;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: grab;
+        border-color: $dndnode-border-color;
+        max-width: 150px;
+    }
+
+    .reactflow-wrapper {
+        flex: 1;
+        height: 100%;
+    }
+
+    .selectall {
+        margin-top: $selectall-margin-top;
+    }
+}