Merge pull request #10 from IT4Change/chromatic

feat(frontend): chromatic + workflow

.github/workflows/frontend.deploy.chromatic.yml

@@ -0,0 +1,19 @@
+name: "frontend:deploy:chromatic"
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-and-deploy:
+    name: Chromatic - Frontend
+    runs-on: ubuntu-latest
+    env:
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Frontend | Build
+        run: npm install && npm run chromatic -- --exit-zero-on-changes

.gitignore

@@ -5,3 +5,4 @@ coverage/
 !.vuepress/
 .vuepress/.temp/
 .vuepress/.cache/
+build-storybook.log

README.md

@@ -68,6 +68,20 @@ Docker can be run in production mode:
 docker compose -f docker-compose.yml up
 ```
 
+### Chromatic
+
+In order to use the chromatic workflow you need to provide a `CHROMATIC_PROJECT_TOKEN` in the repository secrets.
+
+If you want to run chromatic from the command line you either have to provide this variable as well
+```bash
+export CHROMATIC_PROJECT_TOKEN=...
+npm run chromatic
+```
+or you have to append it via parameter:
+```bash
+npm run chromatic -- --project-token=...
+```
+
 ## Endpoints
 
 The following endpoints are provided given the right command is executed or all three if `docker compose` is used:

package-lock.json

@@ -47,6 +47,7 @@
         "@vitest/coverage-v8": "^0.34.6",
         "@vue/test-utils": "^2.4.2",
         "@vuepress/bundler-vite": "^2.0.0-rc.0",
+        "chromatic": "^9.1.0",
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-config-standard": "^17.1.0",
@@ -11789,6 +11790,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromatic": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-9.1.0.tgz",
+      "integrity": "sha512-9ib8k4LIfg/88kKufxz1N8vgCB7nlLhJqmx+Vx55cM/6DCB/M6oqroirVRXfdeC7qaZuhyUemPF2QHxBh7GXtQ==",
+      "dev": true,
+      "bin": {
+        "chroma": "dist/bin.js",
+        "chromatic": "dist/bin.js",
+        "chromatic-cli": "dist/bin.js"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",

package.json

@@ -51,7 +51,8 @@
     "test:unit:dev": "vitest",
     "test": "npm run test:lint && npm run test:unit",
     "docs:dev": "vuepress dev .",
-    "docs:build": "vuepress build ."
+    "docs:build": "vuepress build .",
+    "chromatic": "npx chromatic --build-script-name storybook:build"
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^1.5.0",
@@ -92,6 +93,7 @@
     "@vitest/coverage-v8": "^0.34.6",
     "@vue/test-utils": "^2.4.2",
     "@vuepress/bundler-vite": "^2.0.0-rc.0",
+    "chromatic": "^9.1.0",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",