start converting to typescript

.gitignore

@@ -1,5 +1,5 @@
 target
-data
+/data
 output
 .~lock*
 *.csv
@@ -14,3 +14,4 @@ budgetronrc.old.toml
 .trigger
 node_modules/
 web/static
+yarn-error.log

Procfile

@@ -2,4 +2,4 @@ cargo-test: cargo watch --ignore '*/web/*' -s 'cargo test --all --color=always &
 eslint: rg --files | grep ^web/ | entr -d -r yarn run eslint --ext .jsx,.js --color web/src
 
 webpack: yarn run webpack -- --color -w
-budgetron: cargo watch --no-gitignore -w .trigger -s "cargo run --color=always -- -f data/`\ls data | tail -n1`/*.csv --serve --port $PORT"
+budgetron: cargo watch --no-gitignore -w .trigger -s "cargo run --color=always --release -- -f data/`\ls data | tail -n1`/*.csv --serve --port $PORT"

package.json

@@ -6,20 +6,22 @@
   "author": "Zach Bush <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@types/material-ui": "^0.21.7",
+    "@types/react": "^16.9.4",
+    "@types/react-dom": "^16.9.1",
     "airbnb-prop-types": "^2.8.1",
-    "babel-core": "^6.24.0",
     "babel-eslint": "^7.2.1",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-flow-react-proptypes": "^8.0.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-flow-react-proptypes": "^25.1.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.23.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "css-modules-typescript-loader": "^3.0.1",
     "d3-scale": "^1.0.6",
     "eslint": "^4.10.0",
     "eslint-config-airbnb": "^16.1.0",
@@ -38,7 +40,7 @@
     "flow-watch": "^1.1.1",
     "formsy-material-ui": "^0.6.0",
     "formsy-react": "^0.19.2",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^3.2.0",
     "immutability-helper": "^2.1.2",
     "material-ui": "^0.19.4",
     "moment": "^2.19.2",
@@ -55,8 +57,13 @@
     "recharts": "^1.0.0-beta.1",
     "sass-loader": "^6.0.3",
     "serviceworker-webpack-plugin": "^0.2.1",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^0.16.1",
-    "typescript": "^2.3.1",
-    "webpack": "^2.4.1"
+    "ts-loader": "^6.2.0",
+    "typescript": "^3.6.3",
+    "webpack": "^4.41.0"
+  },
+  "devDependencies": {
+    "webpack-cli": "^3.3.9"
   }
 }

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./web/src",
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "module": "commonjs",
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "target": "es6",
+        "jsx": "react",
+        "lib": ["es2017"]
+    }
+}

web/src/components/Budgetron/style.scss.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chipBag': string;
+  'mainContent': string;
+  'report': string;
+  'reports': string;
+  'spacer': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/components/IncomeExpenseRatio/styles.scss.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'category': string;
+  'reportSection': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/components/Money/index.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as styles from "./style.scss";
+
+type Props = {
+  invert?: boolean;
+  amount: string | number;
+};
+
+const Money = (props: Props) => {
+  let amount;
+  if (typeof props.amount == "number") {
+    amount = props.amount;
+  } else {
+    amount = parseFloat(props.amount);
+  }
+  if (props.invert) {
+    amount = -amount;
+  }
+  const className = amount > 0 ? "positive" : "negative";
+  const dollars = amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD"
+  });
+  return <span className={styles[className]}>{dollars}</span>;
+};
+
+Money.defaultProps = {
+  invert: false
+};
+
+export default Money;

web/src/components/Money/style.scss.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'negative': string;
+  'positive': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/components/Page/style.scss.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'page': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/components/RollingBudget/style.scss.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'data': string;
+  'graph': string;
+  'main': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/components/Transactions/index.jsx

@@ -1,16 +1,28 @@
 // @flow
 
-import React from 'react';
-import { Transaction } from 'util/data';
-import style from './style.scss';
-
-const COLUMNS = ['date', 'amount', 'person', 'description', 'originalDescription',
-  'transactionType', 'category', 'originalCategory', 'accountName', 'labels', 'notes', 'tags'];
+import React from "react";
+import { Transaction } from "util/data";
+import style from "./style.scss";
+
+const COLUMNS = [
+  "date",
+  "amount",
+  "person",
+  "description",
+  "originalDescription",
+  "transactionType",
+  "category",
+  "originalCategory",
+  "accountName",
+  "labels",
+  "notes",
+  "tags"
+];
 
 type DetailsTableProps = {
-  show?: bool,
+  show?: boolean,
   colSpan?: number,
-  transaction: Transaction,
+  transaction: Transaction
 };
 
 const DetailsTable = (props: DetailsTableProps) => {
@@ -26,13 +38,13 @@ const DetailsTable = (props: DetailsTableProps) => {
             </tr>
           </thead>
           <tbody>
-            {COLUMNS.map((c) => {
+            {COLUMNS.map(c => {
               const data = props.transaction.render(c);
               if (!data) return null;
               return (
                 <tr key={c} className={style.normal_row}>
-                  <td>{ Transaction.name(c) }</td>
-                  <td>{ data }</td>
+                  <td>{Transaction.transactionName(c)}</td>
+                  <td>{data}</td>
                 </tr>
               );
             })}
@@ -45,34 +57,34 @@ const DetailsTable = (props: DetailsTableProps) => {
 
 DetailsTable.defaultProps = {
   show: false,
-  colSpan: 1,
+  colSpan: 1
 };
 
 type Props = {
   columns: Array<string>,
   transaction_ids: Array<string>,
   transactions: Map<string, Transaction>,
 
-  filter: (entry: [string, Transaction]) => bool,
-  transform: (t: Transaction) => Transaction,
+  filter: (entry: [string, Transaction]) => boolean,
+  transform: (t: Transaction) => Transaction
 };
 
 type State = {
-  show: { [uid: string]: bool },
+  show: { [uid: string]: boolean }
 };
 
 export default class Transactions extends React.Component<Props, State> {
   static defaultProps = {
-    columns: ['date', 'amount', 'person', 'description'],
+    columns: ["date", "amount", "person", "description"],
     filter: () => true,
-    transform: t => t,
+    transform: t => t
   };
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
-      show: {},
+      show: {}
     };
   }
 
@@ -92,35 +104,37 @@ export default class Transactions extends React.Component<Props, State> {
     const money = tid.slice(8, 18);
 
     let type = tid.slice(18, 19);
-    if (type === 'D') {
-      type = 'Debit';
-    } else if (type === 'C') {
-      type = 'Credit';
-    } else if (type === 'T') {
-      type = 'Trasnfer';
+    if (type === "D") {
+      type = "Debit";
+    } else if (type === "C") {
+      type = "Credit";
+    } else if (type === "T") {
+      type = "Trasnfer";
     }
     return new Transaction(
-      'Unknown',
+      "Unknown",
       `${money.slice(0, 6)}.${money.slice(6, 10)}`,
-      'unknown',
+      "unknown",
       new Date(`${month}/${day}/${year}`),
-      'Unknown',
-      '',
-      '',
-      '',
-      'UNKNOWN',
-      'unknown',
-      ['details not exported'],
-      type,
+      "Unknown",
+      "",
+      "",
+      "",
+      "UNKNOWN",
+      "unknown",
+      ["details not exported"],
+      type
     );
   }
 
   renderHeaders() {
-    return this.props.columns.map(id => <th key={id}>{ Transaction.name(id) }</th>);
+    return this.props.columns.map(id => (
+      <th key={id}>{Transaction.transactionName(id)}</th>
+    ));
   }
 
   renderRowCells(t: Transaction) {
-    return this.props.columns.map(id => <td key={id}>{ t.render(id) }</td>);
+    return this.props.columns.map(id => <td key={id}>{t.render(id)}</td>);
   }
 
   render() {
@@ -133,7 +147,7 @@ export default class Transactions extends React.Component<Props, State> {
     return (
       <table className={style.table}>
         <thead>
-          <tr>{ this.renderHeaders() }</tr>
+          <tr>{this.renderHeaders()}</tr>
         </thead>
         <tbody>
           {transactions.map(([tid, transaction]) => [
@@ -142,14 +156,14 @@ export default class Transactions extends React.Component<Props, State> {
               onClick={() => this.toggleDetails(tid)}
               className={style.normal_row}
             >
-              { this.renderRowCells(transaction) }
+              {this.renderRowCells(transaction)}
             </tr>,
             <DetailsTable
               colSpan={this.props.columns.length}
               key={`${tid} details`}
               show={this.state.show[tid]}
               transaction={transaction}
-            />,
+            />
           ])}
         </tbody>
       </table>

web/src/components/Transactions/style.scss.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inner_table': string;
+  'normal_row': string;
+  'table': string;
+}
+declare const cssExports: CssExports;
+export = cssExports;

web/src/declaration.d.ts

@@ -0,0 +1,12 @@
+// Copyright 2019 Zachary Bush.
+//
+// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
+// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
+// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
+// option. This file may not be copied, modified, or distributed
+// except according to those terms.
+
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}