build: upgrade Storybook to 8 beta (#13297)

* chore: upgrade Storybook to 8

* ci: restore Storybook workflow

* build: createRequire

* ci: TurboSnap life extension

1 files changed, 113 insertions, 0 deletions

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
new file mode 100644
index 0000000000..eba1607956
--- /dev/null
+++ b/.github/workflows/storybook.yml
@@ -0,0 +1,113 @@
+name: Storybook
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+      - dev/storybook8 # for testing
+  pull_request_target:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    env:
+      NODE_OPTIONS: "--max_old_space_size=7168"
+
+    steps:
+    - uses: actions/checkout@v3.6.0
+      if: github.event_name != 'pull_request_target'
+      with:
+        fetch-depth: 0
+        submodules: true
+    - uses: actions/checkout@v3.6.0
+      if: github.event_name == 'pull_request_target'
+      with:
+        fetch-depth: 0
+        submodules: true
+        ref: "refs/pull/${{ github.event.number }}/merge"
+    - name: Checkout actual HEAD
+      if: github.event_name == 'pull_request_target'
+      id: rev
+      run: |
+        echo "base=$(git rev-list --parents -n1 HEAD | cut -d" " -f2)" >> $GITHUB_OUTPUT
+        git checkout $(git rev-list --parents -n1 HEAD | cut -d" " -f3)
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+        run_install: false
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v3.8.1
+      with:
+        node-version-file: '.node-version'
+        cache: 'pnpm'
+    - run: corepack enable
+    - run: pnpm i --frozen-lockfile
+    - name: Check pnpm-lock.yaml
+      run: git diff --exit-code pnpm-lock.yaml
+    - name: Build misskey-js
+      run: pnpm --filter misskey-js build
+    - name: Build storybook
+      run: pnpm --filter frontend build-storybook
+    - name: Publish to Chromatic
+      if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/master'
+      run: pnpm --filter frontend chromatic --exit-once-uploaded -d storybook-static
+      env:
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    - name: Publish to Chromatic
+      if: github.event_name != 'pull_request_target' && github.ref != 'refs/heads/master'
+      id: chromatic_push
+      run: |
+        DIFF="${{ github.event.before }} HEAD"
+        if [ "$DIFF" = "0000000000000000000000000000000000000000 HEAD" ]; then
+          DIFF="HEAD"
+        fi
+        CHROMATIC_PARAMETER="$(node packages/frontend/.storybook/changes.js $(git diff-tree --no-commit-id --name-only -r $(echo "$DIFF") | xargs))"
+        if [ "$CHROMATIC_PARAMETER" = " --skip" ]; then
+          echo "skip=true" >> $GITHUB_OUTPUT
+        fi
+        if pnpm --filter frontend chromatic -d storybook-static $(echo "$CHROMATIC_PARAMETER"); then
+          echo "success=true" >> $GITHUB_OUTPUT
+        else
+          echo "success=false" >> $GITHUB_OUTPUT
+        fi
+      env:
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    - name: Publish to Chromatic
+      if: github.event_name == 'pull_request_target'
+      id: chromatic_pull_request
+      run: |
+        DIFF="${{ steps.rev.outputs.base }} HEAD"
+        if [ "$DIFF" = "0000000000000000000000000000000000000000 HEAD" ]; then
+          DIFF="HEAD"
+        fi
+        CHROMATIC_PARAMETER="$(node packages/frontend/.storybook/changes.js $(git diff-tree --no-commit-id --name-only -r $(echo "$DIFF") | xargs))"
+        if [ "$CHROMATIC_PARAMETER" = " --skip" ]; then
+          echo "skip=true" >> $GITHUB_OUTPUT
+        fi
+        BRANCH="${{ github.event.pull_request.head.user.login }}:${{ github.event.pull_request.head.ref }}"
+        if [ "$BRANCH" = "misskey-dev:${{ github.event.pull_request.head.ref }}" ]; then
+          BRANCH="${{ github.event.pull_request.head.ref }}"
+        fi
+        pnpm --filter frontend chromatic --exit-once-uploaded -d storybook-static --branch-name $BRANCH $(echo "$CHROMATIC_PARAMETER")
+      env:
+        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    - name: Notify that Chromatic detects changes
+      uses: actions/github-script@v6.4.0
+      if: github.event_name != 'pull_request_target' && steps.chromatic_push.outputs.success == 'false'
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          github.rest.repos.createCommitComment({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            commit_sha: context.sha,
+            body: 'Chromatic detects changes. Please [review the changes on Chromatic](https://www.chromatic.com/builds?appId=6428f7d7b962f0b79f97d6e4).'
+          })
+    - name: Upload Artifacts
+      uses: actions/upload-artifact@v3
+      with:
+        name: storybook
+        path: packages/frontend/storybook-static