adding storybook for better dev exp

also adding an error boundry around default (init required) props.

Author: chrisdrackett

.gitignore

@@ -8,3 +8,4 @@ npm-debug.log*
 .DS_Store
 /keygen/key.p8
 /src/dist
+/devToken.js

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'

.storybook/config.js

@@ -0,0 +1,12 @@
+import { configure, addDecorator } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs/react'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/)
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+}
+
+addDecorator(withKnobs)
+
+configure(loadStories, module)

README.md

@@ -15,6 +15,16 @@ This package includes a script you can use to generate a JWT key. To use add you
 
 follow the prompts. The generated key can then be used for your app. If you want to generate short keys you can refer to the script in keygen to get an idea of how to do this in node.
 
+## Storybook
+
+This project contains a [storybook](https://storybook.js.org) that shows examples of how the component can be used. To use this storybook follow these steps:
+
+1.  copy `devToken.js.rename` to `devToken.js`
+2.  add a valid token from apple to `devToken.js`
+3.  run `yarn` then `yarn storybook`
+4.  visit the URL storybook gives you
+5.  play with maps!
+
 ## MapKit Component
 
 This is the component that will render a map. You'll need to provide either a `callbackUrl` or a `token` for this component to work.

devToken.js.rename

@@ -0,0 +1 @@
+export default 'your token here.'

package.json

@@ -21,7 +21,9 @@
     "test:coverage": "nwb test-react --coverage",
     "test:watch": "nwb test-react --server",
     "test": "nwb test-react",
-    "keygen": "node keygen"
+    "keygen": "node keygen",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "lint-staged": {
     "*.{js,json,css,md}": [
@@ -38,6 +40,13 @@
     "little-loader": "^0.2.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.6",
+    "@storybook/addon-knobs": "^3.4.6",
+    "@storybook/addon-links": "^3.4.6",
+    "@storybook/addons": "^3.4.6",
+    "@storybook/react": "^3.4.6",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0",
     "colors": "^1.3.0",
     "flow-bin": "0.73.x",
     "gh-pages": "^1.2.0",

src/ErrorBoundry.js

@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from 'react'
+
+type Props = {
+  errorText: string,
+  children: React.Node,
+}
+
+type State = {
+  hasError: boolean,
+}
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  state = { hasError: false }
+
+  componentDidCatch() {
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>{this.props.errorText}</h1>
+    }
+    return this.props.children
+  }
+}

src/index.js

@@ -4,69 +4,109 @@ import * as React from 'react'
 import load from 'little-loader'
 import invariant from 'invariant'
 
+import ErrorBoundry from './ErrorBoundry'
+
 type Props = {
-  /**
-   * Prop Description
-   */
   callbackUrl?: string,
   token?: string,
+  tintColor?: string,
+  showsUserLocationControl: boolean,
 }
 
 type State = {
   mapKitIsReady: boolean,
   makKitIsStarted: boolean,
 }
 
-export default class MapKit extends React.Component<Props, State> {
+const defaultPropsErrorText =
+  "Either a `callbackUrl` or `token` is required for the `MapKit` component. One of these props must be set on init and can't be updated after the component is setup."
+
+class MapKit extends React.Component<Props, State> {
   map = null
 
+  static defaultProps = {
+    showsUserLocationControl: false,
+  }
+
   state = {
     mapKitIsReady: false,
     makKitIsStarted: false,
   }
 
+  checkProps = (props: Props) => {
+    invariant(props.callbackUrl || props.token, defaultPropsErrorText)
+  }
+
+  initMap = (props: Props) => {
+    mapkit.init({
+      authorizationCallback: (done) => {
+        props.callbackUrl
+          ? fetch(props.callbackUrl)
+              .then((res) => res.text())
+              .then(done)
+          : done(props.token)
+      },
+    })
+
+    this.map = new mapkit.Map('map')
+
+    this.setState({ mapKitIsReady: true })
+  }
+
   constructor(props: Props) {
     super(props)
 
+    this.checkProps(props)
+
     load(
       'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js',
-      function(err) {
-        this.setState({ mapKitIsReady: true })
-      },
+      () => this.initMap(props),
       this,
     )
   }
 
-  static getDerivedStateFromProps(props: Props, state: State) {
-    invariant(
-      props.callbackUrl || props.token,
-      'Either a `callbackUrl` or `token` is required for the `MapKit` component.',
-    )
-  }
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    // make sure we have at least one init prop
+    this.checkProps(nextProps)
 
-  componentDidUpdate() {
-    if (this.state.mapKitIsReady && !this.state.makKitIsStarted) {
-      mapkit.init({
-        authorizationCallback: (done) => {
-          if (this.props.callbackUrl) {
-            fetch(this.props.callbackUrl)
-              .then((res) => res.text())
-              .then(done)
-          } else {
-            done(this.props.token)
-          }
-        },
-      })
+    let ComponentShouldUpdate = false
+
+    // if our init props have changed, re-init the map
+    if (
+      this.props.token !== nextProps.token ||
+      this.props.callbackUrl !== nextProps.callbackUrl
+    ) {
+      invariant(false, defaultPropsErrorText)
+    }
 
-      this.map = new mapkit.Map('map')
+    if (this.props.children !== nextProps.children) {
+      ComponentShouldUpdate = true
+    }
 
-      this.setState({ makKitIsStarted: true })
+    if (this.state.mapKitIsReady) {
+      // Update map based on props
+      this.map.tintColor = nextProps.tintColor
+      this.map.showsUserLocationControl = nextProps.showsUserLocationControl
     }
+
+    return ComponentShouldUpdate
   }
 
   render() {
-    const { callbackUrl, token, ...otherProps } = this.props
+    const {
+      callbackUrl,
+      token,
+      showsUserLocationControl,
+      tintColor,
+      ...otherProps
+    } = this.props
 
     return <div id="map" {...otherProps} />
   }
 }
+
+export default (props: Props) => (
+  <ErrorBoundry errorText={defaultPropsErrorText}>
+    <MapKit {...props} />
+  </ErrorBoundry>
+)

stories/index.stories.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, boolean, number } from '@storybook/addon-knobs/react'
+
+import devToken from '../devToken'
+import MapKit from '../src'
+
+storiesOf('MapKit', module).add('with token', () => (
+  <MapKit
+    style={{ width: '100vw', height: '100vh' }}
+    token={text('token', devToken)}
+    tintColor={text('tintColor', undefined)}
+  />
+))