refactor out reusable lib components

Author: ShMcK

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Button as AlifdButton } from '@alifd/next'
+
+interface Props {
+  children: string
+  type?: 'primary' | 'secondary' | 'normal'
+  onClick(): void
+}
+
+const Button = (props: Props) => (
+  <AlifdButton onClick={props.onClick} type={props.type}>
+    {props.children}
+  </AlifdButton>
+)
+
+export default Button

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Card as AlifdCard } from '@alifd/next'
+
+interface Props {
+  children: React.ReactNode
+  onClick?: () => void
+  style?: React.CSSProperties
+}
+
+const Card = (props: Props) => (
+  <AlifdCard showTitleBullet={false} contentHeight="auto" onClick={props.onClick} style={props.style}>
+    {props.children}
+  </AlifdCard>
+)
+
+export default Card

web-app/src/containers/Continue/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
+import Button from '../../components/Button'
+import Card from '../../components/Card'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
 
@@ -12,14 +13,14 @@ interface Props {
 export const ContinuePage = (props: Props) => (
   <div>
     <h3>Continue</h3>
-    <Card showTitleBullet={false} contentHeight="auto">
+    <Card>
       <div>
         <h2>{props.tutorial.version.summary.title}</h2>
         <p>{props.tutorial.version.summary.description}</p>
         <Button onClick={props.onContinue}>Resume</Button>
       </div>
     </Card>
-    <Card showTitleBullet={false} contentHeight="auto">
+    <Card>
       <div>
         <h2>Start a New Tutorial</h2>
         <Button onClick={props.onNew}>Select New Tutorial</Button>

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
+import Button from '../../components/Button'
+import Card from '../../components/Card'
 
 interface Props {
   title: string
@@ -9,7 +10,7 @@ interface Props {
 
 const TutorialItem = (props: Props) => {
   return (
-    <Card showTitleBullet={false} contentHeight="auto">
+    <Card>
       <div>
         <h2>{props.title}</h2>
         <p>{props.description}</p>

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Card } from '@alifd/next'
+import Card from '../../../components/Card'
 
 const styles = {
   card: {

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

@@ -1,8 +1,8 @@
 import * as React from 'react'
-
-import channel from '../../../services/channel'
 import * as G from 'typings/graphql'
+
 import TutorialItem from './TutorialItem'
+import channel from '../../../services/channel'
 
 interface Props {
   tutorialList: G.Tutorial[]

web-app/src/containers/Overview/OverviewPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button } from '@alifd/next'
+import Button from '../../components/Button'
 import * as G from 'typings/graphql'
 
 import Markdown from '../../components/Markdown'

web-app/src/containers/Tutorial/CompletedPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button } from '@alifd/next'
+import Button from '../../components/Button'
 import * as CR from 'typings'
 
 const styles = {
@@ -9,22 +9,22 @@ const styles = {
 }
 
 interface Props {
-	context: CR.MachineContext
-	send(action: CR.Action|string): void
+  context: CR.MachineContext
+  send(action: CR.Action | string): void
 }
 
 const CompletedPage = (props: Props) => {
-	const selectNewTutorial = () => {
-		props.send('SELECT_TUTORIAL')
-	}
+  const selectNewTutorial = () => {
+    props.send('SELECT_TUTORIAL')
+  }
   return (
-		<div>
-			<h3>Tutorial Complete</h3>
-			<div style={styles.options}>
-				<Button onClick={selectNewTutorial}>Continue</Button>
-			</div>
-		</div>
-	)
+    <div>
+      <h3>Tutorial Complete</h3>
+      <div style={styles.options}>
+        <Button onClick={selectNewTutorial}>Continue</Button>
+      </div>
+    </div>
+  )
 }
 
 export default CompletedPage

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as T from 'typings'
-import { Button } from '@alifd/next'
+import Button from '../../../../../components/Button'
 import Checkbox from '../../../../../components/Checkbox'
 import Markdown from '../../../../../components/Markdown'
 

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

@@ -1,9 +1,9 @@
-import { Button } from '@alifd/next'
 import * as React from 'react'
 import * as G from 'typings/graphql'
 import * as T from 'typings'
 
 import Step from './Step'
+import Button from '../../../../components/Button'
 import Markdown from '../../../../components/Markdown'
 
 const styles = {