From 70c0bacc2671233053e0254a72b570365b7d8c85 Mon Sep 17 00:00:00 2001 From: Coleton Annett Date: Sun, 16 Feb 2020 17:02:32 -0800 Subject: [PATCH 1/7] Initial MD grid layout --- package-lock.json | 224 +++++++++++- package.json | 1 + public/index.html | 66 ++-- src/index.tsx | 22 +- src/theme/ButtonHelp.tsx | 7 +- src/theme/MaterialUITheme.tsx | 651 ++++++++++++++++++++++++++++++++++ src/theme/PathEditor.tsx | 4 +- src/theme/ThemeHandler.tsx | 7 + 8 files changed, 936 insertions(+), 46 deletions(-) create mode 100644 src/theme/MaterialUITheme.tsx create mode 100644 src/theme/ThemeHandler.tsx diff --git a/package-lock.json b/package-lock.json index 085d42f..1379fa8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -974,7 +974,6 @@ "version": "7.6.3", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz", "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.2" }, @@ -982,8 +981,7 @@ "regenerator-runtime": { "version": "0.13.3", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", - "dev": true + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" } } }, @@ -2032,6 +2030,82 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.9.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.2.tgz", + "integrity": "sha512-fSf/yBuE5GR7dA+FiQAAGY7HrCN/8RaYApi9tx3IKMiJIJkRCHk+E2lktgJZ+QRsaqCACLo2lwhU2CW5aeO0UQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.9.0", + "@material-ui/system": "^4.9.1", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.2", + "convert-css-length": "^2.0.1", + "hoist-non-react-statics": "^3.3.2", + "normalize-scroll-left": "^0.2.0", + "popper.js": "^1.14.1", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.3.0" + } + }, + "@material-ui/styles": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz", + "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.7.4", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.7.1", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", + "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" + } + } + }, + "@material-ui/system": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.1.tgz", + "integrity": "sha512-CLrJK2aKNWNwruGVTRf+rLz96P4jmozpY2UaCE6hBTa1oGsQ396YXOQQABQ4c0igawmdyf5iQb0zs9j5zsAf1w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.7.1", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz", + "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==" + }, + "@material-ui/utils": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz", + "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@mrblenny/react-flow-chart": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@mrblenny/react-flow-chart/-/react-flow-chart-0.0.8.tgz", @@ -2316,8 +2390,7 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/q": { "version": "1.5.2", @@ -2329,12 +2402,19 @@ "version": "16.9.11", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz", "integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" } }, + "@types/react-transition-group": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz", + "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -5219,6 +5299,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", + "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -5498,6 +5583,11 @@ "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", "dev": true }, + "convert-css-length": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz", + "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==" + }, "convert-source-map": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", @@ -6005,6 +6095,15 @@ "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", "dev": true }, + "css-vendor": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", + "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", + "requires": { + "@babel/runtime": "^7.6.2", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -6145,8 +6244,7 @@ "csstype": { "version": "2.6.7", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz", - "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==", - "dev": true + "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==" }, "cyclist": { "version": "1.0.1", @@ -9082,6 +9180,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", @@ -9610,6 +9716,11 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -10045,6 +10156,11 @@ "is-extglob": "^1.0.0" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -12530,6 +12646,83 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.4.tgz", + "integrity": "sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz", + "integrity": "sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.0.4" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz", + "integrity": "sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-global": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz", + "integrity": "sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-nested": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz", + "integrity": "sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz", + "integrity": "sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz", + "integrity": "sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.4" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz", + "integrity": "sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.7", + "jss": "10.0.4" + } + }, "jsx-ast-utils": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", @@ -13607,6 +13800,11 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, + "normalize-scroll-left": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz", + "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==" + }, "normalize-url": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", @@ -14330,8 +14528,7 @@ "popper.js": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz", - "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==", - "dev": true + "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==" }, "portfinder": { "version": "1.0.25", @@ -16584,7 +16781,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -16596,7 +16792,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.2.tgz", "integrity": "sha512-VrfjMjIzNgn2oB49wKl85fgs12ELjK0npu5Oryaiazyc6WuekO1go0E//0RJ8JvsBlfaAwq+IgX9M0XhwlEENA==", - "dev": true, "requires": { "@babel/runtime": "^7.6.3", "csstype": "^2.6.7" @@ -20644,6 +20839,11 @@ "globrex": "^0.1.1" } }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/package.json b/package.json index e24191d..a5b6765 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dist" ], "dependencies": { + "@material-ui/core": "^4.9.2", "jsonata": "1.7.0", "jsonata-ui-core": "^1.7.12", "react": "16.8.6", diff --git a/public/index.html b/public/index.html index 206877c..d9f31bb 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,33 @@ - - - - - - - - - - - - - - React App - - - - -
- - - - \ No newline at end of file + + diff --git a/src/index.tsx b/src/index.tsx index dbd521d..dae68a2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,6 +7,7 @@ import { serializer, ConditionNode } from "jsonata-ui-core"; import { Editor } from "./AstEditor"; import { DefaultTheme } from "./theme/DefaultTheme"; +import { MaterialUITheme } from "./theme/MaterialUITheme"; import { AST } from "./Types"; import { makeSchemaProvider } from "./schema/SchemaProvider"; @@ -99,6 +100,8 @@ function NewTierDefault(): ConditionNode { function App() { const [text, setText] = useState(defaultText); + // User facing theme switcher + const [theme, setTheme] = useState(MaterialUITheme); let serializedVersions = []; let keys = []; @@ -129,7 +132,7 @@ function App() { ]; return ( -
+

Query Builder

Filter for which Purchase events will trigger this program

{/*
@@ -141,11 +144,12 @@ function App() { />
*/} + {/* */} - Examples - {options.map(o => ( - - ))} + + Examples + + {options.map(o => ( + + + + + + ))} 
diff --git a/src/theme/ButtonHelp.tsx b/src/theme/ButtonHelp.tsx
index 472a857..0250aa8 100644
--- a/src/theme/ButtonHelp.tsx
+++ b/src/theme/ButtonHelp.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from "react";
+import React from "react";
 import { OverlayTrigger, Tooltip, Button } from "react-bootstrap";
 
 type ButtonProps = React.ComponentProps;
@@ -7,6 +7,7 @@ type ButtonHelpProps = ButtonProps & {
   children: React.ReactNode;
 };
 export default function ButtonHelp(props: ButtonHelpProps) {
+  // Button prop allows for future additional theming
   const { disabledHelp, ...btnProps } = props;
 
   if (props.disabled) {
@@ -20,7 +21,9 @@ export default function ButtonHelp(props: ButtonHelpProps) {
       {disabledHelp}}
+        overlay={
+          {disabledHelp}
+        }
       >
         
           
+      
+    
+  );
+}
+
+function BlockEditor({ ast, onChange, children }: BlockEditorProps) {
+  // return {children};
+  return <>{children};
+}
+
+function ConditionEditor({
+  addNew,
+  removeLast,
+  children,
+  elseEditor
+}: ConditionEditorProps) {
+  const canDelete = children.length > 1;
+  return (
+    <>
+      
+        
+          
+            Then
+            Condition
+            
+          
+        
+        
+          {children.map(pair => {
+            return (
+              
+                {pair.Then}
+                {pair.Condition}
+                
+                  
+                    
+                  
+                
+              
+            );
+          })}
+          
+            
+              
+            
+            
+              Default:
+              {elseEditor}
+            
+          
+        
+      

+    
+  );
+}
+
+function ObjectUnaryEditor({
+  children,
+  addNew,
+  removeLast
+}: ObjectUnaryEditorProps) {
+  const canDelete = children.length > 1;
+  return (
+    <>
+      
+        
+          {/*  */}
+          Key
+          Value
+          {/*  */}
+        
+        
+          {children.map(c => {
+            return (
+              
+                {c.key}
+                {c.value}
+                
+                  
+                    
+                  
+                
+              
+            );
+          })}
+        
+      

+      
+    
+  );
+}
+
+function VariableEditor({
+  ast,
+  onChange,
+  cols = "5",
+  boundVariables
+}: VariableEditorProps) {
+  return (
+    <>
+       {
+          // @ts-ignore
+          const newValue = { ...ast, value: e.target.value };
+          onChange(newValue);
+        }}
+      >
+        {boundVariables.map(k => (
+          
+        ))}
+      
+    
+  );
+}
+
+function ArrayUnaryEditor({
+  children,
+  addNew,
+  removeLast
+}: ArrayUnaryEditorProps) {
+  const canDelete = children.length > 1;
+  return (
+    <>
+      
+        
+          
+            
+            
+        
+        
+          {children.map(c => {
+            return (
+              
+                
+                
+              
+            );
+          })}
+        
+      
Value
+          
{c.editor}
+                  
+                    
+                  
+                

+      
+    
+  );
+}
+
+function LeafValueEditor({
+  ast,
+  onChange,
+  validator,
+  cols = "4",
+  onChangeText,
+  text,
+  changeType
+}: LeafValueEditorProps) {
+  return (
+    
+      
+         onChangeText(e.target.value)}
+        />
+      
+      
+        
+      
+      
+        {/* {error.message} */}
+      
+    
+  );
+}
+
+function PathEditor({
+  ast,
+  onChange,
+  changeType,
+  cols = "4",
+  schemaProvider
+}: PathEditorProps) {
+  const paths = schemaProvider && schemaProvider.getPaths;
+  return (
+    
+      
+         onChange(option.value as AST)}
+          paths={paths}
+          styles={AsyncCreatableSelectStyle}
+        />
+      
+      
+        
+      
+      
+        {/* {parsing.error}  */}
+      
+    
+  );
+}
+
+function ButtonHelp(props: ButtonHelpProps) {
+  const { disabledHelp, ...btnProps } = props;
+
+  if (props.disabled) {
+    const { onClick, disabled, ...subProps } = btnProps;
+    return (
+      
+        
-      
-    
+       */}
+      
+        
+        Add
+      
+      
+        
+        Remove
+      
+    
   );
 }
 
@@ -251,27 +269,23 @@ function ConditionEditor({
                 {pair.Condition}
                 
                   
-                    
+                    
                   
                 
               
             );
           })}
           
-            
-              
-            
-            
-              Default:
-              {elseEditor}
-            
+            {elseEditor}
+            
           
         
       
+      
     
   );
 }
@@ -289,6 +303,7 @@ function ObjectUnaryEditor({
           {/*  */}
           Key
           Value
+          
           {/*  */}
         
         
@@ -297,9 +312,9 @@ function ObjectUnaryEditor({
               
                 {c.key}
                 {c.value}
-                
+                
                   
-                    
+                    
                   
                 
               
@@ -348,27 +363,25 @@ function ArrayUnaryEditor({
   const canDelete = children.length > 1;
   return (
     <>
-      
-        
-          
-            
-            
-        
-        
+      
Value
-          

+        
+          Value
+          
+        
+        
           {children.map(c => {
             return (
-              
-                
-                
-              
+                
+              
             );
           })}
-        
+        
{c.editor}
+              
+                {c.editor}
+                
                   
-                    
+                    
                   
-                

       

       
     
@@ -379,7 +392,7 @@ function LeafValueEditor({
   ast,
   onChange,
   validator,
-  cols = "4",
+  cols = "5",
   onChangeText,
   text,
   changeType
@@ -387,15 +400,18 @@ function LeafValueEditor({
   return (
     
       
         
         
       
-      
-        {/* {error.message} */}
-      
     
   );
 }
@@ -416,27 +429,30 @@ function PathEditor({
   ast,
   onChange,
   changeType,
-  cols = "4",
+  cols = "5",
   schemaProvider
 }: PathEditorProps) {
   const paths = schemaProvider && schemaProvider.getPaths;
   return (
     
       
-         onChange(option.value as AST)}
-          paths={paths}
-          styles={AsyncCreatableSelectStyle}
-        />
+        
+           onChange(option.value as AST)}
+            paths={paths}
+            styles={AsyncCreatableSelectStyle}
+          />
+        
       
       
         
@@ -483,7 +499,7 @@ function Base({ toggleMode, toggleBlock, mode, editor }: BaseEditorProps) {
           Switch to {mode === Modes.NodeMode ? "Advanced" : "Basic"}
         
       
-      
+      
         {editor}
       
     
@@ -500,9 +516,16 @@ function ComparisonEditor({
   ast
 }: ComparisonEditorProps) {
   return (
-    
+    
       {lhs}
-      
+