Skip to content

Commit

Permalink
Merge pull request #23 from kickstartDS/feature/validation
Browse files Browse the repository at this point in the history 
Connect validation tab with editor
  • Loading branch information
@lmestel
lmestel authored Feb 26, 2024
2 parents d9f5f8c + 12d6807 commit d92523f
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 61 deletions.
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -102,4 +103,4 @@
],
"icon": "https://opencollective-production.s3.us-west-1.amazonaws.com/1e445ca0-fca9-11e9-a830-c36c137aded5.png"
}
}
}
13 changes: 10 additions & 3 deletions src/components/SchemaDoc.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import { useLocation } from "react-router-dom";
import type { editor, IRange } from "monaco-editor";

import {
SchemaExplorer,
Expand Down Expand Up @@ -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> => {
Expand Down Expand Up @@ -107,8 +114,8 @@ export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
lookup,
schema: currentSchema,
stage: "both",
onSelectValidationRange(range) {},
validationResults: [],
onSelectValidationRange,
validationResults,
};

return <SchemaExplorer {...explorerArgs} />;
Expand Down
32 changes: 20 additions & 12 deletions src/components/SchemaEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = `
Expand All @@ -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();

Expand All @@ -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());
}
};
Expand All @@ -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"
Expand Down
28 changes: 22 additions & 6 deletions src/components/SchemaView.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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;
Expand All @@ -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>
Expand Down
81 changes: 43 additions & 38 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit d92523f

Please sign in to comment.