feat(storybook): incorporate the new chromatic plugin (#2376)

Author: castastrophe

.env.example

@@ -1,4 +1,6 @@
 CHROMATIC_PROJECT_TOKEN=1234abcd
+CHROMATIC_PROJECT_ID="Project:64762974a45b8bc5ca1705a2"
+CHROMATIC_BUILD_SCRIPT_NAME="ci:storybook"
 
 # NX settings
 NX_PREFER_TS_NODE=true

.gitignore

@@ -25,6 +25,7 @@ build-storybook.log
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics*.json
+chromatic.config.json
 
 # Custom diff tool
 .diff-output

.storybook/.env.example

@@ -32,9 +32,11 @@ module.exports = {
 		"@whitespace/storybook-addon-html",
 		// https://storybook.js.org/addons/@etchteam/storybook-addon-status
 		"@etchteam/storybook-addon-status",
-    "storybook-addon-pseudo-states",
+    	"storybook-addon-pseudo-states",
 		// https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
-		"@storybook/addon-interactions"
+		"@storybook/addon-interactions",
+		// https://www.chromatic.com/docs/visual-testing-addon/
+		"@chromaui/addon-visual-tests",
 	],
 	core: {
 		disableTelemetry: true,

.storybook/main.js

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.1",
+    "@chromaui/addon-visual-tests": "^0.0.124",
     "@etchteam/storybook-addon-status": "^4.2.4",
     "@spectrum-css/component-builder": "^4.0.19",
     "@storybook/addon-a11y": "^7.5.1",

.storybook/package.json

@@ -33,7 +33,8 @@
     "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0",
     "new": "nx run @spectrum-css/generator:new",
     "precommit": "lint-staged",
-    "prepare": "husky install && run-p refresh:*",
+    "prepare": "husky install && run-p refresh:directory refresh:env && yarn refresh:config",
+    "refresh:config": "test -n $BASH_VERSION && bash ./tasks/chromatic-config-creation.sh || exit 0",
     "refresh:directory": "test -n $BASH_VERSION && bash ./tasks/clean-up-after-migration.sh || exit 0",
     "refresh:env": "test -n $BASH_VERSION && bash ./tasks/copy-env-from-root.sh || exit 0",
     "prerelease": "nx affected --target build",

package.json

@@ -0,0 +1,60 @@
+#!/usr/bin/bash
+
+# Copyright 2023 Adobe. All rights reserved.
+# This file is licensed to you under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License. You may obtain a copy
+# of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software distributed under
+# the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+# OF ANY KIND, either express or implied. See the License for the specific language
+# governing permissions and limitations under the License.
+
+env="$(pwd)/.env"
+config_path="$(pwd)/.storybook/chromatic.config.json"
+
+create_config() {
+    [[ ! -f "$1" || -f "$2" ]] && return
+
+    echo "🪄 Using .env to generate a local chromatic.config.json"
+
+    # Initialize the chromatic config file
+    echo "{" > $2
+
+	# Read in the local env example, line-by-line and look for variable names
+	while IFS= read -r line; do
+		[[ "$line" != "CHROMATIC"* ]] && continue
+
+		# Split the line into an array with 0=key, 1=value
+		while IFS='=' read -ra parts; do
+			if [[ "${parts[0]}" = "" || "${parts[1]}" = "" ]]; then
+				continue
+			fi
+
+            # Remove the CHROMATIC_ prefix and convert to lower case
+            while IFS='_' read -ra split; do
+                for i in "${!split[@]}"; do
+                    [[ "${split[$i]}" = "CHROMATIC" ]] && unset "split[$i]"
+                    split[$i]=$(tr '[:upper:]' '[:lower:]' <<< ${split[$i]})
+                    # If the part is the first in the array, capitalize it
+                    [[ $i > 1 ]] && split[$i]=$(tr '[:lower:]' '[:upper:]' <<< ${split[$i]:0:1})${split[$i]:1}
+                done
+
+                key=$(printf "%s" "${split[@]}")
+            done <<< "${parts[0]}"
+
+            # Write the key/value pair to the chromatic config file
+            echo "  \"${key}\": \"${parts[1]//\"/}\"," >> $2
+
+		done <<< "$line"
+	done < $1
+
+    # Remove the last comma from the chromatic config file
+    sed '$ s/,$//' $2 > $2.tmp && mv $2.tmp $2
+
+    # Close the chromatic config file
+    echo "}" >> $2
+    echo "" >> $2
+}
+
+create_config $env $config_path

tasks/chromatic-config-creation.sh

@@ -40,13 +40,14 @@ copy_env_file() {
                 continue
             fi
 
-            # If the variable does not exist in the home .env file, write it to the local .env file as-is
-            if [[ -z $(grep "${example_var[0]}=" $HOME/.env) ]]; then
+            if ! test -f $HOME/.env; then
                 echo "${example_var[0]}=${example_var[1]}" >> .env
                 continue
             fi
 
-            if ! test -f $HOME/.env; then
+            # If the variable does not exist in the home .env file, write it to the local .env file as-is
+            if [[ -z $(grep "${example_var[0]}=" $HOME/.env) ]]; then
+                echo "${example_var[0]}=${example_var[1]}" >> .env
                 continue
             fi