adding some skeleton to the todo app

package-lock.json

@@ -4,6 +4,284 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@microsoft/load-themed-styles": {
+      "version": "1.8.54",
+      "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.8.54.tgz",
+      "integrity": "sha512-AjburzIHn1IWeraJ3KkV79pGyH7No4A/CqNXO2c9S78BqIMvKs9sHkx0MkMdrrWDHhBKzjfGHzGANl0E6umswQ=="
+    },
+    "@types/d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-YBaAfimGdWE4nDuoGVKsH89/dkz2hWZ0i8qC+xxqmqi+XJ/aXiRF0jPtzXmN7VdkpVjy1xuDmM5/m1FNuB6VWA=="
+    },
+    "@types/d3-axis": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.10.tgz",
+      "integrity": "sha512-5YF0wfdQMPKw01VAAupLIlg/T4pn5M3/vL9u0KZjiemnVnnKBEWE24na4X1iW+TfZiYJ8j+BgK2KFYnAAT54Ug==",
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-path": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.7.tgz",
+      "integrity": "sha512-U8dFRG+8WhkLJr2sxZ9Cw/5WeRgBnNqMxGdA1+Z0+ZG6tK0s75OQ4OXnxeyfKuh6E4wQPY8OAKr1+iNDx01BEQ=="
+    },
+    "@types/d3-scale": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.0.0.tgz",
+      "integrity": "sha512-fFLSdP3p9qQQ3W6ouO3GBI4Qg94CSykTWVc61U8SI1V62dfBWtOigBj5voxDcOniwh9MjKzTHldMSsGJ5qAFpA==",
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-selection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.3.0.tgz",
+      "integrity": "sha512-1SJhi3kTk/SHHIE6XkHuHU2REYkbSOjkQuo3HT71FOTs8/tjeGcvtXMsX4N3kU1UE1nVG+A5pg7TSjuJ4zUN3A=="
+    },
+    "@types/d3-shape": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.2.8.tgz",
+      "integrity": "sha512-eHAi4Nuw1/69hjBFNXNWYifcNTFhwy360PI969ssMX22Si9henYiNKLeJoBhNfyXFajeFjI1HGsYzyCWKOozdA==",
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
+    "@types/d3-time": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.9.tgz",
+      "integrity": "sha512-m+D4NbQdDlTVaO7QgXAnatR3IDxQYDMBtRhgSCi5rs9R1LPq1y7/2aqa1FJ2IWjFm1mOV63swDxonnCDlHgHMA=="
+    },
+    "@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
+    },
+    "@types/prop-types": {
+      "version": "15.5.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "16.7.20",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.20.tgz",
+      "integrity": "sha512-Qd5RWkwl6SL7R2XzLk/cicjVQm1Mhc6HqXY5Ei4pWd1Vi8Fkbd5O0sA398x8fRSTPAuHdDYD9nrWmJMYTJI0vQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-dom": {
+      "version": "16.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.11.tgz",
+      "integrity": "sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@uifabric/azure-themes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/azure-themes/-/azure-themes-0.1.1.tgz",
+      "integrity": "sha512-WbP1LYK9Fnho4eKb8ISTBYcoJFDfpCikRWTyEYMeRyp3ZsxpNycD5uQuBLNAKYMDhKwMj7VxXZpV6I7/Sj/8yA==",
+      "requires": {
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "office-ui-fabric-react": ">=6.129.0 <7.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "office-ui-fabric-react": {
+          "version": "6.129.1",
+          "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.129.1.tgz",
+          "integrity": "sha512-PuQne4hdA/9K54925ycADght3uEJHhTEfBoquna1kCdjOgVflNc/GDzhMFidAVKryHUhbeFky+Tnm8039PeY+w==",
+          "requires": {
+            "@microsoft/load-themed-styles": "^1.7.13",
+            "@uifabric/icons": ">=6.3.0 <7.0.0",
+            "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+            "@uifabric/set-version": ">=1.1.3 <2.0.0",
+            "@uifabric/styling": ">=6.41.0 <7.0.0",
+            "@uifabric/utilities": ">=6.28.0 <7.0.0",
+            "prop-types": "^15.5.10",
+            "tslib": "^1.7.1"
+          }
+        }
+      }
+    },
+    "@uifabric/charting": {
+      "version": "0.28.5",
+      "resolved": "https://registry.npmjs.org/@uifabric/charting/-/charting-0.28.5.tgz",
+      "integrity": "sha512-iFwuoFUQoS6H6paxrRsVCxQnw2SqnxhS+EBh54Gb3A6HxS2IKzGAE5c4tnZcqjXNPxXTvXgt5iQg3xycIa95cg==",
+      "requires": {
+        "@microsoft/load-themed-styles": "^1.7.13",
+        "@types/d3-array": "1.2.1",
+        "@types/d3-axis": "1.0.10",
+        "@types/d3-scale": "2.0.0",
+        "@types/d3-selection": "1.3.0",
+        "@types/d3-shape": "^1.2.3",
+        "@types/d3-time-format": "^2.1.0",
+        "@uifabric/icons": ">=6.3.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "d3-array": "1.2.1",
+        "d3-axis": "1.0.8",
+        "d3-scale": "2.0.0",
+        "d3-selection": "1.3.0",
+        "d3-shape": "^1.2.0",
+        "d3-time-format": "^2.1.3",
+        "office-ui-fabric-react": ">=6.121.0 <7.0.0",
+        "prop-types": "^15.5.10",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/experiments": {
+      "version": "6.51.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/experiments/-/experiments-6.51.1.tgz",
+      "integrity": "sha512-fPC+DnDsF63/PPbQgKfx0i65DZHiCpVq5RgGKZv0aro8uUuDST6DVgtB9SZcvuLWBYOacJBCe9ucrRRVVzdtUQ==",
+      "requires": {
+        "@microsoft/load-themed-styles": "^1.7.13",
+        "@uifabric/azure-themes": ">=0.1.1 <1.0.0",
+        "@uifabric/charting": "^0.28.5",
+        "@uifabric/file-type-icons": ">=6.4.1 <7.0.0",
+        "@uifabric/fluent-theme": ">=0.13.2 <1.0.0",
+        "@uifabric/foundation": ">=0.6.0 <1.0.0",
+        "@uifabric/icons": ">=6.3.0 <7.0.0",
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.41.0 <7.0.0",
+        "@uifabric/theme-samples": ">=0.1.4 <1.0.0",
+        "@uifabric/utilities": ">=6.28.0 <7.0.0",
+        "@uifabric/variants": ">=6.14.0 <7.0.0",
+        "deep-assign": "^2.0.0",
+        "office-ui-fabric-react": ">=6.129.0 <7.0.0",
+        "prop-types": "^15.5.10",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "office-ui-fabric-react": {
+          "version": "6.129.1",
+          "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.129.1.tgz",
+          "integrity": "sha512-PuQne4hdA/9K54925ycADght3uEJHhTEfBoquna1kCdjOgVflNc/GDzhMFidAVKryHUhbeFky+Tnm8039PeY+w==",
+          "requires": {
+            "@microsoft/load-themed-styles": "^1.7.13",
+            "@uifabric/icons": ">=6.3.0 <7.0.0",
+            "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+            "@uifabric/set-version": ">=1.1.3 <2.0.0",
+            "@uifabric/styling": ">=6.41.0 <7.0.0",
+            "@uifabric/utilities": ">=6.28.0 <7.0.0",
+            "prop-types": "^15.5.10",
+            "tslib": "^1.7.1"
+          }
+        }
+      }
+    },
+    "@uifabric/file-type-icons": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/file-type-icons/-/file-type-icons-6.4.1.tgz",
+      "integrity": "sha512-T6wGiA/RjLqRE+P5RRObpcRJ+ejh4ZwZX584GgEymOCcU7kjzWSZR7imTA65FbUMUhXxR68b3oiWgPSaCAXE8w==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.38.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/fluent-theme": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/@uifabric/fluent-theme/-/fluent-theme-0.13.2.tgz",
+      "integrity": "sha512-iAuzjYALgKPYvwEsg00mTeVlMS39Gr6h1vVsYCR88nw7y/ep74Ex7yqFAO51pjCMFSCWyPHQ3Ukhp+lUvVZheQ==",
+      "requires": {
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.40.0 <7.0.0",
+        "@uifabric/variants": ">=6.14.0 <7.0.0",
+        "office-ui-fabric-react": ">=6.123.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/foundation": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.6.0.tgz",
+      "integrity": "sha512-vEjgu8Spv6E4b+NFuQrv7wRLFQJg5e10Tea1J5N0pAYqwYztyefVZtbHmREx1gVE8TxpPfa1PnJy+MVEPVKyxA==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.39.0 <7.0.0",
+        "@uifabric/utilities": ">=6.27.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/icons": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.3.0.tgz",
+      "integrity": "sha512-jMCa/liL7YCvu0xJRudQsU3oR1O7NuCwkFe392y4ZEXFlTsPpe1LeE4iZr6UbhJLHiEWKw5Uep8pMCuAcCXQdg==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.35.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/merge-styles": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.15.0.tgz",
+      "integrity": "sha512-VtwdCPhEkfNk8l9qSw2Ix/R7a3/GguvQ2avR5RxLs7jSMmW2Oc3B0CwROB6h4zajwZK7OBR+a6UsiT7H6VN4vg==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/set-version": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
+      "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/styling": {
+      "version": "6.41.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.41.0.tgz",
+      "integrity": "sha512-BDYpErXhMFEeQ3Unqyh+euRsjllqIHsGPOJQv7VB8lsAEUUoWkWp3l9HMZbphLaxcS56mOoI0Ouxik3aWGyjeg==",
+      "requires": {
+        "@microsoft/load-themed-styles": "^1.7.13",
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/utilities": ">=6.28.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/theme-samples": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@uifabric/theme-samples/-/theme-samples-0.1.4.tgz",
+      "integrity": "sha512-IfX8oRXCwuSfU2HxKPlWCOSBYDcR5ljoZWN/+Isgk6k3pfgD5UQF+aY0eAcj0TbRXF3N6Ok/eNbLZIUAr8fO6w==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/variants": ">=6.14.0 <7.0.0",
+        "office-ui-fabric-react": ">=6.125.0 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/utilities": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.28.0.tgz",
+      "integrity": "sha512-HHC4J7L9UQcV5rNe0YlmW8mCswLTTPvO/SdfCU4alMrkkmrOAB/Z1OSryvIcXnLLPlqmnyoW2PwXyQrO5nBl0Q==",
+      "requires": {
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "prop-types": "^15.5.10",
+        "tslib": "^1.7.1"
+      }
+    },
+    "@uifabric/variants": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/variants/-/variants-6.14.0.tgz",
+      "integrity": "sha512-RZyGrkl9gWvp9n0/+4j6yif9GdqP0WI5izjhMtWG7b+pNyJIVasP8fjtFZrjQj6WHaYlOMfSgnjbi1mjkZA8hg==",
+      "requires": {
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "office-ui-fabric-react": ">=6.110.1 <7.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -1107,12 +1385,95 @@
       "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==",
       "dev": true
     },
+    "csstype": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.1.tgz",
+      "integrity": "sha512-wv7IRqCGsL7WGKB8gPvrl+++HlFM9kxAM6jL1EXNPNTshEJYilMkbfS2SnuHha77uosp/YVK0wAp2jmlBzn1tg==",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
       "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
       "dev": true
     },
+    "d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+    },
+    "d3-axis": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+      "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.3.tgz",
+      "integrity": "sha512-x37qq3ChOTLd26hnps36lexMRhNXEtVxZ4B25rL0DVdDsGQIJGB18S7y9XDwlDD6MD/ZBzITCf4JjGMM10TZkw=="
+    },
+    "d3-format": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.2.tgz",
+      "integrity": "sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
+      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz",
+      "integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
+    },
+    "d3-scale": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
+      "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-selection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+      "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
+    },
+    "d3-shape": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.2.tgz",
+      "integrity": "sha512-hUGEozlKecFZ2bOSNt7ENex+4Tk9uc/m0TtTEHBvitCBxUNjhzm5hS2GrrVRD/ae4IylSmxGeqX5tWC2rASMlQ==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.10.tgz",
+      "integrity": "sha512-hF+NTLCaJHF/JqHN5hE8HVGAXPStEq6/omumPE/SxyHVrR7/qQxusFDo0t0c/44+sCGHthC7yNGFZIEgju0P8g=="
+    },
+    "d3-time-format": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz",
+      "integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -1143,6 +1504,14 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "deep-assign": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-2.0.0.tgz",
+      "integrity": "sha1-6+BrHwfwja5ZdiDj3RYi83GhxXI=",
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -3076,6 +3445,11 @@
         }
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -3163,6 +3537,11 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -3262,6 +3641,14 @@
       "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -3671,8 +4058,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -3745,6 +4131,21 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "office-ui-fabric-react": {
+      "version": "6.128.0",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.128.0.tgz",
+      "integrity": "sha512-IRZ1tmX91K9EAyPX5jQAo80O0GUhEAz65+v0v1xf6d2LYB7PFW4MQJvt8MpLGSUJJghUZe0Lnmt4F77oLTt+JQ==",
+      "requires": {
+        "@microsoft/load-themed-styles": "^1.7.13",
+        "@uifabric/icons": ">=6.3.0 <7.0.0",
+        "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
+        "@uifabric/set-version": ">=1.1.3 <2.0.0",
+        "@uifabric/styling": ">=6.41.0 <7.0.0",
+        "@uifabric/utilities": ">=6.28.0 <7.0.0",
+        "prop-types": "^15.5.10",
+        "tslib": "^1.7.1"
+      }
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -4066,6 +4467,15 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -4196,6 +4606,28 @@
         "unpipe": "1.0.0"
       }
     },
+    "react": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
+      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.12.0"
+      }
+    },
+    "react-dom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
+      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.12.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@@ -4373,6 +4805,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
+      "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -5107,8 +5548,7 @@
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
-      "dev": true
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
     "tty-browserify": {
       "version": "0.0.0",

package.json

@@ -11,11 +11,19 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@types/react": "^16.7.20",
+    "@types/react-dom": "^16.0.11",
     "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^5.3.3",
     "typescript": "^3.2.4",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "office-ui-fabric-react": "^6.128.0",
+    "@uifabric/experiments": "^6.51.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
   }
 }

playground/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

playground/src/components/TodoApp.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Stack, Text } from '@uifabric/experiments';
+import { TodoList } from './TodoList';
+import { TodoFooter } from './TodoFooter';
+import { Pivot, PivotItem } from 'office-ui-fabric-react';
+import { TodoHeader } from './TodoHeader';
+
+export class TodoApp extends React.Component {
+  render() {
+    return (
+      <Stack horizontalAlign="center">
+        <Stack style={{ width: 650 }} verticalGap={25}>
+          <TodoHeader />
+          <TodoList />
+          <TodoFooter />
+        </Stack>
+      </Stack>
+    );
+  }
+}

playground/src/components/TodoFooter.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Text, Stack } from '@uifabric/experiments';
+import { Checkbox, Button, Pivot, PivotItem } from 'office-ui-fabric-react';
+
+export interface TodoFooterProps {}
+
+export const TodoFooter = (props: TodoFooterProps) => {
+  return (
+    <Stack horizontal horizontalAlign="center">
+      <Text>1 item left</Text>
+    </Stack>
+  );
+};

playground/src/components/TodoHeader.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text, Stack } from '@uifabric/experiments';
+import { Checkbox, Button, Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
+
+export interface TodoFooterProps {}
+
+export const TodoHeader = (props: TodoFooterProps) => {
+  return (
+    <Stack>
+      <Stack horizontal horizontalAlign="center">
+        <Text variant="large">Yet Another To Do Example Application</Text>
+      </Stack>
+
+      <TextField placeholder="What needs to be done?" />
+
+      <Pivot>
+        <PivotItem headerText="all" />
+        <PivotItem headerText="active" />
+        <PivotItem headerText="completed" />
+      </Pivot>
+    </Stack>
+  );
+};

playground/src/components/TodoList.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Stack } from '@uifabric/experiments';
+import { TodoListItem } from './TodoListItem';
+import { Pivot, PivotItem } from 'office-ui-fabric-react';
+
+export class TodoList extends React.Component {
+  render() {
+    return (
+      <Stack verticalGap={10}>
+        <TodoListItem checked={false} label="nothing" />
+        <TodoListItem checked={false} label="nothing" />
+        <TodoListItem checked={false} label="nothing" />
+        <TodoListItem checked={false} label="nothing" />
+      </Stack>
+    );
+  }
+}

playground/src/components/TodoListItem.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text, Stack } from '@uifabric/experiments';
+import { Checkbox } from 'office-ui-fabric-react';
+
+export interface TodoListItemProps {
+  checked: boolean;
+  label: string;
+}
+
+export const TodoListItem = (props: TodoListItemProps) => {
+  return (
+    <Stack horizontal>
+      <Checkbox label={props.label} checked={props.checked} />
+    </Stack>
+  );
+};

playground/src/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TodoApp } from './components/TodoApp';
+
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

step01/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

step01/index.js

@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const app = document.getElementById('app');
+  app.innerHTML = 'hello world blah';
+});

tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
     "target": "es5",
     "jsx": "react",
     "allowJs": true

webpack.config.js

@@ -2,8 +2,9 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const entries = {
-  step01: './step01/index.js',
-  step02: './step02/src/index.ts'
+  step01: './step01/index',
+  step02: './step02/src/index',
+  playground: './playground/src/index'
 };
 
 module.exports = Object.keys(entries).map(entryPoint => {
@@ -21,7 +22,7 @@ module.exports = Object.keys(entries).map(entryPoint => {
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.join(__dirname, 'public/index.html'),
+        template: path.join(__dirname, `${entryPoint}/index.html`),
         filename: '../index.html'
       })
     ],