Merge pull request #3361 from Vizzuality/feature/abstract-components

Move all components to global folder

Author: edbrett

app/controllers/country_controller.rb

@@ -7,7 +7,7 @@ def show
     @title = @country && @country["name"]
     @desc = "Data about forest change, tenure, forest related employment and land use in #{@title}"
     if params[:widget]
-      widgets_config = JSON.parse(File.read(Rails.root.join('app', 'javascript', 'pages', 'country', 'data', 'widgets-config.json')))
+      widgets_config = JSON.parse(File.read(Rails.root.join('app', 'javascript', 'components', 'widget', 'widget-config.json')))
       widget_data = widgets_config[params[:widget]]
       @og_title = "#{widget_data["title"]} in #{@title}"
       # for dynamic widget image when the feature is ready

app/javascript/components/button/button-component.jsx

@@ -7,11 +7,11 @@ import { Tooltip } from 'react-tippy';
 import Tip from 'components/tip';
 
 import './button-styles.scss';
-import 'styles/themes/button/button-light.scss'; // eslint-disable-line
-import 'styles/themes/button/button-small.scss'; // eslint-disable-line
-import 'styles/themes/button/button-grey.scss'; // eslint-disable-line
-import 'styles/themes/button/button-clear.scss'; // eslint-disable-line
-import 'styles/themes/button/button-map-control.scss'; // eslint-disable-line
+import './themes/button-light.scss'; // eslint-disable-line
+import './themes/button-small.scss'; // eslint-disable-line
+import './themes/button-grey.scss'; // eslint-disable-line
+import './themes/button-clear.scss'; // eslint-disable-line
+import './themes/button-map-control.scss'; // eslint-disable-line
 
 const Button = props => {
   const {

app/javascript/styles/themes/button/button-clear.scss renamed to app/javascript/components/button/themes/button-clear.scss

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import './widget-chart-tooltip-styles.scss';
+import './chart-tooltip-styles.scss';
 
 class WidgetChartTooltip extends PureComponent {
   render() {
@@ -12,7 +12,7 @@ class WidgetChartTooltip extends PureComponent {
       <div>
         {settings &&
           settings.length && (
-            <div className="c-widget-chart-tooltip">
+            <div className="c-chart-tooltip">
               {settings.map(
                 d =>
                   (hideZeros && !values[d.key] ? null : (

app/javascript/styles/themes/button/button-grey.scss renamed to app/javascript/components/button/themes/button-grey.scss

@@ -1,6 +1,6 @@
 @import '~styles/settings.scss';
 
-.c-widget-chart-tooltip {
+.c-chart-tooltip {
   padding: rem(10px) rem(20px);
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.19);
   background-color: $slate;

app/javascript/styles/themes/button/button-light.scss renamed to app/javascript/components/button/themes/button-light.scss

@@ -0,0 +1,3 @@
+import Component from './chart-tooltip-component';
+
+export default Component;

app/javascript/styles/themes/button/button-map-control.scss renamed to app/javascript/components/button/themes/button-map-control.scss

@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'd3-format';
 
-import './widget-pie-chart-legend-styles.scss';
+import './pie-chart-legend-styles.scss';
 
-class WidgetPieChartLegend extends PureComponent {
+class PieChartLegend extends PureComponent {
   render() {
     const { data, config, className } = this.props;
     let sizeClass = '';
@@ -40,18 +40,18 @@ class WidgetPieChartLegend extends PureComponent {
   }
 }
 
-WidgetPieChartLegend.propTypes = {
+PieChartLegend.propTypes = {
   data: PropTypes.array,
   config: PropTypes.object,
   className: PropTypes.string
 };
 
-WidgetPieChartLegend.defaultProps = {
+PieChartLegend.defaultProps = {
   config: {
     unit: '',
     key: 'value',
     format: '.3s'
   }
 };
 
-export default WidgetPieChartLegend;
+export default PieChartLegend;

app/javascript/styles/themes/button/button-small.scss renamed to app/javascript/components/button/themes/button-small.scss

@@ -0,0 +1,3 @@
+import Component from './pie-chart-legend-component';
+
+export default Component;

app/javascript/pages/country/widget/components/widget-chart-tooltip/widget-chart-tooltip-component.js renamed to app/javascript/components/charts/components/chart-tooltip/chart-tooltip-component.js

@@ -16,11 +16,11 @@ import {
   ComposedChart
 } from 'recharts';
 
-import WidgetChartToolTip from 'pages/country/widget/components/widget-chart-tooltip';
+import ChartToolTip from '../components/chart-tooltip';
 import CustomTick from './custom-tick-component';
-import './widget-composed-chart-styles.scss';
+import './composed-chart-styles.scss';
 
-class WidgetComposedChart extends PureComponent {
+class CustomComposedChart extends PureComponent {
   findMaxValue = (data, config) => {
     const { yKeys } = config;
     const maxValues = [];
@@ -100,7 +100,7 @@ class WidgetComposedChart extends PureComponent {
             <CartesianGrid vertical={false} strokeDasharray="3 4" />
             <Tooltip
               cursor={{ fill: '#d6d6d9' }}
-              content={<WidgetChartToolTip settings={tooltip} />}
+              content={<ChartToolTip settings={tooltip} />}
             />
             {areas &&
               Object.keys(areas).map(key => (
@@ -132,12 +132,12 @@ class WidgetComposedChart extends PureComponent {
   }
 }
 
-WidgetComposedChart.propTypes = {
+CustomComposedChart.propTypes = {
   data: PropTypes.array,
   config: PropTypes.object,
   className: PropTypes.string,
   handleMouseMove: PropTypes.func,
   backgroundColor: PropTypes.string
 };
 
-export default WidgetComposedChart;
+export default CustomComposedChart;

app/javascript/pages/country/widget/components/widget-chart-tooltip/widget-chart-tooltip-styles.scss renamed to app/javascript/components/charts/components/chart-tooltip/chart-tooltip-styles.scss

@@ -0,0 +1,3 @@
+import Component from './composed-chart-component';
+
+export default Component;

app/javascript/components/charts/components/chart-tooltip/chart-tooltip.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import WidgetChartToolTip from 'pages/country/widget/components/widget-chart-tooltip';
 import {
   BarChart,
   Bar,
@@ -10,12 +9,13 @@ import {
   Tooltip,
   ResponsiveContainer
 } from 'recharts';
-import WidgetPaginate from 'pages/country/widget/components/widget-paginate';
+import Paginate from 'components/paginate';
+import ChartToolTip from '../components/chart-tooltip';
 
 import CustomTick from './custom-tick-component';
-import './widget-horizontal-bar-chart-styles.scss';
+import './horizontal-bar-chart-styles.scss';
 
-class WidgetHorizontalBarChart extends PureComponent {
+class HorizontalBarChart extends PureComponent {
   render() {
     const { data, className, handlePageChange, settings } = this.props;
     const { tooltip, colors, yKeys, yAxisDotFill } = this.props.config;
@@ -35,11 +35,7 @@ class WidgetHorizontalBarChart extends PureComponent {
             <Tooltip
               cursor={{ fill: '#d6d6d9' }}
               content={
-                <WidgetChartToolTip
-                  settings={tooltip}
-                  colors={colors}
-                  hideZeros
-                />
+                <ChartToolTip settings={tooltip} colors={colors} hideZeros />
               }
             />
             <XAxis
@@ -80,7 +76,7 @@ class WidgetHorizontalBarChart extends PureComponent {
         </ResponsiveContainer>
         {handlePageChange &&
           data.length > settings.pageSize && (
-            <WidgetPaginate
+            <Paginate
               className="horizontal-pagintation"
               settings={settings}
               count={data.length}
@@ -92,18 +88,18 @@ class WidgetHorizontalBarChart extends PureComponent {
   }
 }
 
-WidgetHorizontalBarChart.propTypes = {
+HorizontalBarChart.propTypes = {
   data: PropTypes.array,
   className: PropTypes.string,
   config: PropTypes.object,
   settings: PropTypes.object,
   handlePageChange: PropTypes.func
 };
 
-WidgetHorizontalBarChart.defaultProps = {
+HorizontalBarChart.defaultProps = {
   config: {
     tooltip: [{ key: 'value', unit: null }]
   }
 };
 
-export default WidgetHorizontalBarChart;
+export default HorizontalBarChart;

app/javascript/pages/country/widget/components/widget-pie-chart-legend/widget-pie-chart-legend-component.jsx renamed to app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-component.jsx

@@ -0,0 +1,3 @@
+import Component from './horizontal-bar-chart-component';
+
+export default Component;

app/javascript/pages/country/widget/components/widget-pie-chart-legend/widget-pie-chart-legend-styles.scss renamed to app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend-styles.scss

@@ -2,11 +2,11 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'd3-format';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
-import WidgetChartToolTip from 'pages/country/widget/components/widget-chart-tooltip';
+import ChartToolTip from '../components/chart-tooltip';
 
-import './widget-pie-chart-styles.scss';
+import './pie-chart-styles.scss';
 
-class WidgetPieChart extends PureComponent {
+class CustomPieChart extends PureComponent {
   render() {
     const {
       data,
@@ -41,7 +41,7 @@ class WidgetPieChart extends PureComponent {
             </Pie>
             <Tooltip
               content={
-                <WidgetChartToolTip
+                <ChartToolTip
                   settings={[
                     {
                       key: 'percentage',
@@ -60,7 +60,7 @@ class WidgetPieChart extends PureComponent {
   }
 }
 
-WidgetPieChart.propTypes = {
+CustomPieChart.propTypes = {
   data: PropTypes.array,
   maxSize: PropTypes.number,
   dataKey: PropTypes.string,
@@ -71,7 +71,7 @@ WidgetPieChart.propTypes = {
   className: PropTypes.string
 };
 
-WidgetPieChart.defaultProps = {
+CustomPieChart.defaultProps = {
   maxSize: 300,
   dataKey: 'value',
   innerRadius: '50%',
@@ -80,4 +80,4 @@ WidgetPieChart.defaultProps = {
   endAngle: -630
 };
 
-export default WidgetPieChart;
+export default CustomPieChart;

app/javascript/components/charts/components/pie-chart-legend/pie-chart-legend.js

@@ -0,0 +1,3 @@
+import Component from './pie-chart-component';
+
+export default Component;

app/javascript/pages/country/widget/components/widget-composed-chart/widget-composed-chart-component.js renamed to app/javascript/components/charts/composed-chart/composed-chart-component.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import './loader-styles.scss';
-import 'styles/themes/loader/loader-light.scss'; // eslint-disable-line
+import './themes/loader-light.scss'; // eslint-disable-line
 
 class Loader extends PureComponent {
   render() {

app/javascript/pages/country/widget/components/widget-composed-chart/widget-composed-chart-styles.scss renamed to app/javascript/components/charts/composed-chart/composed-chart-styles.scss

@@ -6,6 +6,7 @@ const setLayerSpecLoading = createAction('setLayerSpecLoading');
 const setLayerSpec = createAction('setLayerSpec');
 const setMapSettings = createAction('setMapSettings');
 const setMapZoom = createAction('setMapZoom');
+const setShowMapMobile = createAction('setShowMapMobile');
 
 const getLayerSpec = createThunkAction(
   'getLayerSpec',
@@ -33,5 +34,6 @@ export default {
   setLayerSpec,
   setMapSettings,
   setMapZoom,
-  getLayerSpec
+  getLayerSpec,
+  setShowMapMobile
 };

app/javascript/components/charts/composed-chart/composed-chart.js

@@ -3,7 +3,8 @@ export const initialState = {
   error: false,
   options: {},
   layerSpec: {},
-  settings: {}
+  settings: {},
+  showMapMobile: false
 };
 
 const setLayerSpecLoading = (state, { payload }) => ({
@@ -22,6 +23,11 @@ const setMapSettings = (state, { payload }) => ({
   options: payload
 });
 
+const setShowMapMobile = (state, { payload }) => ({
+  ...state,
+  showMapMobile: payload
+});
+
 const setMapZoom = (state, { payload }) => {
   let zoom = !payload.sum ? payload.value : state.options.zoom + payload.value;
   if (zoom > 20) {
@@ -43,5 +49,6 @@ export default {
   setLayerSpecLoading,
   setLayerSpec,
   setMapSettings,
-  setMapZoom
+  setMapZoom,
+  setShowMapMobile
 };

app/javascript/pages/country/widget/components/widget-composed-chart/custom-tick-component.jsx renamed to app/javascript/components/charts/composed-chart/custom-tick-component.jsx

@@ -3,11 +3,11 @@ import Link from 'redux-first-router-link';
 import PropTypes from 'prop-types';
 import { format } from 'd3-format';
 
-import WidgetPaginate from 'pages/country/widget/components/widget-paginate';
+import Paginate from 'components/paginate';
 
-import './widget-numbered-list-styles.scss';
+import './numbered-list-styles.scss';
 
-class WidgetNumberedList extends PureComponent {
+class NumberedList extends PureComponent {
   render() {
     const {
       className,
@@ -23,7 +23,7 @@ class WidgetNumberedList extends PureComponent {
       : data;
 
     return (
-      <div className={`c-widget-numbered-list ${className}`}>
+      <div className={`c-numbered-list ${className}`}>
         <ul className="list">
           {data.length > 0 &&
             pageData.map((item, index) => {
@@ -70,7 +70,7 @@ class WidgetNumberedList extends PureComponent {
         </ul>
         {handlePageChange &&
           data.length > settings.pageSize && (
-            <WidgetPaginate
+            <Paginate
               settings={settings}
               count={data.length}
               onClickChange={handlePageChange}
@@ -81,7 +81,7 @@ class WidgetNumberedList extends PureComponent {
   }
 }
 
-WidgetNumberedList.propTypes = {
+NumberedList.propTypes = {
   data: PropTypes.array.isRequired,
   settings: PropTypes.object.isRequired,
   handlePageChange: PropTypes.func,
@@ -90,4 +90,4 @@ WidgetNumberedList.propTypes = {
   linksExt: PropTypes.bool
 };
 
-export default WidgetNumberedList;
+export default NumberedList;

app/javascript/pages/country/widget/components/widget-horizontal-bar-chart/custom-tick-component.jsx renamed to app/javascript/components/charts/horizontal-bar-chart/custom-tick-component.jsx

@@ -1,6 +1,6 @@
 @import '~styles/settings.scss';
 
-.c-widget-numbered-list {
+.c-numbered-list {
   font-size: rem(12px);
   color: $slate;
 

app/javascript/pages/country/widget/components/widget-horizontal-bar-chart/widget-horizontal-bar-chart-component.js renamed to app/javascript/components/charts/horizontal-bar-chart/horizontal-bar-chart-component.js

@@ -0,0 +1,3 @@
+import Component from './numbered-list-component';
+
+export default Component;