chore: 🤖 Introduce VRT

.github/workflows/reg.yml

@@ -0,0 +1,45 @@
+name: reg-suit
+
+on: push
+
+jobs:
+  visual-regression-test:
+    name: Visual Regression Test
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    container:
+      image: regviz/node-xcb
+      env:
+        GIT_DISCOVERY_ACROSS_FILESYSTEM: 1
+        GITHUB_WORKSPACE: /home/runner/work/ubie-oss/ubie-ui
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          path: /home/runner/work/ubie-oss/ubie-ui
+
+      - uses: ./actions/setup-node-and-install-deps
+
+      - name: Installing Chrome via Puppeteer
+        run: node ./node_modules/puppeteer/install.js
+
+      - name: Build
+        if: success()
+        run: npm run build
+
+      # https://github.com/reg-viz/reg-suit/tree/master?tab=readme-ov-file#workaround-for-detached-head
+      - name: workaround for detached HEAD
+        run: |
+          git config --global --add safe.directory /__w/ubie-oss/ubie-ui
+          git checkout ${GITHUB_REF#refs/heads/} || git checkout -b ${GITHUB_REF#refs/heads/} && git pull
+
+      - name: Capture screen shots
+        run: npm run screenshot
+
+      - name: Run reg-suit
+        run: npm run regression
+
+env:
+  # TODO: Set your service account key
+  GCLOUD_SERVICE_KEY: ${{ secrets.GCLOUD_SERVICE_KEY }}

.gitignore

@@ -21,4 +21,6 @@ build-storybook.log
 # Test
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+.reg
+__screenshots__

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.@(mdx|stories.@(ts|tsx))'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', 'storycap'],
   framework: '@storybook/react-vite',
   docs: {
     autodocs: true,

.storybook/preview.ts

@@ -0,0 +1,44 @@
+import '@ubie/design-tokens/dist/tokens.css';
+import type { Parameters, Decorator } from '@storybook/react';
+import { withScreenshot, isScreenshot } from 'storycap';
+
+export const decorators: Decorator[] = [
+  // https://github.com/reg-viz/storycap/issues/810
+  withScreenshot(),
+  // https://github.com/reg-viz/storycap/issues/464
+  (StoryFn) => {
+    if (isScreenshot()) {
+      function addStyle(styleString: string) {
+        const style = document.createElement('style');
+        style.textContent = styleString;
+        document.head.append(style);
+      }
+      addStyle(`
+          *,
+          *::before,
+          *::after {
+            transition: none !important;
+            animation: none !important;
+          }
+          input {
+            caret-color: transparent !important;
+          }
+        `);
+    }
+    return StoryFn();
+  },
+];
+
+export const parameters: Parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  screenshot: {
+    // TODO: スクリーンしショットをしたいデバイスがあれば指定する
+    // viewport: 'iPhone X',
+  },
+};