react-spatial 1.4.0 → 1.4.1

package/.github/workflows/conventional-pr-title.yml

@@ -0,0 +1,21 @@
+name: Check PR title
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: aslafy-z/conventional-pr-title-action@v2.2.0
+        with:
+          success-state: Title follows the specification.
+          failure-state: Title does not follow the specification.
+          context-name: conventional-pr-title
+          preset: conventional-changelog-angular@latest
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: main
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Run linting and tests
+        run: |
+          yarn install --frozen-lockfile
+          yarn lint
+          yarn test
+        env:
+          CI: true

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

package/.husky/post-checkout

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn install --frozen-lockfile

package/.husky/post-merge

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn install --frozen-lockfile

package/.husky/post-rebase

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn install --frozen-lockfile

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+sort && CI=true npx lint-staged

package/.nvmrc

@@ -0,0 +1 @@
+16

package/.whitesource

@@ -0,0 +1,8 @@
+##########################################################
+####    WhiteSource Integration configuration file    ####
+##########################################################
+
+# Configuration #
+#---------------#
+ws.repo.scan=true
+vulnerable.check.run.conclusion.level=failure

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [1.4.1](https://github.com/geops/react-spatial/compare/v1.4.0...v1.4.1) (2023-04-28)
+
+
+### Bug Fixes
+
+* use a more intuitive zooming behavior ([2d43f31](https://github.com/geops/react-spatial/commit/2d43f3189096b2195e0b550e8fb2d9d994746a8a))
+
+## [1.4.0](https://github.com/geops/react-spatial/compare/v1.3.2...v1.4.0) (2023-01-09)
+
+
+### Features
+
+* **CanvasSaveButton:** add extraData.qrCode option to insert QR code in canvas export  ([#700](https://github.com/geops/react-spatial/issues/700)) ([16be889](https://github.com/geops/react-spatial/commit/16be889d97682c2a2d21c2fa17d55cae205e09da))
+
+### [1.3.2](https://github.com/geops/react-spatial/compare/v1.3.1...v1.3.2) (2022-12-15)
+
+
+### Bug Fixes
+
+* fix use of baselayers permalink and baselayerswitcher ([#699](https://github.com/geops/react-spatial/issues/699)) ([23af45f](https://github.com/geops/react-spatial/commit/23af45f5681cc50cfc4c60502b71c161a478fe71))
+
+### [1.3.1](https://github.com/geops/react-spatial/compare/v1.3.1-beta.0...v1.3.1) (2022-12-15)
+
+
+### Bug Fixes
+
+* fix detection of base layer in permalink ([9099ba7](https://github.com/geops/react-spatial/commit/9099ba704d15c670e87f8cb9245f06f159078f3e))
+
+## [1.3.0](https://github.com/geops/react-spatial/compare/v1.3.0-beta.1...v1.3.0) (2022-11-14)
+
+
+### Bug Fixes
+
+* **LayerTree:** add input and toggle props for layer tree renderItemContent ([#697](https://github.com/geops/react-spatial/issues/697)) ([8df5237](https://github.com/geops/react-spatial/commit/8df5237482373dc9c9de1ab9cfecefaf3472dcba))
+
+### [1.2.2](https://github.com/geops/react-spatial/compare/v1.2.1...v1.2.2) (2022-07-22)
+
+### [1.2.1](https://github.com/geops/react-spatial/compare/v1.2.0...v1.2.1) (2022-07-22)
+
+
+### Bug Fixes
+
+* make component better work with nextjs image sand routing ([#694](https://github.com/geops/react-spatial/issues/694)) ([85871fe](https://github.com/geops/react-spatial/commit/85871fe2201ecad0de76442bc9d77815bfe6db27))
+
+## [1.2.0](https://github.com/geops/react-spatial/compare/v1.0.35...v1.2.0) (2022-06-20)
+
+
+### Features
+
+* use standard-version and commitlint for automatic versioning and changelog ([#690](https://github.com/geops/react-spatial/issues/690)) ([2c83f00](https://github.com/geops/react-spatial/commit/2c83f00c05f5b76b3f7e38978fb022d7cebfbcfc))

package/DEVELOP.md

@@ -0,0 +1,113 @@
+# Develop
+
+## Create new component
+
+Follow the [guidelines](https://github.com/geops/react-spatial/tree/master/src/components).
+
+## Create new theme
+
+Follow the [guidelines](https://github.com/geops/react-spatial/tree/master/src/themes).
+
+## Documentation
+
+We are using [react-styleguidist](https://react-styleguidist.js.org/).
+Documentation and examples are available [here](https://react-spatial.geops.de/).
+
+Build the doc:
+
+```bash
+yarn doc
+```
+
+Run the doc on [`locahost:6060`](http://locahost:6060/):
+
+```bash
+yarn start
+```
+
+## Tests
+
+We are using [jest]([https://react-styleguidist.js.org/](https://jestjs.io/docs/en/getting-started.html)) and [enzyme]([https://github.com/airbnb/enzyme](https://airbnb.io/enzyme/)).
+
+Run the tests in watch mode:
+
+```bash
+yarn test --watch
+```
+
+## Coverage
+
+Run coverage:
+
+```bash
+yarn coverage
+```
+
+Then open the file `coverage/lcov-report/index.html` in your browser.
+
+## Publish on [npmjs.com](https://www.npmjs.com/package/react-spatial)
+
+Run publish:
+
+```bash
+publish:public
+```
+You need to enter the new version number in the command line.
+Then the new version must be published on [npmjs.com](https://www.npmjs.com/package/react-spatial).
+
+## Publish a development version on [npmjs.com](https://www.npmjs.com/package/react-spatial)
+
+This version WILL NOT be displayed to other in [npmjs.com](https://www.npmjs.com/package/react-spatial).
+
+Run publish:
+
+```bash
+publish:beta
+```
+
+You need to enter the new version number in the command line.
+Append `-beta.0` to the current version or increase the beta number.
+Then the new version must be published on [npmjs.com](https://www.npmjs.com/package/react-spatial) with the tag beta.
+
+## How to use SVG
+
+Before adding an SVG file in this folder please clean it using [svgo](https://www.npmjs.com/package/svgo) or [svgomg](https://jakearchibald.github.io/svgomg/).
+
+After optimization, verify you can use it Openlayers using this [code sandbox](https://codesandbox.io/s/5w5o4mqwlk).
+
+By default the svg loader will load the svg file as a react component if you want to load svg file as a base64 data URI use the extension .url.svg :
+
+```javascript
+// Import as a React component:
+import NorthArrow from 'northArrow.svg';
+// Use: <NorthArrow />
+
+// Import as a base64 data URI (or with an url the file is too big):
+import northArrow from 'northArrow.url.svg';
+// northArrow = "data:image/svg+xml;base64,PHN2ZyB4...."
+```
+
+You could also use others loaders (ex: svg-inline-loader , svg-url-loader ...) .
+To use these loaders just adapt the extension of the svg file and add the loader config in styleguide.config.js, then you will be able to use it like this :
+
+```javascript
+// Import as an inline svg:
+import northArrow from 'northArrow.svginline.svg';
+// northArrow = "<svg xmlns='http://www.w3.org/2000/svg' height='192' ...> ... </svg>"
+
+// Import as an encoded inline svg data URI (or with an url the file is too big):
+import northArrow from 'northArrow.svgurl.svg';
+// northArrow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='192' ...%3E ... %3C/svg%3E"
+```
+
+## How to use SVG with a dynamic size
+
+In case you want your SVG fits perfectly his parent div you need to remove `width` and `height` attributes of `<svg>` and replace it by a `viewBox` property, like this:
+
+Replace
+
+    `<svg width="192" height="192">`
+
+by
+
+    `<svg viewBox="0 0 192 192">`

package/README.md

@@ -10,7 +10,7 @@ This library provides React components to build web applications and to visualiz
 
 This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library.
 
-Documentation and examples at https://react-spatial.geops.de.
+Documentation and examples at https://react-spatial.geops.io.
 
 ## Getting Started
 

package/__mocks__/mapbox-gl.js

@@ -0,0 +1,11 @@
+/* eslint-disable class-methods-use-this */
+class Map {
+  isStyleLoaded() {}
+
+  getCanvas() {}
+
+  once() {}
+}
+module.exports = {
+  Map,
+};

package/__mocks__/resize-observer-polyfill.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+export default class ResizeObserver {
+  constructor(onResize) {
+    ResizeObserver.onResize = onResize;
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package/data/topic1.js

@@ -0,0 +1,119 @@
+import Style from 'ol/style/Style';
+import Circle from 'ol/style/Circle';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
+
+const topic1 = {
+  id: 'topic1',
+  name: 'Topic 1',
+  visible: true,
+  children: [
+    {
+      name: 'OSM Baselayer',
+      visible: true,
+      isBaseLayer: true,
+      data: {
+        type: 'xyz',
+        url: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      },
+    },
+    {
+      name: 'Other layers',
+      visible: true,
+      type: 'parent',
+      children: [
+        {
+          name: 'Countries Borders',
+          visible: false,
+          data: {
+            type: 'vectorLayer',
+            url:
+              'https://openlayers.org/en/latest/examples/data/geojson/' +
+              'countries.geojson',
+          },
+        },
+        {
+          name: 'USA Population Density',
+          visible: true,
+          data: {
+            type: 'wmts',
+            url:
+              'https://services.arcgisonline.com/arcgis/rest/services/' +
+              'Demographics/USA_Population_Density/MapServer/WMTS/?layer=0' +
+              '&style=default&tilematrixset=EPSG%3A3857&Service=WMTS&' +
+              'Request=GetTile&Version=1.0.0&Format=image%2Fpng&',
+            projection: 'EPSG:3857',
+          },
+        },
+      ],
+    },
+    {
+      name: 'Vector sample layers',
+      visible: true,
+      radioGroup: 'radio',
+      children: [
+        {
+          name: 'Points Samples',
+          radioGroup: 'vectorLayers',
+          visible: false,
+          data: {
+            style: new Style({
+              image: new Circle({
+                radius: 5,
+                fill: new Fill({
+                  color: '#ff0000',
+                }),
+              }),
+            }),
+            type: 'vectorLayer',
+            url:
+              'https://raw.githubusercontent.com/openlayers/openlayers/' +
+              '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' +
+              'point-samples.geojson',
+          },
+        },
+        {
+          name: 'Lines Samples',
+          radioGroup: 'vectorLayers',
+          visible: true,
+          data: {
+            style: new Style({
+              stroke: new Stroke({
+                color: '#ffcc33',
+                width: 2,
+              }),
+            }),
+            type: 'vectorLayer',
+            url:
+              'https://raw.githubusercontent.com/openlayers/openlayers/' +
+              '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' +
+              'line-samples.geojson',
+          },
+        },
+        {
+          name: 'Polygons Samples',
+          radioGroup: 'vectorLayers',
+          visible: false,
+          data: {
+            style: new Style({
+              stroke: new Stroke({
+                color: '#7dff8f',
+                width: 3,
+              }),
+              fill: new Fill({
+                color: 'rgba(125, 255, 143, 0.2)',
+              }),
+            }),
+            type: 'vectorLayer',
+            url:
+              'https://raw.githubusercontent.com/openlayers/openlayers/' +
+              '3c64018b3754cf605ea19cbbe4c8813304da2539/examples/data/geojson/' +
+              'polygon-samples.geojson',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default topic1;

package/data/topic2.js

@@ -0,0 +1,28 @@
+const topic2 = {
+  id: 'topic2',
+  name: 'Topic 2',
+  visible: false,
+  children: [
+    {
+      name: 'OSM Baselayer',
+      visible: true,
+      isBaseLayer: true,
+      data: {
+        type: 'xyz',
+        url: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      },
+    },
+    {
+      name: 'Countries Borders',
+      visible: true,
+      data: {
+        type: 'vectorLayer',
+        url:
+          'https://openlayers.org/en/latest/examples/data/geojson/' +
+          'countries.geojson',
+      },
+    },
+  ],
+};
+
+export default topic2;

package/doc/README.md

@@ -0,0 +1,21 @@
+# Documentation in react-spatial
+
+Two documentation tools are combined:
+- react-styleguidist (https://github.com/styleguidist/react-styleguidist)
+- documentation.js (https://github.com/documentationjs/documentation)
+
+the folder published by netlify is doc/build (netlify.toml).
+
+## Commands
+
+Styleguidist documentation is visible (with hot reload) with the cmd:
+'yarn start'
+
+## Configuration
+
+Variables shared among both documentation are written in /doc/doc-config.json
+
+- Styleguidist: 'styleguide.config.js
+    one component need to be overwritten:
+    - 'StyleGuideRenderer': to customize the style of the page, with our own
+        header, ribbon footer, etc.

package/doc/doc-config.json

@@ -0,0 +1,4 @@
+{
+  "appName": "react-spatial",
+  "githubRepo": "https://github.com/geops/react-spatial"
+}

package/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  publish = "styleguide-build"
+  command = "yarn doc"

package/package.json

@@ -1,19 +1,15 @@
 {
   "name": "react-spatial",
   "description": "Components to build React map apps.",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "MIT",
   "dependencies": {
     "@geops/geops-ui": "0.1.13",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.60",
-    "abortcontroller-polyfill": "1.7.3",
     "query-string": "7.0.1",
-    "radians-degrees": "1.0.0",
     "re-resizable": "6.9.1",
-    "react-autosuggest": "10.1.0",
-    "react-draggable": "4.4.4",
     "react-icons": "4.4.0",
     "resize-observer-polyfill": "1.5.1"
   },
@@ -25,26 +21,22 @@
     "react-dom": "^16"
   },
   "devDependencies": {
-    "@babel/core": "7.15.0",
-    "@babel/eslint-parser": "7.15.0",
-    "@babel/plugin-transform-runtime": "7.15.0",
     "@babel/preset-env": "7.15.0",
     "@babel/preset-react": "7.14.5",
+    "@cfaester/enzyme-adapter-react-18": "0.7.0",
     "@commitlint/cli": "17.0.2",
     "@commitlint/config-conventional": "17.0.2",
     "@svgr/webpack": "5.5.0",
-    "@testing-library/jest-dom": "5.16.3",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/user-event": "13.5.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.2.4",
-    "babel-loader": "8.2.2",
-    "buble": "0.20.0",
-    "canvas": "2.8.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "babel-jest": "29.5.0",
+    "babel-loader": "9.1.2",
+    "canvas": "2.11.2",
     "css-loader": "5.2.6",
     "enzyme": "3.11.0",
     "esbuild": "^0.15.6",
+    "esbuild-loader": "^3.0.1",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",
@@ -57,31 +49,30 @@
     "fixpack": "3.0.6",
     "generact": "0.4.0",
     "husky": "8.0.1",
-    "identity-obj-proxy": "3.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "is-ci": "3.0.1",
-    "jest": "26.6.3",
-    "jest-canvas-mock": "2.3.1",
-    "jest-canvas-snapshot-serializer": "1.0.1",
+    "jest": "29.5.0",
+    "jest-canvas-mock": "2.5.0",
     "jest-date-mock": "1.0.8",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-fetch-mock": "3.0.3",
     "jest-serializer-html": "7.1.0",
-    "jest-svg-transformer": "1.0.0",
     "jest-transform-file": "1.1.1",
+    "jest-transformer-svg": "^2.0.1",
     "jsts": "2.7.3",
     "lint-staged": "11.2.0",
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "2.4.0",
-    "mobility-toolbox-js": "2.0.0-beta.54",
+    "mobility-toolbox-js": "2.0.0-beta.79",
     "ol": "6.14.1",
     "prettier": "2.4.1",
     "proj4": "2.7.5",
     "prop-types": "15.7.2",
-    "react": "17.0.2",
-    "react-app-polyfill": "2.0.0",
-    "react-dom": "17.0.2",
-    "react-styleguidist": "11.0.8",
+    "react": "18",
+    "react-dom": "18",
+    "react-styleguidist": "13.1.1",
     "react-svg-loader": "3.0.3",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "sass": "1.49.9",
     "sass-loader": "10.2.0",
     "standard-version": "9.5.0",
@@ -91,13 +82,13 @@
     "stylelint-config-recommended-scss": "4.3.0",
     "stylelint-config-standard": "22.0.0",
     "stylelint-scss": "3.21.0",
+    "terser-webpack-plugin": "^5.3.7",
     "url-loader": "4.1.1",
     "vinyl-fs": "3.0.3",
-    "webpack": "4.46.0",
+    "webpack": "^5.81.0",
     "xml-beautifier": "0.5.0"
   },
   "scripts": {
-    "buble": "buble --no modules,asyncAwait -i src -o build --objectAssign Object.assign --sourcemap",
     "build": "yarn esbuild && find build -type f -name '*.test.*' -delete && rm -rf build/styleguidist && cp package.json README.md LICENSE build && cp -rf src/images build && cp -rf src/themes build",
     "coverage": "yarn test --coverage --coverageDirectory=coverage",
     "cp": "generact --root src/components",
@@ -108,6 +99,7 @@
     "lint": "eslint 'src/**/*.js' && stylelint 'src/**/*.css' 'src/**/*.scss'",
     "postbuild": "cp package.json build/ && cd src && find .  -name '*.scss' | cpio -pdm ../build",
     "prebuild": "rm -rf build/",
+    "prepare": "is-ci || husky install",
     "publish:beta": "yarn release -- --prerelease beta --skip.changelog && git push origin HEAD && yarn run build && git push --tags && yarn publish build/ --tag beta",
     "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",
     "publish:public": "yarn release && git push origin HEAD && yarn build  && git push --tags && yarn publish build/",
@@ -130,20 +122,19 @@
       "es6": true,
       "jest": true
     },
-    "parser": "@babel/eslint-parser",
     "extends": [
       "airbnb",
       "airbnb/hooks",
       "prettier"
     ],
+    "parserOptions": {
+      "ecmaVersion": "latest"
+    },
     "plugins": [
       "prettier"
     ],
     "rules": {
-      "arrow-body-style": [
-        "error",
-        "always"
-      ],
+      "arrow-body-style": "off",
       "import/no-extraneous-dependencies": [
         "error",
         {
@@ -165,11 +156,10 @@
     }
   },
   "jest": {
-    "maxConcurrency": 10,
+    "testEnvironment": "jsdom",
     "transform": {
       ".+\\.js$": "babel-jest",
-      ".+\\.svg$": "jest-svg-transformer",
-      "\\.(jpg|jpeg|png|gif|webp)$": "jest-transform-file"
+      ".+\\.svg$": "jest-transformer-svg"
     },
     "transformIgnorePatterns": [
       "node_modules/(?!(jsts|ol|mobility-toolbox-js)|@geops|geotiff|quick-lru)"
@@ -178,11 +168,10 @@
       "<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)"
     ],
     "moduleNameMapper": {
-      ".+\\.scss$": "identity-obj-proxy"
+      "\\.(jpg|jpeg|png|gif|webp|scss)$": "identity-obj-proxy"
     },
     "snapshotSerializers": [
-      "jest-serializer-html",
-      "jest-canvas-snapshot-serializer"
+      "jest-serializer-html"
     ],
     "testPathIgnorePatterns": [
       "<rootDir>/(build|coverage|public|doc|packages)"