[WIP] Upgrade to Modus-React

.env

@@ -0,0 +1,3 @@
+SOURCE_DIR=src
+BUILD_DIR=build
+SOURCEMAPS=false

.eslintrc.yml

@@ -0,0 +1,4 @@
+root: true
+extends:
+  - '@modus/eslint-config-modus'
+

app/components/AppError/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 const AppError = () => (
   <div className={styles.errorScreen}>

app/components/Balance/BalanceRow.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 type BalanceProps = {
   children: React.Node,

app/components/Balance/index.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { FormattedAmount } from 'utils/formatAmount';
 
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 type BalanceProps = {
   title: string,

app/components/Balance/style.scss → app/components/Balance/style.module.scss

@@ -49,5 +49,4 @@
       text-align: center;
     }
   }
-
 }

app/components/BudgetGridRow/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import formatAmount from 'utils/formatAmount';
 import type { Transaction } from 'modules/transactions';
 import type { Categories } from 'modules/categories';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 type BudgetGridRowProps = {
   transaction: Transaction,

app/components/Chart/index.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type ChartProps = {
   width: number,

app/components/Chart/styles.module.scss

@@ -0,0 +1,3 @@
+.mainSvg {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.16));
+}

app/components/DonutChart/DonutChart.js

@@ -7,7 +7,7 @@ import type { TransactionSummary } from 'selectors/transactions';
 import { arc, pie, scaleOrdinal, schemeCategory10 } from 'd3';
 import { shuffle } from 'utils/array';
 import Path from './Path';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const randomScheme = shuffle(schemeCategory10);
 

app/components/DonutChart/styles.scss → app/components/DonutChart/styles.module.scss

@@ -1,7 +1,7 @@
 .donutChart {
   display: flex;
-  height: 100%;  
+  height: 100%;
   justify-content: center;
   align-content: flex-start;
-  flex-flow: wrap;  
+  flex-flow: wrap;
 }

app/components/Header/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import OnIdle from '@modus/react-idle';
 import NavLink from 'components/NavLink';
 import Logo from './Logo';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 const GitHubButton = React.lazy(() => import('components/GitHubButton' /* webpackChunkName: "gh-btn" */));
 

app/components/Header/style.scss → app/components/Header/style.module.scss

@@ -23,7 +23,8 @@
   border: 1px solid $lightgray;
   text-decoration: none;
 
-  &:active, &.selected {
+  &:active,
+  &.selected {
     color: $black;
     text-decoration: underline;
     box-shadow: 0 1px 4px 1px $darkgray;

app/components/Legend/LegendItem.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import formatAmount from 'utils/formatAmount';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type LegendItemProps = {
   color: string,

app/components/Legend/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import type { TransactionSummary } from 'selectors/transactions';
 import LegendItem from './LegendItem';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type LegendType = {
   data: TransactionSummary[],

app/components/Loading/index.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import s from './styles.scss';
+import s from './styles.module.scss';
 
 const Loading = () => (
   <div className={s.timelineItem}>

app/components/Loading/styles.scss → app/components/Loading/styles.module.scss

@@ -1,18 +1,18 @@
 @-webkit-keyframes placeHolderShimmer {
   0% {
-    background-position: -468px 0
+    background-position: -468px 0;
   }
   100% {
-    background-position: 468px 0
+    background-position: 468px 0;
   }
 }
 
 @keyframes placeHolderShimmer {
   0% {
-    background-position: -468px 0
+    background-position: -468px 0;
   }
   100% {
-    background-position: 468px 0
+    background-position: 468px 0;
   }
 }
 
@@ -27,7 +27,7 @@
   min-width: 300px;
   max-width: 472px;
   width: 90vw;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
 }
 
 .animatedBackground {
@@ -136,4 +136,4 @@
 .contentThirdEnd {
   left: 300px;
   top: 88px;
-}
+}

app/components/ReportsPanel/ReportsTabbar.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 import NavLink from 'components/NavLink';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 const ReportsTabbar = () => (
   <div className={styles.tabbar}>

app/components/ReportsPanel/style.scss → app/components/ReportsPanel/style.module.scss

@@ -23,7 +23,8 @@
     border-right: $border;
   }
 
-  &:active, &.selected {
+  &:active,
+  &.selected {
     color: $white;
     background-color: $mediumgray;
   }

app/components/StackedChart/StackedChart.js

@@ -7,7 +7,7 @@ import { max, scaleBand, scaleLinear, scaleOrdinal, schemeCategory10 } from 'd3'
 import { shuffle } from 'utils/array';
 import Bar from './Bar';
 import Xaxis from './Xaxis';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const outflowScheme = shuffle([...schemeCategory10.slice(0, 2), ...schemeCategory10.slice(3)]);
 const inflowScheme = ['#2ca02c']; // inflow always green

app/components/StackedChart/Xaxis.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import type { TransactionSummary } from 'selectors/transactions';
 import formatAmount from 'utils/formatAmount';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type XaxisProps = {
   transform?: string,

app/components/StackedChart/styles.scss → app/components/StackedChart/styles.module.scss

@@ -9,12 +9,12 @@
 }
 
 .xAxis {
-   font-size: 16px;
-   font-family: $font-default;
-   font-weight: bold;
-   text-anchor: middle;
+  font-size: 16px;
+  font-family: $font-default;
+  font-weight: bold;
+  text-anchor: middle;
 
   .value {
-     font-size: 16px;
+    font-size: 16px;
   }
 }

app/containers/App/index.js

@@ -6,7 +6,7 @@ import ErrorBoundary from 'components/ErrorBoundary';
 import Header from 'components/Header';
 import Budget from 'routes/Budget';
 import Reports from 'routes/Reports';
-import './style.scss';
+import './style.module.scss';
 
 const AppError = React.lazy(() => import('components/AppError' /* webpackChunkName: "error-msg" */));
 

app/containers/BudgetGrid/index.js

@@ -6,7 +6,7 @@ import { getCategories } from 'selectors/categories';
 import EntryFormRow from 'containers/EntryFormRow';
 import type { Transaction } from 'modules/transactions';
 import BudgetGridRow from 'components/BudgetGridRow';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 type BudgetGridProps = {
   transactions: Transaction[],

app/containers/EntryFormRow/index.js

@@ -7,7 +7,7 @@ import Form from 'components/Form';
 import Field from 'components/Field';
 import DataSelector from 'components/DataSelector';
 import type { FormData } from 'components/Form';
-import styles from './style.scss';
+import styles from './style.module.scss';
 
 type EntryFormRowProps = {
   defaultCategoryId: string,

app/src

@@ -0,0 +1 @@
+src

babel.config.js

@@ -0,0 +1,13 @@
+// eslint-ignore-next-line
+module.exports = {
+  presets: ['@modus/babel-preset-react', '@babel/preset-flow'],
+  plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread'],
+  env: {
+    development: {
+      plugins: ['react-hot-loader/babel'],
+    },
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs', 'dynamic-import-node'],
+    },
+  },
+};