Add update-snapshots workflow and documentation

.github/workflows/update-snapshots.yml

@@ -0,0 +1,74 @@
+name: Update Snapshots
+
+on:
+  workflow_dispatch:
+    inputs:
+      target_branch:
+        description: 'Target branch'
+        required: true
+      purge_snapshots:
+          description: 'Delete all snapshots before regenerating them'
+          type: boolean
+          default: false
+
+jobs:
+  update-snapshots:
+    runs-on: ubuntu-latest
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.target_branch }}
+          fetch-depth: 0
+
+      # https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store
+
+      - name: Install
+        run: pnpm i --no-frozen-lockfile
+
+      - name: Build
+        run: pnpm -r build
+
+      - name: Purge existing snapshots
+        if: ${{ github.event.inputs.purge_snapshots == 'true' }}
+        run: rm packages/themes/**/snapshots/**/*.png
+
+      - name: Run test-update in all packages
+        run: pnpm -r --workspace-concurrency=1 test-update
+
+      - name: Display git status
+        run: git status
+
+      - name: Commit and push changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Update all snapshots
+          file_pattern: 'packages/themes/**/snapshots/*'

CONTRIBUTING.md

@@ -65,5 +65,38 @@ If it is also necessary to edit dependent packages such as `@public-ui/component
 
 ### Back porting to older Major-Versions
 
-By default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.7.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1.7` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status. 
+By default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.7.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1.7` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.
 The simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1.7`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.
+
+### Snapshot Testing for Visual Changes
+
+The Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.
+
+When introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the
+`update-snapshots` action on GitHub should be executed, followed by a **careful review** of the changes.
+
+#### How to Update Snapshots
+
+1. **GitHub website:**
+
+   - Execute the `update-snapshots` action on GitHub.
+   - The action prompts for a branch selection.
+   - It checks out the specified branch, updates all snapshot files, and commits the changes to that branch.
+
+2. **Terminal Command:**
+
+   - For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.
+   - Run the following command within the project directory:
+
+     ```bash
+     # Replace $YOUR_BRANCH with the desired branch name
+     gh workflow run update-snapshots.yml -f target_branch=$YOUR_BRANCH
+     ```
+
+     Alternatively, to run the action on the current branch:
+
+     ```bash
+     gh workflow run update-snapshots.yml -f target_branch=`git rev-parse --abbrev-ref HEAD`
+     ```
+
+These steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.