Connect validation tab with editor

package.json

@@ -54,10 +54,11 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^3.0.6",
     "@vitejs/plugin-react": "^4.1.0",
-    "auto": "^11.0.4",
+    "auto": "^11.0.5",
     "decomment": "^0.9.5",
     "esbuild": "^0.19.3",
     "esbuild-node-externals": "^1.9.0",
+    "monaco-editor": "^0.39.0",
     "patch-package": "^8.0.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
@@ -102,4 +103,4 @@
     ],
     "icon": "https://opencollective-production.s3.us-west-1.amazonaws.com/1e445ca0-fca9-11e9-a830-c36c137aded5.png"
   }
-}
+}

src/components/SchemaDoc.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
+import type { editor, IRange } from "monaco-editor";
 
 import {
   SchemaExplorer,
@@ -32,9 +33,15 @@ const removeLeadingSlash = (v: string): string => {
 
 type SchemaDocProps = {
   schema: JsonSchema;
+  validationResults: editor.IMarker[];
+  onSelectValidationRange: (range: IRange) => void;
 };
 
-export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
+export const SchemaDoc: React.FC<SchemaDocProps> = ({
+  schema,
+  validationResults,
+  onSelectValidationRange,
+}) => {
   const lookup = new InternalLookup(schema);
 
   const getPathFromRoute = (lookup: Lookup): Array<PathElement> => {
@@ -107,8 +114,8 @@ export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
     lookup,
     schema: currentSchema,
     stage: "both",
-    onSelectValidationRange(range) {},
-    validationResults: [],
+    onSelectValidationRange,
+    validationResults,
   };
 
   return <SchemaExplorer {...explorerArgs} />;

src/components/SchemaEditor.tsx

@@ -1,19 +1,15 @@
 import React, { useEffect, useRef, useMemo } from "react";
-import Editor, {
-  useMonaco,
-  OnMount,
-  OnValidate,
-  OnChange,
-} from "@monaco-editor/react";
+import type { IRange, editor } from "monaco-editor";
+import Editor, { useMonaco, OnMount, OnValidate } from "@monaco-editor/react";
 import { JsonSchema } from "@kickstartds/json-schema-viewer";
 import { pack, unpack } from "@kickstartds/core/lib/storybook";
 import { useArgs } from "@storybook/manager-api";
 import decomment from "decomment";
 
-type OnChangeParams = Parameters<OnChange>;
-
 type SchemaEditorProps = {
   schema: JsonSchema;
+  setValidationResults: (marker: editor.IMarker[]) => void;
+  selectedValidationRange?: IRange;
 };
 
 const editorPreamble = `
@@ -22,8 +18,12 @@ const editorPreamble = `
 // benefit of validation and autocompletion!
 `.trim();
 
-export const SchemaEditor: React.FC<SchemaEditorProps> = ({ schema }) => {
-  const editorRef = useRef(null);
+export const SchemaEditor: React.FC<SchemaEditorProps> = ({
+  schema,
+  setValidationResults,
+  selectedValidationRange,
+}) => {
+  const editorRef = useRef<editor.IStandaloneCodeEditor>(null);
   const monaco = useMonaco();
   const [storybookArgs = {}, updateArgs] = useArgs();
 
@@ -33,14 +33,15 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({ schema }) => {
     editorRef.current = editor;
   };
 
-  const handleChange = (value: OnChangeParams[0]) => {
+  const handleChange = (value: string) => {
     try {
       updateArgs(pack(JSON.parse(decomment(value))));
     } catch (e) {}
   };
 
   const handleEditorValidChange: OnValidate = (markers) => {
-    if (markers.length === 0 && editorRef && editorRef.current) {
+    setValidationResults(markers);
+    if (markers.length === 0 && editorRef.current) {
       handleChange(editorRef.current.getValue());
     }
   };
@@ -59,6 +60,13 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({ schema }) => {
     });
   }, [monaco, schema]);
 
+  useEffect(() => {
+    if (editorRef.current && selectedValidationRange) {
+      editorRef.current.setSelection(selectedValidationRange);
+      editorRef.current.revealRangeAtTop(selectedValidationRange);
+    }
+  }, [selectedValidationRange]);
+
   return (
     <Editor
       defaultLanguage="json"

src/components/SchemaView.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParameter } from "@storybook/manager-api";
 import styled from "styled-components";
+import type { editor, IRange } from "monaco-editor";
 
 import { forSize, JsonSchema } from "@kickstartds/json-schema-viewer";
 
@@ -14,17 +15,20 @@ const SchemaContainer = styled.div`
 `;
 
 const SchemaDocContainer = styled.div`
-  flex: 2;
+  flex: 1;
   overflow: auto;
+  background: #fff;
+  color: #172b4d;
+  ${forSize("tablet-landscape-up", "max-width: max(500px, 30%);")}
 `;
 
 const SchemaEditorContainer = styled.div`
-  flex: 2;
+  flex: 1;
 
   display: none;
   position: relative;
+  overflow: hidden;
   ${forSize("tablet-landscape-up", "display: block;")}
-  ${forSize("desktop-up", "flex: 3;")}
 
   section {
     overflow: hidden;
@@ -40,14 +44,26 @@ const SchemaEditorContainerHeading = styled.h3`
 
 export const SchemaView: React.FC = () => {
   const schema = useParameter<JsonSchema>(PARAM_KEY, {});
+  const [validationResults, setValidationResults] = useState<editor.IMarker[]>(
+    []
+  );
+  const [selectedValidation, setSelectedValidation] = useState<IRange>();
 
   return (
     <SchemaContainer>
       <SchemaDocContainer>
-        <SchemaDoc schema={schema} />
+        <SchemaDoc
+          schema={schema}
+          validationResults={validationResults}
+          onSelectValidationRange={setSelectedValidation}
+        />
       </SchemaDocContainer>
       <SchemaEditorContainer>
-        <SchemaEditor schema={schema} />
+        <SchemaEditor
+          schema={schema}
+          setValidationResults={setValidationResults}
+          selectedValidationRange={selectedValidation}
+        />
         <SchemaEditorContainerHeading>
           Editor and Validator
         </SchemaEditorContainerHeading>

yarn.lock

@@ -10,17 +10,17 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/bot-list/-/bot-list-11.0.4.tgz#a247281531bc4ee4bde791515fd6ad98bc48afe0"
-  integrity sha512-f3w9UZ655MLiELUQP28K9Gceptf2vvKdKVRzh2b2ST+PG/srmoxCnHgE/TO9afW7NiuUA1h+hQVyIb0eQ9VSfQ==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/bot-list/-/bot-list-11.0.5.tgz#8c6f4e22e35b535cdac6cc96c961684632cf5bfe"
+  integrity sha512-OaDzXXGBa0Z0LMVKYwZVxf+SrdLRTvbzJHzJnsg8Lx3d5hqcNsXJfuNfzYxvYCnzNxqNyPCMxcZXehxoca9pIg==
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/core/-/core-11.0.4.tgz#2a030c4eb58d70a8e74480e1d92b72b5cc824d9c"
-  integrity sha512-oYIByeGeuiM0MhWibbj3Y4Vj8p5Kt1n4g0hKL7Zu7oFlKmAjsZlwbH4z0wEjVTdK2+Eqg2/I1Dj/GgkiSriXgg==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/core/-/core-11.0.5.tgz#f2d0ba74489da08ae3c9f98b2b055d21cdc90c05"
+  integrity sha512-3yPcqBrUjJl5koBqvIBnxN6Hn0xXPqSvYEHvyzDCqf8nVWU28KEqw8LmfA8PAZpH84RNcYAyxXoluGOrx9ZhfA==
   dependencies:
-    "@auto-it/bot-list" "11.0.4"
+    "@auto-it/bot-list" "11.0.5"
     "@endemolshinegroup/cosmiconfig-typescript-loader" "^3.0.2"
     "@octokit/core" "^3.5.1"
     "@octokit/plugin-enterprise-compatibility" "1.3.0"
@@ -61,13 +61,13 @@
     typescript-memoize "^1.0.0-alpha.3"
     url-join "^4.0.0"
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/npm/-/npm-11.0.4.tgz#67b6bf78fb6d3f814365796f15541b014db73fcb"
-  integrity sha512-7sKGswdhQZ0/EryFhMU8DZV/hKZSZTOhJnNTXBtCGRk7oLjRHjt6XVOWCMOMOCNO/wVn5k5r52DbhAy5V4i0GQ==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/npm/-/npm-11.0.5.tgz#ad5a6e96af2c2c4179628e97b7522021368edc03"
+  integrity sha512-zSvruxD+jS2RSp7UhpoY4KD/vOr+E+JFKtp00rHdK2tg4uo/eL5ATT8x31PgIh/P1BjhMllkoprQQ8v6+tAapQ==
   dependencies:
-    "@auto-it/core" "11.0.4"
-    "@auto-it/package-json-utils" "11.0.4"
+    "@auto-it/core" "11.0.5"
+    "@auto-it/package-json-utils" "11.0.5"
     await-to-js "^3.0.0"
     endent "^2.1.0"
     env-ci "^5.0.1"
@@ -81,32 +81,32 @@
     url-join "^4.0.0"
     user-home "^2.0.0"
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/package-json-utils/-/package-json-utils-11.0.4.tgz#a3660f28ff8df5111d893d37d60af7058514079a"
-  integrity sha512-Y84CW2QSL1TXkc4cVajODhRFFixDhOGX4JBS/ic3TgeJ94h6QH0Q8so+FxzPwBDWGXmUdLsj8fY/A3n0X09lqA==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/package-json-utils/-/package-json-utils-11.0.5.tgz#3108d2a546ef61aff524697e8e1fdf8a7001ffc9"
+  integrity sha512-pJAyMXIpm8qI7vaqRwCGo5fv5X+Ngm8PrpNOMAdEch3iP6V5XmF07y1W3+bzdiIEOt1K4L1ncF1yBhMEkX6tRw==
   dependencies:
     parse-author "^2.0.0"
     parse-github-url "1.0.2"
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/released/-/released-11.0.4.tgz#1c1a4b6c4ce2def28ae10418f848bceacf834685"
-  integrity sha512-BfzCr+rJvONgw5EtsmTfoPtjm7C6Yo+vKDiXtI82EctLfUuADV/wCE/zj5e1nACsELpqhqWfgLySvDu1n6bn6g==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/released/-/released-11.0.5.tgz#f8824ffeb0bae3981251dbc539c81f528201472f"
+  integrity sha512-L74OZK5OAeuNpKCsfnievNpwe3QligUFL8mNMj7EZT9yU4KEHwvH7Dr4g9wxyDdd5ZCE8NrPlpVJuP8b5d3xLg==
   dependencies:
-    "@auto-it/bot-list" "11.0.4"
-    "@auto-it/core" "11.0.4"
+    "@auto-it/bot-list" "11.0.5"
+    "@auto-it/core" "11.0.5"
     deepmerge "^4.0.0"
     fp-ts "^2.5.3"
     io-ts "^2.1.2"
     tslib "2.1.0"
 
-"@auto-it/[email protected].4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@auto-it/version-file/-/version-file-11.0.4.tgz#7281768daef5760add4f9ac3ffeb416791165ac5"
-  integrity sha512-esKwslQPsPjFC96m0lI/MJI12OFjH92KXtVaQEguGIIXAhs7iop9+y5vLXjOtgNOFVBvk/FKTFItq2mV587aiA==
+"@auto-it/[email protected].5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@auto-it/version-file/-/version-file-11.0.5.tgz#cc1ce9ed3f5ae44e87f0aee3413593c00ae7a6fc"
+  integrity sha512-Ps6g7O3falcyNyN9CqSXtMy22kKO4T5YD3Jm/JzyxLz41dTL0rAGawWeeofAz/ms0xZc9gGJR0wct7fr2um8VQ==
   dependencies:
-    "@auto-it/core" "11.0.4"
+    "@auto-it/core" "11.0.5"
     fp-ts "^2.5.3"
     io-ts "^2.1.2"
     semver "^7.0.0"
@@ -3885,15 +3885,15 @@ author-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-1.0.0.tgz#d08885be6b9bbf9439fe087c76287245f0a81450"
   integrity sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA=
 
-auto@^11.0.4:
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/auto/-/auto-11.0.4.tgz#8aeccc8f9a898952aad88df9c70a24583e2a793e"
-  integrity sha512-jDe95fpOHZXRDe0HJMH1FvTrU0f3rXbee0eqNIAR2mB9EcdiWQTj1aF56R/xPyGLxF9y3WXzu38DgiIX9sjoDg==
+auto@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/auto/-/auto-11.0.5.tgz#0cc2a0bb745b99e423d9b47f7b1491729ade5645"
+  integrity sha512-k83m7kq3/y4uEzh/CTe1uzLN4ZV9XSyd9PJjZJambGUcZCwTP/d6H1nRNUOxM9ITZXJ1LrWG1T1KDht7v5sWbw==
   dependencies:
-    "@auto-it/core" "11.0.4"
-    "@auto-it/npm" "11.0.4"
-    "@auto-it/released" "11.0.4"
-    "@auto-it/version-file" "11.0.4"
+    "@auto-it/core" "11.0.5"
+    "@auto-it/npm" "11.0.5"
+    "@auto-it/released" "11.0.5"
+    "@auto-it/version-file" "11.0.5"
     await-to-js "^3.0.0"
     chalk "^4.0.0"
     command-line-application "^0.10.1"
@@ -6624,6 +6624,11 @@ module-alias@^2.2.2:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
   integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
 
+monaco-editor@^0.39.0:
+  version "0.39.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.39.0.tgz#3cf8e3718d6aac347d374516a6837d1c13d967d2"
+  integrity sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==
+
 mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"