From cc4dfbce9f680f678c5071226a0d8a6bbb21210f Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 28 May 2019 15:00:15 -0700 Subject: [PATCH 1/6] fix: dark + light theme --- package-lock.json | 363 ++++++++++++++++++++++++++++++++------ package.json | 2 +- src/App.tsx | 6 +- src/AppBar/AppBar.tsx | 41 +++-- src/MonacoJSONEditor.tsx | 4 +- src/SnackBar/SnackBar.tsx | 8 +- src/UISchema.tsx | 1 + 7 files changed, 345 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index 91c2ec02..c0f3bdba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1231,6 +1231,11 @@ "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, + "@emotion/hash": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz", + "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" + }, "@jest/console": { "version": "24.3.0", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.3.0.tgz", @@ -1513,37 +1518,41 @@ } }, "@material-ui/core": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz", - "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.0.1.tgz", + "integrity": "sha512-cw2Qs3BLem8FOrp/knfjJkwJXG4dZO/HGyWwZV71UWiqDIOF3plHZ7duCbOMIWwKgSUJ85k9omlSHUTT63E/pw==", "requires": { "@babel/runtime": "^7.2.0", - "@material-ui/system": "^3.0.0-alpha.0", - "@material-ui/utils": "^3.0.0-alpha.2", - "@types/jss": "^9.5.6", - "@types/react-transition-group": "^2.0.8", - "brcast": "^3.0.1", - "classnames": "^2.2.5", + "@material-ui/styles": "^4.0.1", + "@material-ui/system": "^4.0.1", + "@material-ui/types": "^4.0.1", + "@material-ui/utils": "^4.0.1", + "@types/react-transition-group": "^2.0.16", + "clsx": "^1.0.2", + "convert-css-length": "^1.0.2", "csstype": "^2.5.2", "debounce": "^1.1.0", "deepmerge": "^3.0.0", - "dom-helpers": "^3.2.1", "hoist-non-react-statics": "^3.2.1", "is-plain-object": "^2.0.4", - "jss": "^9.8.7", - "jss-camel-case": "^6.0.0", - "jss-default-unit": "^8.0.2", - "jss-global": "^3.0.0", - "jss-nested": "^6.0.1", - "jss-props-sort": "^6.0.0", - "jss-vendor-prefixer": "^7.0.0", "normalize-scroll-left": "^0.1.2", "popper.js": "^1.14.1", - "prop-types": "^15.6.0", - "react-event-listener": "^0.6.2", - "react-transition-group": "^2.2.1", - "recompose": "0.28.0 - 0.30.0", + "prop-types": "^15.7.2", + "react-event-listener": "^0.6.6", + "react-transition-group": "^4.0.0", "warning": "^4.0.1" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } } }, "@material-ui/icons": { @@ -1555,25 +1564,90 @@ "recompose": "0.28.0 - 0.30.0" } }, + "@material-ui/styles": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.0.1.tgz", + "integrity": "sha512-SywkWzBzXvm9dUY2rtmzTc/FTlKGctVYGb8hzPZyHU3OI4X9jQH4YnR/OiqTwg4jNpFnASJX5rW1rEUJM+ZnhA==", + "requires": { + "@babel/runtime": "^7.2.0", + "@emotion/hash": "^0.7.1", + "@material-ui/types": "^4.0.1", + "@material-ui/utils": "^4.0.1", + "clsx": "^1.0.2", + "deepmerge": "^3.0.0", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.0-alpha.16", + "jss-plugin-camel-case": "^10.0.0-alpha.16", + "jss-plugin-default-unit": "^10.0.0-alpha.16", + "jss-plugin-global": "^10.0.0-alpha.16", + "jss-plugin-nested": "^10.0.0-alpha.16", + "jss-plugin-props-sort": "^10.0.0-alpha.16", + "jss-plugin-rule-value-function": "^10.0.0-alpha.16", + "jss-plugin-vendor-prefixer": "^10.0.0-alpha.16", + "prop-types": "^15.7.2", + "warning": "^4.0.1" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } + } + }, "@material-ui/system": { - "version": "3.0.0-alpha.2", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", - "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.0.1.tgz", + "integrity": "sha512-NlMF4jZk1xx7taUOT+QhrJw7v7uUi9Ae+G8C8fowGgP5x04whxOuSuSmN9a8u2j7dc8XqahR0OJeA6Xch8ymog==", "requires": { "@babel/runtime": "^7.2.0", "deepmerge": "^3.0.0", - "prop-types": "^15.6.0", + "prop-types": "^15.7.2", "warning": "^4.0.1" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } } }, + "@material-ui/types": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.0.1.tgz", + "integrity": "sha512-FGhogU9l4s+ycMcC3hhOAvu5hcWa5TVSCCGUf4NOUF904ythroWSAvcCHn92NjftXZ8WZqmtPjL1K/d90Pq/3Q==" + }, "@material-ui/utils": { - "version": "3.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz", - "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.0.1.tgz", + "integrity": "sha512-mWRcMQIrqsXGze73tx3hNfB1NUu+BL/oIQI7TImyuhsia1EQXw3bPVBjgwTzqM6MqfXw6eh1fR45Di+WN5hASA==", "requires": { "@babel/runtime": "^7.2.0", - "prop-types": "^15.6.0", - "react-is": "^16.6.3" + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + } } }, "@mrmlnc/readdir-enhanced": { @@ -1694,6 +1768,94 @@ "react-dom": "^16.8.4", "react-json-view": "^1.19.1", "react-markdown": "^4.0.6" + }, + "dependencies": { + "@material-ui/core": { + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz", + "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==", + "requires": { + "@babel/runtime": "^7.2.0", + "@material-ui/system": "^3.0.0-alpha.0", + "@material-ui/utils": "^3.0.0-alpha.2", + "@types/jss": "^9.5.6", + "@types/react-transition-group": "^2.0.8", + "brcast": "^3.0.1", + "classnames": "^2.2.5", + "csstype": "^2.5.2", + "debounce": "^1.1.0", + "deepmerge": "^3.0.0", + "dom-helpers": "^3.2.1", + "hoist-non-react-statics": "^3.2.1", + "is-plain-object": "^2.0.4", + "jss": "^9.8.7", + "jss-camel-case": "^6.0.0", + "jss-default-unit": "^8.0.2", + "jss-global": "^3.0.0", + "jss-nested": "^6.0.1", + "jss-props-sort": "^6.0.0", + "jss-vendor-prefixer": "^7.0.0", + "normalize-scroll-left": "^0.1.2", + "popper.js": "^1.14.1", + "prop-types": "^15.6.0", + "react-event-listener": "^0.6.2", + "react-transition-group": "^2.2.1", + "recompose": "0.28.0 - 0.30.0", + "warning": "^4.0.1" + } + }, + "@material-ui/system": { + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", + "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==", + "requires": { + "@babel/runtime": "^7.2.0", + "deepmerge": "^3.0.0", + "prop-types": "^15.6.0", + "warning": "^4.0.1" + } + }, + "@material-ui/utils": { + "version": "3.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz", + "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==", + "requires": { + "@babel/runtime": "^7.2.0", + "prop-types": "^15.6.0", + "react-is": "^16.6.3" + } + }, + "jss": { + "version": "9.8.7", + "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz", + "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==", + "requires": { + "is-in-browser": "^1.1.3", + "symbol-observable": "^1.1.0", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "requires": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + } } }, "@open-rpc/examples": { @@ -5756,6 +5918,11 @@ } } }, + "clsx": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz", + "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -5957,6 +6124,11 @@ "date-now": "^0.1.4" } }, + "console-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz", + "integrity": "sha1-ls/tUcr3gYn2mVcubxgnHcN8DjA=" + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -6034,6 +6206,15 @@ "trim-off-newlines": "^1.0.0" } }, + "convert-css-length": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-1.0.2.tgz", + "integrity": "sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==", + "requires": { + "console-polyfill": "^0.1.2", + "parse-unit": "^1.0.1" + } + }, "convert-source-map": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", @@ -6377,10 +6558,11 @@ "dev": true }, "css-vendor": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", - "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.2.tgz", + "integrity": "sha512-Xn5ZAlI00d8HaQ8/oQ8d+iBzSF//NCc77LPzsucM32X/R/yTqmXy6otVsAM0XleXk6HjPuXoVZwXsayky/fsFQ==", "requires": { + "@babel/runtime": "^7.3.1", "is-in-browser": "^1.0.2" } }, @@ -11204,23 +11386,13 @@ } }, "jss": { - "version": "9.8.7", - "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz", - "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==", + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.16.tgz", + "integrity": "sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg==", "requires": { + "@babel/runtime": "^7.3.1", "is-in-browser": "^1.1.3", - "symbol-observable": "^1.1.0", - "warning": "^3.0.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - } + "tiny-warning": "^1.0.2" } }, "jss-camel-case": { @@ -11259,6 +11431,72 @@ } } }, + "jss-plugin-camel-case": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.16.tgz", + "integrity": "sha512-nki+smHEsFyoZ0OlOYtaxVqcQA0ZHVJCE1slRnk+1TklbmxbBiO4TwITMTEaNIDv0U0Uyb0Z8wVgFgRwCCIFog==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.0.0-alpha.16" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.16.tgz", + "integrity": "sha512-jjGW4F/r9yKvoyUk22M8nWhdMfvoWzJw/oFO2cDRXCk2onnWFiRALfqeUsEDyocwdZbyVF9WhZbSHn4GL03kSw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.16" + } + }, + "jss-plugin-global": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.16.tgz", + "integrity": "sha512-B1mm2ZF9OEsWPmzkG5ZUXqV88smDqpc4unILLXhWVuj0U5JeT0DNitH+QbXFrSueDJzkWVfvqyckvWDR/0qeDg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.16" + } + }, + "jss-plugin-nested": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.16.tgz", + "integrity": "sha512-3l/MB6COnIpq4GOXQFae6UydoaIPa81UxhuBTEQuiAojgTeUla9L7nB3h18Q4zAhQQpjxaEsyppAKuEzIP7kPQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.16", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.16.tgz", + "integrity": "sha512-+Yn9nugHAH58nf/d43H2uxMvlCFPDgLKRSmKO4Q4m1IGYjMbHsWt1Rk2HfC9IiCanqcqpc8hstwtzf+HG7PWFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.16" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.16.tgz", + "integrity": "sha512-MQap9ne6ZGZH0NlpSQTMSm6QalBTF0hYpd2uaGQwam+GlT7IKeO+sTjd46I1WgO3kyOmwb0pIY6CnuLQGXKtSA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.0.0-alpha.16" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.0-alpha.16", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.16.tgz", + "integrity": "sha512-70yJ6QE5dN8VlPUGKld5jK2SKyrteheEL/ismexpybIufunMs6iJgkhDndbOfv8ia13yZgUVqeakMdhRKYwK1A==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.1", + "jss": "10.0.0-alpha.16" + } + }, "jss-props-sort": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", @@ -11270,6 +11508,16 @@ "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==", "requires": { "css-vendor": "^0.3.8" + }, + "dependencies": { + "css-vendor": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", + "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", + "requires": { + "is-in-browser": "^1.0.2" + } + } } }, "jsx-ast-utils": { @@ -16332,6 +16580,11 @@ "error-ex": "^1.2.0" } }, + "parse-unit": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz", + "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=" + }, "parse5": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", @@ -18057,14 +18310,13 @@ } }, "react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.0.1.tgz", + "integrity": "sha512-SsLcBYhO4afXJC9esL8XMxi/y0ZvEc7To0TvtrBELqzpjXQHPZOTxvuPh2/4EhYc0uSMfp2SExIxsyJ0pBdNzg==", "requires": { "dom-helpers": "^3.4.0", "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" + "prop-types": "^15.6.2" } }, "read-pkg": { @@ -20226,6 +20478,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 49633c5b..af77126b 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bugs": "https://github.com/open-rpc/playground/issues", "license": "Apache-2.0", "dependencies": { - "@material-ui/core": "^3.9.3", + "@material-ui/core": "^4.0.1", "@material-ui/icons": "^3.0.2", "@open-rpc/docs-react": "^1.0.9", "@open-rpc/examples": "^1.3.1", diff --git a/src/App.tsx b/src/App.tsx index f7889e64..9ba03810 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -224,7 +224,7 @@ export default class App extends React.Component<{}, IState> { uiSchema={this.state.uiSchema} reactJsonOptions={this.state.reactJsonOptions} /> - + ); } @@ -232,13 +232,13 @@ export default class App extends React.Component<{}, IState> { private getPlayground = () => { if (!this.state.uiSchema.appBar["ui:splitView"]) { return ( -
+ -
+ ); } else { return this.getSplitPane(); diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx index 1ac114a6..982b7124 100644 --- a/src/AppBar/AppBar.tsx +++ b/src/AppBar/AppBar.tsx @@ -4,15 +4,18 @@ import { Toolbar, Typography, Grid, + IconButton, Paper, - FormControlLabel, - Checkbox, InputBase, Theme, WithStyles, withStyles, Hidden, } from "@material-ui/core"; +import VerticalSplitIcon from "@material-ui/icons/VerticalSplit"; +import FullscreenIcon from "@material-ui/icons/Fullscreen"; +import WbSunnyIcon from "@material-ui/icons/WbSunny"; +import Brightness3Icon from "@material-ui/icons/Brightness3"; import { IUISchema } from "../UISchema"; const styles = (theme: Theme) => ({ @@ -20,24 +23,24 @@ const styles = (theme: Theme) => ({ marginLeft: theme.spacing.unit, }, appBar: { - background: "white", }, }); interface IProps extends WithStyles { uiSchema?: IUISchema; onChangeUrl?: any; + onDarkModeChange?: any; onSplitViewChange?: any; } class ApplicationBar extends Component { public render() { - const { uiSchema, classes } = this.props; + const { uiSchema, classes, onSplitViewChange, onDarkModeChange } = this.props; return ( - - + + {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:logoUrl"] && { - - + + + {uiSchema && uiSchema.appBar["ui:splitView"] ? + onSplitViewChange(false)} /> + : + onSplitViewChange(true)} /> + } + + + {uiSchema && uiSchema.appBar["ui:darkMode"] ? + onDarkModeChange(false)} /> + : + onDarkModeChange(true)} /> } - label="Split View" - /> + diff --git a/src/MonacoJSONEditor.tsx b/src/MonacoJSONEditor.tsx index 266078ca..f4a6f2de 100644 --- a/src/MonacoJSONEditor.tsx +++ b/src/MonacoJSONEditor.tsx @@ -8,10 +8,12 @@ import * as monaco from "monaco-editor"; import _ from "lodash"; import { JSONSchema4 } from "json-schema"; import schema from "@open-rpc/meta-schema"; +import { IUISchema } from "./UISchema"; interface IProps { defaultValue?: string; onChangeMarkers?: any; + uiSchema: IUISchema; onCreate?: any; onChange?: any; } @@ -79,7 +81,7 @@ export default class MonacoJSONEditor extends React.Component { formatOnPaste: true, formatOnType: true, }, - theme: "vs-dark", + theme: this.props.uiSchema.appBar["ui:darkMode"] ? "vs-dark" : "vs", }; if (this.monaco && this.monaco.current) { diff --git a/src/SnackBar/SnackBar.tsx b/src/SnackBar/SnackBar.tsx index a7479871..3534df14 100644 --- a/src/SnackBar/SnackBar.tsx +++ b/src/SnackBar/SnackBar.tsx @@ -31,7 +31,7 @@ const styleSnackBar = (theme: Theme) => ({ marginLeft: theme.spacing.unit, }, close: { - padding: theme.spacing.unit / 2, + padding: theme.spacing.unit, }, margin: { margin: theme.spacing.unit, @@ -59,17 +59,17 @@ const styleSnackBarContent = (theme: Theme) => ({ }, iconVariant: { opacity: 0.9, - marginRight: theme.spacing.unit, + marginRight: theme.spacing(2), }, message: { display: "flex", alignItems: "center", }, close: { - padding: theme.spacing.unit / 2, + padding: theme.spacing(1), }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(2), }, }); diff --git a/src/UISchema.tsx b/src/UISchema.tsx index c297dfd3..f8d584b7 100644 --- a/src/UISchema.tsx +++ b/src/UISchema.tsx @@ -4,6 +4,7 @@ export interface IUISchema { ["ui:logoUrl"]: string, ["ui:inputPlaceholder"]: string, ["ui:splitView"]: boolean, + ["ui:darkMode"]: boolean, }; methods: { ["ui:defaultExpanded"]: boolean, From 5e7249564fbf929d2fc3fa039bb4326832f4ede5 Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 4 Jun 2019 12:00:35 -0700 Subject: [PATCH 2/6] fix: use old material ui version and add initial openrpc theme --- package-lock.json | 267 +++++++------------------------------ package.json | 2 +- src/App.tsx | 14 +- src/SnackBar/SnackBar.tsx | 8 +- src/themes/openrpcTheme.ts | 41 ++++++ 5 files changed, 109 insertions(+), 223 deletions(-) create mode 100644 src/themes/openrpcTheme.ts diff --git a/package-lock.json b/package-lock.json index c0f3bdba..60de9766 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1231,11 +1231,6 @@ "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, - "@emotion/hash": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz", - "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" - }, "@jest/console": { "version": "24.3.0", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.3.0.tgz", @@ -1518,41 +1513,37 @@ } }, "@material-ui/core": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.0.1.tgz", - "integrity": "sha512-cw2Qs3BLem8FOrp/knfjJkwJXG4dZO/HGyWwZV71UWiqDIOF3plHZ7duCbOMIWwKgSUJ85k9omlSHUTT63E/pw==", + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz", + "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==", "requires": { "@babel/runtime": "^7.2.0", - "@material-ui/styles": "^4.0.1", - "@material-ui/system": "^4.0.1", - "@material-ui/types": "^4.0.1", - "@material-ui/utils": "^4.0.1", - "@types/react-transition-group": "^2.0.16", - "clsx": "^1.0.2", - "convert-css-length": "^1.0.2", + "@material-ui/system": "^3.0.0-alpha.0", + "@material-ui/utils": "^3.0.0-alpha.2", + "@types/jss": "^9.5.6", + "@types/react-transition-group": "^2.0.8", + "brcast": "^3.0.1", + "classnames": "^2.2.5", "csstype": "^2.5.2", "debounce": "^1.1.0", "deepmerge": "^3.0.0", + "dom-helpers": "^3.2.1", "hoist-non-react-statics": "^3.2.1", "is-plain-object": "^2.0.4", + "jss": "^9.8.7", + "jss-camel-case": "^6.0.0", + "jss-default-unit": "^8.0.2", + "jss-global": "^3.0.0", + "jss-nested": "^6.0.1", + "jss-props-sort": "^6.0.0", + "jss-vendor-prefixer": "^7.0.0", "normalize-scroll-left": "^0.1.2", "popper.js": "^1.14.1", - "prop-types": "^15.7.2", - "react-event-listener": "^0.6.6", - "react-transition-group": "^4.0.0", + "prop-types": "^15.6.0", + "react-event-listener": "^0.6.2", + "react-transition-group": "^2.2.1", + "recompose": "0.28.0 - 0.30.0", "warning": "^4.0.1" - }, - "dependencies": { - "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.8.1" - } - } } }, "@material-ui/icons": { @@ -1564,90 +1555,25 @@ "recompose": "0.28.0 - 0.30.0" } }, - "@material-ui/styles": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.0.1.tgz", - "integrity": "sha512-SywkWzBzXvm9dUY2rtmzTc/FTlKGctVYGb8hzPZyHU3OI4X9jQH4YnR/OiqTwg4jNpFnASJX5rW1rEUJM+ZnhA==", - "requires": { - "@babel/runtime": "^7.2.0", - "@emotion/hash": "^0.7.1", - "@material-ui/types": "^4.0.1", - "@material-ui/utils": "^4.0.1", - "clsx": "^1.0.2", - "deepmerge": "^3.0.0", - "hoist-non-react-statics": "^3.2.1", - "jss": "^10.0.0-alpha.16", - "jss-plugin-camel-case": "^10.0.0-alpha.16", - "jss-plugin-default-unit": "^10.0.0-alpha.16", - "jss-plugin-global": "^10.0.0-alpha.16", - "jss-plugin-nested": "^10.0.0-alpha.16", - "jss-plugin-props-sort": "^10.0.0-alpha.16", - "jss-plugin-rule-value-function": "^10.0.0-alpha.16", - "jss-plugin-vendor-prefixer": "^10.0.0-alpha.16", - "prop-types": "^15.7.2", - "warning": "^4.0.1" - }, - "dependencies": { - "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.8.1" - } - } - } - }, "@material-ui/system": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.0.1.tgz", - "integrity": "sha512-NlMF4jZk1xx7taUOT+QhrJw7v7uUi9Ae+G8C8fowGgP5x04whxOuSuSmN9a8u2j7dc8XqahR0OJeA6Xch8ymog==", + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", + "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==", "requires": { "@babel/runtime": "^7.2.0", "deepmerge": "^3.0.0", - "prop-types": "^15.7.2", + "prop-types": "^15.6.0", "warning": "^4.0.1" - }, - "dependencies": { - "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.8.1" - } - } } }, - "@material-ui/types": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.0.1.tgz", - "integrity": "sha512-FGhogU9l4s+ycMcC3hhOAvu5hcWa5TVSCCGUf4NOUF904ythroWSAvcCHn92NjftXZ8WZqmtPjL1K/d90Pq/3Q==" - }, "@material-ui/utils": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.0.1.tgz", - "integrity": "sha512-mWRcMQIrqsXGze73tx3hNfB1NUu+BL/oIQI7TImyuhsia1EQXw3bPVBjgwTzqM6MqfXw6eh1fR45Di+WN5hASA==", + "version": "3.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz", + "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==", "requires": { "@babel/runtime": "^7.2.0", - "prop-types": "^15.7.2", - "react-is": "^16.8.0" - }, - "dependencies": { - "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.8.1" - } - } + "prop-types": "^15.6.0", + "react-is": "^16.6.3" } }, "@mrmlnc/readdir-enhanced": { @@ -5918,11 +5844,6 @@ } } }, - "clsx": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz", - "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -6124,11 +6045,6 @@ "date-now": "^0.1.4" } }, - "console-polyfill": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz", - "integrity": "sha1-ls/tUcr3gYn2mVcubxgnHcN8DjA=" - }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -6206,15 +6122,6 @@ "trim-off-newlines": "^1.0.0" } }, - "convert-css-length": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-1.0.2.tgz", - "integrity": "sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==", - "requires": { - "console-polyfill": "^0.1.2", - "parse-unit": "^1.0.1" - } - }, "convert-source-map": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", @@ -6557,15 +6464,6 @@ "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=", "dev": true }, - "css-vendor": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.2.tgz", - "integrity": "sha512-Xn5ZAlI00d8HaQ8/oQ8d+iBzSF//NCc77LPzsucM32X/R/yTqmXy6otVsAM0XleXk6HjPuXoVZwXsayky/fsFQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz", @@ -11386,13 +11284,23 @@ } }, "jss": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.16.tgz", - "integrity": "sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg==", + "version": "9.8.7", + "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz", + "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==", "requires": { - "@babel/runtime": "^7.3.1", "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" + "symbol-observable": "^1.1.0", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } } }, "jss-camel-case": { @@ -11431,72 +11339,6 @@ } } }, - "jss-plugin-camel-case": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.16.tgz", - "integrity": "sha512-nki+smHEsFyoZ0OlOYtaxVqcQA0ZHVJCE1slRnk+1TklbmxbBiO4TwITMTEaNIDv0U0Uyb0Z8wVgFgRwCCIFog==", - "requires": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.0.0-alpha.16" - } - }, - "jss-plugin-default-unit": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.16.tgz", - "integrity": "sha512-jjGW4F/r9yKvoyUk22M8nWhdMfvoWzJw/oFO2cDRXCk2onnWFiRALfqeUsEDyocwdZbyVF9WhZbSHn4GL03kSw==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.0.0-alpha.16" - } - }, - "jss-plugin-global": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.16.tgz", - "integrity": "sha512-B1mm2ZF9OEsWPmzkG5ZUXqV88smDqpc4unILLXhWVuj0U5JeT0DNitH+QbXFrSueDJzkWVfvqyckvWDR/0qeDg==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.0.0-alpha.16" - } - }, - "jss-plugin-nested": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.16.tgz", - "integrity": "sha512-3l/MB6COnIpq4GOXQFae6UydoaIPa81UxhuBTEQuiAojgTeUla9L7nB3h18Q4zAhQQpjxaEsyppAKuEzIP7kPQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.0.0-alpha.16", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.16.tgz", - "integrity": "sha512-+Yn9nugHAH58nf/d43H2uxMvlCFPDgLKRSmKO4Q4m1IGYjMbHsWt1Rk2HfC9IiCanqcqpc8hstwtzf+HG7PWFQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.0.0-alpha.16" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.16.tgz", - "integrity": "sha512-MQap9ne6ZGZH0NlpSQTMSm6QalBTF0hYpd2uaGQwam+GlT7IKeO+sTjd46I1WgO3kyOmwb0pIY6CnuLQGXKtSA==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.0.0-alpha.16" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.0.0-alpha.16", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.16.tgz", - "integrity": "sha512-70yJ6QE5dN8VlPUGKld5jK2SKyrteheEL/ismexpybIufunMs6iJgkhDndbOfv8ia13yZgUVqeakMdhRKYwK1A==", - "requires": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.1", - "jss": "10.0.0-alpha.16" - } - }, "jss-props-sort": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", @@ -16580,11 +16422,6 @@ "error-ex": "^1.2.0" } }, - "parse-unit": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz", - "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=" - }, "parse5": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", @@ -18310,13 +18147,14 @@ } }, "react-transition-group": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.0.1.tgz", - "integrity": "sha512-SsLcBYhO4afXJC9esL8XMxi/y0ZvEc7To0TvtrBELqzpjXQHPZOTxvuPh2/4EhYc0uSMfp2SExIxsyJ0pBdNzg==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", "requires": { "dom-helpers": "^3.4.0", "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" } }, "read-pkg": { @@ -20478,11 +20316,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, - "tiny-warning": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", - "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index af77126b..f969000f 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bugs": "https://github.com/open-rpc/playground/issues", "license": "Apache-2.0", "dependencies": { - "@material-ui/core": "^4.0.1", + "@material-ui/core": "^3.9.2", "@material-ui/icons": "^3.0.2", "@open-rpc/docs-react": "^1.0.9", "@open-rpc/examples": "^1.3.1", diff --git a/src/App.tsx b/src/App.tsx index 9ba03810..a2a765c0 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,10 @@ import * as qs from "qs"; import { OpenRPC } from "@open-rpc/meta-schema"; import { IUISchema } from "./UISchema"; import { SnackBar, ISnackBarNotification, NotificationType } from "./SnackBar/SnackBar"; +import { MuiThemeProvider } from "@material-ui/core/styles"; +import { lightTheme, darkTheme } from "./themes/openrpcTheme"; import SplitPane from "react-split-pane"; +import { Paper, CssBaseline } from "@material-ui/core"; interface IState { markers: any[]; @@ -192,14 +195,23 @@ export default class App extends React.Component<{}, IState> { public render() { return ( +<<<<<<< HEAD <> +======= + + +>>>>>>> fix: use old material ui version and add initial openrpc theme {this.getPlayground()} +<<<<<<< HEAD +======= + +>>>>>>> fix: use old material ui version and add initial openrpc theme ); } @@ -224,7 +236,7 @@ export default class App extends React.Component<{}, IState> { uiSchema={this.state.uiSchema} reactJsonOptions={this.state.reactJsonOptions} /> - + ); } diff --git a/src/SnackBar/SnackBar.tsx b/src/SnackBar/SnackBar.tsx index 3534df14..4a551858 100644 --- a/src/SnackBar/SnackBar.tsx +++ b/src/SnackBar/SnackBar.tsx @@ -31,7 +31,7 @@ const styleSnackBar = (theme: Theme) => ({ marginLeft: theme.spacing.unit, }, close: { - padding: theme.spacing.unit, + padding: theme.spacing.unit / 2, }, margin: { margin: theme.spacing.unit, @@ -59,17 +59,17 @@ const styleSnackBarContent = (theme: Theme) => ({ }, iconVariant: { opacity: 0.9, - marginRight: theme.spacing(2), + marginRight: theme.spacing.unit, }, message: { display: "flex", alignItems: "center", }, close: { - padding: theme.spacing(1), + padding: theme.spacing.unit / 2, }, margin: { - margin: theme.spacing(2), + margin: theme.spacing.unit / 2, }, }); diff --git a/src/themes/openrpcTheme.ts b/src/themes/openrpcTheme.ts new file mode 100644 index 00000000..6699f193 --- /dev/null +++ b/src/themes/openrpcTheme.ts @@ -0,0 +1,41 @@ +import { createMuiTheme } from "@material-ui/core/styles"; + +export const lightTheme = createMuiTheme({ + overrides: { + MuiAppBar: { + root: { + background: "white !important", + }, + }, + }, + palette: { + + }, +}); + +export const darkTheme = createMuiTheme({ + palette: { + type: "dark", + background: { + default: "#212121", + paper: "black", + }, + }, + overrides: { + MuiTable: { + root: { + background: "transparent !important", + }, + }, + MuiTypography: { + root: { + color: "white", + }, + }, + }, +}); + +export default { + darkTheme, + lightTheme, +}; From 325542a592aa9d7e3d6c284dcf40a496b24194ec Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 4 Jun 2019 15:31:42 -0700 Subject: [PATCH 3/6] fix: rebase issues --- src/App.tsx | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a2a765c0..9909c3d0 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,7 @@ export default class App extends React.Component<{}, IState> { "ui:logoUrl": "https://github.com/open-rpc/design/raw/master/icons/open-rpc-logo-noText/open-rpc-logo-noText%20(PNG)/128x128.png", /* tslint:enable */ "ui:splitView": true, + "ui:darkMode": false, "ui:title": "OpenRPC Playground", }, methods: { @@ -112,14 +113,28 @@ export default class App extends React.Component<{}, IState> { public handleUrlChange = (event: any) => this.debouncedHandleUrlChange(event.target.value); - public handleUISchemaAppBarChange = (name: string) => (event: any) => { + public handleUISchemaAppBarChange = (name: string) => (value: any) => { + if (name === "ui:darkMode") { + monaco.editor.setTheme(value ? "vs-dark" : "vs"); + return this.setState({ + ...this.state, + uiSchema: { + ...this.state.uiSchema, + appBar: { + ...this.state.uiSchema.appBar, + [name]: value, + }, + }, + }); + } + this.setState({ ...this.state, uiSchema: { ...this.state.uiSchema, appBar: { ...this.state.uiSchema.appBar, - [name]: event.target.checked, + [name]: value.target.checked, }, }, }); @@ -195,23 +210,16 @@ export default class App extends React.Component<{}, IState> { public render() { return ( -<<<<<<< HEAD - <> -======= ->>>>>>> fix: use old material ui version and add initial openrpc theme {this.getPlayground()} -<<<<<<< HEAD - -======= ->>>>>>> fix: use old material ui version and add initial openrpc theme ); } @@ -226,6 +234,7 @@ export default class App extends React.Component<{}, IState> {
this.editorInstance = editorInstance} defaultValue={this.state.defaultValue} onChange={this.setMarkers.bind(this)} /> From 4a65eda6eb9c7336948ee5ff12be20ed65507c0c Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 4 Jun 2019 15:35:56 -0700 Subject: [PATCH 4/6] fix: splitview issue --- src/App.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9909c3d0..e59eda47 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -116,16 +116,6 @@ export default class App extends React.Component<{}, IState> { public handleUISchemaAppBarChange = (name: string) => (value: any) => { if (name === "ui:darkMode") { monaco.editor.setTheme(value ? "vs-dark" : "vs"); - return this.setState({ - ...this.state, - uiSchema: { - ...this.state.uiSchema, - appBar: { - ...this.state.uiSchema.appBar, - [name]: value, - }, - }, - }); } this.setState({ @@ -134,7 +124,7 @@ export default class App extends React.Component<{}, IState> { ...this.state.uiSchema, appBar: { ...this.state.uiSchema.appBar, - [name]: value.target.checked, + [name]: value, }, }, }); From 0b75a0d1e1a282cc1be8bdd0264221f000abc4ce Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 4 Jun 2019 15:41:20 -0700 Subject: [PATCH 5/6] fix: package json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f969000f..49633c5b 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bugs": "https://github.com/open-rpc/playground/issues", "license": "Apache-2.0", "dependencies": { - "@material-ui/core": "^3.9.2", + "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", "@open-rpc/docs-react": "^1.0.9", "@open-rpc/examples": "^1.3.1", From 671585471f033c5b02bf6b39e7f49677a4223c93 Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 4 Jun 2019 15:42:25 -0700 Subject: [PATCH 6/6] fix: margin --- src/SnackBar/SnackBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SnackBar/SnackBar.tsx b/src/SnackBar/SnackBar.tsx index 4a551858..a7479871 100644 --- a/src/SnackBar/SnackBar.tsx +++ b/src/SnackBar/SnackBar.tsx @@ -69,7 +69,7 @@ const styleSnackBarContent = (theme: Theme) => ({ padding: theme.spacing.unit / 2, }, margin: { - margin: theme.spacing.unit / 2, + margin: theme.spacing.unit, }, });