Merge pull request #7818 from Ocelot-Social-Community/remove-chromatic-from-frontend

refactor(frontend): remove chromatic

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

@@ -1,21 +0,0 @@
-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 }}
-      WORKING_DIRECTORY: ./frontend
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@6d193bf28034eafb982f37bd894289fe649468fc # v4.1.7
-        with:
-          fetch-depth: 0
-
-      - name: Frontend | Build
-        run: npm install && npm run chromatic -- --exit-zero-on-changes
-        working-directory: ${{env.WORKING_DIRECTORY}}

frontend/README.md

@@ -14,7 +14,6 @@
 [![vitest][badge-vitest-img]][badge-vitest-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
 [![vuepress][badge-vuepress-img]][badge-vuepress-href]
-[![chromatic][badge-chromatic-img]][badge-chromatic-href]
 
 The IT4C Boilerplate for frontends
 
@@ -28,7 +27,7 @@ The project uses `vite` as builder, `vike` to do the SSR. The design framework i
 
 Testing is done with `vitest` and code style is enforced with `eslint`, `remark-cli` and `stylelint`.
 
-This projects utilizes `storybook` and `chromatic` to develop, document & test frontend components and `vuepress` for static documentation generation.
+This projects utilizes `storybook` to develop, document & test frontend components and `vuepress` for static documentation generation.
 
 ## Commands
 
@@ -61,8 +60,6 @@ The following commands are available:
 | **Documentation**           |                                                  |
 | `npm run docs:dev`          | Run Documentation in development mode            |
 | `npm run docs:build`        | Build static documentation                       |
-| **Chromatic**               |                                                  |
-| `npm run chromatic`         | Run Chromatic. See Chromatic section for details |
 | **Maintenance**             |                                                  |
 | `npm run update`            | Check for updates                                |
 
@@ -78,20 +75,6 @@ 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=...
-```
-
 ### Update
 
 You can get a list of packes to update by running `npm run update`.
@@ -192,6 +175,3 @@ This mechanic was taken from this [source](https://stackoverflow.com/questions/1
 
 [badge-vuepress-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vuepress&label=vuepress&color=orange
 [badge-vuepress-href]: https://vuepress.vuejs.org/
-
-[badge-chromatic-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.chromatic&label=chromatic&color=orange
-[badge-chromatic-href]: https://www.chromatic.com/

frontend/package-lock.json

@@ -50,7 +50,6 @@
         "@vitest/coverage-v8": "^2.0.5",
         "@vue/test-utils": "^2.4.6",
         "@vuepress/bundler-vite": "^2.0.0-rc.14",
-        "chromatic": "^11.5.0",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-standard": "^17.1.0",
@@ -11032,29 +11031,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/chromatic": {
-      "version": "11.5.0",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.5.0.tgz",
-      "integrity": "sha512-mugneDXjkLIrAR+884EXz3lF443nG70XqzCj+6D95h9zFSq5pAEAUOeMeh5V2hUAh8qVar4+US2lsacEYugPnw==",
-      "dev": true,
-      "bin": {
-        "chroma": "dist/bin.js",
-        "chromatic": "dist/bin.js",
-        "chromatic-cli": "dist/bin.js"
-      },
-      "peerDependencies": {
-        "@chromatic-com/cypress": "^0.*.* || ^1.0.0",
-        "@chromatic-com/playwright": "^0.*.* || ^1.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@chromatic-com/cypress": {
-          "optional": true
-        },
-        "@chromatic-com/playwright": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",

frontend/package.json

@@ -23,8 +23,7 @@
     "stylelint",
     "vitest",
     "storybook",
-    "vuepress",
-    "chromatic"
+    "vuepress"
   ],
   "author": {
     "name": "Ulf Gebhardt"
@@ -57,7 +56,6 @@
     "test": "npm run test:lint && npm run test:unit",
     "docs:dev": "vuepress dev .",
     "docs:build": "vuepress build .",
-    "chromatic": "npx chromatic --build-script-name storybook:build",
     "update": "npx npm-check-updates"
   },
   "dependencies": {
@@ -102,7 +100,6 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
     "@vuepress/bundler-vite": "^2.0.0-rc.14",
-    "chromatic": "^11.5.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",