lint web-app

web-app/.eslintrc.js

@@ -1,11 +1,10 @@
 module.exports = {
-	parser: 'typescript-eslint-parser',
-	extends: [
-		// 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
-		// 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-		// 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-		// 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-	],
+	parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
+  ],
 	parserOptions: {
 		ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
 		sourceType: 'module', // Allows for the use of imports
@@ -52,6 +51,11 @@ module.exports = {
 		'no-return-assign': 'off',
 		'no-case-declarations': 'off',
 		'react/no-array-index-key': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+		'@typescript-eslint/camelcase': 'off',
 	},
 	settings: {
 		react: {

web-app/package.json

@@ -60,9 +60,15 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
     "@types/storybook__react": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^2.7.0",
+    "@typescript-eslint/parser": "^2.7.0",
     "babel-loader": "8.0.5",
     "babel-plugin-import": "^1.12.1",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-prettier": "^3.1.1",
     "node-sass": "^4.13.0",
+    "prettier": "^1.19.1",
     "react-scripts": "^3.2.0",
     "sass-loader": "^8.0.0",
     "typescript-eslint-parser": "^22.0.0"

web-app/src/App.tsx

@@ -6,11 +6,11 @@ import client from './services/apollo'
 import Routes from './Routes'
 
 const App = () => (
-	<ErrorBoundary>
-		<ApolloProvider client={client}>
-			<Routes />
-		</ApolloProvider>
-	</ErrorBoundary>
+  <ErrorBoundary>
+    <ApolloProvider client={client}>
+      <Routes />
+    </ApolloProvider>
+  </ErrorBoundary>
 )
 
 export default App

web-app/src/Routes.tsx

@@ -15,36 +15,36 @@ const { Route } = Router
 const tempSend = (action: any) => console.log('sent')
 
 const Routes = () => {
-	return (
-		<Workspace>
-			<Router>
-				<Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
-					<LoadingPage text="Launching..." />
-				</Route>
-				<Route path="Start.SelectTutorial">
-					<NewPage send={tempSend} />
-				</Route>
-				<Route path="Start.ContinueTutorial">
-					<ContinuePage send={tempSend} context={{} as CR.MachineContext} />
-				</Route>
-				<Route path="Tutorial.Initialize">
-					<LoadingPage text="Initializing..." />
-				</Route>
-				<Route path="Tutorial.LoadNext">
-					<LoadingPage text="Loading..." />
-				</Route>
-				<Route path="Tutorial.Summary">
-					<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
-				</Route>
-				<Route path="Tutorial.Level">
-					<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
-				</Route>
-				<Route path="Tutorial.Completed">
-					<CompletedPage send={tempSend} context={{} as CR.MachineContext} />
-				</Route>
-			</Router>
-		</Workspace>
-	)
+  return (
+    <Workspace>
+      <Router>
+        <Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
+          <LoadingPage text="Launching..." />
+        </Route>
+        <Route path="Start.SelectTutorial">
+          <NewPage send={tempSend} />
+        </Route>
+        <Route path="Start.ContinueTutorial">
+          <ContinuePage send={tempSend} context={{} as CR.MachineContext} />
+        </Route>
+        <Route path="Tutorial.Initialize">
+          <LoadingPage text="Initializing..." />
+        </Route>
+        <Route path="Tutorial.LoadNext">
+          <LoadingPage text="Loading..." />
+        </Route>
+        <Route path="Tutorial.Summary">
+          <OverviewPage send={tempSend} context={{} as CR.MachineContext} />
+        </Route>
+        <Route path="Tutorial.Level">
+          <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
+        </Route>
+        <Route path="Tutorial.Completed">
+          <CompletedPage send={tempSend} context={{} as CR.MachineContext} />
+        </Route>
+      </Router>
+    </Workspace>
+  )
 }
 
 export default Routes

web-app/src/components/Button/index.tsx

@@ -2,17 +2,17 @@ import * as React from 'react'
 import { Button as AlifdButton } from '@alifd/next'
 
 interface Props {
-	style?: React.CSSProperties
-	children: string | React.ReactNode
-	disabled?: boolean
-	type?: 'primary' | 'secondary' | 'normal'
-	onClick?: () => void
+  style?: React.CSSProperties
+  children: string | React.ReactNode
+  disabled?: boolean
+  type?: 'primary' | 'secondary' | 'normal'
+  onClick?: () => void
 }
 
 const Button = (props: Props) => (
-	<AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
-		{props.children}
-	</AlifdButton>
+  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
+    {props.children}
+  </AlifdButton>
 )
 
 export default Button

web-app/src/components/Card/index.tsx

@@ -2,27 +2,27 @@ import * as React from 'react'
 import { Card as AlifdCard } from '@alifd/next'
 
 const styles = {
-	card: {
-		display: 'flex',
-		width: '100%',
-	},
+  card: {
+    display: 'flex',
+    width: '100%',
+  },
 }
 
 interface Props {
-	children: React.ReactNode
-	onClick?: () => void
-	style?: React.CSSProperties
+  children: React.ReactNode
+  onClick?: () => void
+  style?: React.CSSProperties
 }
 
 const Card = (props: Props) => (
-	<AlifdCard
-		showTitleBullet={false}
-		contentHeight="auto"
-		onClick={props.onClick}
-		style={{ ...styles.card, ...props.style }}
-	>
-		{props.children}
-	</AlifdCard>
+  <AlifdCard
+    showTitleBullet={false}
+    contentHeight="auto"
+    onClick={props.onClick}
+    style={{ ...styles.card, ...props.style }}
+  >
+    {props.children}
+  </AlifdCard>
 )
 
 export default Card

web-app/src/components/Checkbox/index.tsx

@@ -1,34 +1,34 @@
 import * as React from 'react'
 
 const styles = {
-	box: {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'center',
-	},
-	input: {
-		border: '1px solid black',
-		backgroundColor: 'yellow',
-	},
+  box: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    border: '1px solid black',
+    backgroundColor: 'yellow',
+  },
 }
 
 interface Props {
-	status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE' | 'LOADING'
+  status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE' | 'LOADING'
 }
 
 const Checkbox = (props: Props) => {
-	const checked = props.status === 'COMPLETE'
-	// const loading = props.state === 'LOADING'
-	const onChange = () => {
-		/* read */
-	}
-	return (
-		<div style={styles.box}>
-			<label>
-				<input style={styles.input} type="checkbox" checked={checked} onChange={onChange} />
-			</label>
-		</div>
-	)
+  const checked = props.status === 'COMPLETE'
+  // const loading = props.state === 'LOADING'
+  const onChange = () => {
+    /* read */
+  }
+  return (
+    <div style={styles.box}>
+      <label>
+        <input style={styles.input} type="checkbox" checked={checked} onChange={onChange} />
+      </label>
+    </div>
+  )
 }
 
 export default Checkbox

web-app/src/components/Debugger/debuggerWrapper.tsx

@@ -5,14 +5,14 @@ import stateToString from './stateToString'
 const SHOW_DEBUGGER = JSON.parse(process.env.REACT_APP_DEBUG || 'false')
 
 const debuggerWrapper = (element: React.ReactElement, state: any) => {
-	if (SHOW_DEBUGGER) {
-		return (
-			<Debugger state={stateToString(state.value)} {...state.context}>
-				{element}
-			</Debugger>
-		)
-	}
-	return element
+  if (SHOW_DEBUGGER) {
+    return (
+      <Debugger state={stateToString(state.value)} {...state.context}>
+        {element}
+      </Debugger>
+    )
+  }
+  return element
 }
 
 export default debuggerWrapper

web-app/src/components/Debugger/index.tsx

@@ -3,24 +3,24 @@ import * as G from 'typings/graphql'
 import * as CR from 'typings'
 
 interface Props {
-	state: string
-	tutorial: G.Tutorial
-	env: CR.Environment
-	position: CR.Position
-	progress: CR.Progress
-	children: React.ReactElement
+  state: string
+  tutorial: G.Tutorial
+  env: CR.Environment
+  position: CR.Position
+  progress: CR.Progress
+  children: React.ReactElement
 }
 
 const Debugger = ({ state, children, env, position, progress, tutorial }: Props) => (
-	<div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
-		<h4>state: {state}</h4>
-		<p>MachineId: {env.machineId}</p>
-		<p>SessionId: {env.sessionId}</p>
-		<p>tutorial: {tutorial ? tutorial.id : 'none'}</p>
-		<p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
-		<p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
-		{children}
-	</div>
+  <div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
+    <h4>state: {state}</h4>
+    <p>MachineId: {env.machineId}</p>
+    <p>SessionId: {env.sessionId}</p>
+    <p>tutorial: {tutorial ? tutorial.id : 'none'}</p>
+    <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
+    <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
+    {children}
+  </div>
 )
 
 export default Debugger

web-app/src/components/Debugger/stateToString.ts

@@ -1,16 +1,16 @@
-const stateToString = (state: string | object, str: string = ''): string => {
-	if (typeof state === 'object') {
-		const keys = Object.keys(state)
-		if (keys && keys.length) {
-			const key = keys[0]
-			// @ts-ignore
-			return stateToString(state[key], str.length ? `${str}.${key}` : key)
-		}
-		return str
-	} else if (typeof state === 'string') {
-		return str.length ? `${str}.${state}` : state
-	}
-	return ''
+const stateToString = (state: string | object, str = ''): string => {
+  if (typeof state === 'object') {
+    const keys = Object.keys(state)
+    if (keys && keys.length) {
+      const key = keys[0]
+      // @ts-ignore
+      return stateToString(state[key], str.length ? `${str}.${key}` : key)
+    }
+    return str
+  } else if (typeof state === 'string') {
+    return str.length ? `${str}.${state}` : state
+  }
+  return ''
 }
 
-export default stateToString
+export default stateToString

web-app/src/components/Divider.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 
 const styles = {
-	divider: {
-		backgroundColor: '#e8e8e8',
-		height: '0.1rem',
-	},
+  divider: {
+    backgroundColor: '#e8e8e8',
+    height: '0.1rem',
+  },
 }
 
 const Divider = () => <div style={styles.divider} />