fix(Package dependencies, documentation): Update package dependencies…

…, mock and BaseMap documentatio
ibi-group · Dec 18, 2019 · fb0e4b4 · fb0e4b4
1 parent 359452b
commit fb0e4b4
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 16 deletions.
diff --git a/packages/base-map/__mocks__/AllVehicles.js b/packages/base-map/__mocks__/AllVehicles.js
@@ -4,9 +4,12 @@ import L from "leaflet";
 
 const vehicleData = require("./vehicle-data/all-vehicles.json");
 
+/**
+ * This component demonstrates a example map overlay that shows real-time transit vehicle locations on a leaflet map.
+ * It is modeled after the component available in this file:
+ * https://github.com/OpenTransitTools/transit-components/blob/master/lib/vehicles/AllVehicles.js
+ */
 const AllVehiclesOverlay = () => {
-  // Render is according to this file:
-  // https://github.com/OpenTransitTools/transit-components/blob/master/lib/vehicles/AllVehicles.js
   return (
     <FeatureGroup className="vehicles">
       {vehicleData.map(vehicle => {

diff --git a/packages/base-map/__mocks__/SelectVehicles.js b/packages/base-map/__mocks__/SelectVehicles.js
@@ -5,8 +5,11 @@ import VehicleMarker from "./VehicleMarker";
 
 const vehicleData = require("./vehicle-data/select-vehicles.json");
 
-// Render is according to this file:
-// https://github.com/OpenTransitTools/transit-components/blob/master/lib/vehicles/SelectVehicles.js
+/**
+ * This component demonstrates an example map overlay that shows real-time transit vehicle locations on a leaflet map.
+ * It is modeled after the component available in this file:
+ * https://github.com/OpenTransitTools/transit-components/blob/master/lib/vehicles/SelectVehicles.js
+ */
 class SelectVehicles extends MapLayer {
   state = {
     selectedRoutes: [],

diff --git a/packages/base-map/__mocks__/VehicleMarker.js b/packages/base-map/__mocks__/VehicleMarker.js
@@ -3,6 +3,11 @@
 import React from "react";
 import { Circle, Popup, Tooltip, withLeaflet } from "react-leaflet";
 
+/**
+ * This component demonstrates a custom marker used in the SelectVehicles overlay provided as an example.
+ * It is modeled after the component available in this file:
+ * https://github.com/OpenTransitTools/transit-components/blob/master/lib/vehicles/VehicleMarker.js
+ */
 class VehicleMarker extends React.Component {
   getLastReportDate(v) {
     return `${v.seconds} seconds ago`;

diff --git a/packages/base-map/package.json b/packages/base-map/package.json
@@ -5,12 +5,16 @@
   "author": "@binh-dam-ibigroup",
   "homepage": "https://github.com/opentripplanner/otp-ui/#readme",
   "license": "MIT",
-  "main": "index.js",
-  "module": "src/index.js",
+  "main": "lib/index.js",
   "private": false,
   "dependencies": {
     "leaflet": "^1.6.0",
-    "react-leaflet": "^2.6.0"
+    "react-leaflet": "^2.6.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "styled-components": "^4.3.1"
   },
   "publishConfig": {
     "registry": "https://registry.yarnpkg.com"

diff --git a/packages/base-map/src/index.js b/packages/base-map/src/index.js
@@ -172,7 +172,13 @@ class BaseMap extends Component {
 }
 
 BaseMap.propTypes = {
+  /**
+   * Zero, one, or multiple components that derives from { MapLayer } from 'react-leaflet'.
+   */
   children: PropTypes.oneOfType([
+    // Ideally, the types below should be MapLayer,
+    // however, during type validation in the browser,
+    // MapLayer components all seem to resolve to Object.
     PropTypes.object,
     PropTypes.arrayOf(PropTypes.object)
   ]),
@@ -190,8 +196,8 @@ BaseMap.propTypes = {
         hasRetinaSupport: PropTypes.bool
       })
     ),
-    initLat: PropTypes.number,
-    initLon: PropTypes.number,
+    initLat: PropTypes.number.isRequired,
+    initLon: PropTypes.number.isRequired,
     initZoom: PropTypes.number,
     maxZoom: PropTypes.number
   }),
@@ -232,8 +238,6 @@ BaseMap.propTypes = {
 BaseMap.defaultProps = {
   children: null,
   mapConfig: {
-    initLat: 45.52,
-    initLon: -122.682,
     baseLayers: [
       {
         name: "Streets",
@@ -245,7 +249,8 @@ BaseMap.defaultProps = {
         hasRetinaSupport: true
       }
     ],
-    initZoom: 13
+    initZoom: 13,
+    maxZoom: 20
   },
   onClick: null,
   onOverlayAdded: null,

diff --git a/packages/base-map/src/index.story.js b/packages/base-map/src/index.story.js
@@ -10,8 +10,20 @@ import AllVehiclesOverlay from "../__mocks__/AllVehicles";
 import "../assets/map.css";
 
 export default {
-  title: "Map",
-  decorators: [withInfo]
+  title: "BaseMap",
+  component: BaseMap,
+  decorators: [withInfo],
+  parameters: {
+    info: {
+      text: `
+      The BaseMap component renders a Leaflet map with overlays and other ad-hoc markers
+      that are declared as child elements of the BaseMap element.
+      
+      Overlays are groups of similar React-Leaflet markers, e.g. vehicle location markers, bus stop markers, etc.
+      Overlays are automatically added to the overlay control displayed by the BaseMap. The user uses that control to turn overlays on or off.
+      `
+    }
+  }
 };
 
 const mapConfig = {
@@ -61,7 +73,7 @@ const onOverlayAdded = action("onOverlayAdded");
 const onOverlayRemoved = action("onOverlayRemoved");
 const onViewportChanged = action("onViewportChanged");
 
-export const noProps = () => <BaseMap />;
+export const mapAlone = () => <BaseMap mapConfig={mapConfig} />;
 
 export const withSampleMarkers = () => (
   <BaseMap mapConfig={mapConfig}>{sampleMarkers}</BaseMap>

diff --git a/packages/from-to-location-picker/package.json b/packages/from-to-location-picker/package.json
@@ -9,7 +9,12 @@
   "module": "src/index.js",
   "private": false,
   "dependencies": {
-    "@opentripplanner/location-icon": "0.0.1"
+    "@opentripplanner/location-icon": "^0.0.1",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "styled-components": "^4.3.1"
   },
   "publishConfig": {
     "registry": "https://registry.yarnpkg.com"