pkp/pkp-lib#9527 add github action (pkp#296)

.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 }}

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.

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",