Feat: Deploy pr previews

.github/workflows/cd-pr.yml

@@ -0,0 +1,40 @@
+name: Deploy the Pull Request Changes to GitHub pages
+
+on:
+  workflow_run:
+    workflows: ["Continuous Integration of Pull Request"]
+    types:
+      - completed
+
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+env:
+  STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: github-pages
+          path: build/
+          github-token: ${{github.token}}
+          repository: ${{github.repository}}
+          run-id: ${{github.event.workflow_run.id}}
+
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-deploy
+          build_dir: build/
+          commit_message: "Deploy to Github Pages"
+          jekyll: false
+          keep_history: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci-pr.yml

@@ -0,0 +1,126 @@
+name: Deploy PR previews
+concurrency: preview-${{ github.ref }}
+on:
+  pull_request_target:
+    types: [opened, reopened, synchronize, closed]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+      pages: write
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16.19.0"
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Filter the packages
+        uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            react:
+              - 'packages/react/**'
+            ui-elements:
+              - 'packages/ui-elements/**'
+            layout_editor:
+              - 'packages/layout_editor/**'
+            docs:
+              - 'packages/docs/**'
+
+      - name: Create Build Directory
+        run: mkdir -p build/
+
+      - name: Build Storybook
+        if: steps.changes.outputs.react == 'true' && github.event.action != 'closed'
+        run: yarn build:storybook
+        working-directory: packages/react
+
+      - name: Prepare Build for Storybook
+        if: steps.changes.outputs.react == 'true' && github.event.action != 'closed'
+        run: mv -v packages/react/storybook-static/* build/
+
+      - name: Build UI-Elements
+        if: steps.changes.outputs.ui-elements == 'true' && github.event.action != 'closed'
+        run: yarn build:storybook
+        working-directory: packages/ui-elements
+
+      - name: Prepare Build for UI-Elements
+        if: steps.changes.outputs.ui-elements == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/ui-elements/storybook-static/* build/
+          else
+            mkdir -p build/ui-elements
+            mv -v packages/ui-elements/storybook-static/* build/ui-elements/
+          fi
+
+      - name: Build Layout Editor
+        if: steps.changes.outputs.layout_editor == 'true' && github.event.action != 'closed'
+        env:
+          BASE_URL: "EmbeddedChat/pulls/pr-${{github.event.number}}/"
+        run: yarn build
+        working-directory: packages/layout_editor
+
+      - name: Prepare build for Layout_editor
+        if: steps.changes.outputs.layout_editor == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/layout_editor/dist/* build/
+          else
+            mkdir -p build/layout_editor
+            mv -v packages/layout_editor/dist/* build/layout_editor/
+          fi
+
+      - name: Setup Node.js for Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+
+      - name: "Install dependencies for docs"
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        run: yarn install
+        working-directory: packages/docs/
+
+      - name: Build Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        env:
+          BASEURL: "EmbeddedChat/pulls/pr-${{github.event.number}}/"
+        run: yarn build
+        working-directory: packages/docs
+
+      - name: Prepare build for Docs
+        if: steps.changes.outputs.docs == 'true' && github.event.action != 'closed'
+        run: |
+          if [ -z "$(ls -A build/)" ]; then
+            mv -v packages/docs/build/* build/
+          else
+            mkdir -p build/docs
+            mv -v packages/docs/build/* build/docs/
+          fi
+
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: build
+          preview-branch: gh-deploy
+          umbrella-dir: pulls
+          action: auto
+
+      - uses: rossjrw/pr-preview-action@v1
+        if: github.event.action == 'closed' || github.event.pull_request.merged == true
+        with:
+          source-dir: build
+          action: remove

packages/docs/docusaurus.config.js

@@ -17,7 +17,7 @@ const config = {
   url: "https://rocketchat.github.io/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/EmbeddedChat/docs/",
+  baseUrl: process.env.BASEURL || "/EmbeddedChat/docs/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

packages/layout_editor/vite.config.ts

@@ -11,5 +11,5 @@ export default defineConfig({
       },
     }),
   ],
-  base: "/EmbeddedChat/layout_editor"
+  base: process.env.BASE_URL || '/EmbeddedChat/layout_editor',
 });