v6: Add Lost Pixel for Storybook visual regression

.github/workflows/visual-regression.yml

@@ -0,0 +1,26 @@
+name: Visual Regression
+on:
+  pull_request:
+    branches: [graphiql-6]
+permissions:
+  contents: read
+jobs:
+  lost-pixel:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: yarn
+      - run: yarn install --immutable
+      - run: yarn build
+      - run: yarn workspace @graphiql/react build-storybook
+      - uses: lost-pixel/lost-pixel@v3.22.0
+        env:
+          LOST_PIXEL_CONFIG_DIR: packages/graphiql-react
+      - if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: lost-pixel-difference
+          path: packages/graphiql-react/.lostpixel/difference/

.gitignore

@@ -55,3 +55,6 @@ packages/graphiql/webpack/
 .react-router/
 
 storybook-static/
+
+packages/graphiql-react/.lostpixel/current/
+packages/graphiql-react/.lostpixel/difference/

packages/graphiql-react/.lostpixel/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

packages/graphiql-react/lostpixel.config.js

@@ -0,0 +1,15 @@
+/** @type {import('lost-pixel').CustomProjectConfig} */
+export default {
+  storybookShots: {
+    storybookUrl: './storybook-static',
+  },
+  imagePathBaseline: './.lostpixel/baseline',
+  imagePathCurrent: './.lostpixel/current',
+  imagePathDifference: './.lostpixel/difference',
+  threshold: 0.001,
+  failOnDifference: true,
+  generateOnly: true,
+  storybookConfig: {
+    mask: [],
+  },
+};

packages/graphiql-react/package.json

@@ -44,7 +44,9 @@
     "build": "vite build",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest run --typecheck"
+    "test": "vitest run --typecheck",
+    "test:vr": "lost-pixel",
+    "test:vr:update": "lost-pixel update"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
@@ -80,6 +82,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "graphql": "^16.9.0",
+    "lost-pixel": "^3.22.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^10.3.6",

resources/custom-words.txt

@@ -124,6 +124,7 @@ linenumbers
 linkify
 listbox
 listvalues
+lostpixel
 lostplan
 maint
 manypkg