storybook.yml

name: Storybook

on:
  push:
    branches:
      - master
      - develop
      - dev/storybook8 # for testing
  pull_request_target:
    branches-ignore:
      # Since pull requests targets master mostly is the "develop" branch.
      # Storybook CI is checked on the "push" event of "develop" branch so it would cause a duplicate build.
      # This is a waste of chromatic build quota, so we don't run storybook CI on pull requests targets master.
      - master

jobs:
  build:
    # chromatic is not likely to be available for fork repositories, so we disable for fork repositories.
    if: github.repository == 'misskey-dev/misskey'
    runs-on: ubuntu-latest

    env:
      NODE_OPTIONS: "--max_old_space_size=7168"

    steps:
    - uses: actions/checkout@v4.1.1
      if: github.event_name != 'pull_request_target'
      with:
        fetch-depth: 0
        submodules: true
    - uses: actions/checkout@v4.1.1
      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@v4
    - name: Use Node.js 20.x
      uses: actions/setup-node@v4.0.4
      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 }}:$HEAD_REF"
        if [ "$BRANCH" = "misskey-dev:$HEAD_REF" ]; then
          BRANCH="$HEAD_REF"
        fi
        pnpm --filter frontend chromatic --exit-once-uploaded -d storybook-static --branch-name "$BRANCH" $(echo "$CHROMATIC_PARAMETER")
      env:
        HEAD_REF: ${{ github.event.pull_request.head.ref }}
        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    - name: Notify that Chromatic detects changes
      uses: actions/github-script@v7.0.1
      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@v4
      with:
        name: storybook
        path: packages/frontend/storybook-static