New frontend UX design

.github/workflows/angular-ci.yml

@@ -12,12 +12,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 21
+          cache: 'pnpm'
+          cache-dependency-path: frank-doc-frontend/pnpm-lock.yaml
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: Build
-        run: npm run build
+        run: pnpm run build
       - name: Run tests
-        run: npm test -- --no-watch --no-progress --browsers=ChromeHeadless
+        run: pnpm test -- --no-watch --no-progress --browsers=ChromeHeadless

.github/workflows/maven-build.yml

@@ -1,6 +1,3 @@
-# This workflow will build a Java project with Maven
-# For more information see: https://help.github.com/actions/language-and-framework-guides/building-and-testing-java-with-maven
-
 name: Java CI with Maven
 
 on:
@@ -12,17 +9,11 @@ on:
 
 jobs:
   build:
-
+    name: Maven Build
     runs-on: ubuntu-latest
-
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-        path: frank-doc
 
     - name: Cache local Maven repository
       uses: actions/cache@v3
@@ -39,108 +30,26 @@ jobs:
       with:
         java-version: '17'
         distribution: 'temurin'
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 9
 
-    - name: Set up Node.js 20.x
+    - name: Set up Node.js 21
       uses: actions/setup-node@v4
       with:
-        node-version: 20.x
+        node-version: 21
+        cache: 'pnpm'
+        cache-dependency-path: frank-doc-frontend/pnpm-lock.yaml
 
     - name: Build with Maven
       env:
         CI_SERVICE: GITHUB
         TZ: Europe/Amsterdam
-        JAVA_OPTS: "-Xms1G -XX:+UseParallelGC"
-      run: mvn -B -V -T1 -Pibissource,codecoverage -Dmaven.javadoc.skip=true install
-      working-directory: frank-doc
+      run: mvn -Pcodecoverage -Dmaven.javadoc.skip=true install
 
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v3
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
-
-  test-frankframework:
-    needs: [build]
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          # We must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head.
-          fetch-depth: 2
-          path: frank-doc
-
-      - name: Cache local Maven repository
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-maven-dependencies
-        with:
-          path: ~/.m2/repository
-          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
-          restore-keys: |
-            ${{ runner.os }}-maven-
-
-      - name: Set up JDK 17
-        uses: actions/setup-java@v4
-        with:
-          java-version: '17'
-          distribution: 'temurin'
-
-      - name: Set up Node.js 20.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-
-      - name: Build with Maven
-        env:
-          CI_SERVICE: GITHUB
-          TZ: Europe/Amsterdam
-          JAVA_OPTS: "-Xms1G -XX:+UseParallelGC"
-        run: mvn -B -V -T1 -Pibissource,codecoverage -Dmaven.javadoc.skip=true install -DskipTests
-        working-directory: frank-doc
-
-      - name: Set Frank!Doc version environment variable
-        run: echo "FRANKDOC_VERSION=$(mvn help:evaluate -Dexpression=project.version -q -DforceStdout)" >> $GITHUB_ENV
-        working-directory: frank-doc
-
-      - name: Checkout Frank!Framework
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
-          repository: ibissource/iaf
-          path: iaf
-
-      - name: Build Frank!Framework
-        env:
-          CI_SERVICE: GITHUB
-          TZ: Europe/Amsterdam
-          JAVA_OPTS: "-Xms1G -XX:+UseParallelGC"
-        run: ./mvnw -B -V -T1 -PattachFrankDoc -DskipTests -Dfrankdoc.version=$FRANKDOC_VERSION process-sources
-        working-directory: iaf
-
-      - name: Check FrankConfig.xsd
-        run: |
-          java -jar \
-            frank-doc/frank-doc-doclet/target/frank-doc-doclet-$FRANKDOC_VERSION.jar \
-            frank-doc/.github/workflows/validConfig.xml \
-            iaf/target/frankdoc/xml/xsd/FrankConfig.xsd
-
-      - name: Check FrankConfig-compatibility.xsd
-        run: |
-          java -jar \
-            frank-doc/frank-doc-doclet/target/frank-doc-doclet-$FRANKDOC_VERSION.jar \
-            frank-doc/.github/workflows/validConfig.xml \
-            iaf/target/frankdoc/xml/xsd/FrankConfig-compatibility.xsd
-
-      - name: Store FrankDoc.json
-        uses: actions/upload-artifact@v3
-        with:
-          name: FrankDoc.json
-          path: iaf/target/frankdoc/js/*.json
-
-      - name: Store FrankDoc.xsd (Strict and compatibility)
-        uses: actions/upload-artifact@v3
-        with:
-          name: FrankDoc.xsd
-          path: iaf/target/frankdoc/xml/xsd/*.xsd

.github/workflows/test-doclet.yml

@@ -0,0 +1,102 @@
+name: Test Doclet
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - 'frank-doc-doclet/**'
+  pull_request:
+    branches: [master]
+    paths:
+      - 'frank-doc-doclet/**'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build Frank!Framework with Doclet
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          path: frank-doc
+
+      - name: Cache local Maven repository
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-maven-dependencies
+        with:
+          path: ~/.m2/repository
+          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+          restore-keys: |
+            ${{ runner.os }}-maven-
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          java-version: '17'
+          distribution: 'temurin'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Set up Node.js 21
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+          cache: 'pnpm'
+          cache-dependency-path: frank-doc-frontend/pnpm-lock.yaml
+
+      - name: Build with Maven
+        env:
+          CI_SERVICE: GITHUB
+          TZ: Europe/Amsterdam
+          JAVA_OPTS: "-Xms1G -XX:+UseParallelGC"
+        run: mvn -Pcodecoverage -Dmaven.javadoc.skip=true install -DskipTests
+        working-directory: frank-doc/frank-doc-doclet/
+
+      - name: Set Frank!Doc version environment variable
+        run: echo "FRANKDOC_VERSION=$(mvn help:evaluate -Dexpression=project.version -q -DforceStdout)" >> $GITHUB_ENV
+        working-directory: frank-doc
+
+      - name: Checkout Frank!Framework
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+          repository: frankframework/frankframework
+          path: frankframework
+
+      - name: Build Frank!Framework
+        env:
+          CI_SERVICE: GITHUB
+          TZ: Europe/Amsterdam
+        run: ./mvnw -PattachFrankDoc -DskipTests -Dfrankdoc.version=$FRANKDOC_VERSION process-sources
+        working-directory: frankframework
+
+      - name: Check FrankConfig.xsd
+        run: |
+          java -jar \
+            frank-doc/frank-doc-doclet/target/frank-doc-doclet-$FRANKDOC_VERSION.jar \
+            frank-doc/.github/workflows/validConfig.xml \
+            frankframework/target/frankdoc/xml/xsd/FrankConfig.xsd
+
+      - name: Check FrankConfig-compatibility.xsd
+        run: |
+          java -jar \
+            frank-doc/frank-doc-doclet/target/frank-doc-doclet-$FRANKDOC_VERSION.jar \
+            frank-doc/.github/workflows/validConfig.xml \
+            frankframework/target/frankdoc/xml/xsd/FrankConfig-compatibility.xsd
+
+      - name: Store FrankDoc.json
+        uses: actions/upload-artifact@v3
+        with:
+          name: FrankDoc.json
+          path: frankframework/target/frankdoc/js/*.json
+
+      - name: Store FrankDoc.xsd (Strict and compatibility)
+        uses: actions/upload-artifact@v3
+        with:
+          name: FrankDoc.xsd
+          path: frankframework/target/frankdoc/xml/xsd/*.xsd

frank-doc-frontend/.editorconfig

@@ -1,17 +1,18 @@
 # Editor configuration, see https://editorconfig.org
-root = true
-
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 120
 end_of_line = lf
 
-[*.ts]
-quote_type = single
-
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+
+[{*.ats,*.cts,*.mts,*.ts}]
+ij_typescript_spaces_within_imports = true
+ij_typescript_use_double_quotes = false
+ij_typescript_force_quote_style = true

frank-doc-frontend/.eslintrc.js

@@ -11,23 +11,30 @@ module.exports = {
         sourceType: 'module',
       },
       extends: [
+        'plugin:@typescript-eslint/recommended',
         'plugin:@angular-eslint/recommended',
         'plugin:@angular-eslint/template/process-inline-templates',
         'plugin:unicorn/recommended',
-        'prettier',
+        'plugin:prettier/recommended',
       ],
       rules: {
-        'unicorn/prevent-abbreviations': 'warn',
-        'unicorn/empty-brace-spaces': 'off',
+        'prefer-template': 'error',
+        '@typescript-eslint/explicit-function-return-type': 'error',
+        // 'unicorn/prevent-abbreviations': 'warn',
+        'unicorn/prevent-abbreviations': 'off', // doesn't work well with FrankDoc type name
         'unicorn/no-array-reduce': 'off',
         'unicorn/prefer-ternary': 'warn',
-        'unicorn/no-null': 'warn',
-        '@typescript-eslint/explicit-function-return-type': 'error',
+        'unicorn/no-null': 'off',
+        'unicorn/prefer-dom-node-text-content': 'warn',
+        'unicorn/consistent-function-scoping': 'off', // doesn't work well with Signals
       },
     },
     {
-      files: ['*.html'],
-      extends: ['plugin:@angular-eslint/template/recommended'],
+      files: ['*.component.html', '*.css', '*.scss'],
+      extends: [
+        'plugin:@angular-eslint/template/recommended',
+        'plugin:prettier/recommended'
+      ],
       rules: {},
     },
   ],

frank-doc-frontend/.prettierrc

@@ -1,6 +1,6 @@
 {
-  "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }