From df36d2360f7ad049ace9b260d995bf8cdb8dfce4 Mon Sep 17 00:00:00 2001 From: Lukas Mestel Date: Thu, 22 Feb 2024 08:43:28 +0100 Subject: [PATCH 1/3] feat: connect validation tab with editor --- package.json | 3 ++- src/components/SchemaDoc.tsx | 13 ++++++++++--- src/components/SchemaEditor.tsx | 32 ++++++++++++++++++++------------ src/components/SchemaView.tsx | 19 ++++++++++++++++--- yarn.lock | 5 +++++ 5 files changed, 53 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 16222d8..62c47fa 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/components/SchemaDoc.tsx b/src/components/SchemaDoc.tsx index 3bbe11c..84a320e 100644 --- a/src/components/SchemaDoc.tsx +++ b/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 = ({ schema }) => { +export const SchemaDoc: React.FC = ({ + schema, + validationResults, + onSelectValidationRange, +}) => { const lookup = new InternalLookup(schema); const getPathFromRoute = (lookup: Lookup): Array => { @@ -107,8 +114,8 @@ export const SchemaDoc: React.FC = ({ schema }) => { lookup, schema: currentSchema, stage: "both", - onSelectValidationRange(range) {}, - validationResults: [], + onSelectValidationRange, + validationResults, }; return ; diff --git a/src/components/SchemaEditor.tsx b/src/components/SchemaEditor.tsx index c9e28d2..4b4cb9a 100644 --- a/src/components/SchemaEditor.tsx +++ b/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; - 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 = ({ schema }) => { - const editorRef = useRef(null); +export const SchemaEditor: React.FC = ({ + schema, + setValidationResults, + selectedValidationRange, +}) => { + const editorRef = useRef(null); const monaco = useMonaco(); const [storybookArgs = {}, updateArgs] = useArgs(); @@ -33,14 +33,15 @@ export const SchemaEditor: React.FC = ({ 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 = ({ schema }) => { }); }, [monaco, schema]); + useEffect(() => { + if (editorRef.current && selectedValidationRange) { + editorRef.current.setSelection(selectedValidationRange); + editorRef.current.revealRangeAtTop(selectedValidationRange); + } + }, [selectedValidationRange]); + return ( { const schema = useParameter(PARAM_KEY, {}); + const [validationResults, setValidationResults] = useState( + [] + ); + const [selectedValidation, setSelectedValidation] = useState(); return ( - + - + Editor and Validator diff --git a/yarn.lock b/yarn.lock index 4cf563c..91b2ad8 100644 --- a/yarn.lock +++ b/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" From 794a1d3d6fdad7e5a9707727c90e324b10a424de Mon Sep 17 00:00:00 2001 From: Lukas Mestel Date: Thu, 22 Feb 2024 09:02:22 +0100 Subject: [PATCH 2/3] build: update auto https://github.com/intuit/auto/issues/2425 --- package.json | 2 +- yarn.lock | 76 ++++++++++++++++++++++++++-------------------------- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 62c47fa..d93933a 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@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", diff --git a/yarn.lock b/yarn.lock index 91b2ad8..42d4431 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10,17 +10,17 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" -"@auto-it/bot-list@11.0.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/bot-list@11.0.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/core@11.0.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/core@11.0.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/npm@11.0.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/npm@11.0.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/package-json-utils@11.0.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/package-json-utils@11.0.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/released@11.0.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/released@11.0.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/version-file@11.0.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/version-file@11.0.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" From 12d68071938e6c4fe735b425390ed550d2e68679 Mon Sep 17 00:00:00 2001 From: Lukas Mestel Date: Mon, 26 Feb 2024 13:21:32 +0100 Subject: [PATCH 3/3] feat: set background- & text color --- src/components/SchemaView.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/SchemaView.tsx b/src/components/SchemaView.tsx index 257929d..9d2c2f9 100644 --- a/src/components/SchemaView.tsx +++ b/src/components/SchemaView.tsx @@ -15,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;