setup processes component

Author: ShMcK

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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { Message as AlifdMessage } from '@alifd/next'
+
+interface Process {
+	title: string
+	description: string
+}
+
+interface Props {
+	processes: Process[]
+}
+
+const styles = {
+	container: {
+		display: 'flex',
+		flexDirection: 'column' as 'column',
+	},
+}
+
+const Processes = (props: Props) => (
+	<div style={styles.container}>
+		{props.processes.map(process => (
+			<AlifdMessage key={process.title} type="loading" size="medium" title={process.title}>
+				{process.description}...
+			</AlifdMessage>
+		))}
+	</div>
+)
+
+export default Processes

web-app/stories/Checkbox.stories.tsx

@@ -5,24 +5,21 @@ import SideBarDecorator from './utils/SideBarDecorator'
 import Checkbox from '../src/components/Checkbox'
 
 const styles = {
-  container: {
-    display: 'flex' as 'flex',
-    flexDirection: 'column' as 'column',
-  },
+	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>
-  ))
+storiesOf('Components', module)
+	.addDecorator(SideBarDecorator)
+	.add('Checkboxes', () => (
+		<div style={styles.container}>
+			<span>
+				<Checkbox status="COMPLETE" /> Checked
+			</span>
+			<span>
+				<Checkbox status="INCOMPLETE" /> Unchecked
+			</span>
+		</div>
+	))

web-app/stories/Commands.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+import Processes from '../src/components/Processes'
+
+const styles = {
+	container: {
+		display: 'flex' as 'flex',
+		flexDirection: 'column' as 'column',
+	},
+}
+
+storiesOf('Components', module)
+	.addDecorator(SideBarDecorator)
+	.add('Processes', () => (
+		<Processes
+			processes={[
+				{
+					title: 'npm install',
+					description: 'CLI Setup running',
+				},
+				{
+					title: 'npm test',
+					description: 'Test running',
+				},
+			]}
+		/>
+	))