feat: connect validation tab with editor

package.json

@@ -58,6 +58,7 @@
     "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";
 
@@ -40,14 +41,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

@@ -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"