From 91c17ffbd43b8732ee0f554882f6075bbbd0de8a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 27 Jun 2023 12:35:41 +0530 Subject: [PATCH] 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 | 35 +++++ .github/workflows/build-storybook.yml | 42 ++++++ .github/workflows/build-wds-preview.yml | 22 ---- .github/workflows/wds-vercel-preview.yml | 123 ------------------ .../theming/src/typography/typography.ts | 11 +- app/client/packages/storybook/package.json | 4 +- app/client/yarn.lock | 12 ++ 7 files changed, 99 insertions(+), 150 deletions(-) create mode 100644 .github/workflows/build-chromatic.yml create mode 100644 .github/workflows/build-storybook.yml delete mode 100644 .github/workflows/build-wds-preview.yml delete mode 100644 .github/workflows/wds-vercel-preview.yml diff --git a/.github/workflows/build-chromatic.yml b/.github/workflows/build-chromatic.yml new file mode 100644 index 0000000000..51df6e0ce5 --- /dev/null +++ b/.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 diff --git a/.github/workflows/build-storybook.yml b/.github/workflows/build-storybook.yml new file mode 100644 index 0000000000..bf1a1adce9 --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/build-wds-preview.yml b/.github/workflows/build-wds-preview.yml deleted file mode 100644 index 840b28a96a..0000000000 --- a/.github/workflows/build-wds-preview.yml +++ /dev/null @@ -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 diff --git a/.github/workflows/wds-vercel-preview.yml b/.github/workflows/wds-vercel-preview.yml deleted file mode 100644 index beb87796c9..0000000000 --- a/.github/workflows/wds-vercel-preview.yml +++ /dev/null @@ -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 }} - \ No newline at end of file diff --git a/app/client/packages/design-system/theming/src/typography/typography.ts b/app/client/packages/design-system/theming/src/typography/typography.ts index 7c772d52f8..8f309cd029 100644 --- a/app/client/packages/design-system/theming/src/typography/typography.ts +++ b/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", + }, + ); }; diff --git a/app/client/packages/storybook/package.json b/app/client/packages/storybook/package.json index 3e7d73a2a3..fa01c0cbdc 100644 --- a/app/client/packages/storybook/package.json +++ b/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", diff --git a/app/client/yarn.lock b/app/client/yarn.lock index ea21a77b8a..88297b5eca 100644 --- a/app/client/yarn.lock +++ b/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"