Setup CloudFlare workflow

.github/workflows/cloudflare-deploy.yml

@@ -0,0 +1,111 @@
+# NOTE: This name appears in GitHub's Checks API and in workflow's status badge.
+name: cloudflare-deploy
+
+# Trigger the workflow when:
+on:
+  # A push occurs to one of the matched branches.
+  push:
+    branches: [master]
+  # Or when a pull request event occurs for a pull request against one of the
+  # matched branches.
+  pull_request:
+    branches: [master]
+
+jobs:
+  cloudflare-pages:
+    # This name appears in GitHub's Checks API.
+    name: cloudflare-deploy
+    # Do not trigger job for dependency update bot.
+    if: github.actor != 'renovate[bot]'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      # In progress comment will be updated with a deploy status.
+      - name: Add in progress comment to PR
+        # We want to add in progress comment on a pull request event only.
+        if: github.event_name == 'pull_request'
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ## Deploying with <a href="https://pages.dev">Cloudflare Pages</a>
+            <table>
+              <tr>
+                <td><strong>Latest commit:</strong></td>
+                <td><code>${{ github.event.pull_request.head.sha }}</code></td>
+              </tr>
+              <tr>
+                <td><strong>Status:</strong></td><td>⏳ In progress</td>
+              </tr>
+            </table>
+      - name: Checkout code
+        uses: actions/checkout@v4
+        # Checkout pull request HEAD commit instead of merge commit.
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build project
+        run: yarn build
+      - name: Build Storybook
+        run: yarn build-storybook
+      - name: Publish to Cloudflare Pages
+        # Id is needed to access output in a next step.
+        id: deploy
+        uses: cloudflare/wrangler-action@v3
+        with:
+          # Token with Cloudflare Pages edit permission only generated in Cloudflare dashboard -> Manage Account -> Account API Tokens
+          apiToken: ${{ secrets.CLOUDFLARE_PAGES_API_TOKEN }}
+          # Acquired from Cloudflare dashboard -> Compute > Workers & Pages or dashboard url: https://dash.cloudflare.com/<account-id>/
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          # Project created via Cloudflare dashboard or CLI command "npx wrangler pages project create <project-name>"
+          command: pages deploy ./storybook-static --project-name=oasis-ui --branch ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.pull_request.number) || '' }}
+      # On a subsequent run the original comment will be updated.
+      - name: Update PR comment
+        uses: mshick/add-pr-comment@v2
+        # We want to update a comment on a pull request event only.
+        if: github.event_name == 'pull_request' && always()
+        with:
+          message: |
+            ## Deployed to <a href="https://pages.dev">Cloudflare Pages</a>
+            <table>
+              <tr>
+                <td><strong>Latest commit:</strong></td>
+                <td><code>${{ github.event.pull_request.head.sha }}</code></td>
+              </tr>
+              <tr>
+                <td><strong>Status:</strong></td><td>✅ Deploy successful!</td>
+              </tr>
+              <tr>
+                <td><strong>Preview URL:</strong></td>
+                <td><a href="${{ steps.deploy.outputs.deployment-url }}">${{ steps.deploy.outputs.deployment-url }}</a></td>
+              </tr>
+              <tr>
+                <td><strong>Alias:</strong></td>
+                <td><a href="${{ steps.deploy.outputs.pages-deployment-alias-url }}">${{ steps.deploy.outputs.pages-deployment-alias-url }}</a></td>
+              </tr>
+            </table>
+          message-failure: |
+            ## Deployed to <a href="https://pages.dev">Cloudflare Pages</a>
+            <table>
+              <tr>
+                <td><strong>Latest commit:</strong></td>
+                <td><code>${{ github.event.pull_request.head.sha }}</code></td>
+              </tr>
+              <tr>
+                <td><strong>Status:</strong></td><td>🚫 Deploy failed!</td>
+              </tr>
+            </table>
+          message-cancelled: |
+            ## Deployed to <a href="https://pages.dev">Cloudflare Pages</a>
+            <table>
+              <tr>
+                <td><strong>Status:</strong></td><td>✖️ Deploy cancelled!</td>
+              </tr>
+            </table>