Move to typescript

.editorconfig

@@ -1,7 +1,9 @@
 root = true
 
 [*]
-end_of_line = lf
-insert_final_newline = true
 indent_style = space
 indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+
+  extends: [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended",
+  ],
+
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    project: "./tsconfig.build.json",
+    tsconfigRootDir: "./",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+
+  rules: {
+    "react/display-name": "off",
+    "react/prop-types": "off",
+
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+
+    // For the next couple of months ;)
+    "@typescript-eslint/no-empty-function": "off",
+  },
+
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/resolver": {
+      node: {
+        extensions: [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx",
+        ],
+      },
+    },
+  },
+};

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: false,
+  printWidth: 80,
+  arrowParens: 'always',
+};

package.json

@@ -6,19 +6,18 @@
   "license": "MIT",
   "scripts": {
     "start": "react-scripts start",
-    "js:lint": "eslint .",
     "js:test": "react-scripts test",
     "js:test:coverage": "yarn js:test --coverage",
     "js:build": "react-scripts build",
-    "ts:lint": "tslint {,src/**/}*.{ts,tsx} -p tsconfig.json",
-    "ts:build": "tsc -p tsconfig.json",
+    "ts:lint": "eslint ./src/ --ext ts,tsx",
+    "ts:build": "tsc -p tsconfig.build.json",
     "test": "yarn lint && yarn js:test",
     "test:coverage": "CI=true yarn js:test:coverage && yarn test:codecov",
     "test:codecov": "codecov",
-    "lint": "yarn js:lint && yarn ts:lint",
+    "lint": "yarn ts:lint",
     "build": "yarn js:build",
-    "build:babel": "NODE_ENV=production babel src --out-dir dist",
-    "prepublishOnly": "rm -rf ./dist && yarn build:babel"
+    "build:ts": "NODE_ENV=production yarn ts:build",
+    "prepublishOnly": "rm -rf ./dist && yarn build:ts"
   },
   "dependencies": {
     "@date-io/moment": "^2.6.0",
@@ -38,7 +37,6 @@
     "react-dom": "^16.13.1",
     "react-jss": "^10.1.1",
     "react-router-dom": "^5.1.2",
-    "recompose": "^0.30.0",
     "typescript": "^3.8.3",
     "vanilla-store": "^0.4.0"
   },
@@ -48,22 +46,32 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-react": "^7.9.4",
+    "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/is-url": "^1.2.28",
+    "@types/jest": "^25.2.1",
+    "@types/react-router-dom": "^5.1.5",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
     "babel-polyfill": "^6.26.0",
     "codecov": "^3.6.5",
     "concurrently": "^5.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
     "express": "^4.17.1",
     "jest-enzyme": "^7.1.2",
+    "prettier": "^2.0.5",
     "react-mock-router": "^1.0.15",
-    "react-scripts": "^3.4.1",
-    "tslint": "^6.1.2",
-    "tslint-react": "^5.0.0"
+    "react-scripts": "^3.4.1"
   },
   "keywords": [
     "react",

src/AddButton/AddButton.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { shallow } from "enzyme";
+
+import AddButton from ".";
+
+it("renders correctly", () => {
+  const tree = shallow(<AddButton onClick={() => {}} />);
+
+  expect(tree).toMatchSnapshot();
+});

src/AddButton/AddButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { withStyles, Fab } from "@material-ui/core";
+import AddIcon from "@material-ui/icons/Add";
+
+const styles = (theme: any) => ({
+  button: {
+    position: "fixed",
+    right: theme.spacing(3),
+    bottom: theme.spacing(3),
+  },
+});
+
+type AddButtonProps = {
+  onClick: (...args: any[]) => any;
+  classes: {
+    [key: string]: string;
+  };
+};
+
+const AddButton: React.SFC<AddButtonProps> = ({ onClick, classes }) => (
+  <Fab
+    color="secondary"
+    aria-label="add"
+    className={classes.button}
+    onClick={onClick}
+  >
+    <AddIcon />
+  </Fab>
+);
+export default withStyles(styles as any)(AddButton);

src/AddButton/index.tsx

@@ -0,0 +1,3 @@
+import AddButton from "./AddButton";
+
+export default AddButton;

src/AppContainer/AppContainer.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { shallow } from "enzyme";
+
+import AppContainer from ".";
+
+describe("Component Info", () => {
+  it("renders correctly", () => {
+    const tree = shallow(<AppContainer>Foo</AppContainer>);
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/AppContainer/AppContainer.tsx

@@ -0,0 +1,56 @@
+import React, { ReactNode } from "react";
+import { blueGrey, orange } from "@material-ui/core/colors";
+import { withStyles, ThemeProvider } from "@material-ui/styles";
+import { createMuiTheme } from "@material-ui/core";
+
+const defaultTheme = {
+  typography: {
+    useNextVariants: true,
+  },
+  palette: {
+    primary: {
+      light: blueGrey[300],
+      main: blueGrey[500],
+      dark: blueGrey[700],
+    },
+    secondary: {
+      light: orange[300],
+      main: orange[500],
+      dark: orange[700],
+    },
+  },
+};
+
+type AppContainerProps = {
+  theme?: {
+    [key: string]: any;
+  };
+};
+
+// Apply some reset
+const styles = (theme: any) => ({
+  "@global": {
+    html: {
+      background: theme.palette.background.default,
+      WebkitFontSmoothing: "antialiased", // Antialiasing.
+      MozOsxFontSmoothing: "grayscale", // Antialiasing.
+    },
+    body: {
+      margin: 0,
+    },
+  },
+});
+
+const BaseComponent = withStyles(styles)((props) => props.children as any);
+const AppContainer: React.SFC<AppContainerProps> = ({
+  theme = defaultTheme,
+  children,
+}) => {
+  return (
+    <ThemeProvider theme={createMuiTheme(theme)}>
+      <BaseComponent>{children}</BaseComponent>
+    </ThemeProvider>
+  );
+};
+
+export default AppContainer;

src/AppContainer/index.ts

@@ -0,0 +1,3 @@
+import AppContainer from "./AppContainer";
+
+export default AppContainer;