Add lint script and fix lint issues

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "tailwind:watch": "postcss src/styles/styles.css -o src/styles/output.css -w",
     "tailwind:build": "postcss src/styles/styles.css -o src/styles/output.css",
+    "lint": "./node_modules/.bin/eslint src",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/components/forms/InputField.tsx

@@ -25,22 +25,30 @@ const InputField: FunctionComponent<InputFieldProps> = ({
 
     return (
         <div>
-            <FieldLabel
-                text={ label }
-                classList="mb-2"
-            />
+            {
+                label && (
+                    <FieldLabel
+                        copy={ label }
+                        classList="mb-2"
+                    />
+                )
+            }
             <input
                 id={ id }
                 type={ type || 'text' }
                 className={ inputClasses }
                 placeholder={ placeholder }
                 disabled={ disabled }
             />
-            <FieldMessage
-                text={ message }
-                error={ error }
-                classList="mt-2"
-            />
+            {
+                message && (
+                    <FieldMessage
+                        copy={ message }
+                        error={ error }
+                        classList="mt-2"
+                    />
+                )
+            }
         </div>
     );
 }

src/components/forms/SelectField.tsx

@@ -25,10 +25,14 @@ const SelectField: FunctionComponent<SelectFieldProps> = ({
 
     return (
         <div>
-            <FieldLabel
-                text={ label }
-                classList="mb-2"
-            />
+            {
+                label && (
+                    <FieldLabel
+                        copy={ label }
+                        classList="mb-2"
+                    />
+                )
+            }
             <div className="relative">
                 <select
                     className={ selectClasses }
@@ -41,11 +45,15 @@ const SelectField: FunctionComponent<SelectFieldProps> = ({
                     <svg xmlns="http://www.w3.org/2000/svg" width="13" height="7" viewBox="0 0 13 7"><path d="M 12 1 L 1 1 L 6.5 6.5 L 12 1 L 6.5 6.5" fill="rgb(25, 25, 26)" stroke="rgb(25, 25, 26)" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                 </div>
             </div>
-            <FieldMessage
-                text={ message }
-                error={ error }
-                classList="mt-2"
-            />
+            {
+                message && (
+                    <FieldMessage
+                        copy={ message }
+                        error={ error }
+                        classList="mt-2"
+                    />
+                )
+            }
         </div>
     );
 }

src/components/forms/ToggleSwitch.tsx

@@ -32,7 +32,7 @@ const ToggleSwitch: FunctionComponent<ToggleSwitchProps> = ({
                 <span className={ switchClasses }></span>
             </label>
             { label && <FieldLabel
-                text={ label }
+                copy={ label }
                 classList="flex-1"
             />
             }

src/components/tables/Table.tsx

@@ -6,7 +6,7 @@ import TableHeader from "./TableHeader";
 import TableRow from "./TableRow";
 
 class Table extends PureComponent<TableProps, TableState> {
-    constructor(props) {
+    constructor(props: any) {
         super(props);
 
         this.state = {
@@ -16,7 +16,7 @@ class Table extends PureComponent<TableProps, TableState> {
         this.handleClick = this.handleClick.bind(this);
     }
 
-    handleClick(id) {
+    handleClick(id: number) {
         this.setState({
             selectedId: id,
         });
@@ -42,7 +42,11 @@ class Table extends PureComponent<TableProps, TableState> {
 
         return (
             <table className={ classes }>
-                <TableHeader headings={ headings } />
+                {
+                    headings && (
+                        <TableHeader headings={ headings } />
+                    )
+                }
                 <tbody>
                     {
                         rowData.map((data, index) => <TableRow

src/components/tables/TableColumn.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import TableColumnProps from '../../interfaces/components/tables/TableColumn';
 import classNames from 'classnames';
-import * as styles from './styles';
+import columnBaseStyles from './styles';
 
-function TableColumn({
+const TableColumn: FunctionComponent<TableColumnProps> = ({
     children,
     classList,
-}) {
+}) => {
     const classes = classNames(
-        styles.columnBaseStyles,
+        columnBaseStyles,
         classList,
     );
 

src/components/tables/TableHeader.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import TableHeaderProps from '../../interfaces/components/tables/TableHeader';
 import _ from 'lodash';
 import classNames from 'classnames';
-import * as styles from './styles';
+import columnBaseStyles from './styles';
 
-function TableHeader({
+const TableHeader: FunctionComponent<TableHeaderProps> = ({
     headings,
-}) {
+}) => {
     const columnClasses = (
         'uppercase text-sm text-grey-primary'
     );
 
     const classes = classNames(
-        styles.columnBaseStyles,
+        columnBaseStyles,
         columnClasses
     );
 

src/components/tables/styles.js

@@ -2,6 +2,6 @@ const columnBaseStyles = (
     'p-3 border-b border-grey-1 text-left'
 );
 
-export {
+export default {
     columnBaseStyles,
 };

src/components/tags/Tag.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import TagProps from '../../interfaces/components/Tags/Tag';
 import classNames from 'classnames';
 import * as styles from './styles';
 
-function Tag({
+const Tag: FunctionComponent<TagProps> = ({
     kind,
     title,
     classList,
-}) {
+}) => {
     let kindStyles;
 
     switch (kind) {

src/components/typography/Link.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import LinkProps from '../../interfaces/components/Typography/Link';
 import classNames from 'classnames';
 
-function Button({
+const Link: FunctionComponent<LinkProps> = ({
     title,
     url,
     classList,
     external,
-}) {
+}) => {
     const baseStyles = (
         'underline'
     );
@@ -17,10 +18,10 @@ function Button({
     );
 
     return (
-        <a className={ classes } href={ url } target={ external && '_blank' }>
+        <a className={ classes } href={ url } target={ external ? '_blank' : '_self' }>
             { title }
         </a>
     );
 }
 
-export default Button;
+export default Link;

src/index.tsx

@@ -3,16 +3,10 @@ import ReactDOM from 'react-dom';
 import * as Sentry from '@sentry/browser';
 import './styles/output.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 Sentry.init({
     dsn: process.env.SENTRY_DSN,
     environment: process.env.SENTRY_ENVIRONMENT,
 });
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/interfaces/components/tables/Table.tsx

@@ -1,9 +1,9 @@
 export interface TableProps {
-    headings?: string,
+    headings?: Array<string>,
     rowData: Array<Array<string>>,
     classList?: string,
 }
 
 export interface TableState {
-    selectedId: number,
+    selectedId: number | null,
 }

src/interfaces/components/tables/TableHeader.tsx

@@ -0,0 +1,3 @@
+export default interface TableHeaderProps {
+    headings: Array<string>,
+}