add modal stories

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

web-app/src/containers/Tutorial/components/Continue.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Dialog, Message } from '@alifd/next'
+import Button from '../../../components/Button'
+
+interface Props {
+  onContinue(): void
+}
+
+const Continue = (props: Props) => {
+  const [modalState, setModalState] = React.useState<'none' | 'continue'>('none')
+
+  const onClose = () => {
+    setModalState('none')
+  }
+
+  const onOk = () => {
+    setModalState('continue')
+    props.onContinue()
+    return setTimeout(() => {
+      setModalState('none')
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="primary" size="medium" onClick={() => setModalState('continue')}>
+        Continue
+      </Button>
+      <Dialog
+        visible={modalState === 'continue'}
+        onOk={onOk}
+        onCancel={onClose}
+        onClose={onClose}
+        footerActions={['ok', 'cancel']}
+      >
+        <Message>Level Complete</Message>
+      </Dialog>
+    </>
+  )
+}
+
+export default Continue

web-app/src/containers/Tutorial/components/Reset.tsx

@@ -3,7 +3,7 @@ import { Dialog, Message } from '@alifd/next'
 import Button from '../../../components/Button'
 
 interface Props {
-  disabled: boolean
+  disabled?: boolean
   onReset(): void
 }
 

web-app/stories/Modals.stories.tsx

@@ -0,0 +1,13 @@
+import { action } from '@storybook/addon-actions'
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import SideBarDecorator from './utils/SideBarDecorator'
+import Reset from '../src/containers/Tutorial/components/Reset'
+import Continue from '../src/containers/Tutorial/components/Continue'
+
+storiesOf('Modals', module)
+  .addDecorator(SideBarDecorator)
+  .addDecorator(withKnobs)
+  .add('Reset', () => <Reset onReset={action('onReset')} />)
+  .add('Continue', () => <Continue onContinue={action('onContinue')} />)

web-app/stories/Tutorial.stories.tsx

@@ -3,16 +3,9 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import * as T from '../../typings'
-import * as TT from '../../typings/tutorial'
 import Tutorial from '../src/containers/Tutorial'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-type ModifiedLevel = TT.Level & {
-  status: T.ProgressStatus
-  index: number
-  steps: Array<TT.Step & { status: T.ProgressStatus }>
-}
-
 const context: Partial<T.MachineContext> = {
   env: { machineId: '', sessionId: '', token: '' },
   error: null,