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"