おサイフに優しい reg-suit(+ pnpm) + Cloudflare R2 の VRT 構成を試す

$ pnpm add -D http-server storycap

-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "preview-storybook": "http-server storybook-static --ci -p 6007",
+    "run:storycap": "storycap http://localhost:6007 --serverCmd 'pnpm preview-s
torybook'"

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 9cf3e23..d18f287 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storycap"
   ],
   framework: {
     name: "@storybook/react-vite",
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 37914b1..6338a86 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
-import type { Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react";
+import { withScreenshot } from 'storycap';
 
 const preview: Preview = {
   parameters: {
@@ -8,7 +9,22 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
+    screenshot: {
+      fullPage: true,
+      captureBeyondViewport: false,
+      delay: 100,
+      viewports: {
+        desktop: { width: 1920, height: 1080 },
+        tablet: { width: 768, height: 1024 },
+        mobile: { width: 360, height: 800, isMobile: true, hasTouch: true },
+      },
+    },
   },
+
+  decorators: [
+    withScreenshot as Decorator
+  ]
 };
 
 export default preview;

$ pnpm build-storybook && pnpm capture:story
$ lsd --tree __screenshots__          
 __screenshots__
└──  Example
    ├──  Button
    │   ├──  Large_desktop.png
    │   ├──  Large_mobile.png
    │   ├──  Large_tablet.png
    │   ├──  Primary_desktop.png
    │   ├──  Primary_mobile.png
    │   ├──  Primary_tablet.png
    │   ├──  Secondary_desktop.png
    │   ├──  Secondary_mobile.png
    │   ├──  Secondary_tablet.png
    │   ├──  Small_desktop.png
    │   ├──  Small_mobile.png
    │   └──  Small_tablet.png
    ├──  Header
    │   ├──  'Logged In_desktop.png'
    │   ├──  'Logged In_mobile.png'
    │   ├──  'Logged In_tablet.png'
    │   ├──  'Logged Out_desktop.png'
    │   ├──  'Logged Out_mobile.png'
    │   └──  'Logged Out_tablet.png'
    └──  Page
        ├──  'Logged In_desktop.png'
        ├──  'Logged In_mobile.png'
        ├──  'Logged In_tablet.png'
        ├──  'Logged Out_desktop.png'
        ├──  'Logged Out_mobile.png'
        └──  'Logged Out_tablet.png'

$ pnpm dlx reg-suit init

1330 verbose stack TypeError: Cannot read properties of null (reading 'matches')
1330 verbose stack     at Link.matches (/Users/kaito/.local/share/mise/installs/node/22.5.0/lib/node_modules/npm/

$ pnpm add -D reg-suit reg-keygen-git-hash-plugin reg-notify-github-plugin reg-publish-s3-plugin

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "threshold": 0,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true
  }
}

$ pnpm reg-suit prepare -p notify-github

$ pnpm reg-suit prepare -p publish-s3

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "threshold": 0,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-notify-github-plugin": {
      "prComment": true,
      "prCommentBehavior": "default",
      "clientId": "szCxMDMyNDc31y9KTdctLs0s0S0y0i3IK8jVNzUxMjYztzDVT9HNzswtLc7PAwA="
    },
    "reg-publish-s3-plugin": {
      "bucketName": "bill-manager-reg-suit"
    }
  }
}

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "threshold": 0,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-notify-github-plugin": {
      "prComment": true,
      "prCommentBehavior": "default",
      "clientId": "szCxMDMyNDc31y9KTdctLs0s0S0y0i3IK8jVNzUxMjYztzDVT9HNzswtLc7PAwA="
    },
    "reg-publish-s3-plugin": {
      "bucketName": "bill-manager-reg-suit",
      "sdkOptions": {
        "region": "auto",
        "endpoint": "https://eaf4c6ed11d96851d34c76deb5f2d080.r2.cloudflarestorage.com"
      }
    }
  }
}

$ pnpm reg-suit run

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "threshold": 0,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-notify-github-plugin": {
      "prComment": true,
      "prCommentBehavior": "default",
      "clientId": "szCxMDMyNDc31y9KTdctLs0s0S0y0i3IK8jVNzUxMjYztzDVT9HNzswtLc7PAwA="
    },
    "reg-publish-s3-plugin": {
      "bucketName": "bill-manager-reg-suit",
      "customDomain": "pub-25101e298a7b441e950d3b1f9a0b3b71.r2.dev",
      "sdkOptions": {
        "region": "auto",
        "endpoint": "https://eaf4c6ed11d96851d34c76deb5f2d080.r2.cloudflarestorage.com"
      }
    }
  }
}

name: Visual Regression Testing

on:
  push:
    paths:
      - 'src/**'
      - 'public/**'
      - '.storybook'
      - 'pnpm-lock.yaml'
      - 'regconfig.json'
      - '.github/workflows/vrt.yml'

jobs:
  check:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
      with:
        fetch-depth: 0

    - name: Setup Node
      uses: ./.github/actions/setup_node

    - name: workaround for detached HEAD
      run: |
        git checkout ${GITHUB_REF#refs/heads/} || git checkout -b ${GITHUB_REF#refs/heads/} && git pull

    - name: create the current snapshot
      run: |
        pnpm build-storybook
        pnpm capture:story

    - name: run reg-suit
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.CLOUDFLARE_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.CLOUDFLARE_SECRET_ACCESS_KEY }}
      run: |
        pnpm reg-suit run