refactor: factor out some code to react-util and use it (#3498)

terrestris · May 6, 2024 · 7d2e6cf · 7d2e6cf
1 parent 7dba4ad
commit 7d2e6cf
Show file tree

Hide file tree

Showing 67 changed files with 300 additions and 2,050 deletions.
diff --git a/.github/workflows/on-publish.yml b/.github/workflows/on-publish.yml
@@ -29,7 +29,7 @@ jobs:
           ${{ runner.OS }}-
 
     - name: Install dependencies ⏬
-      run: npm ci
+      run: npm ci --force
 
     - name: Build styleguide 🏗️
       run: npm run build:styleguide

diff --git a/.github/workflows/on-pull-request.yml b/.github/workflows/on-pull-request.yml
@@ -24,7 +24,7 @@ jobs:
           ${{ runner.OS }}-
 
     - name: Install dependencies ⏬
-      run: npm ci
+      run: npm ci --force
 
     - name: Build artifacts 🏗️
       run: npm run build

diff --git a/.github/workflows/on-push-main.yml b/.github/workflows/on-push-main.yml
@@ -27,7 +27,7 @@ jobs:
           ${{ runner.OS }}-
 
     - name: Install dependencies ⏬
-      run: npm ci
+      run: npm ci --force
 
     - name: Generate coverage 🧪
       run: npm test

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -21,7 +21,7 @@ jobs:
           node-version: 18
 
       - name: Install dependencies ⏬
-        run: npm ci
+        run: npm ci --force
 
       - name: Build artifacts 🏗️
         run: npm run build

diff --git a/jest.config.js b/jest.config.js
@@ -20,7 +20,7 @@ module.exports = {
     '<rootDir>/dist/'
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!(ol|antd|d3-selection|@camptocamp/inkmap|(rc-[a-z-]*)|@ant-design\/css-animation|(-[a-z]+)*|@babel\/runtime)/)'
+    'node_modules/(?!(@terrestris/.*|ol|antd|@camptocamp/inkmap|(rc-[a-z-]*)|@ant-design\/css-animation|(-[a-z]+)*|@babel\/runtime)/)'
   ],
   setupFiles: [
     '<rootDir>/jest/__mocks__/matchMediaMock.js'

diff --git a/jest/setup.js b/jest/setup.js
@@ -15,3 +15,20 @@ Object.assign(global, {
 });
 
 Enzyme.configure({ adapter: new Adapter() });
+
+jest.mock('use-resize-observer', () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+}));
+
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    }));
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,9 +76,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@terrestris/base-util": "^1.0.1",
     "@terrestris/ol-util": "^14.0.0",
+    "@terrestris/react-util": "^2.2.0-beta.2",
     "@types/geojson": "^7946.0.10",
     "@types/lodash": "^4.14.197",
-    "@types/moment": "^2.13.0",
     "ag-grid-community": "^28.2.1",
     "ag-grid-react": "^28.2.1",
     "jspdf": "^2.5.1",
@@ -151,13 +151,14 @@
     "style-loader": "^3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.7.4",
+    "use-resize-observer": "^9.1.0",
     "webpack": "^5.88.2",
     "whatwg-fetch": "^3.6.18"
   },
   "peerDependencies": {
     "@types/react": ">=18",
     "antd": "^5",
-    "ol": "^7.1",
+    "ol": ">=^7",
     "react": ">=18"
   },
   "engines": {

diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md b/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md
@@ -2,9 +2,9 @@ The BackgroundLayerChooser
 
 ```jsx
 import BackgroundLayerChooser from '@terrestris/react-geo/dist/BackgroundLayerChooser/BackgroundLayerChooser';
-import MapContext from '@terrestris/react-geo/dist/Context/MapContext/MapContext';
-import { useMap } from '@terrestris/react-geo/dist/Hook/useMap';
-import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
+import { useMap } from '@terrestris/react-util/dist/hooks/useMap';
+import MapComponent from '@terrestris/react-util/dist/Map/MapComponent/MapComponent';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';

diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.less b/src/BackgroundLayerChooser/BackgroundLayerChooser.less
@@ -119,3 +119,58 @@
   }
 
 }
+
+// styling for preview cards
+.layer-cards {
+  display: flex;
+  gap: 10px;
+  padding: 5px;
+  background-color: var(--ant-primary-1);
+  border: solid 1px var(--ant-primary-color);
+  border-radius: 4px;
+  transition: 400ms;
+
+  .layer-preview {
+
+    cursor: pointer;
+    margin: auto 0;
+
+    &:hover {
+      outline: 2px solid var(--ant-primary-color-active);
+    }
+
+    &.selected {
+      .ant-spin-container {
+        img,
+        div.no-preview,
+        span.layer-title {
+          outline: 2px solid var(--ant-primary-color-active);
+          font-weight: bold;
+        }
+      }
+    }
+
+    .ant-spin-container {
+      display: flex;
+      flex-direction: column;
+
+      canvas {
+        outline: solid 1px var(--ant-primary-color );
+      }
+
+      span.layer-title {
+        position: absolute;
+        bottom: 0;
+        background: var(--ant-primary-color);
+        color: #fff;
+        text-align: center;
+        width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 0 4px;
+      }
+    }
+
+  }
+}