performant-software · dleadbetter · Nov 13, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/README.md b/README.md
@@ -17,6 +17,8 @@ cd packages/<package-name> && yarn build
 ```
 
 ### Storybook
+Set environment variables in `./packages/storybook/.env`. **Note:** the `TRANSLATE_URL` environment variable is required to build/start Storybook.
+
 Running storybook
 ```
 yarn storybook

diff --git a/packages/controlled-vocabulary/package.json b/packages/controlled-vocabulary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.26",
-    "@performant-software/shared-components": "^1.0.26",
+    "@performant-software/semantic-components": "^1.1.0",
+    "@performant-software/shared-components": "^1.1.0",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

diff --git a/packages/geospatial/LICENSE b/packages/geospatial/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Performant Software Solutions LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/geospatial/README.md b/packages/geospatial/README.md
diff --git a/packages/geospatial/index.js b/packages/geospatial/index.js
@@ -0,0 +1 @@
+module.exports = require('./build/index');
diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@performant-software/geospatial",
+  "version": "1.1.0",
+  "description": "TODO: ADD",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "style": "./build/main.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types"
+  },
+  "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@turf/turf": "^6.5.0",
+    "mapbox-gl": "npm:[email protected]",
+    "maplibre-gl": "^3.5.2",
+    "react-map-gl": "^7.1.6",
+    "underscore": "^1.13.6"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 19.0.0",
+    "react-dom": ">= 16.13.1 < 19.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/packages/geospatial/src/components/DrawControl.js b/packages/geospatial/src/components/DrawControl.js
@@ -0,0 +1,43 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { forwardRef, useImperativeHandle } from 'react';
+import { useControl, type ControlPosition, type MapRef } from 'react-map-gl';
+
+type Props = {
+  position?: ControlPosition;
+  onCreate?: (evt: { features: Array<any> }) => void;
+  onUpdate?: (evt: { features: Array<any>, action: string }) => void;
+  onDelete?: (evt: { features: Array<any> }) => void;
+};
+
+const DrawControl = forwardRef((props: Props, ref) => {
+  /**
+   * Creates the drawer ref using MapboxDraw.
+   */
+  const drawRef = useControl(
+    () => new MapboxDraw(props),
+    ({ map }: { map: MapRef }) => {
+      map.on('draw.create', props.onCreate);
+      map.on('draw.update', props.onUpdate);
+      map.on('draw.delete', props.onDelete);
+    },
+    ({ map }: { map: MapRef }) => {
+      map.off('draw.create', props.onCreate);
+      map.off('draw.update', props.onUpdate);
+      map.off('draw.delete', props.onDelete);
+    },
+    {
+      position: props.position
+    }
+  );
+
+  /**
+   * Exposes the ref for the MapboxDraw object.
+   */
+  useImperativeHandle(ref, () => drawRef, [drawRef]);
+
+  return null;
+});
+
+export default DrawControl;
diff --git a/packages/geospatial/src/components/MapDraw.css b/packages/geospatial/src/components/MapDraw.css
@@ -0,0 +1 @@
+@import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
diff --git a/packages/geospatial/src/components/MapDraw.js b/packages/geospatial/src/components/MapDraw.js
@@ -0,0 +1,130 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  bbox,
+  feature,
+  type FeatureCollection,
+  type GeometryCollection
+} from '@turf/turf';
+import maplibregl from 'maplibre-gl';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import Map, { MapRef } from 'react-map-gl';
+import _ from 'underscore';
+import DrawControl from './DrawControl';
+import './MapDraw.css';
+
+type Props = {
+  /**
+   * GeoJSON structured data to be displayed on the map.
+   */
+  data: GeometryCollection | FeatureCollection,
+
+  /**
+   * URL of the map style to render. This URL should contain any necessary API keys.
+   */
+  mapStyle: string,
+
+  /**
+   * Callback fired when the map geometries are changed.
+   *
+   * @param features
+   */
+  onChange: (features: Array<any>) => void,
+
+  /**
+   * Map style object.
+   */
+  style?: any
+};
+
+const GeometryTypes = {
+  geometryCollection: 'GeometryCollection',
+  point: 'Point'
+};
+
+/**
+ * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),
+ * a line, or a polygon.
+ */
+const MapDraw = (props: Props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const drawRef = useRef<MapboxDraw>();
+  const mapRef = useRef<MapRef>();
+
+  /**
+   * Calls the onChange prop with all of the geometries in the current drawer.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onChange = useCallback(() => {
+    props.onChange(drawRef.current.getAll());
+  }, [props.onChange]);
+
+  /**
+   * Sets the map style.
+   *
+   * @type {{width: string, height: number}}
+   */
+  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);
+
+  /**
+   * Updates the map bounding box and drawer when the geometry is changed.
+   */
+  useEffect(() => {
+    if (loaded && props.data) {
+      // Sets the bounding box for the current geometry.
+      const boundingBox = bbox(props.data);
+
+      if (_.every(boundingBox, _.isFinite)) {
+        const [minLng, minLat, maxLng, maxLat] = boundingBox;
+        const bounds = [[minLng, minLat], [maxLng, maxLat]];
+
+        mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
+      }
+
+      // Handle special cases for geometry collection (not supported by mabox-gl-draw) and point
+      if (props.data.type === GeometryTypes.geometryCollection) {
+        _.each(props.data.geometries, (geometry) => {
+          drawRef.current.add(feature(geometry));
+        });
+      } else {
+        drawRef.current.add(props.data);
+      }
+    }
+  }, [loaded, props.data]);
+
+  return (
+    <Map
+      attributionControl={false}
+      onLoad={() => setLoaded(true)}
+      mapLib={maplibregl}
+      ref={mapRef}
+      style={style}
+      mapStyle={props.mapStyle}
+    >
+      <DrawControl
+        ref={drawRef}
+        controls={{
+          line_string: true,
+          point: true,
+          polygon: true,
+          trash: true
+        }}
+        displayControlsDefault={false}
+        onCreate={onChange}
+        onUpdate={onChange}
+        onDelete={onChange}
+      />
+    </Map>
+  );
+};
+
+export default MapDraw;
diff --git a/packages/geospatial/src/index.js b/packages/geospatial/src/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+// Components
+export { default as DrawControl } from './components/DrawControl';
+export { default as MapDraw } from './components/MapDraw';
diff --git a/packages/geospatial/webpack.config.js b/packages/geospatial/webpack.config.js
@@ -0,0 +1,13 @@
+const { configure } = require('@performant-software/webpack-config');
+const path = require('path');
+
+module.exports = configure(__dirname, {
+  resolve: {
+    alias: {
+      './@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css$': path.resolve(
+        __dirname,
+        '../../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+      )
+    }
+  }
+});
diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.26",
+    "@performant-software/shared-components": "^1.1.0",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",

diff --git a/packages/storybook/.env.example b/packages/storybook/.env.example
@@ -1,5 +1,6 @@
 A11Y_TAGS=wcag21aa
 BABEL_DISABLE_CACHE=1
+BABEL_SHOW_CONFIG_FOR=.storybook/preview.js
 GOOGLE_MAPS_API_KEY=abcd
+REACT_APP_MAP_TILER_KEY=abcd
 TRANSLATE_URL=https://example.com/translation-server
-BABEL_SHOW_CONFIG_FOR=.storybook/preview.js
diff --git a/packages/storybook/src/data/boston.json b/packages/storybook/src/data/boston.json
diff --git a/packages/storybook/src/geospatial/MapDraw.stories.js b/packages/storybook/src/geospatial/MapDraw.stories.js
@@ -0,0 +1,49 @@
+// @flow
+
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import MapDraw from '../../../geospatial/src/components/MapDraw';
+import data from '../data/boston.json';
+
+export default {
+  title: 'Components/Geospatial/MapDraw',
+  component: MapDraw
+};
+
+export const Default = () => (
+  <MapDraw
+    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
+    onChange={action('onChange')}
+    style={{
+      marginBottom: '2em'
+    }}
+  />
+);
+
+export const GeoJSON = () => (
+  <MapDraw
+    data={data}
+    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
+    onChange={action('onChange')}
+    style={{
+      marginBottom: '2em'
+    }}
+  />
+);
+
+export const Point = () => (
+  <MapDraw
+    data={{
+      type: 'Point',
+      coordinates: [
+        -81.2653727,
+        31.4252249
+      ]
+    }}
+    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
+    onChange={action('onChange')}
+    style={{
+      marginBottom: '2em'
+    }}
+  />
+);
diff --git a/packages/user-defined-fields/package.json b/packages/user-defined-fields/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,8 +9,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.26",
-    "@performant-software/shared-components": "^1.0.26",
+    "@performant-software/semantic-components": "^1.1.0",
+    "@performant-software/shared-components": "^1.1.0",
     "i18next": "^21.9.1",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

diff --git a/packages/visualize/package.json b/packages/visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./build/index.js",

diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -7,6 +7,7 @@
     "@babel/core": "^7.9.6",
     "@babel/plugin-external-helpers": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';