ISCT-133: Up Storybook to 8, Add chromatic visual test

.github/workflows/chromatic.yml

@@ -0,0 +1,31 @@
+name: "CI - Chromatic Tests"
+
+# todo: setup running on feature branches, remove this tests branch
+# read more about this here: https://www.chromatic.com/docs/github-actions
+on:
+  workflow_dispatch:
+#  push:
+#    branches:
+#      - "feature/storybook-up-to-8"
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: false # 👈 Fail workflow if changes are found (default: true)

.storybook/main.js

@@ -7,15 +7,13 @@ const config = {
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
         '@ironsource/storybook-addon-stackblitz',
-        '@storybook/addon-mdx-gfm'
+        '@storybook/addon-mdx-gfm',
+        '@chromatic-com/storybook'
     ],
     framework: {
         name: '@storybook/angular'
     },
-    docs: {
-        /*autodocs: true // auto generate mdx dox story*/
-        autodocs: 'tag' // autogenerate only for stories with tag: 'autodoc'
-    }
+    docs: {}
 };
 
 export default config;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+    "onlyChanged": true,
+    "projectId": "Project:66cf1752798a917f319ba0da",
+    "zip": true
+}