chore: deploy Storybook book demo on PR (#4031)

Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Frederic Beaudoin <[email protected]>

.github/actions/publish-pr-review-site/action.yml

@@ -0,0 +1,58 @@
+name: 'Publish PR review site'
+description: Publish PR review stuff
+
+inputs:
+  token:
+    description: 'GitHub token'
+    required: true
+  copy:
+    description: 'Files to copy'
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@v4
+      with:
+        repository: coveo/ui-kit-prs
+        path: prs
+        sparse-checkout: '${{ github.event.pull_request.number }}'
+        token: ${{inputs.token}}
+    - name: 'Setup branch'
+      run: |
+        if [[ -z $(git ls-remote --heads origin refs/heads/${{github.event.pull_request.number}} | tr -s '[:blank:]') ]]; then
+          git switch -c "${{github.event.pull_request.number}}"
+        else
+          git fetch origin "refs/heads/${{github.event.pull_request.number}}"
+          git switch "${{github.event.pull_request.number}}"
+          git pull
+        fi
+      working-directory: prs
+      shell: bash
+    - name: 'Ensure clean directory exists'
+      run: |
+        rm -rf "${{github.event.pull_request.number}}"
+        mkdir -p "${{github.event.pull_request.number}}"
+      working-directory: prs
+      shell: bash
+    - name: 'Copy files'
+      if: ${{inputs.copy}}
+      run: |
+        cp -R packages/atomic/dist-storybook prs/${{github.event.pull_request.number}}
+      shell: bash
+    - name: 'Commit/Push'
+      run: |
+        git config user.name "GitHub Actions Bot"
+        git config user.email "<>"
+        git add "${{github.event.pull_request.number}}"
+        git commit -m "Add ${{github.sha}}"
+        git push --set-upstream origin ${{github.event.pull_request.number}}
+      working-directory: prs
+      shell: bash
+    - name: 'Open & put PR in merge queue'
+      run: |
+        gh pr new -f
+        gh pr merge
+      env:
+        GH_TOKEN: ${{inputs.token}}
+      working-directory: prs
+      shell: bash

.github/workflows/delete-pr-artifact-on-merge.yml

@@ -0,0 +1,13 @@
+name: 'Delete PR artifact on merge'
+on:
+  pull_request:
+    types: [closed]
+jobs:
+  delete:
+    environment: PR Artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/publish-pr-review-site
+        with:
+          token: ${{ secrets.GH_PUBLISH_TOKEN }}

.github/workflows/prbot.yml

@@ -24,10 +24,16 @@ jobs:
   build:
     name: 'Build'
     runs-on: ubuntu-latest
+    environment: PR Artifacts
     steps:
       - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4
       - uses: ./.github/actions/build
       - uses: ./.github/actions/commit-generated-files
+      - uses: ./.github/actions/publish-pr-review-site
+        if: github.event_name == 'pull_request'
+        with:
+          token: ${{ secrets.GH_PUBLISH_TOKEN }}
+          copy: true
   lint-check:
     name: 'Check with linter'
     needs: build

scripts/reports/bundle-size/report.mjs

@@ -31,14 +31,12 @@ function buildVisualReport(rows) {
 
   const rowsWithColumnsConcatenated = rows.map((row) => '|' + row.join('|'));
   const presentableRows = rowsWithColumnsConcatenated.join('\n');
+  const tableHead = `
+| File | Old (kb) | New (kb) | Change (%)
+| ---- |:--------:|:--------:|:------:`;
 
-  return `
-  **Bundle Size**
-  
-  | File | Old (kb) | New (kb) | Change (%)
-  | ---- |:--------:|:--------:|:------:
-  ${presentableRows}
-  `;
+  const table = [tableHead, presentableRows].join('\n');
+  return ['## Bundle Size', table].join('\n\n');
 }
 
 export function buildReport(oldSizes, newSizes) {

scripts/reports/live-examples/live-examples.mjs

@@ -0,0 +1,7 @@
+import {context} from '@actions/github';
+
+export const buildLiveExampleReport = async () =>
+  [
+    '## Live demo links',
+    `* [Storybook](https://coveo.github.io/ui-kit-prs/${context.payload.pull_request.number}/dist-storybook/)`,
+  ].join('\n\n');

scripts/reports/pr-report.mjs

@@ -4,10 +4,13 @@ import {
   updatePullRequestComment,
   createPullRequestComment,
 } from './github-client.mjs';
+import {buildLiveExampleReport} from './live-examples/live-examples.mjs';
 import {buildSSRProgressReport} from './ssr-progress/ssr-progress.mjs';
 import {buildTitleReport} from './title/verify-title.mjs';
 
-const reportTitle = 'Pull Request Report';
+const reportCommentIdentifier = '<!-- pr-report -->';
+
+const reportTitle = '# Pull Request Report';
 
 async function main() {
   const report = await buildReport();
@@ -16,18 +19,18 @@ async function main() {
 
 async function buildReport() {
   const titleFormatReport = await buildTitleReport();
-  const ssrProgress = await buildSSRProgressReport();
+  const liveExamplesReport = await buildLiveExampleReport();
   const bundleSizeReport = await buildBundleSizeReport();
+  const ssrProgress = await buildSSRProgressReport();
 
-  return `
-  **${reportTitle}**
-
-  ${titleFormatReport}
-
-  ${bundleSizeReport}
-
-  ${ssrProgress}
-  `;
+  return [
+    reportTitle,
+    titleFormatReport,
+    liveExamplesReport,
+    bundleSizeReport,
+    ssrProgress,
+    reportCommentIdentifier,
+  ].join('\n\n');
 }
 
 async function sendReport(report) {
@@ -39,9 +42,11 @@ async function sendReport(report) {
     ? updatePullRequestComment(comment.id, report)
     : createPullRequestComment(report);
 }
-
+''.en;
 function findBundleSizeComment(comments) {
-  return comments.find((comment) => comment.body.indexOf(reportTitle) !== -1);
+  return comments.find((comment) =>
+    comment.body.endsWith(reportCommentIdentifier)
+  );
 }
 
 main();

scripts/reports/ssr-progress/ssr-progress.mjs

@@ -76,17 +76,16 @@ function buildVisualReport(rows, logs) {
     return `<b>${useCase}</b> : ${controller}<br>`;
   });
   const printableLogs = logsFormatted.join(' ');
-  return `
-  **SSR Progress**
-
-  | Use case | SSR (#) | CSR (#) | Progress (%)
-  | ---- |:--------:|:--------:|:------:
-  ${printableRows}
-  <details>
-    <summary>Detailed logs</summary>
-    ${printableLogs}
-  </details>
-  `;
+  const tableHeader = `
+| Use case | SSR (#) | CSR (#) | Progress (%)
+| ---- |:--------:|:--------:|:------:`;
+  const detailedLogs = `
+<details>
+  <summary>Detailed logs</summary>
+  ${printableLogs}
+</details>`;
+  const message = [tableHeader, printableRows, detailedLogs].join('\n');
+  return ['## SSR Progress', message].join('\n\n');
 }
 
 export async function buildSSRProgressReport() {

scripts/reports/title/verify-title.mjs

@@ -17,29 +17,18 @@ async function getLinterConfiguration() {
 function buildReport(isTitleValid) {
   const message = isTitleValid ? buildSuccessMessage() : buildErrorMessage();
 
-  return `
-  **PR Title**
-
-  ${message}
-  `;
+  return ['## PR Title', message].join('\n\n');
 }
 
 function buildSuccessMessage() {
-  return `
-  :white_check_mark: Title follows the [conventional commit](${specUrl}) spec.
-  `;
+  return `:white_check_mark: Title follows the [conventional commit](${specUrl}) spec.`;
 }
 
 function buildErrorMessage() {
-  return `
-  :x: Title should follow the [conventional commit](${specUrl}) spec:
-  
-  <type>(optional scope): <description>
-
-  Example:
-  
-  feat(headless): add result-list controller
-  `;
+  return `:x: Title should follow the [conventional commit](${specUrl}) spec:  
+\`<type>(optional scope): <description>\`
+
+Example: \`feat(headless): add result-list controller\``;
 }
 
 export async function buildTitleReport() {