From cf9267c2c426fea3934ca284a7f61680d9bf593b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 22 Nov 2023 15:33:07 +0100
Subject: [PATCH] pkp/pkp-lib#9527 add github action (#296)

---
 .github/workflows/chromatic.yml | 26 ++++++++++++++++++++++++++
 README.md                       |  8 +++++++-
 package-lock.json               | 18 ++++++++++++++++++
 package.json                    |  4 +++-
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/chromatic.yml

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 000000000..0c14d431d
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: npm install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/README.md b/README.md
index 11c6e12f3..d66ec19f1 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ This library can also be run locally to provide a style guide, component documen
 
 This library is intended to be included and used within PKP's applications. If you would like to run the style guide and component documentation locally, follow these steps.
 
-``` bash
+```bash
 # install dependencies
 npm install
 
@@ -29,3 +29,9 @@ PKP_DOCS_VERSION=<version> npm run build
 ## Issues
 
 Please file any development issues or questions with the [pkp/pkp-lib](https://github.com/pkp/pkp-lib) repository.
+
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
diff --git a/package-lock.json b/package-lock.json
index 9c4db16ee..d0d870a8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
         "@vitejs/plugin-vue": "^4.3.4",
         "@vue/eslint-config-prettier": "^8.0.0",
         "autoprefixer": "^10.4.14",
+        "chromatic": "^9.1.0",
         "eslint": "^8.48.0",
         "eslint-plugin-storybook": "^0.6.15",
         "eslint-plugin-vue": "^9.17.0",
@@ -7077,6 +7078,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/ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -20462,6 +20474,12 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "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
+    },
     "ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
diff --git a/package.json b/package.json
index e83101cf6..a86bd73f6 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "format": "prettier --write ./src",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
@@ -49,6 +50,7 @@
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "autoprefixer": "^10.4.14",
+    "chromatic": "^9.1.0",
     "eslint": "^8.48.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.17.0",