From 058c8b60184d77cf94f58d606382f316fcb664d4 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 20:52:46 -0700
Subject: [PATCH 1/4] turn off tslint warnings

---
 tslint.json | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/tslint.json b/tslint.json
index 12a0431d..695ef2fb 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,15 +1,17 @@
 {
   "extends": ["tslint:latest", "tslint-config-prettier"],
   "rules": {
+    "class-name": true,
+    "curly": true,
+    "interface-name": [true, "never-prefix"],
     "no-string-throw": true,
-    "no-unused-expression": true,
     "no-duplicate-variable": true,
-    "curly": true,
-    "class-name": true,
+    "no-implicit-dependencies": false,
+    "no-unused-expression": true,
+    "object-literal-sort-keys": false,
+    "ordered-imports": false,
     "semicolon": [true, "never"],
-    "triple-equals": true,
-    "interface-name": [true, "never-prefix"],
-    "object-literal-sort-keys": false
+    "triple-equals": true
   },
   "defaultSeverity": "warning",
   "no-submodule-imports": false

From 360abec6d460635cba7e74b8240243d7d717ed57 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 21:19:36 -0700
Subject: [PATCH 2/4] fix loading of styles

---
 web-app/.storybook/config.ts | 2 +-
 web-app/src/Routes.tsx       | 8 ++++++--
 web-app/src/index.tsx        | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
index 52c66c69..35c6a012 100644
--- a/web-app/.storybook/config.ts
+++ b/web-app/.storybook/config.ts
@@ -1,4 +1,4 @@
-// import '@alifd/next/dist/next.css'
+import '@alifd/next/dist/next.css'
 import { configure } from '@storybook/react'
 import '../src/styles/index.css'
 
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
index 47dcf494..90cdd105 100644
--- a/web-app/src/Routes.tsx
+++ b/web-app/src/Routes.tsx
@@ -12,12 +12,16 @@ interface Props {
 
 const styles = {
   page: {
-    width: window.innerWidth,
-    height: window.innerHeight,
+    margin: 0,
+    width: window.innerWidth - 20, // 220
+    height: window.innerHeight - 20, // 655
     backgroundColor: 'white',
   },
 }
 
+console.log('page styles')
+console.log(JSON.stringify(styles.page))
+
 const Routes = ({ state }: Props) => {
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx
index fed66022..6a448537 100644
--- a/web-app/src/index.tsx
+++ b/web-app/src/index.tsx
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom'
 import App from './App'
 
 // base styles
+// TODO: must be a better way to load @alifd styles
+// currently these are loaded in src/editor/ReactWebView.ts as well
+import '@alifd/next/dist/next.css'
 import './styles/index.css'
 
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)

From d964c3e2ab7717ed44908b405724cf17e84cdac9 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 21:44:00 -0700
Subject: [PATCH 3/4] show all steps

---
 web-app/src/components/Stage/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
index e6f96a13..a5c552df 100644
--- a/web-app/src/components/Stage/index.tsx
+++ b/web-app/src/components/Stage/index.tsx
@@ -38,8 +38,6 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
   const activeIndex = stepList.findIndex((stepId: string) => {
     return steps[stepId].status.active
   })
-  // only display up until the active step
-  const filteredStepList = stepList.slice(0, activeIndex + 1)
   return (
     <div style={styles.card}>
       <div style={styles.content}>
@@ -48,7 +46,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
       </div>
       <div style={styles.steps}>
         <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
-          {filteredStepList.map((stepId: string, index: number) => {
+          {stepList.map((stepId: string, index: number) => {
             const step = steps[stepId]
             return (
               <Step.Item

From 7a07a4d9f7177b44a91550f54274e0f317d7d984 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jul 2019 21:44:10 -0700
Subject: [PATCH 4/4] width/height listener

---
 web-app/src/Routes.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
index 90cdd105..4fe7527c 100644
--- a/web-app/src/Routes.tsx
+++ b/web-app/src/Routes.tsx
@@ -13,19 +13,33 @@ interface Props {
 const styles = {
   page: {
     margin: 0,
-    width: window.innerWidth - 20, // 220
-    height: window.innerHeight - 20, // 655
     backgroundColor: 'white',
   },
 }
 
-console.log('page styles')
-console.log(JSON.stringify(styles.page))
-
 const Routes = ({ state }: Props) => {
+  const [dimensions, setDimensions] = React.useState({
+    width: window.innerWidth - 20,
+    height: window.innerHeight - 20,
+  })
+
+  // solution for windows getting off size
+  // without adding multiple listeners
+  React.useEffect(() => {
+    const dimensionsInterval = setInterval(() => {
+      setDimensions({
+        width: window.innerWidth - 20,
+        height: window.innerHeight - 20,
+      })
+    }, 5000)
+    return () => {
+      clearInterval(dimensionsInterval)
+    }
+  })
+
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
-    <div style={styles.page}>
+    <div style={{ ...styles.page, ...dimensions }}>
       <Cond state={state} path="SelectTutorial.Startup">
         <Loading />
       </Cond>