diff --git a/Composer/packages/client/package.json b/Composer/packages/client/package.json index c2026efa62..6e5c7cffe1 100644 --- a/Composer/packages/client/package.json +++ b/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" } } diff --git a/Composer/packages/client/scripts/start.js b/Composer/packages/client/scripts/start.js index 1dc9805f99..f0266131af 100644 --- a/Composer/packages/client/scripts/start.js +++ b/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(); diff --git a/Composer/packages/client/src/App.css b/Composer/packages/client/src/App.css index 7a911e9d9f..bd0bda26ab 100644 --- a/Composer/packages/client/src/App.css +++ b/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%; -} \ No newline at end of file +} diff --git a/Composer/packages/client/src/App.js b/Composer/packages/client/src/App.js index 8158a87c51..7f1dbe3b7c 100644 --- a/Composer/packages/client/src/App.js +++ b/Composer/packages/client/src/App.js @@ -1,91 +1,130 @@ -import React, { useState, useEffect, Fragment, useRef, useLayoutEffect, useCallback } from 'react'; -import './App.css'; -import httpClient from './utils/http'; -import ExtensionContainerWrapper from './ExtensionContainerWrapper'; +import React, { + useState, + useEffect, + Fragment, + useRef, + useLayoutEffect, + useCallback +} from "react"; +import { Nav, INavLink } from "office-ui-fabric-react/lib/Nav"; +import { NavItem } from "./components/NavItem"; +import { CogTree } from "./components/CogTree"; +import "./App.css"; +import httpClient from "./utils/http"; +import ExtensionContainerWrapper from "./ExtensionContainerWrapper"; -function App() { - const [files, setFiles] = useState([]); - const [openFileIndex, setOpenFileIndex] = useState(-1); - const [botStatus, setBotStatus] = useState("stopped"); - const openFileIndexRef = useRef(); - const filesRef = useRef(); +import { initializeIcons } from "office-ui-fabric-react/lib/Icons"; - const client = new httpClient(); +initializeIcons(/* optional base url */); - useEffect(()=> { - client.getFiles((files) => { - if(files.length > 0) { - setFiles(files) - } - }); - }, []) +function App() { + const [files, setFiles] = useState([]); + const [openFileIndex, setOpenFileIndex] = useState(-1); + const [botStatus, setBotStatus] = useState("stopped"); + const openFileIndexRef = useRef(); + const filesRef = useRef(); - useLayoutEffect(() => { - openFileIndexRef.current = openFileIndex; - }) + const client = new httpClient(); - useLayoutEffect(() => { - filesRef.current = files; - }) + useEffect(() => { + client.getFiles(files => { + if (files.length > 0) { + setFiles(files); + } + }); + }, []); - function handleValueChange(newFileObject) { - const currentIndex = openFileIndexRef.current; - const files = filesRef.current; + useLayoutEffect(() => { + openFileIndexRef.current = openFileIndex; + }); - let payload = { - name: files[currentIndex].name, - content: newFileObject.content - } - - let newFiles = files.slice(); - newFiles[currentIndex].content = newFileObject.content; - setFiles(newFiles) + useLayoutEffect(() => { + filesRef.current = files; + }); - client.saveFile(payload) - } + function handleValueChange(newFileObject) { + const currentIndex = openFileIndexRef.current; + const files = filesRef.current; + let payload = { + name: files[currentIndex].name, + content: newFileObject.content + }; + let newFiles = files.slice(); + newFiles[currentIndex].content = newFileObject.content; + setFiles(newFiles); - function handleFileClick (file, index) { - setOpenFileIndex(index); - } + client.saveFile(payload); + } - return ( - -
-
Composer
-
- - - { - botStatus === "running"? - "Bot is running at http://localhost:3979":"" - } - -
-
- -
- {openFileIndex > -1? - - : 'Welcome'} -
- - ) + function handleFileClick(file, index) { + setOpenFileIndex(index); + } + + return ( + +
+
Composer
+
+ + + {botStatus === "running" + ? "Bot is running at http://localhost:3979" + : ""} + +
+
+
+ + + +
+ {/* */} +
+ {openFileIndex > -1 && ( + + )} +
+ + ); } export default App; diff --git a/Composer/packages/client/src/components/CogTree/index.js b/Composer/packages/client/src/components/CogTree/index.js new file mode 100644 index 0000000000..91a8edaee1 --- /dev/null +++ b/Composer/packages/client/src/components/CogTree/index.js @@ -0,0 +1,54 @@ +/** @jsx jsx */ +import { jsx } from "@emotion/core"; +import { Nav, INavLink } from "office-ui-fabric-react/lib/Nav"; + +export const CogTree = files => ( +