Merge pull request #386 from coderoad/feature/style-changes

Feature/style changes

Author: ShMcK

package.json

@@ -34,25 +34,25 @@
     "watch": "tsc -watch -p ./"
   },
   "dependencies": {
-    "@sentry/node": "^5.18.1",
+    "@sentry/node": "^5.19.1",
     "@types/assert": "^1.5.1",
-    "@types/jest": "^26.0.3",
+    "@types/jest": "^26.0.4",
     "@types/jsdom": "^16.2.3",
-    "@types/node": "^14.0.14",
+    "@types/node": "^14.0.22",
     "@types/node-fetch": "^2.5.7",
     "@types/semver": "^7.3.1",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "chokidar": "^3.4.0",
     "dotenv": "^8.2.0",
-    "eslint": "^7.3.1",
+    "eslint": "^7.4.0",
     "git-url-parse": "^11.1.2",
     "jest": "^26.1.0",
-    "jsdom": "^16.2.2",
+    "jsdom": "^16.3.0",
     "node-fetch": "^2.6.0",
     "semver": "^7.3.2",
     "ts-jest": "^26.1.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.6"
   },
   "devDependencies": {
     "eslint-config-prettier": "^6.11.0",

src/channel/index.ts

@@ -351,7 +351,6 @@ class Channel implements Channel {
 
     switch (actionType) {
       case 'TEST_PASS':
-        console.log('TEST_PASS', action)
         const tutorial = this.context.tutorial.get()
         if (!tutorial) {
           throw new Error('Error with current tutorial. Tutorial may be missing an id.')

typings/index.d.ts

@@ -1,7 +1,29 @@
 import * as E from './error'
 import * as TT from './tutorial'
 
-export type ProgressStatus = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
+export type LevelUI = {
+  id: string
+  title: string
+  /** A summary of the level */
+  summary: string
+  /** The lesson content of the level, parsed as markdown */
+  content: string
+  /** A set of tasks for users linked to unit tests */
+  steps: StepUI[]
+  status: ProgressStatus
+}
+
+export type StepUI = {
+  id: string
+  content: string
+  status: ProgressStatus
+  hints?: string[]
+  subtasks?: SubtaskUI[]
+}
+
+export type SubtaskUI = { name: string; status: ProgressStatus }
+
+export type ProgressStatus = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
 
 export interface Progress {
   levels: {

typings/tutorial.d.ts

@@ -32,7 +32,6 @@ export type Step = {
   solution: Maybe<StepActions>
   hints?: string[]
   subtasks?: string[]
-  status?: ProgressStatus
 }
 
 /** A tutorial for use in VSCode CodeRoad */

web-app/package.json

@@ -25,11 +25,11 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@alifd/next": "^1.20.14",
+    "@alifd/next": "^1.20.18",
     "@alifd/theme-4": "^0.3.1",
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@emotion/core": "^10.0.28",
-    "@sentry/browser": "^5.18.1",
+    "@sentry/browser": "^5.19.1",
     "js-yaml": "^3.14.0",
     "markdown-it": "^11.0.0",
     "markdown-it-emoji": "^1.4.0",
@@ -39,24 +39,24 @@
     "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.13.1",
     "reselect": "^4.0.0",
-    "xstate": "^4.10.0"
+    "xstate": "^4.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
+    "@babel/core": "^7.10.4",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^3.1.2",
+    "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^5.3.19",
     "@types/graphql": "^14.5.0",
     "@types/highlight.js": "^9.12.4",
-    "@types/jest": "^26.0.3",
+    "@types/jest": "^26.0.4",
     "@types/js-yaml": "^3.12.5",
     "@types/markdown-it": "^10.0.1",
-    "@types/node": "^14.0.14",
+    "@types/node": "^14.0.22",
     "@types/prismjs": "^1.16.1",
-    "@types/react": "^16.9.41",
+    "@types/react": "^16.9.43",
     "@types/react-addons-css-transition-group": "^15.0.5",
     "@types/react-dom": "^16.9.8",
     "babel-loader": "8.1.0",
@@ -68,6 +68,6 @@
     "react-app-rewired": "^2.1.6",
     "react-scripts": "^3.4.1",
     "sass-loader": "^8.0.2",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.6"
   }
 }

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

@@ -1,8 +1,5 @@
 import MarkdownIt from 'markdown-it'
-// @ts-ignore no types for package
-
 import Prism from 'prismjs'
-
 // @ts-ignore no types for package
 import markdownEmoji from 'markdown-it-emoji'
 import * as React from 'react'

web-app/src/components/ProcessMessages/TestMessage.tsx

@@ -1,14 +1,10 @@
 import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
-import Button from '../Button'
 import { css, jsx } from '@emotion/core'
-import TestMessage from './TestMessage'
 
 interface Props {
-  testStatus?: T.TestStatus | null
   processes: T.ProcessEvent[]
-  onOpenLogs?: (channel: string) => void
 }
 
 const styles = {
@@ -19,22 +15,7 @@ const styles = {
 }
 
 // display a list of active processes
-const ProcessMessages = ({ processes, testStatus, onOpenLogs }: Props) => {
-  if (testStatus) {
-    return (
-      <TestMessage {...testStatus}>
-        {testStatus.type === 'warning' ? (
-          <Button
-            onClick={() => onOpenLogs && onOpenLogs('CodeRoad (Tests)')}
-            type="normal"
-            style={{ marginTop: '0.8rem' }}
-          >
-            Open Logs
-          </Button>
-        ) : null}
-      </TestMessage>
-    )
-  }
+const ProcessMessages = ({ processes }: Props) => {
   if (!processes.length) {
     return null
   }

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

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import Icon from '../Icon'
+import { css, jsx } from '@emotion/core'
+
+const styles = {
+  container: {
+    backgroundColor: '#fff3e0',
+    padding: '0.5rem',
+    animationDuration: '0.3s',
+    animationTimingFunction: 'ease-in-out',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+    color: 'rgb(51, 51, 51)',
+    fontSize: '0.8rem',
+  },
+  icon: {
+    color: '#ff9300',
+  },
+  content: {
+    marginLeft: '0.5rem',
+  },
+}
+
+interface Props {
+  message?: string
+}
+
+const TestMessage = (props: Props) => {
+  const [visible, setVisible] = React.useState(true)
+
+  React.useEffect(() => {
+    setVisible(true)
+    const timeout = setTimeout(() => {
+      setVisible(false)
+    }, 4500)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [props.message])
+
+  return visible && props.message ? (
+    <div css={styles.container}>
+      <Icon type="warning" style={styles.icon} size="xs" />
+      <span css={styles.content}>{props.message}</span>
+    </div>
+  ) : null
+}
+
+export default TestMessage

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

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import Markdown from '../../../components/Markdown'
+
+const styles = {
+  text: {
+    padding: '0rem 1rem',
+    paddingBottom: '1rem',
+  },
+  title: {
+    fontSize: '1.2rem',
+    fontWeight: 'bold' as 'bold',
+    lineHeight: '1.2rem',
+  },
+}
+
+interface Props {
+  title: string
+  content: string
+}
+
+const Content = (props: Props) => {
+  if (!props.content.length) {
+    return null
+  }
+  return (
+    <div css={styles.text}>
+      <h2 css={styles.title}>{props.title}</h2>
+      <Markdown>{props.content || ''}</Markdown>
+    </div>
+  )
+}
+
+export default Content