Storybook v8 upgrade (#940)

* Initial changes for Storybook v8

* Supporting multiple versions of storybook in tests

* Fixing jackspeak issue

* Lint fixes

* Running all tests

* Formatting fixes

* Making lint job node 18

* Removing dependency of storybook version

.github/workflows/lint.yml

@@ -12,12 +12,12 @@ jobs:
       - uses: actions/checkout@8459bc0c7e3759cdf591f513d9f141a95fef0a8f
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - uses: actions/cache@v3
         with:
           path: node_modules
-          key: ${{ runner.os }}/node-16/${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}/node-16/
+          key: ${{ runner.os }}/node-18/${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}/node-18/
       - run: yarn
         env:
           PERCY_POSTINSTALL_BROWSER: true

.github/workflows/release.yml

@@ -9,7 +9,7 @@ jobs:
     - uses: actions/checkout@8459bc0c7e3759cdf591f513d9f141a95fef0a8f
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
         registry-url: 'https://registry.npmjs.org'
     - run: yarn
     - run: yarn build

.github/workflows/test-storybook-v6.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14]
+        node: [18]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions-ecosystem/action-regex-match@9e6c4fb3d5e898f505be7a1fb6e7b0a278f6665b
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - run: ./prepare-storybook-v6-tests.sh
+      - run: ./prepare-storybook-tests.sh 6
       - uses: actions/cache@v3
         with:
           path: node_modules

.github/workflows/test-storybook-v7.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
+        node: [18]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions-ecosystem/action-regex-match@9e6c4fb3d5e898f505be7a1fb6e7b0a278f6665b
@@ -29,6 +29,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
+      - run: ./prepare-storybook-tests.sh 7
       - uses: actions/cache@v3
         with:
           path: node_modules
@@ -54,4 +55,4 @@ jobs:
           yarn link `echo $PERCY_PACKAGES`
           npx percy --version
 
-      - run: yarn test:coverage
+      - run: yarn test

.github/workflows/test-storybook-v8.yml

@@ -0,0 +1,57 @@
+name: Test
+on:
+  push:
+  workflow_dispatch:
+    inputs:
+      branch:
+        required: false
+        type: string
+        default: master
+jobs:
+  test:
+    name: Test Storybook v8
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [18]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions-ecosystem/action-regex-match@9e6c4fb3d5e898f505be7a1fb6e7b0a278f6665b
+        id: regex-match
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        with:
+          text: ${{ inputs.branch }}
+          regex: '^[a-zA-Z0-9_/\-]+$'
+      - name: Break on invalid branch name
+        run: exit 1
+        if: ${{ github.event_name == 'workflow_dispatch' && steps.regex-match.outputs && steps.regex-match.outputs.match == '' }}
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}/node-${{ matrix.node }}/${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}/node-${{ matrix.node }}/
+      - run: yarn
+        env:
+          PERCY_POSTINSTALL_BROWSER: true
+      - run: yarn build
+      - name: Set up @percy/cli from git
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        run: |
+          cd /tmp
+          git clone --branch ${{ inputs.branch }}  --depth 1 https://github.com/percy/cli
+          cd cli
+          PERCY_PACKAGES=`find packages -type d -mindepth 1 -maxdepth 1 | sed -e 's/packages/@percy/g' | tr '\n' ' '`
+          echo "Packages: $PERCY_PACKAGES"
+          git log -1
+          yarn
+          yarn build
+          yarn global:link
+          cd ${{ github.workspace }} 
+          yarn link `echo $PERCY_PACKAGES`
+          npx percy --version
+
+      - run: yarn test:coverage

babel.config.cjs

@@ -3,9 +3,10 @@ module.exports = {
     ['@babel/env', {
       modules: false,
       targets: {
-        node: '14'
+        node: '18'
       }
-    }]
+    }],
+    '@babel/preset-react'
   ],
   env: {
     test: {

babel.config.old.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    ['@babel/env', {
+      modules: false,
+      targets: {
+        node: '18'
+      }
+    }]
+  ],
+  env: {
+    test: {
+      plugins: [
+        ['istanbul', {
+          exclude: ['dist', 'test']
+        }]
+      ]
+    }
+  }
+};

package.json

@@ -54,7 +54,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "^1.24.0",
+    "@percy/cli-command": "^1.28.5",
     "cross-spawn": "^7.0.3",
     "qs": "^6.11.0"
   },
@@ -64,8 +64,10 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/preset-env": "^7.22.9",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0",
+    "@babel/preset-react": "^7.24.1",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
@@ -82,6 +84,9 @@
     "nyc": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.0"
+    "storybook": "^8.0.9"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

packageV6.json

@@ -36,7 +36,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "^1.24.0",
+    "@percy/cli-command": "^1.28.5",
     "cross-spawn": "^7.0.3",
     "qs": "^6.11.0"
   },

packageV7.json

@@ -0,0 +1,90 @@
+{
+  "name": "@percy/storybook",
+  "version": "5.0.3",
+  "description": "Storybook addons for visual testing with Percy",
+  "keywords": [
+    "storybook",
+    "addon",
+    "visual",
+    "visual-testing",
+    "layout-testing",
+    "percy",
+    "image-testing",
+    "test"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/percy/percy-storybook.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "engine": {
+    "node": ">=14"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "bin": {
+    "percy-storybook": "./bin/percy-storybook.cjs"
+  },
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "babel src --out-dir dist",
+    "clean": "git clean -Xdf -e !node_modules -e !node_modules/**",
+    "lint": "eslint --ignore-path .gitignore .",
+    "readme": "percy-cli-readme",
+    "pretest": "storybook build --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
+    "test": "yarn test:env jasmine --config=./test/jasmine.json",
+    "test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
+    "test:coverage": "nyc yarn test"
+  },
+  "storybook": {
+    "displayName": "Percy",
+    "icon": "https://avatars.githubusercontent.com/u/12260884"
+  },
+  "@percy/cli": {
+    "commands": [
+      "./dist/storybook.js"
+    ]
+  },
+  "dependencies": {
+    "@percy/cli-command": "^1.28.5",
+    "cross-spawn": "^7.0.3",
+    "qs": "^6.11.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-plugin": "^7.19.1",
+    "@babel/preset-env": "^7.22.9",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.51.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^15.4.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "jasmine": "^4.5.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "mock-require": "^3.0.3",
+    "nock": "^13.2.9",
+    "nyc": "^15.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.5.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

prepare-storybook-tests.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+storybook_version="$1"
+
+# Check if the version is passed to script
+if [ -z "$storybook_version" ]; then
+    echo "Error: Storybook version is required"
+    exit 1
+fi
+
+# Versions supported
+versions=(6 7)
+
+# Performing common steps
+
+if [[ " ${versions[*]} " =~ " $storybook_version " ]]; then
+    # move package and storybook configs
+    mv "./packageV$storybook_version.json" "./package.json"
+    mv "./test/.storybook/mainV$storybook_version.js" "./test/.storybook/main.js"
+    mv "./babel.config.old.cjs" "./babel.config.cjs"
+else
+    echo "The value $storybook_version is not a supported version."
+    exit 1
+fi

src/snapshots.js

@@ -1,7 +1,6 @@
 import { logger, PercyConfig } from '@percy/cli-command';
 import { yieldAll } from '@percy/cli-command/utils';
 import qs from 'qs';
-
 import {
   fetchStorybookPreviewResource,
   evalStorybookEnvironmentInfo,

src/start.js

@@ -34,10 +34,10 @@ export const start = command('start', {
   let { host, port } = flags;
   let storybookVersion = await checkStorybookVersion();
 
-  let args = storybookVersion === 7 ? ['dev'] : [];
+  let args = storybookVersion >= 7 ? ['dev'] : [];
   args = args.concat(['--ci', `--host=${host}`, `--port=${port}`, ...argv]);
 
-  let storybookBinary = storybookVersion === 7 ? 'storybook' : 'start-storybook';
+  let storybookBinary = storybookVersion >= 7 ? 'storybook' : 'start-storybook';
 
   log.info(`Running "${storybookBinary} ${args.join(' ')}"`);