Migrate to optimus UI

frontend/package.json

@@ -22,7 +22,7 @@
     "@angular/platform-browser-dynamic": "^21.2.17",
     "@angular/router": "^21.2.17",
     "@ng-util/monaco-editor": "^18.0.0",
-    "@primeuix/themes": "^1.2.3",
+    "@openng/optimus-ui": "^1.0.2",
     "@tailwindcss/language-server": "^0.14.26",
     "@tailwindcss/postcss": "^4.1.18",
     "d3": "^7.9.0",
@@ -31,13 +31,13 @@
     "ngx-vflow": "^2.6.0",
     "postcss": "^8.5.6",
     "pretty-print-json": "^3.0.6",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.1.9",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.15.0",
+    "@openng/icons": "^1.0.0",
+    "@openng/optimus-ui-themes": "^1.0.2",
+    "@openng/optimus-ui-tailwindcss": "^1.0.2"
   },
   "devDependencies": {
     "@angular-eslint/builder": "^21.4.0",

frontend/src/app/app.component.ts

@@ -11,17 +11,17 @@ import { ProjectService } from "./services/project/project.service";
 import { NetworkJobService } from "./services/tree/network/network-job.service";
 import { CreateProjectDialogComponent } from "./components/project-explorer/create-project-dialog/create-project-dialog.component";
 import { first } from "rxjs";
-import { Toolbar } from "primeng/toolbar";
-import { Button } from "primeng/button";
-import { InputIcon } from "primeng/inputicon";
-import { IconField } from "primeng/iconfield";
-import { DialogService } from "primeng/dynamicdialog";
+import { Toolbar } from "@openng/optimus-ui/toolbar";
+import { Button } from "@openng/optimus-ui/button";
+import { InputIcon } from "@openng/optimus-ui/inputicon";
+import { IconField } from "@openng/optimus-ui/iconfield";
+import { DialogService } from "@openng/optimus-ui/dynamicdialog";
 import { SettingsButtonComponent } from "./components/settings/settings-button/settings-button.component";
-import { Toast } from "primeng/toast";
-import { MessageService, ConfirmationService } from "primeng/api";
-import { InputText } from "primeng/inputtext";
+import { Toast } from "@openng/optimus-ui/toast";
+import { MessageService, ConfirmationService } from "@openng/optimus-ui/api";
+import { InputText } from "@openng/optimus-ui/inputtext";
 import { GlobalSettingsService } from "./services/global-settings.service";
-import { ConfirmDialog } from "primeng/confirmdialog";
+import { ConfirmDialog } from "@openng/optimus-ui/confirmdialog";
 
 /**
  * Top Component of this application,

frontend/src/app/app.config.ts

@@ -4,7 +4,7 @@ import { provideRouter, withComponentInputBinding } from "@angular/router";
 import { routes } from "./app.routes";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { provideHttpClient, withFetch } from "@angular/common/http";
-import { providePrimeNG } from "primeng/config";
+import { provideOptimus } from "@openng/optimus-ui/config";
 import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
 import { Noir } from "./style";
 
@@ -17,14 +17,14 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withFetch()),
     provideAnimations(),
     provideAnimationsAsync(),
-    providePrimeNG({
+    provideOptimus({
       theme: {
         preset: Noir,
         options: {
           darkModeSelector: ".dark-mode",
           cssLayer: {
-            name: "primeng",
-            order: "theme, base, primeng",
+            name: "optimus",
+            order: "theme, base, optimus",
           },
         },
       },

frontend/src/app/components/ai-chat/ai-chat.component.ts

@@ -27,12 +27,12 @@ import {
   ReactiveFormsModule,
 } from "@angular/forms";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { Message } from "primeng/message";
-import { Toolbar } from "primeng/toolbar";
-import { Button } from "primeng/button";
-import { Textarea } from "primeng/textarea";
-import { Menu } from "primeng/menu";
-import { MenuItem } from "primeng/api";
+import { Message } from "@openng/optimus-ui/message";
+import { Toolbar } from "@openng/optimus-ui/toolbar";
+import { Button } from "@openng/optimus-ui/button";
+import { Textarea } from "@openng/optimus-ui/textarea";
+import { Menu } from "@openng/optimus-ui/menu";
+import { MenuItem } from "@openng/optimus-ui/api";
 
 /**
  * Component for showing a dialog between user and the llm chat defined in the backend.

frontend/src/app/components/console/console.component.ts

@@ -11,9 +11,9 @@ import {
   isInfo,
 } from "../../services/console/log";
 import { HttpErrorResponse } from "@angular/common/http";
-import { Button } from "primeng/button";
-import { ProgressSpinner } from "primeng/progressspinner";
-import { ProgressBar } from "primeng/progressbar";
+import { Button } from "@openng/optimus-ui/button";
+import { ProgressSpinner } from "@openng/optimus-ui/progressspinner";
+import { ProgressBar } from "@openng/optimus-ui/progressbar";
 
 /**
  * Visual representation of the errors in the application

frontend/src/app/components/editor/condition/condition-editor/condition-editor.component.ts

@@ -1,30 +1,30 @@
 import { Component, EventEmitter, Input, Output, inject } from "@angular/core";
 import { Condition, ICondition } from "../../../../types/condition/condition";
 import { AiChatService } from "../../../../services/ai-chat/ai-chat.service";
-import { Textarea } from "primeng/textarea";
-import { FloatLabelModule } from "primeng/floatlabel";
+import { Textarea } from "@openng/optimus-ui/textarea";
+import { FloatLabelModule } from "@openng/optimus-ui/floatlabel";
 import {
   GREEN_COLOURED_CONDITIONS,
   RED_COLOURED_CONDITIONS,
 } from "../../editor.component";
-import { $dt } from "@primeuix/themes";
+import { $dt } from "@openng/optimus-ui-themes";
 import { FormsModule } from "@angular/forms";
 import { BehaviorSubject } from "rxjs";
 import { AsyncPipe } from "@angular/common";
-import { Button } from "primeng/button";
-import { Dialog } from "primeng/dialog";
+import { Button } from "@openng/optimus-ui/button";
+import { Dialog } from "@openng/optimus-ui/dialog";
 
 /**
  * Editor in the statements for the {@link Condition}
  * @link https://material.angular.io/components/form-field/overview
  * @link https://angular.dev/guide/forms/reactive-forms
  */
 @Component({
-    selector: 'app-condition-editor',
-    imports: [Textarea, FloatLabelModule, FormsModule, AsyncPipe, Button, Dialog],
-    templateUrl: './condition-editor.component.html',
-    standalone: true,
-    styleUrl: './condition-editor.component.css',
+  selector: "app-condition-editor",
+  imports: [Textarea, FloatLabelModule, FormsModule, AsyncPipe, Button, Dialog],
+  templateUrl: "./condition-editor.component.html",
+  standalone: true,
+  styleUrl: "./condition-editor.component.css",
 })
 export class ConditionEditorComponent {
   private _aiChatService = inject(AiChatService);
@@ -36,22 +36,23 @@ export class ConditionEditorComponent {
    */
   @Input() public condition!: BehaviorSubject<ICondition>;
 
-    /**
-     * Flag to allow editing the condition content
-     */
-    @Input() public placeholder: string = 'Type here';
-    @Input() public editable: boolean | null = true;
-    @Input() public inline = false;
-    @Input() public showAiButton = false;
-
-    /**
-     * Emitter to emit the condition
-     */
-    @Output() public conditionEditingFinished: EventEmitter<void> =
-        new EventEmitter<void>();
-    @Output() public textChanged: EventEmitter<void> = new EventEmitter<void>();
-    @Output() public synthesizeRequested: EventEmitter<void> = new EventEmitter<void>();
-    protected dialogConditionText: string = "";
+  /**
+   * Flag to allow editing the condition content
+   */
+  @Input() public placeholder: string = "Type here";
+  @Input() public editable: boolean | null = true;
+  @Input() public inline = false;
+  @Input() public showAiButton = false;
+
+  /**
+   * Emitter to emit the condition
+   */
+  @Output() public conditionEditingFinished: EventEmitter<void> =
+    new EventEmitter<void>();
+  @Output() public textChanged: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public synthesizeRequested: EventEmitter<void> =
+    new EventEmitter<void>();
+  protected dialogConditionText: string = "";
 
   /** Inserted by Angular inject() migration for backwards compatibility */
   constructor(...args: unknown[]);
@@ -72,13 +73,13 @@ export class ConditionEditorComponent {
     this.askAi();
   }
 
-    public synthesizeWithAi(): void {
-        this.synthesizeRequested.emit();
-    }
+  public synthesizeWithAi(): void {
+    this.synthesizeRequested.emit();
+  }
 
-    public get aiButtonClass(): string {
-        return 'cursor-pointer pi pi-sparkles';
-    }
+  public get aiButtonClass(): string {
+    return "cursor-pointer pi pi-sparkles";
+  }
 
   public onConditionChange(newConditionString: string): void {
     const currentCondition = this.condition.getValue();

frontend/src/app/components/editor/condition/condition-selector/condition-selector.component.ts

@@ -9,7 +9,7 @@ import {
 import { ConditionEditorComponent } from "../condition-editor/condition-editor.component";
 import { AbstractStatementNode } from "../../../../types/statements/nodes/abstract-statement-node";
 import { ICondition } from "../../../../types/condition/condition";
-import { Button } from "primeng/button";
+import { Button } from "@openng/optimus-ui/button";
 import {
   GREEN_COLOURED_CONDITIONS,
   RED_COLOURED_CONDITIONS,

frontend/src/app/components/editor/editor-bottommenu/editor-bottommenu.component.ts

@@ -1,8 +1,14 @@
-import {Component, signal} from '@angular/core';
-import {Tab, TabList, TabPanel, TabPanels, Tabs} from "primeng/tabs";
-import {Button} from "primeng/button";
-import {ConsoleComponent} from "../../console/console.component";
-import {AiChatComponent} from "../../ai-chat/ai-chat.component";
+import { Component, signal } from "@angular/core";
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@openng/optimus-ui/tabs";
+import { Button } from "@openng/optimus-ui/button";
+import { ConsoleComponent } from "../../console/console.component";
+import { AiChatComponent } from "../../ai-chat/ai-chat.component";
 import { PredicateManagerComponent } from "../predicate-manager/predicate-manager.component";
 
 @Component({

frontend/src/app/components/editor/editor-sidemenu/editor-sidemenu.component.ts

@@ -1,74 +1,80 @@
-import {Component, EventEmitter, Output, signal, ViewChild} from "@angular/core";
-import {TabPanel, TabPanels, Tabs} from "primeng/tabs";
-import {Button} from "primeng/button";
-import {OptionsComponent} from "../options/options.component";
-import {RenamingComponent} from "../renaming/renaming.component";
-import {GlobalConditionsComponent} from "../global-conditions/global-conditions.component";
-import {VariablesComponent} from "../variables/variables.component";
 import {
+  Component,
+  EventEmitter,
+  Output,
+  signal,
+  ViewChild,
+} from "@angular/core";
+import { TabPanel, TabPanels, Tabs } from "@openng/optimus-ui/tabs";
+import { Button } from "@openng/optimus-ui/button";
+import { OptionsComponent } from "../options/options.component";
+import { RenamingComponent } from "../renaming/renaming.component";
+import { GlobalConditionsComponent } from "../global-conditions/global-conditions.component";
+import { VariablesComponent } from "../variables/variables.component";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionPanel,
+} from "@openng/optimus-ui/accordion";
+import { AiChatComponent } from "../../ai-chat/ai-chat.component";
+import { ConsoleComponent } from "../../console/console.component";
+import { PredicateManagerComponent } from "../predicate-manager/predicate-manager.component";
+@Component({
+  selector: "app-editor-sidemenu",
+  imports: [
+    Tabs,
+    TabPanels,
+    TabPanel,
+    Button,
+    OptionsComponent,
+    RenamingComponent,
+    GlobalConditionsComponent,
+    VariablesComponent,
     Accordion,
-    AccordionContent,
-    AccordionHeader,
     AccordionPanel,
-} from "primeng/accordion";
-import {AiChatComponent} from "../../ai-chat/ai-chat.component";
-import {ConsoleComponent} from "../../console/console.component";
-import {PredicateManagerComponent} from "../predicate-manager/predicate-manager.component";
-@Component({
-    selector: "app-editor-sidemenu",
-    imports: [
-        Tabs,
-        TabPanels,
-        TabPanel,
-        Button,
-        OptionsComponent,
-        RenamingComponent,
-        GlobalConditionsComponent,
-        VariablesComponent,
-        Accordion,
-        AccordionPanel,
-        AccordionHeader,
-        AccordionContent,
-        AiChatComponent,
-        ConsoleComponent,
-        PredicateManagerComponent,
-    ],
-    templateUrl: "./editor-sidemenu.component.html",
-    standalone: true,
-    styleUrl: "./editor-sidemenu.component.css",
+    AccordionHeader,
+    AccordionContent,
+    AiChatComponent,
+    ConsoleComponent,
+    PredicateManagerComponent,
+  ],
+  templateUrl: "./editor-sidemenu.component.html",
+  standalone: true,
+  styleUrl: "./editor-sidemenu.component.css",
 })
 export class EditorSidemenuComponent {
-    @ViewChild("variables") public variables!: VariablesComponent;
-    @ViewChild("conditions") public conditions!: GlobalConditionsComponent;
-    @ViewChild("renaming") public renaming!: RenamingComponent;
-    @Output() tabOpened = new EventEmitter<boolean>();
+  @ViewChild("variables") public variables!: VariablesComponent;
+  @ViewChild("conditions") public conditions!: GlobalConditionsComponent;
+  @ViewChild("renaming") public renaming!: RenamingComponent;
+  @Output() tabOpened = new EventEmitter<boolean>();
 
-    tabValue = signal(0);
+  tabValue = signal(0);
 
-    setTab(value: number): void {
-        if (this.tabValue() == value) {
-            this.tabOpened.emit(false);
-            this.tabValue.set(0);
-        } else {
-            this.tabOpened.emit(true)
-            this.tabValue.set(value);
-        }
+  setTab(value: number): void {
+    if (this.tabValue() == value) {
+      this.tabOpened.emit(false);
+      this.tabValue.set(0);
+    } else {
+      this.tabOpened.emit(true);
+      this.tabValue.set(value);
     }
+  }
 
-    compactButton = {
-        root: {
-            sm: {
-                paddingX: "0.2rem",
-            },
-            paddingX: "0px",
-        },
-        button: {
-            paddingX: "0px",
-            root: {
-                sm: {
-                    paddingX: "0px",
-                },
-            },
+  compactButton = {
+    root: {
+      sm: {
+        paddingX: "0.2rem",
+      },
+      paddingX: "0px",
+    },
+    button: {
+      paddingX: "0px",
+      root: {
+        sm: {
+          paddingX: "0px",
         },
-    };
+      },
+    },
+  };
 }

frontend/src/app/components/editor/editor.component.ts

@@ -41,8 +41,8 @@ import { EditorSidemenuComponent } from "./editor-sidemenu/editor-sidemenu.compo
 import { EditorBottommenuComponent } from "./editor-bottommenu/editor-bottommenu.component";
 import { GlobalSettingsService } from "../../services/global-settings.service";
 import { fromEvent, Subscription } from "rxjs";
-import { Button } from "primeng/button";
-import { Popover } from "primeng/popover";
+import { Button } from "@openng/optimus-ui/button";
+import { Popover } from "@openng/optimus-ui/popover";
 import { ConditionSelectorComponent } from "./condition/condition-selector/condition-selector.component";
 import { ICondition } from "../../types/condition/condition";
 import { disconnectNodes } from "../../types/statements/nodes/statement-node-utils";