add checkbox component

Author: ShMcK

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

@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+const styles = {
+  box: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    border: '1px solid black',
+    backgroundColor: 'yellow',
+  },
+}
+
+interface Props {
+  status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE' | 'LOADING'
+}
+
+const Checkbox = (props: Props) => {
+  const checked = props.status === 'COMPLETE'
+  // const loading = props.state === 'LOADING'
+  const onChange = () => {
+    /* read */
+  }
+  return (
+    <div style={styles.box}>
+      <label>
+        <input style={styles.input} type="checkbox" checked={checked} onChange={onChange} />
+      </label>
+    </div>
+  )
+}
+
+export default Checkbox

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as T from 'typings'
-import { Button, Checkbox } from '@alifd/next'
-
+import { Button } from '@alifd/next'
+import Checkbox from '../../../../../components/Checkbox'
 import Markdown from '../../../../../components/Markdown'
 
 interface Props {
@@ -36,19 +36,18 @@ const Step = (props: Props) => {
   return (
     <div style={styles.card}>
       <div>
-        <Checkbox
-          checked={props.status === 'COMPLETE'}
-          indeterminate={false /* TODO: running */}
-          disabled={props.status !== 'INCOMPLETE' /* TODO: and not running */}
-          onChange={() => {
-            /* do nothing */
-          }}
-        />
+        <Checkbox status={props.status} />
       </div>
       <div>
         <Markdown>{props.content || ''}</Markdown>
       </div>
-      <div>{showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}</div>
+      <div>
+        {showLoadSolution && (
+          <Button type="normal" onClick={onClickHandler}>
+            Load Solution
+          </Button>
+        )}
+      </div>
     </div>
   )
 }

web-app/src/index.tsx

@@ -2,10 +2,6 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 
-// base styles
-// TODO: must be a better way to load @alifd styles
-// currently these are loaded in src/editor/ReactWebView.ts as well
-import '@alifd/next/dist/next.css'
 import './styles/index.css'
 
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)

web-app/stories/Checkbox.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+import Checkbox from '../src/components/Checkbox'
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+}
+
+storiesOf('Checkbox', module)
+  .addDecorator(SideBarDecorator)
+  .add('Checkboxes', () => (
+    <div style={styles.container}>
+      <span>
+        <Checkbox status="COMPLETE" /> Checked
+      </span>
+      <span>
+        <Checkbox status="INCOMPLETE" /> Unchecked
+      </span>
+      <span>
+        <Checkbox status="LOADING" /> Loading
+      </span>
+    </div>
+  ))