Jul 15, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 15, 2019
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
 import'@alifd/next/dist/next.css'
 import{configure}from'@storybook/react'
 import'../src/styles/index.css'

 // automatically import all files ending in *.stories.tsx
 constreq=require.context('../stories',true,/\.stories\.tsx$/)
diff --git a/web-app/src/components/Level/LevelStageSummary.tsx b/web-app/src/components/Level/LevelStageSummary.tsx
 import {Button } from '@alifd/next'
 import {Icon } from '@alifd/next'
 import * as React from 'react'
 import CC from '../../../../typings/context'

 import Markdown from '../Markdown'

 const styles = {
  active: {
    backgroundColor: '#e6f7ff',
  },
  card: {
    padding: '0.5rem 1rem',
  },
  completed: {
    backgroundColor: '#f6ffed',
    display: 'grid',
    gridTemplateAreas: 'Content Icon',
    gridTemplateColumns: '1fr 1.5rem',
    gridTemplateRows: '1fr',
    marginRight: '1.5rem',
  },
 disabled: {
 // backgroundColor: 'blue',
 continueIcon: {
 color: '#1890ff',
  },
  options: {},
  title: {
    margin: 0,
  left: {},
  right: {
    alignSelf: 'center',
    justifySelf: 'center',
    marginBottom: '1rem',
  },
 }


 const LevelStageSummary = (props: Props) => {
  const { stage, onNext } = props
  const { complete, active } = stage.status
  const cardStyle = {
    ...styles.card,
    ...(active ? styles.active : styles.disabled),
    ...(complete ? styles.completed : {}),
  }
  const { active } = stage.status
  return (
    <div style={cardStyle}>
      <h3 style={styles.title}>{stage.content.title}</h3>
      <Markdown>{stage.content.text}</Markdown>
      <div style={styles.options}>
        {active && <Button onClick={onNext}>Continue</Button>}
        {complete && <div>Complete</div>}
    <div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
      <div style={styles.left}>
        <Markdown>{stage.content.text}</Markdown>
      </div>
      <div style={styles.right}>{active && <Icon type="arrow-right" style={styles.continueIcon} />}</div>
    </div>
  )
 }
diff --git a/web-app/src/components/Level/index.tsx b/web-app/src/components/Level/index.tsx
 import { Button } from '@alifd/next'
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
 import CC from '../../../../typings/context'

 import Divider from '../Divider'
 import Markdown from '../Markdown'
 import LevelStageSummary from './LevelStageSummary'

  options: {
    padding: '0rem 1rem',
  },
  steps: {
    padding: '1rem 0.5rem',
  },
  title: {},
 }

 }

 const Level = ({ level, stages, onNext, onBack }: Props) => {
  const { title, text } = level.content
  const { content, stageList } = level
  const { title, text } = content
  const activeIndex = stageList.findIndex((stageId: string) => {
    return stages[stageId].status.active
  })

  return (
    <div style={styles.card}>
      <div style={styles.content}>
        <h2 style={styles.title}>{title}</h2>
        <Markdown>{text}</Markdown>
      </div>
      <Divider />
      <div style={styles.list}>
        {level.stageList.map((stageId: string) => {
          const stage = stages[stageId]
          return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
        })}
      <div style={styles.steps}>
        <Step current={activeIndex} direction="ver" animation={false}>
          {stageList.map((stageId: string, index: number) => {
            const stage: CC.StageWithStatus = stages[stageId]
            const { active } = stage.status
            const clickHandler = active ? onNext : () => {}
            // note - must add click handler to title, content & step.item
            // as all are separted components
            return (
              <Step.Item
                key={stageId}
                style={{ backgroundColor: 'blue' }}
                title={
                  <span className={active ? 'hover-select' : ''} onClick={clickHandler}>
                    {stage.content.title || `Stage ${index + 1}`}
                  </span>
                }
                content={<LevelStageSummary key={stageId} stage={stage} onNext={clickHandler} />}
                onClick={clickHandler}
              />
            )
          })}
        </Step>
      </div>
      <div style={styles.options}>
        <Button onClick={onBack}>Back</Button>
diff --git a/web-app/src/components/Stage/StepDescription/index.tsx b/web-app/src/components/Stage/StepDescription/index.tsx
 import * as React from 'react'
 import CR from 'typings'
 import Markdown from '../../Markdown'

 const styles = {
  // active: {
  //   backgroundColor: '#e6f7ff',
  // },
  card: {
    paddingRight: '1rem',
  },
 }

 interface Props {
  content: CR.TutorialStepContent
  status: any // CC.StageStepStatus
 }

 const StepDescription = ({ content, status }: Props) => {
  const hidden = !status.active && !status.complete
  if (hidden) {
    return null
  }
  return (
    <div style={styles.card}>
      <Markdown>{content.text}</Markdown>
    </div>
  )
 }

 export default StepDescription
diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
 import { Button } from '@alifd/next'
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'

 import Divider from '../Divider'
 import Markdown from '../Markdown'
 importStep from '../Step'
 importStepDescription from './StepDescription'

 const styles = {
  card: {
  options: {
    padding: '0rem 1rem',
  },
  steps: {
    padding: '1rem 0rem',
  },
  title: {},
 }

 }

 const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
  const { title, text } = stage.content
  const { stepList, content } = stage
  const { title, text } = content
  // grab the active step
  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}>
        <h2 style={styles.title}>{title}</h2>
        <Markdown>{text}</Markdown>
      </div>
      <Divider />
      <div>
        {stage.stepList.map((stepId: string) => {
          const step = steps[stepId]
          return <Step key={stepId} content={step.content} status={step.status} />
        })}
      <div style={styles.steps}>
        <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
          {filteredStepList.map((stepId: string, index: number) => {
            const step = steps[stepId]
            return (
              <Step.Item
                key={stepId}
                title={step.content.title || `Step ${index + 1}`}
                content={<StepDescription content={step.content} status={step.status} />}
              />
            )
          })}
        </Step>
      </div>

      {complete && (
diff --git a/web-app/src/components/Step/index.tsx b/web-app/src/components/Step/index.tsx
diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

 .hover-select:hover {
  cursor: pointer;
 }
diff --git a/web-app/src/tutorials/basic.ts b/web-app/src/tutorials/basic.ts
      step1Id: {
        content: {
          title: 'Sum',
          text: 'Write a function that adds two numbers together',
          text: 'Write a function`add`that adds two numbers together',
        },
        actions: {
          setup: {
      step2Id: {
        content: {
          title: 'Multiply',
          text: 'Write a function that multiplies two numbers together',
          text: 'Write a function`multiply`that multiplies two numbers together',
        },
        actions: {
          setup: {
      step3Id: {
        content: {
          title: 'Divide',
          text: 'Write a function that divides',
          text: 'Write a function`divide`that divides',
        },
        actions: {
          setup: {
diff --git a/web-app/stories/Level.stories.tsx b/web-app/stories/Level.stories.tsx
        stage1Id: {
          content: {
            text: 'some description',
            title: 'Stage 1',
            title: 'First',
          },
          status: {
            active: false,
        stage2Id: {
          content: {
            text: 'some description',
            title: 'Stage 2',
            title: 'Second',
          },
          status: {
            active: true,
        stage3Id: {
          content: {
            text: 'some description',
            title: 'Stage 3',
            title: 'Third',
          },
          status: {
            active: false,
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import'@alifd/next/dist/next.css'
		import{configure}from'@storybook/react'
		import'../src/styles/index.css'

		// automatically import all files ending in *.stories.tsx
		constreq=require.context('../stories',true,/\.stories\.tsx$/)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,25 +1,25 @@
		import {Button } from '@alifd/next'
		import {Icon } from '@alifd/next'
		import * as React from 'react'
		import CC from '../../../../typings/context'

		import Markdown from '../Markdown'

		const styles = {
		active: {
		backgroundColor: '#e6f7ff',
		},
		card: {
		padding: '0.5rem 1rem',
		},
		completed: {
		backgroundColor: '#f6ffed',
		display: 'grid',
		gridTemplateAreas: 'Content Icon',
		gridTemplateColumns: '1fr 1.5rem',
		gridTemplateRows: '1fr',
		marginRight: '1.5rem',
		},
		disabled: {
		// backgroundColor: 'blue',
		continueIcon: {
		color: '#1890ff',
		},
		options: {},
		title: {
		margin: 0,
		left: {},
		right: {
		alignSelf: 'center',
		justifySelf: 'center',
		marginBottom: '1rem',
		},
		}

Expand All		@@ -30,20 +30,13 @@ interface Props {

		const LevelStageSummary = (props: Props) => {
		const { stage, onNext } = props
		const { complete, active } = stage.status
		const cardStyle = {
		...styles.card,
		...(active ? styles.active : styles.disabled),
		...(complete ? styles.completed : {}),
		}
		const { active } = stage.status
		return (
		<div style={cardStyle}>
		<h3 style={styles.title}>{stage.content.title}</h3>
		<Markdown>{stage.content.text}</Markdown>
		<div style={styles.options}>
		{active && <Button onClick={onNext}>Continue</Button>}
		{complete && <div>Complete</div>}
		<div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
		<div style={styles.left}>
		<Markdown>{stage.content.text}</Markdown>
		</div>
		<div style={styles.right}>{active && <Icon type="arrow-right" style={styles.continueIcon} />}</div>
		</div>
		)
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,8 @@
		import { Button } from '@alifd/next'
		import { Button, Step } from '@alifd/next'
		import * as React from 'react'
		import CR from 'typings'
		import CC from '../../../../typings/context'

		import Divider from '../Divider'
		import Markdown from '../Markdown'
		import LevelStageSummary from './LevelStageSummary'

Expand All		@@ -18,6 +18,9 @@ const styles = {
		options: {
		padding: '0rem 1rem',
		},
		steps: {
		padding: '1rem 0.5rem',
		},
		title: {},
		}

Expand All		@@ -31,19 +34,41 @@ interface Props {
		}

		const Level = ({ level, stages, onNext, onBack }: Props) => {
		const { title, text } = level.content
		const { content, stageList } = level
		const { title, text } = content
		const activeIndex = stageList.findIndex((stageId: string) => {
		return stages[stageId].status.active
		})

		return (
		<div style={styles.card}>
		<div style={styles.content}>
		<h2 style={styles.title}>{title}</h2>
		<Markdown>{text}</Markdown>
		</div>
		<Divider />
		<div style={styles.list}>
		{level.stageList.map((stageId: string) => {
		const stage = stages[stageId]
		return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
		})}
		<div style={styles.steps}>
		<Step current={activeIndex} direction="ver" animation={false}>
		{stageList.map((stageId: string, index: number) => {
		const stage: CC.StageWithStatus = stages[stageId]
		const { active } = stage.status
		const clickHandler = active ? onNext : () => {}
		// note - must add click handler to title, content & step.item
		// as all are separted components
		return (
		<Step.Item
		key={stageId}
		style={{ backgroundColor: 'blue' }}
		title={
		<span className={active ? 'hover-select' : ''} onClick={clickHandler}>
		{stage.content.title \|\| `Stage ${index + 1}`}
		</span>
		}
		content={<LevelStageSummary key={stageId} stage={stage} onNext={clickHandler} />}
		onClick={clickHandler}
		/>
		)
		})}
		</Step>
		</div>
		<div style={styles.options}>
		<Button onClick={onBack}>Back</Button>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,31 @@
		import * as React from 'react'
		import CR from 'typings'
		import Markdown from '../../Markdown'

		const styles = {
		// active: {
		// backgroundColor: '#e6f7ff',
		// },
		card: {
		paddingRight: '1rem',
		},
		}

		interface Props {
		content: CR.TutorialStepContent
		status: any // CC.StageStepStatus
		}

		const StepDescription = ({ content, status }: Props) => {
		const hidden = !status.active && !status.complete
		if (hidden) {
		return null
		}
		return (
		<div style={styles.card}>
		<Markdown>{content.text}</Markdown>
		</div>
		)
		}

		export default StepDescription
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,9 @@
		import { Button } from '@alifd/next'
		import { Button, Step } from '@alifd/next'
		import * as React from 'react'
		import CR from 'typings'

		import Divider from '../Divider'
		import Markdown from '../Markdown'
		importStep from '../Step'
		importStepDescription from './StepDescription'

		const styles = {
		card: {
Expand All		@@ -17,6 +16,9 @@ const styles = {
		options: {
		padding: '0rem 1rem',
		},
		steps: {
		padding: '1rem 0rem',
		},
		title: {},
		}

Expand All		@@ -30,19 +32,33 @@ interface Props {
		}

		const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
		const { title, text } = stage.content
		const { stepList, content } = stage
		const { title, text } = content
		// grab the active step
		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}>
		<h2 style={styles.title}>{title}</h2>
		<Markdown>{text}</Markdown>
		</div>
		<Divider />
		<div>
		{stage.stepList.map((stepId: string) => {
		const step = steps[stepId]
		return <Step key={stepId} content={step.content} status={step.status} />
		})}
		<div style={styles.steps}>
		<Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
		{filteredStepList.map((stepId: string, index: number) => {
		const step = steps[stepId]
		return (
		<Step.Item
		key={stepId}
		title={step.content.title \|\| `Step ${index + 1}`}
		content={<StepDescription content={step.content} status={step.status} />}
		/>
		)
		})}
		</Step>
		</div>

		{complete && (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,13 +1,15 @@
		body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
		sans-serif;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
		'Droid Sans', 'Helvetica Neue', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		}

		code {
		font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
		monospace;
		font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
		}

		.hover-select:hover {
		cursor: pointer;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,7 +41,7 @@ const basic: CR.Tutorial = {
		step1Id: {
		content: {
		title: 'Sum',
		text: 'Write a function that adds two numbers together',
		text: 'Write a function`add`that adds two numbers together',
		},
		actions: {
		setup: {
Expand All		@@ -58,7 +58,7 @@ const basic: CR.Tutorial = {
		step2Id: {
		content: {
		title: 'Multiply',
		text: 'Write a function that multiplies two numbers together',
		text: 'Write a function`multiply`that multiplies two numbers together',
		},
		actions: {
		setup: {
Expand All		@@ -74,7 +74,7 @@ const basic: CR.Tutorial = {
		step3Id: {
		content: {
		title: 'Divide',
		text: 'Write a function that divides',
		text: 'Write a function`divide`that divides',
		},
		actions: {
		setup: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,7 @@ storiesOf('Tutorial SideBar', module)
		stage1Id: {
		content: {
		text: 'some description',
		title: 'Stage 1',
		title: 'First',
		},
		status: {
		active: false,
Expand All		@@ -34,7 +34,7 @@ storiesOf('Tutorial SideBar', module)
		stage2Id: {
		content: {
		text: 'some description',
		title: 'Stage 2',
		title: 'Second',
		},
		status: {
		active: true,
Expand All		@@ -45,7 +45,7 @@ storiesOf('Tutorial SideBar', module)
		stage3Id: {
		content: {
		text: 'some description',
		title: 'Stage 3',
		title: 'Third',
		},
		status: {
		active: false,
Expand Down