zh-web-sdk 2.9.0 → 2.10.4

package/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+.tsx?$": ["ts-jest",{}],
+  },
+  modulePathIgnorePatterns: ["<rootDir>/dist/"],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zh-web-sdk",
-  "version": "2.9.0",
+  "version": "2.10.4",
   "private": false,
   "description": "ZeroHash Web SDK",
   "homepage": "https://github.com/seedcx/zh-web-sdk",
@@ -17,9 +17,14 @@
     "build:zip": "npm run build && npm run zip",
     "zip": "rimraf build/* && node scripts/zip.js",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "archiver": "^5.3.1",
     "esbuild": "0.18.3",
@@ -32,12 +37,14 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^5.0.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",

package/src/hooks/__tests__/use-window-size.test.tsx

@@ -0,0 +1,26 @@
+import {useWindowSize} from "../use-window-size";
+import {act, renderHook, waitFor} from "@testing-library/react";
+
+describe("useWindowSize", () => {
+  it("Should work", async () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    // Asset initial values.
+    expect(result.current.height).toBe(768);
+    expect(result.current.width).toBe(1024);
+
+
+    // Change the viewport to 500px.
+    global.innerWidth = 500;
+    global.innerHeight = 500;
+
+    act(() => {
+      global.dispatchEvent(new Event('resize'));
+    })
+
+    await waitFor(() => {
+      expect(result.current.width).toBe(500);
+      expect(result.current.height).toBe(500);
+    })
+  })
+})

package/src/hooks/use-window-size.ts

@@ -0,0 +1,19 @@
+import {useLayoutEffect, useState} from "react";
+
+export const useWindowSize = () => {
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setWidth(window.innerWidth);
+      setHeight(window.innerHeight);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return {
+    height,
+    width
+  };
+}

package/src/iframe-container/AppContainer.tsx

@@ -20,6 +20,7 @@ import {
   Page,
   appIdentifierToActionPrefixMap,
 } from "../types";
+import { useWindowSize } from "../hooks/use-window-size";
 
 interface AppContainerProps {
   isAppActive?: boolean;
@@ -129,6 +130,7 @@ const AppContainer = ({
   const hasJwt = !!jwt;
   const [container, setContainerStyle] = useState(containerStyle);
   const allAppsState = useSelector((state) => state as AppContainerMappedProps);
+  const { height }= useWindowSize();
 
   /**
    * setContainer sets the CSS styles based on the current matching media queries
@@ -231,6 +233,8 @@ const AppContainer = ({
         isAppActive
           ? {
               ...appWrapperStyle,
+              maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`,
+              height: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`
             }
           : appWrapperHiddenStyle
       }

package/src/styles.ts

@@ -49,7 +49,7 @@ export const appWrapperStyle: CSSProperties = {
     flexDirection: "column",
     width: "100vw",
     height: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
-    maxHeight: window.innerHeight + "px",
+    maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
     background: "rgba(0,0,0,0.5)",
     cursor: "pointer",
 }

package/.github/workflows/release.yaml

@@ -1,57 +0,0 @@
-name: "Release"
-
-on:
-  push:
-    tags:
-      - "*"
-
-jobs:
-  release:
-    name: Release
-    env:
-      NODE_VERSION: '16.13.0'
-    runs-on: ["builder","x64","linux","self-hosted"]
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: NPM CI
-        run: npm ci
-
-      - name: NPM Build
-        run: echo "BUILD=$(npm run build:zip | grep Zipping | awk '{print $3}') " >>  $GITHUB_OUTPUT
-        id: build
-
-      - name: Create a GitHub release
-        uses: ncipollo/release-action@v1
-        with:
-          tag: ${{ github.ref_name }}
-          name: Release ${{ github.ref_name }}
-          body: |
-            ${{ github.ref.outputs.changelog }}
-          generateReleaseNotes: true
-          token: ${{ secrets.GITHUB_TOKEN }}
-          artifacts: |
-            ${{ steps.build.outputs.BUILD }}
-
-  publish:
-    name: Publish
-    env:
-      NODE_VERSION: '16.13.0'
-    runs-on: ["builder","x64","linux","self-hosted"]
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-          registry-url: 'https://registry.npmjs.org'
-      - name: NPM CI
-        run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}