implement Milan explorer

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["buildo", {
+      "env": "react",
+      "modules": false,
+      "targets": {
+        "chrome": 52,
+        "edge": 13,
+        "ie": 11
+      }
+    }]
+  ]
+}

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/scriptoni/lib/scripts/eslint/eslintrc.json"
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+.vscode

.npmignore

@@ -0,0 +1,7 @@
+*.log
+*.log*
+node_modules
+build/*
+*.tags*
+.eslintcache
+.DS_Store

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('node_modules/scriptoni/lib/scripts/prettier/.prettierrc.js');

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/scriptoni/lib/scripts/stylelint/stylelintrc.json"
+}

config/Config.js

@@ -0,0 +1,28 @@
+/*
+
+Define here inside `bundle` the type of any additional configuration value that you'll need in your app,
+and then update `production.json`, `development.json` and `local.json` accordingly.
+
+A typical example is the "api endpoint" configuration key, ex:
+
+bundle: t.strict({
+  apiEndpoint: t.string
+})
+
+Any config value can be overridden at build time by providing an environment variable with the appropriate name.
+This envs variables are namspaced under `CONFIG_`.
+For instance, to override the `apiEndpoint` configuration key, your CI can run:
+
+CONFIG_API_ENDPOINT=/myDevApi yarn run build
+
+*/
+
+const t = require('io-ts');
+
+module.exports = t.strict(
+  {
+    port: t.union([t.number, t.undefined]),
+    bundle: t.strict({})
+  },
+  'Config'
+);

config/development.json

@@ -0,0 +1,3 @@
+{
+  "port": 3000
+}

config/production.json

@@ -0,0 +1 @@
+{}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "bike-routes-web",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "bento web-dev -c ./config",
+    "build": "NODE_ENV=production bento web-build -c ./config",
+    "lint": "bento lint",
+    "lint-fix": "bento lint --fix",
+    "lint-style": "bento lint-style",
+    "prettier-check": "bento prettier-check",
+    "prettier-write": "bento prettier-write"
+  },
+  "dependencies": {
+    "@buildo/bento": "^10.0.0",
+    "classnames": "^2.2.5",
+    "es6-promise": "^4.2.2",
+    "geojson-length": "^0.1.1",
+    "lodash": "^4.17.4",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "string-to-color": "^2.0.1"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.3",
+    "@types/fixed-data-table": "^0.6.32",
+    "@types/lodash": "^4.14.93",
+    "@types/node": "^9.3.0",
+    "@types/qs": "^6.5.1",
+    "@types/react": "^16.0.34",
+    "@types/react-dom": "^16.0.3",
+    "@types/react-intl": "^2.3.3",
+    "@types/react-select": "^1.1.0",
+    "@types/react-transition-group": "^2.0.6"
+  }
+}

src/API/API.ts

@@ -0,0 +1,26 @@
+import { Content, GeoJson } from "model";
+import flatten = require("lodash/flatten");
+
+export const getRoutes = (): Promise<GeoJson[]> => {
+  return fetch("https://api.github.com/repos/BikeRoutes/Milano/contents")
+    .then(res => res.json())
+    .then((contents: Content[]) => {
+      const folders = contents.filter(c => c.type === "dir");
+      return Promise.all(
+        folders.map(f =>
+          fetch(f.url).then(res => res.json() as Promise<Content[]>)
+        )
+      );
+    })
+    .then(flatten)
+    .then(contents =>
+      contents.filter(c => c.type === "file" && c.name.includes(".geojson"))
+    )
+    .then(contents => {
+      return Promise.all(
+        contents.map(c =>
+          fetch(c.download_url).then(r => r.json() as Promise<GeoJson>)
+        )
+      );
+    });
+};

src/API/index.ts

@@ -0,0 +1 @@
+export * from './API';

src/commands/commands.ts

@@ -0,0 +1,3 @@
+import { doUpdateLocation } from "@buildo/bento/data";
+
+export { doUpdateLocation };

src/commands/index.ts

@@ -0,0 +1 @@
+export * from './commands';

src/components/App/App.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import { declareQueries } from "@buildo/bento/data";
+import { collection } from "queries";
+import { GeoJson } from "model";
+
+import "./app.scss";
+
+declare const L: any;
+
+const queries = declareQueries({ collection });
+
+type Feature = GeoJson["features"][number];
+
+const Popup = (props: { feature: Feature }) => (
+  <div>
+    <div>Name: {props.feature.properties.name}</div>
+    <div>Length: {props.feature.properties.length} km</div>
+    <div>Elevation gain: {props.feature.properties.elevationGain} m</div>
+  </div>
+);
+
+class App extends React.Component<typeof queries.Props> {
+  componentDidUpdate() {
+    if (this.props.collection.ready) {
+      const onEachFeature = (feature: Feature, layer: any) => {
+        if (feature.properties) {
+          layer.bindPopup(
+            ReactDOMServer.renderToString(<Popup feature={feature} />)
+          );
+        }
+      };
+
+      const style = (feature: Feature) => ({
+        color: feature.properties.color
+      });
+
+      const map = L.map("map");
+      L.tileLayer(
+        "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
+        {
+          id: "mapbox.streets",
+          accessToken:
+            "pk.eyJ1IjoiZnJhbmNlc2NvY2lvcmlhIiwiYSI6ImNqcThzMDJrejJ1bzgzeGxjZTZ2aXR0cHMifQ.qzCmhZEf3Ta1YHvAfli3bA"
+        }
+      ).addTo(map);
+      const layer = L.geoJson(this.props.collection.value, {
+        onEachFeature,
+        style
+      }).addTo(map);
+      map.fitBounds(layer.getBounds());
+    }
+  }
+
+  render() {
+    const { collection } = this.props;
+
+    if (!collection.ready) {
+      return null;
+    }
+
+    return <div id="map" style={{ height: "100%", width: "100%" }} />;
+  }
+}
+
+export default queries(App);

src/components/App/app.scss

@@ -0,0 +1,3 @@
+.app {
+  margin: 20px;
+}

src/components/App/index.ts

@@ -0,0 +1,2 @@
+import App from './App';
+export default App;

src/components/Dropdown/Dropdown.ts

@@ -0,0 +1,3 @@
+import Dropdown from '@buildo/bento/components/Dropdown';
+import './dropdown.scss';
+export default Dropdown;

src/components/Dropdown/dropdown.scss

@@ -0,0 +1,9 @@
+@import '~theme/variables.scss';
+
+$border-color-open: $azure;
+
+$arrow-color: $coolGrey;
+$arrow-color-hover: $darkGrey;
+$arrow-color-open: $darkGrey;
+
+@import '~@buildo/bento/components/dropdown.scss';

src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+import Dropdown from './Dropdown';
+export default Dropdown;

src/components/View/View.ts

@@ -0,0 +1,2 @@
+import View from '@buildo/bento/components/FlexView';
+export default View;

src/components/View/index.ts

@@ -0,0 +1,2 @@
+import View from './View';
+export default View;