docs: PR demo on gh pages (#4935)

.github/workflows/clean-demo.yml

@@ -0,0 +1,35 @@
+name: Delete PR folder in gh-pages
+on:
+  pull_request:
+    types: [closed]
+
+permissions:
+  contents: write
+  pull-requests: write
+  statuses: write
+  checks: write
+  pages: write
+
+jobs:
+  clean:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout demo branch
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7
+        with:
+          path: demo
+          ref: gh-pages
+
+      - name: Delete PR folder
+        run: |
+          rm -rf ./demo/${{ github.event.number }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Commit demo for gh-pages
+        uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4
+        with:
+          directory: "./demo"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          message: "doc: cleanup demo"
+          branch: gh-pages

.github/workflows/demo.yml

@@ -0,0 +1,84 @@
+name: Demo CI
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+  statuses: write
+  checks: write
+  pages: write
+
+# This allows a subsequently queued workflow run to interrupt previous runs
+concurrency:
+  group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build and test
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7
+
+      - name: Use Node.js
+        uses: ./.github/actions/setup-node
+
+      - name: Install
+        working-directory: ./
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn install --frozen-lockfile
+
+      - name: Build Demo
+        run: yarn test:demo
+
+      - name: Checkout demo branch
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7
+        with:
+          path: demo
+          ref: gh-pages
+
+      - name: Add demo and commit it
+        # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment
+        run: |
+          echo "Prepare demo folder"
+          cd demo && git rm -rf --ignore-unmatch ./main && cd ..
+          mkdir -p ./demo/main
+          cp ./index.html ./demo/main/
+          mkdir ./demo/main/cmf
+          mkdir ./demo/main/containers
+          mkdir ./demo/main/design-system
+          mkdir ./demo/main/faceted-search
+          mkdir ./demo/main/theme
+          mkdir ./demo/main/storybook-one
+          cp -R packages/cmf/jsdoc ./demo/main/cmf
+          cp -R packages/containers/storybook-static/* ./demo/main/containers
+          cp -R packages/design-docs/storybook-static/* ./demo/main/design-system
+          cp -R packages/faceted-search/storybook-static/* ./demo/main/faceted-search
+          cp -R packages/theme/dist/* ./demo/main/theme
+          cp -R packages/storybook-one/storybook-static/* ./demo/main/storybook-one
+          echo Size of demo:
+          du -d 1 -h ./demo/main
+          cd demo && git add .
+
+      - name: Commit demo for gh-pages
+        uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4
+        with:
+          directory: "./demo"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          message: "doc: update demo"
+          branch: gh-pages
+
+      - name: Deploy to Netlify production
+        if: github.ref == 'refs/heads/master'
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=packages/design-docs/storybook-static --prod
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/pr-demo.yml

@@ -1,27 +1,22 @@
-name: PR demo CI
-
+name: PR Demo CI
 on:
   pull_request:
-  push:
-    branches: [master]
 
 permissions:
-  contents: read
-  deployments: read
-  pull-requests: write # needed to write a comment
+  contents: write
+  pull-requests: write
   statuses: write
+  checks: write
+  pages: write
 
-
-# This allows a subsequently queued workflow run to interrupt previous runs
 concurrency:
-  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
+  group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
   cancel-in-progress: true
 
 jobs:
   build:
+    name: Build demo on PR
     runs-on: ubuntu-latest
-    name: Build demo and deploy it
-    environment: pull_request_unsafe
 
     steps:
       - name: Checkout sources
@@ -30,64 +25,63 @@ jobs:
       - name: Use Node.js
         uses: ./.github/actions/setup-node
 
-      - name: cache for storybook
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
-        with:
-          path: packages/*/node_modules
-          key: ${{ runner.os }}-storybook-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-storybook-
-
       - name: Install
-        run: |
-          node --version
-          yarn install --frozen-lockfile
+        working-directory: ./
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn install --frozen-lockfile
+
+      - name: Build Demo
+        run: yarn test:demo
 
-      - name: Run test:demo
-        run: |
-          node --version
-          yarn test:demo
+      - name: Checkout demo branch
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7
+        with:
+          path: demo
+          ref: gh-pages
 
-      - name: Before surge
+      - name: Add demo and commit it
+        # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment
         run: |
-          node --version
-          yarn global add surge
-          echo "$(yarn global bin)" >> $GITHUB_PATH
-          node --version
-          ./.github/workflows/before-surge.sh
-        env:
-          STORYBOOK_FIGMA_ACCESS_TOKEN: ${{ secrets.STORYBOOK_FIGMA_ACCESS_TOKEN }}
-
-      - name: deploy if master
-        if: github.ref == 'refs/heads/master'
-        run: surge --project .static --domain "talend.surge.sh"
-        env:
-          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
-          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+          echo "Prepare demo folder"
+          cd demo && git rm -rf --ignore-unmatch ${{ github.event.number }} && cd ..
+          mkdir -p ./demo/${{ github.event.number }}
+          cp ./index.html ./demo/${{ github.event.number }}/
+          mkdir ./demo/${{ github.event.number }}/cmf
+          mkdir ./demo/${{ github.event.number }}/containers
+          mkdir ./demo/${{ github.event.number }}/design-system
+          mkdir ./demo/${{ github.event.number }}/faceted-search
+          mkdir ./demo/${{ github.event.number }}/theme
+          mkdir ./demo/${{ github.event.number }}/storybook-one
+          cp -R packages/cmf/jsdoc ./demo/${{ github.event.number }}/cmf
+          cp -R packages/containers/storybook-static/* ./demo/${{ github.event.number }}/containers
+          cp -R packages/design-docs/storybook-static/* ./demo/${{ github.event.number }}/design-system
+          cp -R packages/faceted-search/storybook-static/* ./demo/${{ github.event.number }}/faceted-search
+          cp -R packages/theme/dist/* ./demo/${{ github.event.number }}/theme
+          cp -R packages/storybook-one/storybook-static/* ./demo/${{ github.event.number }}/storybook-one
+          echo Size of demo:
+          du -d 1 -h ./demo/${{ github.event.number }}
+          cd demo && git add .
 
-      - name: Deploy to Netlify production
-        if: github.ref == 'refs/heads/master'
-        uses: netlify/actions/cli@master
+      - name: Commit demo for gh-pages
+        uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4
         with:
-          args: deploy --dir=packages/design-docs/storybook-static --prod
-        env:
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          directory: "./demo"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          message: "doc: update demo from ${{ github.event.number }}"
+          branch: gh-pages
 
-      - name: deploy if PR
-        if: github.ref != 'refs/heads/master'
-        run: |
-          surge --project .static --domain "${{ github.event.number }}.talend.surge.sh"
-        env:
-          SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
-          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: Storybook for this PR deployed on this
 
-      - name: Comment PR
-        uses: daohoangson/comment-on-github@v2
-        if: ${{github.event_name == 'pull_request' && !startsWith(github.ref, 'refs/heads/dependabot') }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create comment
+        uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa #v3.0.2
+        if: steps.fc.outputs.comment-id == ''
         with:
-          body: ":octocat: [Demo is available here](http://${{ github.event.number }}.talend.surge.sh)"
-          fingerprint: ${{ github.event.number }}
-          replace: please
+          issue-number: ${{ github.event.number }}
+          body: |
+            Storybook for this PR deployed on this [github page](https://talend.github.io/ui/${{ github.event.number }})