civic-review-common

Common components and modules used in Civic Review projects

Installation

Install with npm/yarn:

npm install @joaoreynolds/civic-review-common --save

Where the version can be anything (see package.json for current version)

import {LiveMap} from 'rs-common'

Also, you need to import rs-common.css only once in your project (doing this at the root somewhere will enable you to override classes when needed):

import 'rs-common/dist/rs-common.css'

Or with Sass:

@import "~rs-common/dist/rs-common.css";

Usage

• Live Map

Live Map

import {LiveMap} from 'rs-common'

For all accepted properties and their shapes see propTypes in /index.js

<LiveMap
  googleMapApiKey={googleApiKey}
  center={{latitude: mapSettings.Latitude, longitude: mapSettings.Longitude}}
  zoom={mapSettings.ZoomLevel}
  routes={visibleRoutes}
  stops={this.state.stops}
  landmarks={this.state.landmarks}
  vehicles={this.state.vehicles}
  showStaticVehicleCapacity={true}
  showVehicleInfoBoxOnClick={true}
  onClickVehicle={this.handleClickVehicle}
  vehicleEstimates={this.state.estimateData.vehicleEstimates}
  timezone={timezone}
/>

Developing

If you're going to make changes to the rs-common module you need clone this project somewhere in your file system, run npm install there, then create an npm link to that module. It works similarly to a symlink to create this kind of behavior when npm is getting or referencing the module: admin/node-modules/rs-common -> ../rs-common. This way you can make changes to the rs-common components and it will be updated and instantly used in the parent/consuming app.

(Swap the below commands out for yarn link if you, like I, prefer it)

In the rs-common project root, run: npm link Then in the consuming project root (for ex: Admin Frontend), run: npm link rs-common.

If you need to remove the link, just run npm unlink rs-common.

Making changes while developing

When you need to make changes in rs-common, you'll probably do so while it's linked (see above) to a consuming app. So, you'd have your consuming app watching files, then you need to open this project in parallel (rs-common) and run npm run dev-linked. This way, when you make changes, rs-common will rebuild the dist folder and that change should be automatically reflected in the consuming app. The build process runs the code through a transpiler and prepares it automatically for publishing and use in the production environment too.

#Installing Generally speaking, we use SSH keys to log into BitBucket to install this component. To do this, on your local machine install Git Bash Run Git Bash and follow these instructions. Be aware, this needs to go on your user account. https://confluence.atlassian.com/bitbucket/set-up-an-ssh-key-728138079.html