Setup storybook and chromatic on the site (jpmorganchase#1028)

.github/workflows/chromatic-site.yml

@@ -0,0 +1,44 @@
+name: "Site Chromatic"
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+  push:
+    branches:
+      - main
+
+jobs:
+  chromatic-deployment:
+    if: github.event.pull_request.draft == false
+    # Operating System
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn
+      - name: Run build
+        run: yarn build:site:storybook
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action-next@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_SITE_TOKEN }}
+          workingDir: ./site
+          exitOnceUploaded: true
+          # Turbosnap if this is not the main branch
+          onlyChanged: true
+          skip: "changeset-release/*"
+          autoAcceptChanges: "main"
+          ignoreLastBuildOnBranch: "!(main)**"
+          traceChanged: "expanded"
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"

.github/workflows/deploy-site-storybook.yml

@@ -0,0 +1,79 @@
+name: Site Storybook Publish
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write
+
+    name: Deploy to Cloudflare Pages
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run build
+        run: yarn build:site:storybook
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+
+      - name: Publish
+        uses: cloudflare/pages-action@1
+        id: publish
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_SALT_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_SALT_ACCOUNT_ID }}
+          projectName: "saltdesignsystem-storybook"
+          directory: ./site/storybook-static
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.head_ref || github.ref_name }}
+
+      - name: Preview URL
+        uses: actions/github-script@v6
+        with:
+          script: |
+            if (context.eventName == 'pull_request') {
+              const previewUrl = "${{ steps.publish.outputs.url }}";
+              const commentText = `Site Storybook Preview Link `;
+              const {data: comments} = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.number,
+              });
+              const oldPreviewUrlComment = comments.find(comment => comment.body.includes(commentText));
+              if (!oldPreviewUrlComment) {
+                github.rest.issues.createComment({
+                  issue_number: context.issue.number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: `${commentText} ${previewUrl}`
+                });
+              } else {
+                github.rest.issues.updateComment({
+                  comment_id: oldPreviewUrlComment.id,
+                  issue_number: context.issue.number,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: `${commentText} ${previewUrl}`
+                });
+              };
+            }