feat(NA): First mobile version (#48)

* feat(NA): Add redux.

* feat(NA): Add redux-first-router.

* feat(#1): Add generic MapPanel and Map components

* fix(#1): Clean and adapt map component.

* feat(#5): Add state to url.

* feat(#6): Create global settings state.

* feat(NA): Add eslit with vizzuality rules.

* fix(NA): Update eslint to 5.16.0 as required by react-scripts and replace node_path with baseUrl in jsconfig.json

* feat(NA): PT#166232015 Location Selector.

* feat(#7): PT#166232052 Dashboard.

* Added .nvmrc file

* added .editorconfig file, in order to write code in the same way

* removed eslintConfig because we already have eslintrc file

* removed peer dependency

* feat(#10): Create and connect dashboard component

* feat(#11): Create dashboard schema.

* feat(#12): Create search schema.

* chore(NA): Comment out app state to url for now.

* fix(#11): Change title to location.

* feat(#15): Service for datasets.

* feat(#16): Add layer manager.

* feat(#18): Add map navigation.

* fix(#18): Linter fixes.

* feat(#17): Create base Widget component.

* feat(#17): Add basic style to Widget component.

* feat(#17): Connect widget and dashboard state.

* added readme and env sample

* node version for heroku

* node version for heroku

* updated README with heroku deploy docs

* feat(#17): Make widget layers actionable.

* adding first styles and layout

* adding static server based on express for heroku

* styles for widget card

* feat(#17): Create base Widget component.

* feat(#17): Add basic style to Widget component.

* feat(#17): Connect widget and dashboard state.

* feat(#17): Make widget layers actionable.

* chore(NA) Disable state to url for map interaction speed.

* changed typo for widget

* add chart component

* add mangrove coverage widget]

* add mangroves base

* migrated to scss modules

* chart styles

* use sass

* net change widget

* removed no nedded dependencies

* connected with mapbox service

* connecting widgets and collapse

* basic sentence

* basic label structure

* rm react-select, not using atm

* update comments

* merging widgets

* fixed mangrove activity slug

* disabled url update

* dashboard removed

* toggle and layers

* fixed location selector

* updated styles for widget

* added OpenSans font

* map layers and styles

* changed thumbnails for basemap selector

* adding and removing layers

* added and removing layer using mapStyle object

* add and remove layer

* added favicon

* fixed templates

* connected widget data

* details and style for widgets and dashboard

* header and location selector

* location styles

* navigation using location selector

* connect current location with locations

* fixed prop types for legend

* improved performance for map

* added fly to any location

* location navigation

* disabling redux for production

* widget animation

* styles for widgets

* mangrove coverage adjustments

* micro optimization for locations sagas

* fixed fly to location

* fixed location search

* added conservation hotspots widget and disable button for widgets without layer

* added link for download raw data

* download csv

* styles for download link

* changed widget for net change

* connected data with net change widget for tanzania

* fixed mangrove net change for wordwide

* styles for select

* changed template for widgets

* added support for multiple layers

* added button for download data for net change widget

* added interactivity for net change

* fix some bugs and style improvements

* added autofocus for search input

* font size depending on title length

* added padding for fitbounds

* fixed axis y for mangrove net widget

* added transifex live code and changed typo in title

* added notranslate classnames to avoid transifex detection

* added more span for translation

* storybook config

* comments removed

* widgets stories

* basemap selector stories

* knobs added

* knobs rule added to eslint

* Select stories

* legend-item stories

* CDN global styles added to storybook config

* preview and manager head tags

* fixed dependencies conflicts

* open search modal clicking on the title

* created modal wrapper using react modal

* fixing location selector modal when current location doesnt exist

* fixing number format for charts

* storybook config addons

* button stories

* map stories

* header stories

* chart stories

* select stories

* widget stories

* global variables

* button stories

* button group

* files deleted

* button group component

* storybook dependencies and added global styles

* stoorybook provider

* modal stories

* location-modal stories

* button group stories

* map stories

* widget download data link to component

* map temp container

* spinner to stoorybook

* arrow in select + context

* arrow select

* spinner

* language-selector

* arrow select

* collapse widgets btn styles

* header elements swapped

* hotspots included in modal

* select cursor pointer

* arrow in select styled

* dropdown arrow

* open select removed

* btn styles on active bar

* option button styles

* dashboard component for scroll

* PR fixes

* PR - #31 amendments

* language select

* spinner fix

* disable options

* dates disabled styles

* CHANGELOG file

* transifex WIP

* sidebar instead dashbaord

* sticky header styles and sidebar component

* transifex index + store

* transifex WIP

* sidebar width

* changelog just for two weeks

* eslint fix

* z-index changed in location modal

* removing file

* language sagas

* language select component

* functionality to language selct

* preselected language styles

* feat(NA): Url to state feature.

* fix(NA): Fixing error when no query was present.

* feat(NA): Add delay so restoring widget isActive works.

* changelog updated

* link added to hotspot card

* refactor(NA): Change from mapbox datasets to api (#43)

* changed locations

* locations integration from api

* adde data for dashboards, widgets and layers

* locations with geom

* using data instead fetch

* connected data

* changes

* coverage

* mangrove data

* connected widgets

* widget api fix

* mangrove coverage integrated

* mangrove coverage migrated

* fix(NA): Change Back to worldwide id from global to worldwide.

* Feature/mobile (#38)

* react responsive and main layout

* view map btn component

* media queries and mobile view styles

* media queries adjusted in header

* mobile condition to redux, btn and header styles adapted

* action bar in header

* hotspots widget mobile

* typo error

* indentation

* background, widgets arrow

* desktop styles fixed

* view map btn and active layers

* desktop layout component

* mobile layout component

* layers collapsed in map view

* mediaqueries added

* unused dependencies removed

* mediaqueries fix

* map btn functionality

* legend collapse

* import styles using SASS_PATH

* legend item back

* map legend

* conflict and legend styles

* PR changes

* modal styles

* PR - changes

* Fix/fixed header (#45)

* react responsive and main layout

* view map btn component

* media queries and mobile view styles

* media queries adjusted in header

* mobile condition to redux, btn and header styles adapted

* action bar in header

* hotspots widget mobile

* typo error

* indentation

* background, widgets arrow

* desktop styles fixed

* view map btn and active layers

* desktop layout component

* mobile layout component

* layers collapsed in map view

* mediaqueries added

* unused dependencies removed

* mediaqueries fix

* map btn functionality

* legend collapse

* import styles using SASS_PATH

* legend item back

* map legend

* conflict and legend styles

* PR changes

* modal styles

* PR - changes

* header and modal fix

* Fix/fixed header (#46)

* react responsive and main layout

* view map btn component

* media queries and mobile view styles

* media queries adjusted in header

* mobile condition to redux, btn and header styles adapted

* action bar in header

* hotspots widget mobile

* typo error

* indentation

* background, widgets arrow

* desktop styles fixed

* view map btn and active layers

* desktop layout component

* mobile layout component

* layers collapsed in map view

* mediaqueries added

* unused dependencies removed

* mediaqueries fix

* map btn functionality

* legend collapse

* import styles using SASS_PATH

* legend item back

* map legend

* conflict and legend styles

* PR changes

* modal styles

* PR - changes

* header and modal fix

* mobile modal btn

* Feature/widget alerts (#44)

* changed locations

* locations integration from api

* adde data for dashboards, widgets and layers

* locations with geom

* using data instead fetch

* connected data

* changes

* coverage

* mangrove data

* connected widgets

* widget api fix

* mangrove coverage integrated

* mangrove coverage migrated

* fix(NA): Change Back to worldwide id from global to worldwide.

* feat(NA): Basic layout for alerts widget.

* refactor: Refactor WidgetList and Widget to be more clear.

* fix(NA): Layer toggle was not working after API refactor.

* refactor(NA): Start refactoring chart component.

* fix(NA): Requested changes.

* widget conected (#47)

* widget conected

* net change widget data

* extra file removed

.editorconfig

@@ -0,0 +1,16 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+indent_style = tab
+indent_size = 4
+trim_trailing_whitespace = false

.env.sample

@@ -0,0 +1,4 @@
+REACT_APP_MAPBOX_ACCOUNT=mapbox-account
+REACT_APP_MAPBOX_ACCESS_TOKEN=token
+REACT_APP_API_URL="https://mangrove-atlas-api"
+REACT_APP_TRANSIFEX_API_KEY=

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "globals": {
+    "Transifex": true
+  },
+  "rules": {
+    "import/no-extraneous-dependencies": [
+        "error",
+        {
+         " devDependencies": [
+            ".storybook/**",
+            "stories/**"
+          ]
+        }
+      ],
+    "import/no-unresolved": "off"
+  },
+  "extends": "vizzuality"
+}

.nvmrc

@@ -0,0 +1 @@
+10.15.3

.storybook/addons.js

@@ -0,0 +1 @@
+// import 'storybook-addon-styled-component-theme/dist/src/register';

.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure } from "@storybook/react";
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-cssresources/register';
+
+import '../src/styles/main.scss';
+
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext)
+}
+
+function loadStories() {
+  requireAll(require.context("../src/components", true, /.stories\.jsx?$/));
+}
+
+configure(loadStories, module)

.storybook/contexts.js

@@ -0,0 +1,22 @@
+import { background } from "@storybook/theming";
+
+export const ReactContextProvider = [
+  {
+    icon: 'box',            // a icon displayed in the Storybook toolbar to control contextual props
+    title: 'Themes',        // an unique name of a contextual environment
+    components: [           // an array of components that is going to be injected to wrap stories
+      /* Styled-components ThemeProvider, */
+      /* Material-ui ThemeProvider, */
+    ],
+    params: [               // an array of params contains a set of predefined `props` for `components`
+      { name: 'Light Theme', props: { theme : {background: 'blue' }} },
+      { name: 'Dark Theme', props: { theme : {background: 'red' }  }, default: true },
+    ],
+    options: {
+      deep: true,           // pass the `props` deeply into all wrapping components
+      disable: false,       // disable this contextual environment completely
+      cancelable: false,    // allow this contextual environment to be opt-out optionally in toolbar
+    },
+  },
+  /* ... */                 // multiple contexts setups are supported
+];

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" />
+<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" />

CHANGELOG.md

@@ -0,0 +1,51 @@
+# Changelog
+
+## 2019-08-09
+
+### Changed
+
+- Header layour changed.
+- Header is fixed when user scrolls.
+
+## 2019-08-02
+
+### Added
+
+- Countries list showed in alphabetical order.
+- Hotspots included in Search countries modal.
+- Header fixed on sidebar scroll.
+- Language-selector.
+- Storybook stories:
+	- Map.
+	- Header.
+	- Modal.
+	- Location modal.
+
+### Changed
+
+- Dates selector (arrow styles and functionality restricted).
+- Global Styles adjusments.
+- widget buttons styles.
+
+## 2019-07-26
+
+### Added
+
+- API.
+- Loader spinner.
+- Storybook stories:
+	- Chart.
+	- Button group.
+	- Spinner.
+
+### Changed
+
+- Widgets load.
+- Widget download data link to component.
+- Collapse widget button styles.
+- Action Bar in header updated.
+- Search modal interaction improved.
+
+### Fixed
+
+- Sentece in widget updated.

Procfile

@@ -0,0 +1 @@
+web: node server

README.md

@@ -1 +1,45 @@
-# mangrove-atlas
+# Mangrove Atlas
+
+
+## Installation
+
+Requirementes:
+
+* NodeJs v10.5.3
+* Yarn
+
+This app was created using [https://github.com/facebook/create-react-app](create-react-app).
+
+Before start you have to create an env file called `.env.local` copying the content inside `.env.sample`.
+If you need more information about env variables you can follow [https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables](this instructions).
+
+Install node dependencies:
+
+```
+yarn install
+```
+
+Init server for development:
+
+```
+yarn start
+```
+
+It will open automatically the browser [http://localhost:3000](http://localhost:3000).
+
+# Deploy to staging
+
+Put all your code in `develop` branch.
+
+Add heroku site:
+
+```
+heroku git:remote -a mangroves-atlas
+```
+
+And deploy:
+
+```
+git push heroku develop:master
+```
+

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src"
+  }
+}

package.json

@@ -3,18 +3,70 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@turf/bbox": "^6.0.1",
+    "axios": "^0.19.0",
+    "babel-loader": "8.0.5",
+    "classnames": "^2.2.6",
+    "d3-ease": "^1.0.5",
+    "d3-format": "^1.3.2",
+    "deck.gl": "^7.1.4",
+    "express": "^4.17.1",
+    "express-favicon": "^2.0.1",
+    "lodash": "^4.17.11",
+    "moment": "^2.24.0",
+    "node-sass": "^4.12.0",
+    "prop-types": "^15.7.2",
+    "query-string": "^6.5.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
+    "react-csv": "^1.1.1",
+    "react-datepicker": "^2.8.0",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-map-gl": "^5.0.3",
+    "react-modal": "^3.9.1",
+    "react-on-scroll": "^0.2.2",
+    "react-redux": "^7.0.3",
+    "react-responsive": "^7.0.0",
+    "react-scripts": "3.0.1",
+    "react-select": "^3.0.4",
+    "react-sticky-box": "^0.8.0",
+    "recharts": "^1.6.2",
+    "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-first-router": "^2.1.1",
+    "redux-first-router-link": "^2.1.1",
+    "redux-saga": "^1.0.2",
+    "reselect": "^4.0.0",
+    "viewport-mercator-project": "^6.1.1",
+    "vizzuality-redux-tools": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@storybook/addon-actions": "^5.0.11",
+    "@storybook/addon-centered": "^5.1.9",
+    "@storybook/addon-cssresources": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/addon-notes": "^5.0.11",
+    "@storybook/addons": "^5.0.11",
+    "@storybook/react": "^5.1.9",
+    "eslint": "5.16.0",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-vizzuality": "^1.3.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jsx-a11y": "6.1.1",
+    "eslint-plugin-react": "7.11.0",
+    "typescript": "^3.5.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "lint": "eslint ./src",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook"
   },
   "browserslist": {
     "production": [
@@ -27,5 +79,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": "10.x"
   }
-}
+}

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/index.html

@@ -19,7 +19,22 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Mangrove Atlas</title>
+    <!-- CDN for global styles-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" />
+    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" />
+    <!-- Transifex Live -->
+    <script type="text/javascript">window.liveSettings = {
+      api_key: "%REACT_APP_TRANSIFEX_API_KEY%",
+      detectlang: true,
+      autocollect: true,
+      dynamic: true,
+      picker: '#transifexSelectorHidden',
+      ignore_class: ['svg-inline--fa']
+    }
+    </script>
+    <script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

server.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const favicon = require('express-favicon');
+const path = require('path');
+
+const port = process.env.PORT || 8080;
+const app = express();
+
+app.use(favicon(path.join(__dirname, '/build/favicon.ico')));
+app.use(express.static(path.join(__dirname, 'build')));
+app.get('/*', (req, res) => res.sendFile(path.join(__dirname, 'build', 'index.html')));
+app.listen(port);