Tidy of components

- Moved all components into a single directory like nextjs
 - Made component names consistent with each other
 - Made component names consistent with their export class names
 - Added storybook for a few components with the aim to extend this further.

src/components/ModalExport.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Slugify from 'slugify'
+import { saveAs } from 'file-saver'
+
+import {format} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldString from './FieldString'
+import FieldCheckbox from './FieldCheckbox'
+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'
+
+
+
+export default class ModalExport extends React.Component {
+  static propTypes = {
+    mapStyle: PropTypes.object.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  downloadStyle() {
+    const tokenStyle = format(
+      style.stripAccessTokens(
+        style.replaceAccessTokens(this.props.mapStyle)
+      )
+    );
+
+    const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
+    let exportName;
+    if(this.props.mapStyle.name) {
+      exportName = Slugify(this.props.mapStyle.name, {
+                     replacement: '_',
+                     lower: true
+                   })
+    } else {
+      exportName = this.props.mapStyle.id
+    }
+    saveAs(blob, exportName + ".json");
+  }
+
+  changeMetadataProperty(property, value) {
+    const changedStyle = {
+      ...this.props.mapStyle,
+      metadata: {
+        ...this.props.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.props.onStyleChanged(changedStyle)
+  }
+
+
+  render() {
+    return <Modal
+      data-wd-key="modal:export"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Export Style'}
+      className="maputnik-export-modal"
+    >
+
+      <div className="maputnik-modal-section">
+        <h4>Download Style</h4>
+        <p>
+          Download a JSON style to your computer.
+        </p>
+
+        <div>
+          <Block
+            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+          >
+            <FieldString
+              value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+            />
+          </Block>
+          <Block
+            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+          >
+            <FieldString
+              value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+            />
+          </Block>
+          <Block
+            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          >
+            <FieldString
+              value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+            />
+          </Block>
+        </div>
+
+        <Button
+          onClick={this.downloadStyle.bind(this)}
+          title="Download style"
+        >
+          <MdFileDownload />
+          Download
+        </Button>
+      </div>
+
+    </Modal>
+  }
+}
+