fix up stories

web-app/.storybook/addons.ts

@@ -1,4 +1,4 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-knobs/register'
 import '@storybook/addon-links/register'
-
+import '@storybook/addon-viewport/register'

web-app/.storybook/config.ts

@@ -1,21 +1,38 @@
 import '@alifd/next/dist/next.css'
-import { configure } from '@storybook/react'
+import {configure, addParameters} from '@storybook/react'
 import '../src/styles/index.css'
 
 // setup acquireVsCodeApi mock
 // @ts-ignore
 global.acquireVsCodeApi = () => ({
-  postMessage(event: string) {
-    console.log('postMessage', event)
-  }
+	postMessage(event: string) {
+		console.log('postMessage', event)
+	}
 })
 
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)
 
 function loadStories() {
-  req.keys().forEach(req)
+	req.keys().forEach(req)
 }
 
+// set viewport width
+// see https://www.npmjs.com/package/@storybook/addon-viewport
+addParameters({
+	viewport: {
+		viewports: {
+			name: 'SideMenu',
+			styles: {
+				width: 200,
+				height: window.innerHeight,
+			},
+			type: 'mobile'
+		},
+		defaultViewport: 'SideMenu',
+	},
+})
+
 configure(loadStories, module)
+

web-app/src/containers/New/TutorialList/TutorialItem.tsx

@@ -3,14 +3,14 @@ import { Button } from '@alifd/next'
 
 interface Props {
   title?: string
-  text?: string
+  description?: string
   onSelect(): void
 }
 
 const TutorialItem = (props: Props) => (
   <div>
     <h3>{props.title || 'Title'}</h3>
-    <p>{props.text || 'Description'}</p>
+    <p>{props.description || 'Description'}</p>
     <Button onClick={props.onSelect}>Start</Button>
   </div>
 )

web-app/src/containers/New/TutorialList/index.tsx

@@ -24,7 +24,7 @@ const TutorialList = (props: Props) => {
           key={tutorial.id}
           onSelect={() => onSelect(tutorial)}
           title={tutorial.version.summary.title || ''}
-          text={tutorial.version.summary.description || ''}
+          description={tutorial.version.summary.description || ''}
         />
       ))}
     </div>

web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

@@ -45,7 +45,7 @@ const styles = {
 }
 
 interface Props {
-  level: G.Level
+  level: G.Level & { index: number }
   onContinue(): void
   onLoadSolution(): void
 }
@@ -100,7 +100,11 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
         </div>
       )}
       <div>
-        <div style={styles.footer}>{level.title}</div>
+        <div style={styles.footer}>
+          <span>
+            {level.index.toString()}. {level.title}
+          </span>
+        </div>
       </div>
     </div>
   )

web-app/src/services/selectors/tutorial.ts

@@ -25,11 +25,13 @@ export const currentLevel = (context: MachineContext): G.Level => createSelector
 		// sent with the test to ensure consistency
 		const levels: G.Level[] = version.data.levels
 
-		const level: G.Level | undefined = levels.find((l: G.Level) => l.id === context.position.levelId)
-
-		if (!level) {
+		const levelIndex = levels.findIndex((l: G.Level) => l.id === context.position.levelId)
+		if (levelIndex < 0) {
 			throw new Error('Level not found when selecting level')
 		}
+		const level: G.Level = levels[levelIndex]
+		level.index = levelIndex
+
 		return level
 	})(context)
 

web-app/stories/Level.stories.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import * as G from '../../typings/graphql'
 
 import { action } from '@storybook/addon-actions'
-import { object, withKnobs } from '@storybook/addon-knobs'
+import { withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
-import SideBarDecorator from './utils/SideBarDecorator'
 
+import SideBarDecorator from './utils/SideBarDecorator'
 import Level from '../src/containers/Tutorial/LevelPage/Level/index'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => {
-    const level: G.Level = {
+    const level: G.Level & { index: number } = {
       id: 'L1',
+      index: 2,
       title: 'A Title',
       description: 'Some description',
       setup: null,

web-app/stories/Loading.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { storiesOf } from '@storybook/react'
-import SideBarDecorator from './utils/SideBarDecorator'
 
+import SideBarDecorator from './utils/SideBarDecorator'
 import LoadingPage from '../src/containers/LoadingPage'
 
 storiesOf('Components', module)

web-app/stories/New.stories.tsx

@@ -1,36 +1,41 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import * as T from '../../typings/graphql'
-import apolloProvider from './utils/ApolloDecorator'
 
+import SideBarDecorator from './utils/SideBarDecorator'
 import TutorialList from '../src/containers/New/TutorialList'
 import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
-import NewContainer from '../src/containers/New'
 
 storiesOf('New', module)
-  .add('Tutorial', () => {
-    const tutorial = {
-      id: '1',
-      title: 'Tutorial 1',
-      text: 'The first one',
-    }
-    return <TutorialItem onSelect={action('onSelect')} title={tutorial.title} text={tutorial.text} />
-  })
-  .add('TutorialList', () => {
+  .addDecorator(SideBarDecorator)
+  .add('Tutorial List', () => {
     const tutorialList = [
       {
         id: '1',
-        title: 'Tutorial 1',
-        text: 'The first one',
+        version: {
+          summary: {
+            title: 'Tutorial 1',
+            description: 'The first one',
+          },
+        },
       },
       {
         id: '2',
-        title: 'Tutorial 2',
-        text: 'The second one',
+        version: {
+          summary: {
+            title: 'Tutorial 2',
+            description: 'The second one',
+          },
+        },
       },
     ]
-    return <TutorialList tutorialList={tutorialList} onNew={action('onNew')} />
+    return <TutorialList tutorialList={tutorialList} />
+  })
+  .add('Tutorial Item', () => {
+    const tutorial = {
+      id: '1',
+      title: 'Tutorial 1',
+      description: 'The first one',
+    }
+    return <TutorialItem onSelect={action('onSelect')} title={tutorial.title} description={tutorial.description} />
   })
-  .addDecorator(apolloProvider)
-  .add('Container', () => <NewContainer />)

web-app/stories/Step.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { select, boolean, text, withKnobs } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+import { select, text, withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
@@ -12,20 +13,20 @@ const stepText =
 const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
   \`\`\`javascript
   var a = 12
-  
+
   function example(a) {
     return a + 1
   }
   \`\`\`
-  
+
   Headers can be added:
-  
+
   # h1
   ## h2
   ### h3
   #### h4
   ##### h5
-  
+
   Emojis: :) :| :(
   `
 
@@ -35,12 +36,14 @@ storiesOf('Tutorial SideBar', module)
   .add('Step Description', () => (
     <StepDescription
       text={text('text', stepText)}
-      mode={select('mode', { active: 'ACTIVE', complete: 'COMPLETE', incomplete: 'INCOMPLETE' }, 'active', 'step')}
+      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+      onLoadSolution={action('onLoadSolution')}
     />
   ))
   .add('Step Markdown', () => (
     <StepDescription
       text={text('text', paragraphText)}
-      mode={select('mode', { active: 'ACTIVE', complete: 'COMPLETE', incomplete: 'INCOMPLETE' }, 'active', 'step')}
+      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+      onLoadSolution={action('onLoadSolution')}
     />
   ))

web-app/stories/Summary.stories.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 
 import { linkTo } from '@storybook/addon-links'
 import { storiesOf } from '@storybook/react'
-import SideBarDecorator from './utils/SideBarDecorator'
 
+import SideBarDecorator from './utils/SideBarDecorator'
 import Summary from '../src/containers/Tutorial/SummaryPage/Summary'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
   .add('Summary', () => (
-    <Summary title="Some Title" text="Some description" onNext={linkTo('Tutorial SideBar', 'Level')} />
+    <Summary title="Some Title" description="Some description" onNext={linkTo('Tutorial SideBar', 'Level')} />
   ))