ci: create pr preview and e2e workflow (#222)

AB#3559759

Author: johnhwhite

.github/workflows/e2e.yml

@@ -0,0 +1,81 @@
+name: E2E
+on:
+  push:
+    branches:
+      - master
+      - '[0-9]+.x.x'
+  pull_request:
+    branches:
+      - master
+      - '[0-9]+.x.x'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.run_number || github.head_ref || github.ref_name || github.event.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_CLOUD_DISTRIBUTED_EXECUTION: 'false'
+  CYPRESS_VERIFY_TIMEOUT: 120000
+  PERCY_BROWSER_EXECUTABLE: /usr/bin/chromium
+  PERCY_SKIP_UPDATE_CHECK: 'true'
+  PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'
+  SB_CHROMIUM_PATH: /usr/bin/chromium
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          path: 'skyux-icons'
+          fetch-depth: '0'
+          token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
+      - name: Checkout skyux
+        uses: actions/checkout@v5
+        with:
+          repository: 'blackbaud/skyux'
+          ref: 'main'
+          path: 'skyux'
+          token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
+      - name: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version-file: 'skyux/.nvmrc'
+      - name: Install dependencies
+        run: npm ci
+        working-directory: 'skyux-icons'
+      - name: Build project
+        run: npm run build
+        working-directory: 'skyux-icons'
+      - name: Install skyux
+        run: npm ci
+        working-directory: 'skyux'
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+      - name: Install Cypress
+        run: |
+          set -euxo pipefail
+          npx cypress install
+          npx cypress verify
+        working-directory: 'skyux'
+      - name: Build Storybooks
+        run: npx nx build-storybook icon-storybook --no-dte
+        working-directory: 'skyux'
+        env:
+          NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}'
+      - name: Apply icon preview link tag
+        run: |
+          for idx in dist/storybook/*/iframe.html; do
+            echo "Adding skyux-icons.svg to $idx"
+            sed -i'' 's~</head>~<link rel="prefetch" href="./skyux-icons.svg" class="skyux-icons-preview"></head>~' $idx
+            cp -v ../skyux-icons/dist/assets/svg/skyux-icons.svg $(dirname $idx)/
+          done
+        working-directory: 'skyux'
+      - name: Run e2e tests
+        run: |
+          npx percy exec -- npx nx e2e icon-storybook-e2e -c prebuilt --no-dte --skip-nx-cache
+        working-directory: 'skyux'
+        env:
+          PERCY_TOKEN: '${{ secrets.PERCY_TOKEN }}'

.github/workflows/pages.yml

@@ -1,73 +1,137 @@
+name: Pages
 on:
-  push:
-    branches:
-      - master
   pull_request:
     branches:
       - master
+      - '[0-9]+.x.x'
+
 permissions:
+  actions: read
   contents: read
   pages: write
   id-token: write
+
 concurrency:
   group: pages
   cancel-in-progress: false
 
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build project
-        run: npm run build
-      - name: Upload artifact
-        uses: actions/upload-artifact@v4
-        if: github.event_name == 'pull_request'
-        with:
-          name: pr-${{ github.event.pull_request.number }}
-          path: './dist'
-          retention-days: 30
-          if-no-files-found: error
+env:
+  NX_CLOUD_DISTRIBUTED_EXECUTION: 'false'
 
-  deploy:
+jobs:
+  pages:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
-    needs: [build]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
-          ref: master
+          path: 'skyux-icons'
+          token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
+      - name: Checkout skyux
+        uses: actions/checkout@v5
+        with:
+          repository: 'blackbaud/skyux'
+          ref: 'main'
+          path: 'skyux'
+          token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
+          node-version-file: 'skyux/.nvmrc'
       - name: Install dependencies
         run: npm ci
+        working-directory: 'skyux-icons'
       - name: Build project
         run: npm run build
-      - name: Download artifact
-        uses: actions/download-artifact@v4
+        working-directory: 'skyux-icons'
+      - name: Install skyux
+        run: npm ci
+        working-directory: 'skyux'
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+      - name: Build Storybooks
+        run: npx nx run-many -t build-storybook --projects=tag:icons-preview --no-dte
+        working-directory: 'skyux'
+        env:
+          NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}'
+      - name: Build playground
+        run: npx nx run playground:build --no-dte && mkdir -pv dist/preview-pages
+        working-directory: 'skyux'
+        env:
+          NX_CLOUD_ACCESS_TOKEN: '${{ secrets.NX_CLOUD_ACCESS_TOKEN }}'
+      - name: Retrieve other preview sites
+        uses: actions/download-artifact@v5
         with:
           github-token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
-          path: './dist'
+          path: skyux/dist/preview-pages/
           pattern: 'pr-*'
           repository: '${{ github.repository }}'
+      - name: Create preview site for PR ${{ github.event.number }}
+        run: |
+          rm -rfv dist/preview-pages/pr-${{ github.event.number }}
+          mkdir -pv dist/preview-pages/pr-${{ github.event.number }}/storybooks
+          mv -v dist/apps/* dist/preview-pages/pr-${{ github.event.number }}/
+          mv -v dist/storybook/* dist/preview-pages/pr-${{ github.event.number }}/storybooks/
+          for idx in dist/preview-pages/pr-${{ github.event.number }}/*/index.html; do
+            APP_BASE_HREF="skyux-icons/pr-${{ github.event.number }}/$(basename $(dirname $idx))"
+            echo "Setting base href to ${APP_BASE_HREF} for $idx"
+            sed -i'' 's~<base href="/"~<base href="/'${APP_BASE_HREF}'/"~g' $idx
+          done
+        working-directory: 'skyux'
+      - name: Apply icon preview link tag
+        run: |
+          for idx in dist/preview-pages/pr-${{ github.event.number }}/*/index.html dist/preview-pages/pr-${{ github.event.number }}/storybooks/*/iframe.html; do
+            echo "Adding skyux-icons.svg to $idx"
+            sed -i'' 's~</head>~<link rel="prefetch" href="./skyux-icons.svg" class="skyux-icons-preview"></head>~' $idx
+            cp -v ../skyux-icons/dist/assets/svg/skyux-icons.svg $(dirname $idx)/
+          done
+        working-directory: 'skyux'
+      - name: Create Stackblitz link
+        run: |
+          mkdir -pv ${{ runner.temp	}}/stackblitz
+          cd ${{ runner.temp }}/stackblitz
+          node ${{ github.workspace }}/skyux-icons/scripts/create-stackblitz-link.mjs --url="https://${{ github.repository_owner }}.github.io/skyux-icons/pr-${{ github.event.number }}/playground"
+          mkdir -pv ${{ github.workspace }}/skyux/dist/preview-pages/pr-${{ github.event.number }}/stackblitz
+          cp -v stackblitz.html ${{ github.workspace }}/skyux/dist/preview-pages/pr-${{ github.event.number }}/stackblitz/index.html
+      - name: Generate comment for PR ${{ github.event.number }}
+        run: |
+          npx nx g @skyux-sdk/e2e-schematics:pr-comment --pr=pr-${{ github.event.number }} \
+            --url="https://${{ github.repository_owner }}.github.io/skyux-icons" \
+            --repoUrl="https://github.com/${{ github.repository }}" \
+            --apps="$(ls dist/preview-pages/pr-${{ github.event.number }} | fgrep -v storybooks | tr '\n' ,)" \
+            --storybooks="$(ls dist/preview-pages/pr-${{ github.event.number }}/storybooks | tr '\n' ,)" \
+            --skipCompositeStorybook
+          mv -v dist/pr_index.html dist/preview-pages/pr-${{ github.event.number }}/index.html
+        working-directory: 'skyux'
+      - name: Save PR ${{ github.event.number }} Preview
+        uses: actions/upload-artifact@v4
+        with:
+          name: pr-${{ github.event.number }}
+          path: skyux/dist/preview-pages/pr-${{ github.event.number }}
+          overwrite: 'true'
+          retention-days: 30
+          if-no-files-found: error
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist'
+          path: skyux/dist/preview-pages
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+      - name: Comment
+        run: |
+          COMMENT_ID=$(gh api -H "Accept: application/vnd.github-commitcomment.raw+json" -H "X-GitHub-Api-Version: 2022-11-28" repos/${{ github.repository }}/issues/${{ github.event.number }}/comments -q 'map(select(.body | contains("Component Storybooks:"))) | .[0].id // empty')
+          if [ -n "$COMMENT_ID" ]; then
+            echo "Updating existing comment $COMMENT_ID"
+            gh api --method PATCH -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" repos/${{ github.repository }}/issues/comments/${COMMENT_ID} -F body=@skyux/dist/pr_comment.md
+          else
+            echo "Creating a new comment"
+            gh pr comment ${{ github.event.number }} -R ${{ github.repository }} -F skyux/dist/pr_comment.md
+          fi
+        env:
+          GH_TOKEN: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'

.github/workflows/release-please.yml

@@ -7,9 +7,10 @@ on:
   push:
     branches:
       - master
+      - '[0-9]+.x.x'
 
 env:
-  PRERELEASE: 'false'
+  RELEASE_PR_PREFIX: 'chore: release'
 
 permissions:
   contents: write
@@ -19,17 +20,49 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v3
-        id: release
+      - uses: actions/checkout@v5
         with:
-          changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"deprecation","section":"Deprecations","hidden":false},{"type":"revert","section":"Reverts","hidden":false}]'
-          release-type: 'node'
-          default-branch: '${{ github.ref_name }}'
-          package-name: '@skyux/icons'
-          pull-request-title-pattern: 'chore: release ${version}'
-          labels: 'autorelease ${{ github.ref_name }}: pending'
-          release-labels: 'autorelease ${{ github.ref_name }}: tagged'
-          prerelease: ${{ env.PRERELEASE == 'true' }}
-          draft-pull-request: true
-          include-v-in-tag: false
+          fetch-depth: 0
           token: '${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}'
+      - uses: actions/setup-node@v5
+        with:
+          cache: 'npm'
+          node-version-file: '.nvmrc'
+      - name: npm install
+        run: npm ci
+      - name: Next release
+        if: ${{ github.event_name != 'push' || ! startsWith(github.event.head_commit.message, env.RELEASE_PR_PREFIX) }}
+        # Create or update a release branch and its pull request.
+        run: npx skyux-dev release ${{ github.event_name == 'workflow_dispatch' && ! endsWith(github.event.ref, 'main') && ! endsWith(github.event.ref, '.x.x') && '--dry-run=true' || '' }}
+        env:
+          GH_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+      - uses: actions/github-script@v8
+        name: Release
+        if: ${{ github.event_name == 'push' && startsWith(github.event.head_commit.message, env.RELEASE_PR_PREFIX) }}
+        id: release
+        # Create a release based on the release pull request.
+        with:
+          github-token: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+          script: |
+            const prevVersion = JSON.parse((await exec.getExecOutput('git', ['cat-file', '--textconv', `${context.payload.before}:package.json`])).stdout).version;
+            const nextVersion = JSON.parse((await exec.getExecOutput('git', ['cat-file', '--textconv', `${context.payload.after}:package.json`])).stdout).version;
+            if (!nextVersion || prevVersion === nextVersion) {
+              console.log('No version change detected. Exiting.');
+              process.exit(0);
+            }
+            core.setOutput('release_created', '1');
+            core.setOutput('tag_name', nextVersion);
+
+            const releaseExists = await github.rest.repos.getReleaseByTag({ ...context.repo, tag: nextVersion }).then(() => true).catch(() => false);
+            if (!releaseExists) {
+              const releaseNotes = (await exec.getExecOutput('npx', ['skyux-dev', 'release-notes', `--releaseName=${nextVersion}`])).stdout;
+              await github.rest.repos.createRelease({ ...context.repo, name: `v${nextVersion}`, tag_name: nextVersion, body: releaseNotes, prerelease: nextVersion.includes('-') });
+            }
+      - name: Notify Slack
+        if: ${{ steps.release.outputs.release_created }}
+        uses: rtCamp/action-slack-notify@07cbdbfd6c6190970778d8f98f11d073b2932aae # v2.3.3
+        env:
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+          SLACK_MESSAGE: Successfully published SKY UX Icons ${{ steps.release.outputs.tag_name }} to NPM. http://github.com/${{ github.repository }}/blob/${{ github.ref_name }}/CHANGELOG.md
+          SLACK_ICON: https://github.com/blackbaud.png?size=48
+          SLACK_USERNAME: SKY UX

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.19.5

.skyuxdev.json

@@ -1,3 +1,4 @@
 {
-  "baseBranch": "master"
+  "baseBranch": "master",
+  "releaseBranch": "release-please--branches--{baseBranch}--components--icons"
 }

.versionrc

@@ -0,0 +1,33 @@
+{
+  "//": "Configuration for https://github.com/absolute-version/commit-and-tag-version",
+  "releaseAs": null,
+  "prerelease": null,
+  "preset": "angular",
+  "header": "# Changelog\n\n",
+  "releaseCommitMessageFormat": "chore: release {{currentTag}}",
+  "scripts": {
+    "prebump": "npx skyux-dev release-version"
+  },
+  "skip": {
+    "tag": true
+  },
+  "tagPrefix": "",
+  "types": [
+    {
+      "type": "feat",
+      "section": "Features"
+    },
+    {
+      "type": "fix",
+      "section": "Bug Fixes"
+    },
+    {
+      "type": "deprecation",
+      "section": "Deprecations"
+    },
+    {
+      "type": "revert",
+      "section": "Reverts"
+    }
+  ]
+}