feat: initialize chromatic (datavisyn#334)

* initialize chromatic

* fix main.js

.github/workflows/build.yml

@@ -8,12 +8,18 @@ on:
         required: false
         type: boolean
         default: false
+      chromatic:
+        description: 'Run chromatic'
+        required: false
+        type: boolean
+        default: false
   push:
 
 jobs:
   build:
     uses: datavisyn/github-workflows/.github/workflows/build-node-python.yml@main
     secrets: inherit
     with:
+      chromatic_enable: ${{ inputs.chromatic == true }}
       cypress_enable: true
       cypress_run_because_flag: ${{ inputs.cypress == true }}

.github/workflows/chromatic.yml

@@ -0,0 +1,14 @@
+name: Chromatic UI test
+
+on:
+  push:
+    paths:
+      - 'src/vis/**/*' # trigger whenever something changed in the VIS (?)
+      - '**.stories.*' # trigger whenever any story has changed
+
+jobs:
+  build:
+    uses: datavisyn/github-workflows/.github/workflows/build-node-python.yml@main
+    secrets: inherit
+    with:
+      chromatic_enable: true

.storybook/main.js

@@ -1 +1,11 @@
-module.exports = require('visyn_scripts/config/storybook.main.template');
+const c = require('visyn_scripts/config/storybook.main.template');
+
+const config = {
+  ...c,
+  addons: [
+    // Other Storybook addons
+    ...c.addons,
+    '@chromatic-com/storybook',
+  ],
+};
+export default config;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "projectId": "Project:640e9afaf15e817c63e10f42",
+  "zip": true,
+  "buildScriptName": "storybook:build"
+}

package.json

@@ -72,7 +72,7 @@
     "test": "visyn_scripts test",
     "bundle:dev": "visyn_scripts bundle --mode development --env workspace_mode=single",
     "bundle:prod": "visyn_scripts bundle --mode production --env workspace_mode=single",
-    "chromatic": "npx chromatic --build-script-name storybook:build"
+    "chromatic": "yarn run chromatic"
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
@@ -119,7 +119,8 @@
     "visyn_scripts": "^9.0.0"
   },
   "devDependencies": {
-    "chromatic": "^6.19.9",
+    "@chromatic-com/storybook": "^1.3.2",
+    "chromatic": "^11.3.0",
     "cypress": "^13.2.0"
   },
   "visyn": {