cleanup load processes

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

@@ -2,15 +2,34 @@ import { Message as AlifdMessage } from '@alifd/next'
 import * as React from 'react'
 
 interface Props {
-  type: 'error'
+  type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading'
   title: string
-  description?: string
+  shape?: 'inline' | 'addon' | 'toast'
+  size?: 'medium' | 'large'
+  children?: string
+  closeable?: boolean
+  onClose?: () => void
+  handleClose?: () => void
 }
 
 const Message = (props: Props) => {
+  const [visible, setVisible] = React.useState(true)
+  function onClose() {
+    if (props.onClose) {
+      props.onClose()
+    }
+    setVisible(false)
+  }
   return (
-    <AlifdMessage type={props.type} title={props.title}>
-      {props.description}
+    <AlifdMessage
+      type={props.type}
+      visible={visible}
+      title={props.title}
+      closeable={props.closeable}
+      onClose={onClose}
+      shape={props.shape}
+    >
+      {props.children}
     </AlifdMessage>
   )
 }

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

@@ -1,4 +1,4 @@
-import { Message as AlifdMessage } from '@alifd/next'
+import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
@@ -15,19 +15,19 @@ const styles = {
 }
 
 // display a list of active processes
-const ProcessEvents = ({ processes }: Props) => {
+const ProcessMessages = ({ processes }: Props) => {
   if (!processes.length) {
     return null
   }
   return (
     <div css={styles.container}>
       {processes.map(process => (
-        <AlifdMessage key={process.title} type="loading" size="medium" title={process.title}>
+        <Message key={process.title} type="loading" size="medium" title={process.title}>
           {process.description}
-        </AlifdMessage>
+        </Message>
       ))}
     </div>
   )
 }
 
-export default ProcessEvents
+export default ProcessMessages

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

@@ -4,7 +4,7 @@ import * as G from 'typings/graphql'
 import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
-import ProcessEvents from '../../../components/ProcessEvents'
+import ProcessMessages from '../../../components/ProcessMessages'
 import Step from './Step'
 
 const styles = {
@@ -109,7 +109,7 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
 
       {processes.length > 0 && (
         <div css={styles.processes}>
-          <ProcessEvents processes={processes} />
+          <ProcessMessages processes={processes} />
         </div>
       )}
 

web-app/stories/Commands.stories.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import ProcessEvents from '../src/components/ProcessEvents'
+import ProcessMessages from '../src/components/ProcessMessages'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const styles = {
@@ -13,7 +13,7 @@ const styles = {
 storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
   .add('Processes', () => (
-    <ProcessEvents
+    <ProcessMessages
       processes={[
         {
           title: 'npm install',

web-app/stories/TestNotify.stories.tsx

@@ -0,0 +1,22 @@
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import { css, jsx } from '@emotion/core'
+import SideBarDecorator from './utils/SideBarDecorator'
+import Message from '../src/components/Message'
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+}
+
+storiesOf('Test Notification', module)
+  .addDecorator(SideBarDecorator)
+  .add('Toast', () => {
+    return (
+      <div css={styles.container}>
+        <Message title="Test" closeable />
+      </div>
+    )
+  })