Init visual regression

.github/workflows/pull-request.yml

@@ -107,7 +107,7 @@ jobs:
           version: 7.26.3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 16
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
@@ -119,3 +119,28 @@ jobs:
 
       - run: pnpm i --frozen-lockfile
       - run: pnpm jest
+
+  visual-regression:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7.26.3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: |
+            .pnpm-store
+            pnpm
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm build-storybook
+
+      - name: Lost Pixel
+        uses: lost-pixel/[email protected]

lostpixel.config.ts

@@ -0,0 +1,15 @@
+import { CustomProjectConfig } from 'lost-pixel';
+
+// https://docs.lost-pixel.com/user-docs/api-reference/lost-pixel.config.js-or-ts
+export const config: CustomProjectConfig = {
+  browser: 'chromium',
+  storybookShots: {
+    storybookUrl: './storybook-static',
+  },
+  threshold: 3,
+  imagePathBaseline: './baseline-images',
+  imagePathCurrent: './current-images',
+  imagePathDifference: './difference-images',
+  generateOnly: true,
+  failOnDifference: true,
+};

package.json

@@ -76,6 +76,7 @@
     "framer-motion": "^6.5.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "lost-pixel": "^2.23.0",
     "polished": "^4.2.2",
     "pre-commit": "^1.2.2",
     "prettier": "^2.8.8",