Merge pull request #607 from orangemug/fix/issue-567-better-solution-for-tooltips

Inline property documentation and SDK docs

src/components/modals/AddModal.jsx

@@ -126,6 +126,7 @@ class AddModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
       data-wd-key="modal:add-layer"
+      className="maputnik-add-modal"
     >
       <div className="maputnik-add-layer">
       <LayerIdBlock

src/components/modals/ExportModal.jsx

@@ -11,6 +11,7 @@ import Button from '../Button'
 import Modal from './Modal'
 import {MdFileDownload} from 'react-icons/md'
 import style from '../../libs/style'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
 
 
 
@@ -70,6 +71,7 @@ class ExportModal extends React.Component {
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Export Style'}
+      className="maputnik-export-modal"
     >
 
       <div className="maputnik-modal-section">
@@ -79,19 +81,28 @@ class ExportModal extends React.Component {
         </p>
 
         <p>
-          <InputBlock label={"MapTiler Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
             />
           </InputBlock>
-          <InputBlock label={"Mapbox Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
             />
           </InputBlock>
-          <InputBlock label={"Thunderforest Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}

src/components/modals/Modal.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
+import classnames from 'classnames';
 
 
 class Modal extends React.Component {
@@ -13,6 +14,7 @@ class Modal extends React.Component {
     children: PropTypes.node,
     underlayClickExits: PropTypes.bool,
     underlayProps: PropTypes.object,
+    className: PropTypes.string,
   }
 
   static defaultProps = {
@@ -45,7 +47,7 @@ class Modal extends React.Component {
         verticallyCenter={true}
         onExit={this.onClose}
       >
-        <div className="maputnik-modal"
+        <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">

src/components/modals/SettingsModal.jsx

@@ -11,6 +11,7 @@ import SelectInput from '../inputs/SelectInput'
 import EnumInput from '../inputs/EnumInput'
 import ColorField from '../fields/ColorField'
 import Modal from './Modal'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
 
 class SettingsModal extends React.Component {
   static propTypes = {
@@ -86,21 +87,21 @@ class SettingsModal extends React.Component {
       title={'Style Settings'}
     >
       <div className="modal-settings">
-      <InputBlock label={"Name"} doc={latest.$root.name.doc}>
+      <InputBlock label={"Name"} fieldSpec={latest.$root.name}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
       </InputBlock>
-      <InputBlock label={"Owner"} doc={"Owner ID of the style. Used by Mapbox or future style APIs."}>
+      <InputBlock label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
-      <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
+      <InputBlock label={"Sprite URL"} fieldSpec={latest.$root.sprite}>
         <UrlInput {...inputProps}
           data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
@@ -108,7 +109,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
+      <InputBlock label={"Glyphs URL"} fieldSpec={latest.$root.glyphs}>
         <UrlInput {...inputProps}
           data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
@@ -116,7 +117,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
@@ -124,7 +128,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"MapTiler Access Token"} doc={"Public access token for MapTiler Cloud."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
@@ -132,7 +139,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Thunderforest Access Token"} doc={"Public access token for Thunderforest services."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
@@ -140,7 +150,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Center"} doc={latest.$root.center.doc}>
+      <InputBlock label={"Center"} fieldSpec={latest.$root.center}>
         <ArrayInput
           length={2}
           type="number"
@@ -150,7 +160,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
+      <InputBlock label={"Zoom"} fieldSpec={latest.$root.zoom}>
         <NumberInput
           {...inputProps}
           value={mapStyle.zoom}
@@ -159,7 +169,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Bearing"} doc={latest.$root.bearing.doc}>
+      <InputBlock label={"Bearing"} fieldSpec={latest.$root.bearing}>
         <NumberInput
           {...inputProps}
           value={mapStyle.bearing}
@@ -168,7 +178,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Pitch"} doc={latest.$root.pitch.doc}>
+      <InputBlock label={"Pitch"} fieldSpec={latest.$root.pitch}>
         <NumberInput
           {...inputProps}
           value={mapStyle.pitch}
@@ -177,7 +187,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light anchor"} doc={latest.light.anchor.doc}>
+      <InputBlock label={"Light anchor"} fieldSpec={latest.light.anchor}>
         <EnumInput
           {...inputProps}
           value={light.anchor}
@@ -187,7 +197,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light color"} doc={latest.light.color.doc}>
+      <InputBlock label={"Light color"} fieldSpec={latest.light.color}>
         <ColorField
           {...inputProps}
           value={light.color}
@@ -196,7 +206,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light intensity"} doc={latest.light.intensity.doc}>
+      <InputBlock label={"Light intensity"} fieldSpec={latest.light.intensity}>
         <NumberInput
           {...inputProps}
           value={light.intensity}
@@ -205,7 +215,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light position"} doc={latest.light.position.doc}>
+      <InputBlock label={"Light position"} fieldSpec={latest.light.position}>
         <ArrayInput
           {...inputProps}
           type="number"
@@ -216,7 +226,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
+      <InputBlock label={"Transition delay"} fieldSpec={latest.transition.delay}>
         <NumberInput
           {...inputProps}
           value={transition.delay}
@@ -225,7 +235,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Transition duration"} doc={latest.transition.duration.doc}>
+      <InputBlock label={"Transition duration"} fieldSpec={latest.transition.duration}>
         <NumberInput
           {...inputProps}
           value={transition.duration}
@@ -234,7 +244,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.style_renderer.label}
+        fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
+      >
         <SelectInput {...inputProps}
           data-wd-key="modal-settings.maputnik:renderer" 
           options={[

src/components/modals/SourcesModal.jsx

@@ -195,14 +195,25 @@ class AddSource extends React.Component {
   }
 
   render() {
+    // Kind of a hack because the type changes, however maputnik has 1..n
+    // options per type, for example 
+    //
+    //  - 'geojson' - 'GeoJSON (URL)' and 'GeoJSON (JSON)'
+    //  - 'raster' - 'Raster (TileJSON URL)' and 'Raster (XYZ URL)'
+    //
+    // So we just ignore the values entirely as they are self explanatory
+    const sourceTypeFieldSpec = {
+      doc: latest.source_vector.type.doc
+    };
+
     return <div className="maputnik-add-source">
-      <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
+      <InputBlock label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
         <StringInput
           value={this.state.sourceId}
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
+      <InputBlock label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
         <SelectInput
           options={[
             ['geojson_json', 'GeoJSON (JSON)'],