chore: add chromatic workflow (#24749)

This PR adds the integration for chromatic which will help us catch
visual bugs in the WDS components.
The way it works is, the PR won't allowed to merge till reviewers
reviews all the changes in the components.
One thing to note is the workflow only works when there is a change in
design system files.

Fixes #21923

.github/workflows/build-chromatic.yml

@@ -0,0 +1,35 @@
+name: 'Build Storybook Preview and Publish to Chromatic'
+
+on:
+  pull_request:
+    paths:
+      - 'app/client/packages/design-system/**'
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+   
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge
+
+      - name: Use Node.js 16.14.0
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.14.0"
+
+      - name: Install Dependencies
+        working-directory: ./app/client/packages/storybook
+        run: yarn install --immutable
+        
+      - name: Publish to Chromatic
+        id: chromatic-publish
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: ./app/client/packages/storybook
+          exitOnceUploaded: true

.github/workflows/build-storybook.yml

@@ -0,0 +1,42 @@
+name: Build and Deploy Storybook to Vercel
+
+on:
+  push:
+    branches:
+      - release
+    paths:
+      - 'app/client/packages/design-system/**'
+
+jobs:
+  storybook-deploy-release:
+    runs-on: ubuntu-latest
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WDS_PROJECT_ID }}
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v3
+        with:
+          ref: release
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Use Node.js 16.14.0
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.14.0"
+
+      - name: Pull Vercel Environment Information
+        working-directory: ./app/client/packages/storybook
+        run: vercel pull --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
+
+      - name: Build Project Artifacts
+        working-directory: ./app/client/packages/storybook
+        run: vercel build --prod --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
+
+
+      - name: Deploy Project Artifacts to Vercel
+        working-directory: ./app/client/packages/storybook
+        id: set-dpurl
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_WDS_TOKEN }} 

.github/workflows/build-wds-preview.yml

@@ -1,22 +0,0 @@
-# If someone with write access comments "/build-wds-preview" on a pull request, emit a repository_dispatch event
-name: Build WDS Preview
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  build-deploy-preview:
-    runs-on: ubuntu-latest
-    # Only run for PRs, not issue comments
-    if: |
-      github.event.issue.pull_request
-    steps:
-
-      - name: Slash Command Dispatch
-        uses: peter-evans/slash-command-dispatch@v3
-        with:
-          issue-type: pull-request
-          token: ${{ secrets.APPSMITH_DEPLOY_PREVIEW_PAT }}
-          commands: |
-            build-wds-preview

.github/workflows/wds-vercel-preview.yml

@@ -1,123 +0,0 @@
-name: Build WDS Vercel Preview
-on:
-  workflow_dispatch:
-  repository_dispatch:
-    types: [ build-wds-preview-command ]
-jobs:
-  vercel-deploy-preview:
-    if: github.event_name == 'repository_dispatch'
-    name: vercel-wds-build
-    runs-on: ubuntu-latest
-
-    env:
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WDS_PROJECT_ID }}
-
-    steps:
-      - name: Checkout PR
-        uses: actions/checkout@v3
-        with:
-          ref: "refs/pull/${{ github.event.client_payload.pull_request.number }}/merge"
-
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-
-      - name: Use Node.js 16.14.0
-        if: steps.run_result.outputs.run_result != 'success'
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16.14.0"
-        
-      - name: Pull Vercel Environment Information
-        working-directory: ./app/client/packages/storybook
-        run: vercel pull --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
-      
-      - name: Build Project Artifacts
-        working-directory: ./app/client/packages/storybook
-        run: vercel build --yes --token=${{ secrets.VERCEL_TOKEN }}
-        
-        
-      - name: Deploy Project Artifacts to Vercel
-        working-directory: ./app/client/packages/storybook
-        id: set-dpurl
-        run: |
-          vercel deploy --prebuilt --token=${{ secrets.VERCEL_WDS_TOKEN }} >> ~/run_result.txt
-          echo "::set-output name=dpurl::$(cat ~/run_result.txt)"
-          
-      - name: vercel-notify
-        uses: peter-evans/create-or-update-comment@v2
-        with:
-           issue-number: ${{ github.event.client_payload.pull_request.number }}
-           body: |
-             Deploy-Preview-URL: ${{ steps.set-dpurl.outputs.dpurl }}
-             
-  vercel-deploy-release:
-    if: github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/release'
-    runs-on: ubuntu-latest
-    env:
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WDS_PROJECT_ID }}
-    steps:
-      - name: Checkout PR
-        uses: actions/checkout@v3
-        with:
-          ref: release
-
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-
-      - name: Use Node.js 16.14.0
-        if: steps.run_result.outputs.run_result != 'success'
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16.14.0"
-
-      - name: Pull Vercel Environment Information
-        working-directory: ./app/client/packages/storybook
-        run: vercel pull --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
-
-      - name: Build Project Artifacts
-        working-directory: ./app/client/packages/storybook
-        run: vercel build --prod --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
-
-
-      - name: Deploy Project Artifacts to Vercel
-        working-directory: ./app/client/packages/storybook
-        id: set-dpurl
-        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_WDS_TOKEN }} 
-      
-  vercel-deploy-prod:
-    if: github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/master'
-    runs-on: ubuntu-latest
-    env:
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WDS_PROD_PROJECT_ID }}
-    steps:
-      - name: Checkout PR
-        uses: actions/checkout@v3
-        with:
-          ref: master
-
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-
-      - name: Use Node.js 16.14.0
-        if: steps.run_result.outputs.run_result != 'success'
-        uses: actions/setup-node@v3
-        with:
-          node-version: "16.14.0"
-
-      - name: Pull Vercel Environment Information
-        working-directory: ./app/client/packages/storybook
-        run: vercel pull --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
-
-      - name: Build Project Artifacts
-        working-directory: ./app/client/packages/storybook
-        run: vercel build --prod --yes --token=${{ secrets.VERCEL_WDS_TOKEN }}
-
-
-      - name: Deploy Project Artifacts to Vercel
-        working-directory: ./app/client/packages/storybook
-        id: set-dpurl
-        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_WDS_TOKEN }} 
-      

app/client/packages/design-system/theming/src/typography/typography.ts

@@ -60,7 +60,7 @@ export const createTypographyStyles = (
     });
 
     return {
-      fontFamily: `-apple-system, BlinkMacSystemFont, "-apple-system Fallback: Segoe UI", "-apple-system Fallback: Roboto"`,
+      fontFamily: `-apple-system, BlinkMacSystemFont, "-apple-system Fallback: Segoe UI", "-apple-system Fallback: Roboto", "-apple-system Fallback: Ubuntu"`,
       ...styles,
     };
   }
@@ -78,7 +78,10 @@ export const createTypographyStyles = (
 };
 
 export const createGlobalFontStack = () => {
-  return createFontStack([appleSystem, BlinkMacSystemFont, segoeUI, roboto], {
-    fontFaceFormat: "styleString",
-  });
+  return createFontStack(
+    [appleSystem, BlinkMacSystemFont, segoeUI, roboto, ubuntu],
+    {
+      fontFaceFormat: "styleString",
+    },
+  );
 };

app/client/packages/storybook/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "build": "build-storybook",
+    "chromatic": "chromatic --project-token CHROMATIC_PROJECT_TOKEN"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -27,6 +28,7 @@
     "@types/react-dom": "^17.0.2",
     "autoprefixer": "^9.0.0",
     "babel-loader": "^8.3.0",
+    "chromatic": "^6.19.8",
     "postcss": "^8",
     "storybook-addon-pseudo-states": "^1.15.2",
     "storybook-color-picker": "^3.1.0",

app/client/yarn.lock

@@ -2228,6 +2228,7 @@ __metadata:
     "@types/react-dom": ^17.0.2
     autoprefixer: ^9.0.0
     babel-loader: ^8.3.0
+    chromatic: ^6.19.8
     colorjs.io: ^0.4.3
     postcss: ^8
     react-docgen-typescript: ^2.2.2
@@ -11766,6 +11767,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^6.19.8":
+  version: 6.19.8
+  resolution: "chromatic@npm:6.19.8"
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 3f80373d9e77d3363924c274c8b9465b5f0ff835b7fb4a753848e37068a4564fa67ab205a4cf89820cf136fdefd637b54730819a5c376406a87bf8737ddf03ac
+  languageName: node
+  linkType: hard
+
 "chrome-remote-interface@npm:^0.27.1":
   version: 0.27.2
   resolution: "chrome-remote-interface@npm:0.27.2"