FEATURE: Neos 9 compatibility and visual overhaul

.gitignore

@@ -1 +1 @@
-/Resources/Private/NodeVariantSelector/.yarn
+/Resources/Private/NodeVariantSelector/.yarn/install-state.gz

Classes/DataSource/NodeVariantsDataSource.php

@@ -0,0 +1,79 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Flowpack\NodeVariantSelector\DataSource;
+
+use Neos\ContentRepository\Core\DimensionSpace\DimensionSpacePoint;
+use Neos\ContentRepository\Core\DimensionSpace\OriginDimensionSpacePoint;
+use Neos\ContentRepository\Core\Feature\Security\Exception\AccessDenied;
+use Neos\ContentRepository\Core\Projection\ContentGraph\Node;
+use Neos\ContentRepositoryRegistry\ContentRepositoryRegistry;
+use Neos\Flow\Annotations as Flow;
+use Neos\Neos\Service\DataSource\AbstractDataSource;
+
+class NodeVariantsDataSource extends AbstractDataSource
+{
+    /**
+     * @var string
+     */
+    static protected $identifier = 'flowpack-nodevariantselector-variants';
+
+    #[Flow\Inject]
+    protected ContentRepositoryRegistry $contentRepositoryRegistry;
+
+    /**
+     * Returns ALL dimension space points for the content repository, each annotated with its
+     * variant status relative to the given node's aggregate:
+     *
+     *   - "occupied"    – the node aggregate has a direct variant in this DSP
+     *   - "shineThrough"– the node is visible here via dimension fallback (covered but not occupied)
+     *   - "missing"     – the node does not exist / is not visible in this DSP at all
+     *
+     * This allows the frontend to display the full picture and let editors jump to any DSP
+     * or create a new variant where one is missing.
+     *
+     * This can be removed when `\Neos\Neos\Ui\Controller\BackendServiceController::getAdditionalNodeMetadataAction`
+     * provides the necessary metadata again in the Neos 9 UI.
+     *
+     * @param Node|null $node The currently focused node
+     * @param array<mixed> $arguments Additional arguments (unused)
+     * @return list<array{coordinates: array<string,string>, status: string}> One entry per DSP
+     * @throws AccessDenied
+     */
+    public function getData(?Node $node = null, array $arguments = []): array
+    {
+        if ($node === null) {
+            return [];
+        }
+
+        $contentRepository = $this->contentRepositoryRegistry->get($node->contentRepositoryId);
+        $contentGraph = $contentRepository->getContentGraph($node->workspaceName);
+        $nodeAggregate = $contentGraph->findNodeAggregateById($node->aggregateId);
+
+        if ($nodeAggregate === null) {
+            return [];
+        }
+
+        $allDimensionSpacePoints = $contentRepository->getVariationGraph()->getDimensionSpacePoints();
+
+        $variants = [];
+        foreach ($allDimensionSpacePoints as $dimensionSpacePoint) {
+            $originDsp = OriginDimensionSpacePoint::fromDimensionSpacePoint($dimensionSpacePoint);
+            if ($nodeAggregate->occupiedDimensionSpacePoints->contains($originDsp)) {
+                $status = 'occupied';
+            } elseif ($nodeAggregate->coveredDimensionSpacePoints->contains($dimensionSpacePoint)) {
+                $status = 'shineThrough';
+            } else {
+                $status = 'missing';
+            }
+
+            $variants[] = [
+                'coordinates' => $dimensionSpacePoint->coordinates,
+                'status' => $status,
+            ];
+        }
+
+        return $variants;
+    }
+}

Configuration/NodeTypes.yaml

@@ -5,9 +5,9 @@
         nodeVariantSelector:
           label: 'Node Variants'
           tab: default
-          position: 0
+          position: 'start 999'
       views:
         nodeVariantSelector:
           group: nodeVariantSelector
           view: Flowpack.NodeVariantSelector/Views/NodeVariantSelector
-          position: 0
+          position: 'start'

Configuration/Settings.yaml

@@ -9,4 +9,7 @@ Neos:
       resources:
         javascript:
           'Flowpack.NodeVariantSelector:NodeVariantSelector':
-            resource: resource://Flowpack.NodeVariantSelector/Public/JavaScript/NodeVariantSelector/Plugin.js
+            resource: resource://Flowpack.NodeVariantSelector/Public/JavaScript/NodeVariantSelector/Plugin.js
+        stylesheets:
+          'Flowpack.NodeVariantSelector:NodeVariantSelector':
+            resource: resource://Flowpack.NodeVariantSelector/Public/JavaScript/NodeVariantSelector/Plugin.css

Resources/Private/NodeVariantSelector/.yarnrc.yml

@@ -0,0 +1,10 @@
+approvedGitRepositories:
+  - "**"
+
+compressionLevel: mixed
+
+enableGlobalCache: true
+
+enableScripts: true
+
+yarnPath: .yarn/releases/yarn-4.14.1.cjs

Resources/Private/NodeVariantSelector/esbuild.js

@@ -1,4 +1,5 @@
 const esbuild = require('esbuild');
+const CssModulesPlugin = require('esbuild-css-modules-plugin');
 const extensibilityMap = require("@neos-project/neos-ui-extensibility/extensibilityMap.json");
 const isWatch = process.argv.includes('--watch');
 
@@ -7,11 +8,24 @@ const options = {
     logLevel: "info",
     bundle: true,
     minify: !isWatch,
+    sourcemap: true,
     target: "es2020",
-    entryPoints: {"Plugin": "src/index.js"},
+    entryPoints: {
+        "Plugin": "src/index.ts",
+    },
     loader: {
-        ".js": "tsx",
+        ".ts": "ts",
+        ".tsx": "tsx",
     },
+    plugins: [
+        CssModulesPlugin({
+            // @see https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/index.d.ts for more details
+            force: true,
+            localsConvention: 'camelCaseOnly',
+            namedExports: true,
+            inject: false,
+        }),
+    ],
     alias: extensibilityMap,
     outdir: "../../Public/JavaScript/NodeVariantSelector",
 }

Resources/Private/NodeVariantSelector/package.json

@@ -2,12 +2,20 @@
     "description": "NodeVariantSelector",
     "license": "MIT",
     "private": true,
+    "engines": {
+        "node": ">=22"
+    },
     "scripts": {
         "build": "node esbuild.js",
         "watch": "node esbuild.js --watch"
     },
     "devDependencies": {
-        "@neos-project/neos-ui-extensibility": "~8.3.0",
-        "esbuild": "~0.17.0"
-    }
+        "@neos-project/neos-ui-extensibility": "^9.0.0",
+        "@neos-project/react-ui-components": "^9.0.0",
+        "@types/react": "^16.14.69",
+        "@types/react-redux": "^7.1.0",
+        "esbuild": "~0.28.0",
+        "esbuild-css-modules-plugin": "^3.1.5"
+    },
+    "packageManager": "yarn@4.14.1"
 }

Resources/Private/NodeVariantSelector/src/NodeVariantPreviewElement.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// eslint-disable-next-line camelcase
+import { SelectBox_Option_MultiLineWithThumbnail } from '@neos-project/react-ui-components';
+
+export const NodeVariantPreviewElement: React.FC<{ option: NodeVariantOption}> = ({ option, ...rest}) => {
+    return <SelectBox_Option_MultiLineWithThumbnail {...rest} {...option} />;
+};

Resources/Private/NodeVariantSelector/src/NodeVariantSelector.module.css

@@ -0,0 +1,35 @@
+.nvs-variant--shineThrough {
+    position: relative;
+    background-image: repeating-linear-gradient(
+        -45deg,
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0) 12px,
+        #323232 0,
+        #323232 23px
+    );
+}
+
+.nvs-variant--shineThrough::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 3px;
+    top: 0;
+    left: 0;
+    background-color: var(--colors-Warn);
+}
+
+.nvs-variant--missing {
+    position: relative;
+    background-color: #323232 !important;
+}
+
+.nvs-variant--missing::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 3px;
+    top: 0;
+    left: 0;
+    background-color: var(--colors-Error);
+}