docs: live previews refactor (refinedev#2583)

* docs: add dotenv

* docs: add `lz-string`

* docs: add `live-preview` component

* docs: remove `react-live`

* docs(live-preview): update live blocks for testing

* docs: separate split-code helper

* docs: add conditional component

* docs(live-previews): pass `disableScroll` query

* docs(live-preview): run conditional once

* docs(live-preview): update preview urls

* docs: add new initial route example in live previews

* docs: move lz-string to worker

* docs: use preview frame with web worker

* chore(core): add expect-error directive

* feat(live-previews): initialize live-previews app

* feat(live-previews): add custom react-live with ts and lz-string transforms

* chore: add `start:docs` script

* docs(contributing): update for new live-preview approach

* chore(live-previews): update `@types/node` version

* chore: add `ts-ignore`

* chore: add `ts-expect-error` back

* test(core): ignore unused `expect-error` directive error

* test(live-previews): fix jest

* test(live-previews): fix missing variable

* test(live-previews): fix jest issues

* build: add live-preview site deploy

* fix(live-previews): fix types

* fix(live-previews): fix return types

* build(live-previews): update start script with production builds

* build: add prefixes to `start:docs` script

* style(live-preview): override ant layout paddings

* feat(live-previews): handle loader for stylesheet

* build: add publish-dir

* build: add live preview site for web

* build: add production deploy for live preview

* chore: update master push action

* chore: update pull request doc

* chore: update pull request doc action

* chore: update pull request doc action

* chore: update pull request doc

* chore: update live preview url

* chore: dummy push

* chore: update LIVE_PREVIEW_URL

* fix(live-previews): fix looping

* docs(live-previews): add `shared` type

* docs(antd): update antd component live previews

* docs(core-auth-page): update live previews

* chore(linter): fix errors (prettier/prettier)

* chore(eslint): fix prettier-eslint conflicts

* chore(eslint): add `eslint-config-prettier` dependency

* docs(antd-auth-page): update live previews and layout

* feat(live-previews): enable source maps for production

* feat(live-previews): add `setRefineProps` helper

* docs(contributing): add `setRefineProps` helper

* feat(live-previews): update loader

* docs(live-previews): add max wait for frames

Co-authored-by: Ömer Faruk APLAK <[email protected]>

.codesandbox/ci.json

@@ -12,5 +12,5 @@
         "packages/react-table",
         "packages/simple-rest"
     ],
-    "sandboxes": ["/examples/fineFoods/admin/antd", "/examples/fineFoods/client", "/examples/fineFoods/admin/mui"]
+    "sandboxes": ["/examples/fineFoods/admin/antd", "/examples/fineFoods/client", "/examples/fineFoods/admin/mui", "/examples/base/antd"]
   }

.eslintrc

@@ -8,10 +8,11 @@
     },
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": ["prettier", "@typescript-eslint"],
+    "plugins": ["@typescript-eslint", "prettier"],
     "extends": [
         "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
     ],
     "overrides": [
         {

.github/workflows/master-push.yml

@@ -259,6 +259,58 @@ jobs:
             --set ingress.tls[0].hosts[0]=${{ env.domain }} \
         env:
           domain: "example.refine.dev"
+  documentation-live-preview:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - name: Workflow run cleanup action
+        uses: rokroskar/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: live previews docker build
+        uses: docker/build-push-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          registry: ghcr.io
+          repository: pankod/refine/refine-live-preview
+          path: packages/live-previews
+          tag_with_sha: true
+      - name: Set up kubectl
+        uses: matootie/[email protected]
+        with:
+          personalAccessToken: ${{ secrets.DIGITALOCEAN_TOKEN }}
+          clusterName: pankod-k8s
+          expirationTime: 1200
+      - name: Get nodes
+        run: kubectl get nodes
+      - name: Deploy refine-live-previews-documentation to k8s
+        run: |
+          cd packages/live-previews
+          mv ./k8s/live-previews/Chart.yaml ./k8s/live-previews/Chart.old.yaml &&
+          cat ./k8s/live-previews/Chart.old.yaml | grep -v appVersion > ./k8s/live-previews/Chart.yaml &&
+          echo -e "\r\nappVersion: sha-${GITHUB_SHA::7}\r\n" >> ./k8s/live-previews/Chart.yaml &&
+          cat ./k8s/live-previews/Chart.yaml
+          helm delete refine-next-live-previews-documentation || :
+          helm upgrade refine-next-live-previews-documentation ./k8s/live-previews --install --atomic --timeout 20m0s --values=./k8s/live-previews/values.yaml \
+            --set ingress.enabled=true \
+            --set ingress.annotations."kubernetes\.io/ingress\.class"=nginx \
+            --set ingress.annotations."cert-manager\.io/issuer"=letsencrypt-prod \
+            --set ingress.hosts[0].host=${{ env.domain }} \
+            --set ingress.hosts[0].paths[0].path="/" \
+            --set ingress.hosts[0].paths[0].pathType=ImplementationSpecific \
+            --set ingress.tls[0].secretName=${{ env.domain }} \
+            --set ingress.tls[0].hosts[0]=${{ env.domain }} \
+        env:
+          domain: "live-preview.refine.dev"
   documentation-gh:
     runs-on: ubuntu-latest
     steps:
@@ -289,4 +341,4 @@ jobs:
           git config --global user.email "[email protected]"
           git config --global user.name "pankod-bot"
           npm install
-          npm run deploy
+          LIVE_PREVIEW_URL=https://live-preview.refine.dev/preview npm run deploy

.github/workflows/next-push.yml

@@ -60,6 +60,59 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.PANKOD_BOT_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+  documentation-live-preview:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip')"
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - name: Workflow run cleanup action
+        uses: rokroskar/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: live previews docker build
+        uses: docker/build-push-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          registry: ghcr.io
+          repository: pankod/refine/refine-live-preview
+          path: packages/live-previews
+          tag_with_sha: true
+      - name: Set up kubectl
+        uses: matootie/[email protected]
+        with:
+          personalAccessToken: ${{ secrets.DIGITALOCEAN_TOKEN }}
+          clusterName: pankod-k8s
+          expirationTime: 1200
+      - name: Get nodes
+        run: kubectl get nodes
+      - name: Deploy refine-live-previews-documentation to k8s
+        run: |
+          cd packages/live-previews
+          mv ./k8s/live-previews/Chart.yaml ./k8s/live-previews/Chart.old.yaml &&
+          cat ./k8s/live-previews/Chart.old.yaml | grep -v appVersion > ./k8s/live-previews/Chart.yaml &&
+          echo -e "\r\nappVersion: sha-${GITHUB_SHA::7}\r\n" >> ./k8s/live-previews/Chart.yaml &&
+          cat ./k8s/live-previews/Chart.yaml
+          helm delete refine-next-live-previews-documentation || :
+          helm upgrade refine-next-live-previews-documentation ./k8s/live-previews --install --atomic --timeout 20m0s --values=./k8s/live-previews/values.yaml \
+            --set ingress.enabled=true \
+            --set ingress.annotations."kubernetes\.io/ingress\.class"=nginx \
+            --set ingress.annotations."cert-manager\.io/issuer"=letsencrypt-prod \
+            --set ingress.hosts[0].host=${{ env.domain }} \
+            --set ingress.hosts[0].paths[0].path="/" \
+            --set ingress.hosts[0].paths[0].pathType=ImplementationSpecific \
+            --set ingress.tls[0].secretName=${{ env.domain }} \
+            --set ingress.tls[0].hosts[0]=${{ env.domain }} \
+        env:
+          domain: "next.live-previews.refine.dev"
   documentation:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip')"

.github/workflows/pull-request-doc.yml

@@ -38,11 +38,21 @@ jobs:
           HostName github.com
           IdentityFile ~/.ssh/id_rsa
           EOT
+      - name: Wait for Netlify Deploy
+        uses: probablyup/[email protected]
+        id: waitForDeployment
+        with:
+          site_id: ${{ secrets.NETLIFY_PREVIEW_SITE_ID }}
+        env:
+          NETLIFY_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      - name: output test
+        run: |
+          echo ${{ steps.waitForDeployment.outputs.url }}
       - name: Install Dependencies
         run: |
           cd documentation
           npm install
-          npm run build
+          LIVE_PREVIEW_URL=${{ steps.waitForDeployment.outputs.url }}/preview npm run build
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]
         with:

documentation/Dockerfile

@@ -12,6 +12,8 @@ RUN npm install
 
 COPY . /opt/app
 
+ENV LIVE_PREVIEW_URL=https://next.live-previews.refine.dev/preview
+
 RUN npm run build
 
 FROM node:16-alpine