Add formatting and linting checks (#12)

.github/workflows/pull_request.yaml

@@ -2,17 +2,25 @@ name: Continuous Integration
 on: pull_request
 
 jobs:
-  tests:
-    name: Tests
-    runs-on: ubuntu-18.04
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-python@master 
-        with:
-            python-version: '3.7'
-      - name: Requirements
-        run: pip install -r requirements.txt
-      - name: Run tests
-        run: scripts/test.sh
-        env:
-            PYTHONPATH: ./sample
+    tests:
+        name: Tests
+        runs-on: ubuntu-18.04
+        steps:
+            - uses: actions/checkout@v1
+            - uses: actions/setup-node@master
+              with:
+                  node-version: "8.x"
+            - uses: actions/setup-python@master
+              with:
+                  python-version: "3.7"
+            - name: Python requirements
+              run: pip install -r requirements.txt
+            - name: Yarn
+              run: |
+                  yarn
+                  yarn --cwd packages/reactivated
+                  yarn --cwd sample
+            - name: Run tests
+              run: scripts/test.sh
+              env:
+                  PYTHONPATH: ./sample

client/models.tsx

@@ -1,10 +1,10 @@
-import {WidgetType} from './components/Widget';
-import {FieldType, FormViewProps} from '../exports';
+import {WidgetType} from "./components/Widget";
+import {FieldType, FormViewProps} from "../exports";
 
-declare module '../exports' {
+declare module "../exports" {
     interface FieldType {
         widget: WidgetType;
     }
 }
 
-export * from '../exports';
+export * from "../exports";

client/templates/DetailView.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
     thing: string;
 }
 
-export default (props: Props) => <div>
-    I am {props.thing}
-</div>;
+export default (props: Props) => <div>I am {props.thing}</div>;

client/templates/FormView.tsx

@@ -1,27 +1,28 @@
-import React from 'react';
+import React from "react";
 
-import {Layout} from '../components/Layout';
-import {Form} from '../components/Form';
-import {FormViewProps} from '../models';
-import {WidgetType as Foo} from '../components/Widget';
+import {Layout} from "../components/Layout";
+import {Form} from "../components/Form";
+import {FormViewProps} from "../models";
+import {WidgetType as Foo} from "../components/Widget";
 
 interface Widget {
     name: string;
     url: string;
 }
 
-
 interface Props extends FormViewProps {
     // form: FormType;
     // widget_list: Widget[];
     csrf_token: string;
 }
 
-export default (props: Props) => <Layout>
-    <ul>
-        {props.widget_list.map(widget =>
-        <li key={widget.name}>{widget.name}</li>
-        )}
-    </ul>
-    <Form csrf_token={props.csrf_token} form={props.form} />
-</Layout>;
+export default (props: Props) => (
+    <Layout>
+        <ul>
+            {props.widget_list.map(widget => (
+                <li key={widget.name}>{widget.name}</li>
+            ))}
+        </ul>
+        <Form csrf_token={props.csrf_token} form={props.form} />
+    </Layout>
+);

client/templates/TrinketDetail.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React from "react";
 
-import {Layout} from '../components/Layout';
-import {TrinketDetailProps as Props} from '../models';
+import {Layout} from "../components/Layout";
+import {TrinketDetailProps as Props} from "../models";
 
-
-export default (props: Props) => <Layout>
-    <h1>{props.trinket.name}</h1>
-    <a href={props.back_url}>Back to list</a>
-</Layout>;
+export default (props: Props) => (
+    <Layout>
+        <h1>{props.trinket.name}</h1>
+        <a href={props.back_url}>Back to list</a>
+    </Layout>
+);

client/templates/TrinketList.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
+import React from "react";
 
-import {Layout} from '../components/Layout';
-import {TrinketListProps as Props} from '../models';
+import {Layout} from "../components/Layout";
+import {TrinketListProps as Props} from "../models";
 
-
-export default (props: Props) => <Layout>
-    <ul>
-        {props.trinket_list.map(widget =>
-        <li key={widget.name}><a href={widget.url}>{widget.name}</a></li>
-        )}
-    </ul>
-</Layout>;
+export default (props: Props) => (
+    <Layout>
+        <ul>
+            {props.trinket_list.map(widget => (
+                <li key={widget.name}>
+                    <a href={widget.url}>{widget.name}</a>
+                </li>
+            ))}
+        </ul>
+    </Layout>
+);

package.json

@@ -0,0 +1,8 @@
+{
+    "devDependencies": {
+        "prettier": "^1.18.2",
+        "tslint": "^5.20.0",
+        "tslint-config-prettier": "^1.18.0",
+        "typescript": "^3.6.4"
+    }
+}

packages/reactivated/client.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
-import {hydrate} from 'react-dom';
+import React from "react";
+import {hydrate} from "react-dom";
 import {setStylesTarget} from "typestyle";
 
 const props = (window as any).__PRELOADED_STATE__;
 
 if ((module as any).hot) {
-    (module as any).hot.accept()
+    (module as any).hot.accept();
 }
 
-const Template = require('client/templates/' + props.template_name + '.tsx').default;
+// tslint:disable-next-line
+const Template = require("client/templates/" + props.template_name + ".tsx").default;
 
 export const bootstrap = () => {
-    hydrate(<Template {...props} />, document.getElementById('root'));
+    hydrate(<Template {...props} />, document.getElementById("root"));
 
-    setStylesTarget(document.getElementById('styles-target')!);
-}
+    setStylesTarget(document.getElementById("styles-target")!);
+};