NavItem

Composer/packages/client/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.2.2",
+    "@composer-extensions/obieditortest": "*",
+    "@composer-extensions/sample-json-editor": "*",
+    "@emotion/core": "^10.0.7",
     "@svgr/webpack": "4.1.0",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
@@ -34,6 +37,7 @@
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
     "mini-css-extract-plugin": "0.5.0",
+    "office-ui-fabric-react": "^6.146.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -48,14 +52,13 @@
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",
+    "styled-components": "^4.1.3",
     "terser-webpack-plugin": "1.2.2",
     "url-loader": "1.1.2",
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3",
-    "@composer-extensions/sample-json-editor": "*",
-    "@composer-extensions/obieditortest": "*"
+    "workbox-webpack-plugin": "3.6.3"
   },
   "scripts": {
     "start": "node scripts/start.js",
@@ -119,6 +122,26 @@
   "babel": {
     "presets": [
       "react-app"
-    ]
+    ],
+    "env": {
+      "production": {
+        "plugins": [
+          "emotion"
+        ]
+      },
+      "development": {
+        "plugins": [
+          [
+            "emotion",
+            {
+              "sourceMap": true
+            }
+          ]
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "babel-plugin-emotion": "^10.0.7"
   }
 }

Composer/packages/client/scripts/start.js

@@ -1,36 +1,35 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
+process.on("unhandledRejection", err => {
   throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
+require("../config/env");
 
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const fs = require("fs");
+const chalk = require("react-dev-utils/chalk");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
 const {
   choosePort,
   createCompiler,
   prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
+  prepareUrls
+} = require("react-dev-utils/WebpackDevServerUtils");
+const openBrowser = require("react-dev-utils/openBrowser");
+const paths = require("../config/paths");
+const configFactory = require("../config/webpack.config");
+const createDevServerConfig = require("../config/webpackDevServer.config");
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
@@ -56,14 +55,14 @@ if (process.env.HOST) {
     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
   );
   console.log(
-    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
+    `Learn more here: ${chalk.yellow("http://bit.ly/CRA-advanced-config")}`
   );
   console.log();
 }
 
 // We require that you explictly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require("react-dev-utils/browsersHelper");
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
@@ -75,8 +74,8 @@ checkBrowsers(paths.appPath, isInteractive)
       // We have not found a port.
       return;
     }
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const config = configFactory("development");
+    const protocol = process.env.HTTPS === "true" ? "https" : "http";
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
@@ -98,11 +97,11 @@ checkBrowsers(paths.appPath, isInteractive)
       if (isInteractive) {
         clearConsole();
       }
-      console.log(chalk.cyan('Starting the development server...\n'));
+      console.log(chalk.cyan("Starting the development server...\n"));
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+    ["SIGINT", "SIGTERM"].forEach(function(sig) {
       process.on(sig, function() {
         devServer.close();
         process.exit();

Composer/packages/client/src/App.css

@@ -8,20 +8,20 @@
   pointer-events: none;
 }
 
-.App-header{
+.App-header {
   position: relative;
   line-height: 50px;
-  background: #393939;
+  background: #001f52;
   font-size: 20px;
   color: #fff;
   height: 50px;
-} 
+}
 
 .header-aside {
-  width: 200px;
+  width: 200;
+  margin-left: 100px;
 }
 
-
 .App-sidebar {
   position: fixed;
   width: 200px;
@@ -31,7 +31,7 @@
   color: white;
 }
 
-.App-bot  {
+.App-bot {
   position: fixed;
   width: 400px;
   top: 0;
@@ -45,13 +45,14 @@
   background: #393939;
   color: white;
   border: none;
-};
+}
 
 .bot-message {
   font-size: 18px;
 }
 
-.App-sidebar ul, .App-sidebar li {
+.App-sidebar ul,
+.App-sidebar li {
   padding: 5px;
   margin: 0;
   list-style: none;
@@ -61,7 +62,7 @@
 .App-main {
   position: fixed;
   left: 200px;
-  top:50px;
+  top: 50px;
   bottom: 0;
   right: 0;
   min-height: 80vh;
@@ -80,35 +81,30 @@
   }
 }
 
-.frame-html
-{
+.frame-html {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
 }
 
-.frame-body
-{
+.frame-body {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
 }
 
-
-.frame-root
-{
+.frame-root {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
 }
 
-.frame-content
-{
+.frame-content {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
-}
+}