Integration with Enonic UI #4082

POC: Enonic UI integration #4060

Fix Q import

Update Enonic UI bundling

Update to stable Enonic UI version

Upgrade `@enonic/ui` dependency

Publish SNAPSHOT of epic-enonic-ui

Enonic UI: Use new ActionButton #4092

Enonic UI: Fix rendering of components with hooks #4097

Added proper aliases for react, and replace renderer with react.
Upgraded `@enonic-ui` dependency.

Migrate BucketView to the new Checkbox component from Enonic UI #4089

Migrate BucketView to the new Checkbox component from Enonic UI #4102

Removed comments.
Optimized code.

Enonic UI: Checkboxes have the same ID #4103

Enonic UI: Add JSX support #4081

Enonic UI: Incorrect rendering in LegacyElement children #4126

Author: edloidas

.github/workflows/gradle.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     outputs:
-      publish: ${{ steps.publish_vars.outputs.release != 'true' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/6.')) }}
+      publish: ${{ steps.publish_vars.outputs.release != 'true' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/epic-enonic-ui') }}
       repo: ${{ steps.publish_vars.outputs.repo }}
 
     steps:

gradle.properties

@@ -1,4 +1,4 @@
-version=6.0.0-SNAPSHOT
+version=6.0.0-enonic-ui-SNAPSHOT
 org.gradle.parallel=true
 org.gradle.caching=true
 org.gradle.configuration-cache=true

package.json

@@ -21,18 +21,26 @@
     "fix": "eslint . --fix --cache"
   },
   "dependencies": {
+    "@enonic/ui": "^0.3.2",
     "dompurify": "~3.2.6",
     "fine-uploader": "^5.16.2",
     "jquery": "^3.7.1",
     "jquery-simulate": "^1.0.2",
     "jquery-ui": "^1.14.1",
+    "lucide-react": "^0.540.0",
     "mousetrap": "^1.6.5",
+    "nanoid": "~5.1.5",
+    "nanostores": "~1.0.1",
     "q": "^1.5.1"
   },
+  "peerDependencies": {
+    "postcss": "^8.2.2",
+    "preact": ">=10.25.0"
+  },
   "devDependencies": {
     "@enonic/eslint-config": "^2.1.0",
     "@rollup/plugin-inject": "^5.0.5",
-    "@types/jquery": "^3.5.31",
+    "@types/jquery": "^3.5.32",
     "@types/jqueryui": "^1.12.24",
     "@types/mousetrap": "^1.6.15",
     "@types/postcss-normalize": "~9.0.4",
@@ -44,12 +52,13 @@
     "enonic-admin-artifacts": "^2.3.2",
     "eslint": "^9.33.0",
     "jiti": "~2.5.1",
-    "less": "^4.4.0",
+    "less": "^4.4.1",
     "postcss-normalize": "^13.0.1",
     "postcss-sort-media-queries": "^5.2.0",
+    "preact": "^10.27.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.6"
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3"
   },
   "browserslist": [
     "extends browserslist-config-enonic"

pnpm-lock.yaml

@@ -1,9 +1,8 @@
-import {Tooltip} from '../ui/Tooltip';
 import {DivEl} from '../dom/DivEl';
-import {Bucket} from './Bucket';
-import {Checkbox} from '../ui/Checkbox';
-import {ValueChangedEvent} from '../ValueChangedEvent';
+import {Tooltip} from '../ui/Tooltip';
+import {Checkbox} from '../ui2/Checkbox';
 import {StringHelper} from '../util/StringHelper';
+import {Bucket} from './Bucket';
 import {BucketViewSelectionChangedEvent} from './BucketViewSelectionChangedEvent';
 
 export class BucketView
@@ -24,15 +23,18 @@ export class BucketView
         this.bucket = bucket;
 
         this.displayName = bucket.getDisplayName();
-        this.checkbox = Checkbox.create().setLabelText(this.resolveLabelValue()).build();
+        this.checkbox = new Checkbox({
+            label: this.resolveLabelValue(),
+            onCheckedChange: (checked) => {
+                const isChecked = checked === true;
+                const event = new BucketViewSelectionChangedEvent(!isChecked, isChecked, this);
+                this.selectionChangedListeners.forEach(l => l(event));
+            }
+        });
+
         this.tooltip = new Tooltip(this.checkbox, bucket.getKey(), 1000);
         this.tooltip.setActive(false);
 
-        this.checkbox.onValueChanged((event: ValueChangedEvent) => {
-            const oldValue = event.getOldValue() === 'true';
-            const newValue = event.getNewValue() === 'true';
-            this.notifySelectionChanged(oldValue, newValue);
-        });
         this.appendChild(this.checkbox);
 
         this.updateUI();
@@ -64,19 +66,14 @@ export class BucketView
         return this.checkbox.isChecked();
     }
 
-    deselect(supressEvent?: boolean): void {
-        this.checkbox.setChecked(false, supressEvent);
+    deselect(suppressEvent?: boolean): void {
+        this.checkbox.setChecked(false, suppressEvent);
     }
 
     select(suppressEvent?: boolean): void {
         this.checkbox.setChecked(true, suppressEvent);
     }
 
-    notifySelectionChanged(oldValue: boolean, newValue: boolean): void {
-        this.selectionChangedListeners.forEach((listener: (event: BucketViewSelectionChangedEvent) => void) => {
-            listener(new BucketViewSelectionChangedEvent(oldValue, newValue, this));
-        });
-    }
 
     unSelectionChanged(listener: (event: BucketViewSelectionChangedEvent) => void): void {
         this.selectionChangedListeners = this.selectionChangedListeners