Merge branch 'refacto-dojo'

package.json

@@ -9,6 +9,8 @@
     "lint": "tslint --project ."
   },
   "devDependencies": {
+    "@types/react": "^16.3.14",
+    "@types/react-dom": "^16.0.5",
     "awesome-typescript-loader": "^3.4.1",
     "babel-core": "^6.26.0",
     "html-webpack-plugin": "^2.30.1",
@@ -25,5 +27,8 @@
   ],
   "author": "Maniae",
   "license": "ISC",
-  "dependencies": {}
+  "dependencies": {
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2"
+  }
 }

src/demos/common/button.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { CssStyleSheet } from "./cssStyleSheet";
+
+interface ButtonProps {
+	onClick?: () => void;
+	style?: React.CSSProperties;
+	children?: React.ReactNode ;
+}
+export const Button = (props: ButtonProps) => (
+	<button style={{...styles.button, ...props.style}} {...props}>{props.children}</button>
+);
+
+const styles: CssStyleSheet = {
+	button: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		fontSize: 18,
+		padding: "10px 20px",
+		background: "white",
+		borderRadius: "10px",
+		borderColor: "#f0f0f0",
+		cursor: "pointer"
+	}
+};

src/demos/common/cssStyleSheet.ts

@@ -0,0 +1,3 @@
+export interface CssStyleSheet {
+	[key: string]: React.CSSProperties;
+}

src/demos/common/statistic.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { CssStyleSheet } from "./cssStyleSheet";
+
+interface StatisticProps {
+	title: string;
+	value: string | number;
+	color?: string;
+	style?: React.CSSProperties;
+}
+export const Statistic = (props: StatisticProps) => (
+	<div style={{...styles.statistic, ...props.style}}>
+		<div style={{...styles.value, color: props.color}}>
+			{props.value}
+		</div>
+		<div style={styles.title}>
+			{props.title}
+		</div>
+	</div>
+);
+
+const styles: CssStyleSheet = {
+	statistic: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center"
+	},
+	value: {
+		fontSize: 28
+	},
+	title: {
+		fontSize: 18
+	}
+};