docs: storybook (#87)

* feat: storybook init in vfx-js/core

* Revert "feat: storybook init in vfx-js/core"

This reverts commit 1d17afc.

* feat: storybook init in docs

* docs: add preset stories

* chore: update gitignore

* chore: dark theme

* docs: static build settings for storybook

* chore: use npm-run-all2

* chore: chromatic config

* fix: add outColor declaration in Tritone

* chore: fix type declarations for images

* docs: add time slider

* refactor: move storybook to a dedicated package

* chore: remove unused file

* chore: add typedef

* chore: build setting

* feat: add seekbar

* refactor: tidy

* chore: tidy

* test: add layout test

* docs: add tests for zIndex

* docs: add overlay and wrap tests

* fix: build settings

* chore: fmt

* ci: add workflow for VRT on Chromatic

.github/workflows/ci.yml

@@ -1,26 +1,21 @@
 name: Test
-
 on:
-    push:
-        branches:
-            - main
-    pull_request:
-
+  push:
+    branches:
+      - main
+  pull_request:
 jobs:
-    test:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v3
-
-            - name: Setup Node
-              uses: actions/setup-node@v3
-              with:
-                  node-version: "20"
-                  cache: "npm"
-                  cache-dependency-path: "**/package-lock.json"
-
-            - name: Install dependencies
-              run: npm ci
-
-            - name: Test
-              run: npm test
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
+      - name: Install dependencies
+        run: npm ci
+      - name: Test
+        run: npm test

.github/workflows/vrt.yml

@@ -0,0 +1,38 @@
+name: "Visual Regression Test"
+on:
+  issue_comment:
+    types: [created]
+jobs:
+  vrt:
+    # Trigger by PullRequest comments
+    if: ${{ github.event.issue.pull_request && github.event.comment.body == '/vrt' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get PR details
+        uses: actions/github-script@v7
+        id: get-pr
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const pr = await github.rest.pulls.get({
+                owner,
+                repo,
+                pull_number: context.issue.number
+            });
+            return pr.data;
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: "**/package-lock.json"
+      - name: Install dependencies
+        run: npm ci
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}