diff --git a/package-lock.json b/package-lock.json index 795e82c4..120a4a90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1255,9 +1255,9 @@ } }, "@etclabscore/react-monaco-editor": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@etclabscore/react-monaco-editor/-/react-monaco-editor-1.0.3.tgz", - "integrity": "sha512-drmwJQrrPTtpvYt3anMFF4lmXSSf8edaJioof1fMb6Bmy7W9TDkDQKMJ9LijCnpJPM2fiI2gRRpm3gC7iefHvw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@etclabscore/react-monaco-editor/-/react-monaco-editor-1.0.4.tgz", + "integrity": "sha512-D7hnkq8gNEqkRZwlpZxvHYHLd49tH/4AtzaKE46DIBnZdiTJLWZd8o+QcM9cR4e/vgEH19OnzDobK8mJWA4Zcg==", "requires": { "@material-ui/core": "^4.7.2", "monaco-editor": "^0.18.1", @@ -1277,9 +1277,9 @@ "dev": true }, "@hapi/hoek": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz", - "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz", + "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==", "dev": true }, "@hapi/joi": { @@ -1790,9 +1790,9 @@ } }, "@octokit/types": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.3.1.tgz", - "integrity": "sha512-rvJP1Y9A/+Cky2C3var1vsw3Lf5Rjn/0sojNl2AjCX+WbpIHYccaJ46abrZoIxMYnOToul6S9tPytUVkFI7CXQ==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.5.0.tgz", + "integrity": "sha512-KEnLwOfdXzxPNL34fj508bhi9Z9cStyN7qY1kOfVahmqtAfrWw6Oq3P4R+dtsg0lYtZdWBpUrS/Ixmd5YILSww==", "requires": { "@types/node": ">= 8" } @@ -1842,27 +1842,30 @@ "integrity": "sha512-6/49XrIodwK4dlLqdIxyPGtrMvOIRetT+vyRtA92Q/oFmhP0lclsEisjwNjQlfqq3y7txtZ5Jw+TkrxXeE/BSQ==" }, "@open-rpc/inspector": { - "version": "1.2.10", - "resolved": "https://registry.npmjs.org/@open-rpc/inspector/-/inspector-1.2.10.tgz", - "integrity": "sha512-9G9MvY7SemICxp9QcKFL6iE6NGIPse/O7gQdTTk1BG/hPpDmFf3+JXSeSKgTk52uFHldC6vs8FDuiAObrkRuXA==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@open-rpc/inspector/-/inspector-1.3.5.tgz", + "integrity": "sha512-3QTGKQX7dHdPKZ6vCCCTCImjCxj3jDAOCWRP+t0phx534kI/b82CNfY9JsYI/jNgk6I1noKOhUX63bkr0JlMTg==", "requires": { "@etclabscore/monaco-add-json-schema-diagnostics": "^1.0.3", - "@etclabscore/react-monaco-editor": "^1.0.3", + "@etclabscore/react-monaco-editor": "^1.0.4", "@material-ui/core": "^4.7.2", "@material-ui/icons": "^4.5.1", "@monaco-editor/react": "^2.3.0", "@open-rpc/client-js": "^1.2.1", - "@open-rpc/meta-schema": "^1.5.3", + "@open-rpc/meta-schema": "^1.7.0", + "@open-rpc/schema-utils-js": "^1.12.0", "@rehooks/window-size": "^1.0.2", "acorn-dynamic-import": "^4.0.0", "monaco-editor": "^0.18.1", + "monaco-vim": "0.0.14", "qs": "^6.8.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-json-view": "^1.19.1", "react-split-pane": "^0.1.87", "semantic-release": "^15.13.21", - "use-dark-mode": "^2.3.1" + "use-dark-mode": "^2.3.1", + "use-debounce": "^3.3.0" }, "dependencies": { "@material-ui/icons": { @@ -1872,6 +1875,36 @@ "requires": { "@babel/runtime": "^7.4.4" } + }, + "@open-rpc/schema-utils-js": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@open-rpc/schema-utils-js/-/schema-utils-js-1.12.0.tgz", + "integrity": "sha512-N4g9O9EgjGDkspVRbMH1XtZS1IBIHpnGLTRh9de+YSxpN8htB8XN+vbPzJTfBwfUC8ALXhXfjw0iBSlLE3kW+g==", + "requires": { + "@open-rpc/meta-schema": "^1.6.0", + "ajv": "^6.10.0", + "detect-node": "^2.0.4", + "fs-extra": "^8.1.0", + "is-url": "^1.2.4", + "isomorphic-fetch": "^2.2.1", + "json-schema-ref-parser": "^7.0.1", + "lodash": "^4.17.15" + } + }, + "json-schema-ref-parser": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/json-schema-ref-parser/-/json-schema-ref-parser-7.1.4.tgz", + "integrity": "sha512-AD7bvav0vak1/63w3jH8F7eHId/4E4EPdMAEZhGxtjktteUv9dnNB/cJy6nVnMyoTPBJnLwFK6tiQPSTeleCtQ==", + "requires": { + "call-me-maybe": "^1.0.1", + "js-yaml": "^3.13.1", + "ono": "^6.0.0" + } + }, + "ono": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ono/-/ono-6.0.1.tgz", + "integrity": "sha512-5rdYW/106kHqLeG22GE2MHKq+FlsxMERZev9DCzQX1zwkxnFwBivSn5i17a5O/rDmOJOdf4Wyt80UZljzx9+DA==" } } }, @@ -2979,9 +3012,9 @@ } }, "acorn": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", - "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz", + "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==", "dev": true }, "acorn-dynamic-import": { @@ -11562,9 +11595,9 @@ "dev": true }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "kleur": { @@ -12700,9 +12733,9 @@ "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==" }, "npm": { - "version": "6.14.1", - "resolved": "https://registry.npmjs.org/npm/-/npm-6.14.1.tgz", - "integrity": "sha512-2hi3UF7g5VL8VKm46Bx5GAW28DPb8BJZbj2uONMBMhY8XkJ56lSmHJNFcjTQr7KHZqWqiBT5BugaQEy+Y/4T2g==", + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/npm/-/npm-6.14.2.tgz", + "integrity": "sha512-eBVjzvGJ9v2/jRJZFtIkvUVKmJ0sCJNNwc9Z1gI6llwaT7EBYWJe5o61Ipc1QR0FaDCKM3l1GizI09Ro3STJEw==", "requires": { "JSONStream": "^1.3.5", "abbrev": "~1.1.1", @@ -12732,10 +12765,10 @@ "fs-vacuum": "~1.2.10", "fs-write-stream-atomic": "~1.0.10", "gentle-fs": "^2.3.0", - "glob": "^7.1.4", + "glob": "^7.1.6", "graceful-fs": "^4.2.3", "has-unicode": "~2.0.1", - "hosted-git-info": "^2.8.7", + "hosted-git-info": "^2.8.8", "iferr": "^1.0.2", "imurmurhash": "*", "infer-owner": "^1.0.4", @@ -12772,7 +12805,7 @@ "mississippi": "^3.0.0", "mkdirp": "~0.5.1", "move-concurrently": "^1.0.1", - "node-gyp": "^5.0.7", + "node-gyp": "^5.1.0", "nopt": "~4.0.1", "normalize-package-data": "^2.5.0", "npm-audit-report": "^1.3.2", @@ -12782,7 +12815,7 @@ "npm-package-arg": "^6.1.1", "npm-packlist": "^1.4.8", "npm-pick-manifest": "^3.0.2", - "npm-profile": "^4.0.2", + "npm-profile": "^4.0.4", "npm-registry-fetch": "^4.0.3", "npm-user-validate": "~1.0.0", "npmlog": "~4.1.2", @@ -13770,7 +13803,7 @@ } }, "glob": { - "version": "7.1.4", + "version": "7.1.6", "bundled": true, "requires": { "fs.realpath": "^1.0.0", @@ -13847,7 +13880,7 @@ "bundled": true }, "hosted-git-info": { - "version": "2.8.7", + "version": "2.8.8", "bundled": true }, "http-cache-semantics": { @@ -14525,7 +14558,7 @@ } }, "node-gyp": { - "version": "5.0.7", + "version": "5.1.0", "bundled": true, "requires": { "env-paths": "^2.2.0", @@ -14645,7 +14678,7 @@ } }, "npm-profile": { - "version": "4.0.2", + "version": "4.0.4", "bundled": true, "requires": { "aproba": "^1.1.2 || 2", @@ -21196,6 +21229,11 @@ "use-persisted-state": "^0.3.0" } }, + "use-debounce": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-3.4.0.tgz", + "integrity": "sha512-FSUfs/x7eJUusqvbk/UboMlWKQFBEGTegqK2tvm8+59bcbs77f0DeAy4MuychfxN7E+6rxXDpbv41Kq+aSJPow==" + }, "use-persisted-state": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/use-persisted-state/-/use-persisted-state-0.3.0.tgz", @@ -22205,9 +22243,9 @@ } }, "ws": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz", - "integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A==" + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.3.tgz", + "integrity": "sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==" }, "x-is-string": { "version": "0.1.0", @@ -22250,9 +22288,9 @@ } }, "yargs": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.1.0.tgz", - "integrity": "sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==", + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.0.tgz", + "integrity": "sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==", "requires": { "cliui": "^6.0.0", "decamelize": "^1.2.0", @@ -22264,7 +22302,7 @@ "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", - "yargs-parser": "^16.1.0" + "yargs-parser": "^18.1.0" }, "dependencies": { "ansi-regex": { @@ -22331,9 +22369,9 @@ } }, "yargs-parser": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-16.1.0.tgz", - "integrity": "sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==", + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.0.tgz", + "integrity": "sha512-o/Jr6JBOv6Yx3pL+5naWSoIA2jJ+ZkMYQG/ie9qFbukBe4uzmBatlXFOiu/tNKRWEtyf+n5w7jc/O16ufqOTdQ==", "requires": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" diff --git a/package.json b/package.json index c9637238..6f1c40d7 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,12 @@ "license": "Apache-2.0", "dependencies": { "@etclabscore/monaco-add-json-schema-diagnostics": "^1.0.3", - "@etclabscore/react-monaco-editor": "^1.0.3", + "@etclabscore/react-monaco-editor": "^1.0.4", "@material-ui/core": "^4.7.2", "@material-ui/icons": "^3.0.2", "@open-rpc/docs-react": "^1.1.5", "@open-rpc/examples": "^1.3.3", - "@open-rpc/inspector": "^1.2.10", + "@open-rpc/inspector": "^1.3.5", "@open-rpc/meta-schema": "^1.7.0", "@open-rpc/schema-utils-js": "^1.11.1", "@use-it/interval": "^0.1.3", diff --git a/src/App.css b/src/App.css index 450d8b7e..4a60a9d3 100755 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,3 @@ -.docs { - height: calc(100% - 84px); - padding: 10px; - overflow-y: scroll; - width: 100%; -} .Resizer { background: #000; opacity: .2; @@ -44,15 +38,19 @@ height: 100%; } +.playground-splitview > .Resizer.vertical { + margin-top: 58px; +} + .Resizer.vertical:hover { border-left: 5px solid rgba(0, 0, 0, 0.5); border-right: 5px solid rgba(0, 0, 0, 0.5); } .Resizer.disabled { -cursor: not-allowed; + cursor: not-allowed; } .Resizer.disabled:hover { -border-color: transparent; + border-color: transparent; } .react-json-view, .object-key-val, .object-container, .object-content { @@ -73,7 +71,3 @@ border-color: transparent; background: #ddd; border-radius: 5px; } - -.SplitPane { - position: relative !important; -} diff --git a/src/App.tsx b/src/App.tsx index 75d20540..33d4040a 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,9 @@ 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 { CssBaseline, Container } from "@material-ui/core"; +import ExpandMore from "@material-ui/icons/ExpandMore"; +import ExpandLess from "@material-ui/icons/ExpandLess"; +import { CssBaseline, Container, Tab, Typography, IconButton, Tooltip, Tabs } from "@material-ui/core"; import PlaygroundSplitPane from "./PlaygroundSplitPane"; import useParsedSchema from "./hooks/useParsedSchema"; import useDefaultEditorValue from "./hooks/useDefaultEditorValue"; @@ -21,6 +23,8 @@ import OpenRPCEditor from "./OpenRPCEditor"; import useMonacoReplaceMetaSchema from "./hooks/useMonacoReplaceMetaSchema"; import useMonacoVimMode from "./hooks/useMonacoVimMode"; import { IExample } from "./ExampleDocumentsDropdown/ExampleDocumentsDropdown"; +import Inspector from "@open-rpc/inspector"; +import useInspectorActionStore from "./stores/inspectorActionStore"; const App: React.FC = () => { const [defaultValue] = useDefaultEditorValue(); @@ -29,6 +33,16 @@ const App: React.FC = () => { const [notification, setNotification] = useState(); const [UISchema, setUISchemaBySection]: [IUISchema, any] = UISchemaStore(); const [editor, setEditor] = useState(); + const [horizontalSplit, privateSetHorizontalSplit] = useState(true); + const setHorizontalSplit = (val: boolean) => { + if (editor) { + setTimeout(() => { + editor.layout(); + }, 0); + } + privateSetHorizontalSplit(val); + }; + const [inspectorContents] = useInspectorActionStore(); useMonacoReplaceMetaSchema(editor); useMonacoVimMode(editor); @@ -93,8 +107,15 @@ const App: React.FC = () => { indentWidth: 2, name: false, }); + const currentTheme = UISchema.appBar["ui:darkMode"] ? darkTheme : lightTheme; + useEffect(() => { + if (inspectorContents) { + setHorizontalSplit(true); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [inspectorContents]); return ( - + { onChangeUrl={setSearchUrl} /> - - { - setParsedSchema(val); - }} - value={defaultValue || ""} + } - right={ - - - + onChange={() => editor && editor.layout()} + left={ + editor && editor.layout()} + left={ + <> + + { + setParsedSchema(val); + }} + value={defaultValue || ""} + /> + + } + right={ + <> + + + + + setHorizontalSplit(!horizontalSplit)} + style={{ + background: currentTheme.palette.background.default, + width: "165px", + paddingRight: "30px", + border: `1px solid ${currentTheme.palette.text.hint}`, + }} + label={ +
+ 🕵️‍♂️️ Inspector + + + {horizontalSplit + ? + : + } + + +
+ }> + + + + } + /> + } /> { onExampleDocumentsDropdownChange, } = this.props; return ( - + diff --git a/src/OpenRPCEditor.tsx b/src/OpenRPCEditor.tsx index 7362cf0a..0630c683 100644 --- a/src/OpenRPCEditor.tsx +++ b/src/OpenRPCEditor.tsx @@ -52,6 +52,14 @@ const OpenRPCEditor: React.FC = (props) => { return ( { const div = document.createElement("div"); ReactDOM.render(Foo } diff --git a/src/PlaygroundSplitPane.tsx b/src/PlaygroundSplitPane.tsx index 8da1d100..f0ca3516 100644 --- a/src/PlaygroundSplitPane.tsx +++ b/src/PlaygroundSplitPane.tsx @@ -1,11 +1,18 @@ import SplitPane from "react-split-pane"; import React from "react"; +import { CSSProperties } from "@material-ui/core/styles/withStyles"; interface IProps { onChange?: (size: number) => any; - left: JSX.Element; - right: JSX.Element; - split?: boolean | undefined; + left: any; + right: any; + leftStyle?: CSSProperties; + rightStyle?: CSSProperties; + style?: CSSProperties; + direction?: "horizontal" | "vertical"; + splitLeft?: boolean; + split?: boolean; + onlyRenderSplit?: boolean; } const PlaygroundSplitPane: React.FC = (props) => { @@ -15,27 +22,37 @@ const PlaygroundSplitPane: React.FC = (props) => { } }; - if (props.split === false) { + if (props.split === false && props.onlyRenderSplit) { return ( -
- {props.right} +
+ {props.splitLeft ? props.left : props.right}
); } + const dir = props.direction || "vertical"; + const defaultSize = !props.split + ? dir === "horizontal" ? window.innerHeight : window.innerWidth + : dir === "horizontal" ? window.innerHeight / 2 : window.innerWidth / 2; return ( - -
+
{props.left}
-
+
{props.right}
- + ); }; diff --git a/src/index.css b/src/index.css index 753cbb41..35bf1398 100755 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,6 @@ padding: 0; overflow: hidden; max-height: 100%; - position: relative; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", diff --git a/src/plugins/InspectorPlugin.tsx b/src/plugins/InspectorPlugin.tsx index ac1e4028..e80f0a37 100644 --- a/src/plugins/InspectorPlugin.tsx +++ b/src/plugins/InspectorPlugin.tsx @@ -1,29 +1,35 @@ import React from "react"; -import Inspector from "@open-rpc/inspector"; -import { Grid } from "@material-ui/core"; +import { Button, Tooltip } from "@material-ui/core"; import { IMethodPluginProps } from "@open-rpc/docs-react/build/Methods/Methods"; import searchBarStore from "../stores/searchBarStore"; import { ExamplePairingObject, ExampleObject } from "@open-rpc/meta-schema"; +import useInspectorActionStore from "../stores/inspectorActionStore"; const InspectorPlugin: React.FC = (props) => { const [searchUrl] = searchBarStore(); + const [, setInspectorContents] = useInspectorActionStore(); const method = props.openrpcMethodObject; const examplePosition = 0; let example; - let exampleParams; + let exampleParams: any; if (method && method.examples && method.examples[examplePosition]) { example = method.examples[examplePosition] as ExamplePairingObject; exampleParams = (example.params as ExampleObject[]).map((p) => p.value); } return ( - - - + + + + ); }; diff --git a/src/stores/inspectorActionStore.ts b/src/stores/inspectorActionStore.ts new file mode 100644 index 00000000..3e3f19a7 --- /dev/null +++ b/src/stores/inspectorActionStore.ts @@ -0,0 +1,7 @@ +import { createStore } from "reusable"; +import { useState } from "react"; + +export default createStore(() => { + const [inspectorContents, setInspectorContents] = useState(); + return [inspectorContents, setInspectorContents]; +});