chore: add validation logic

app/components/CodeEditor/CodeEditor.module.css

@@ -1,8 +1,15 @@
 .codeEditor {
-  overflow-y: auto;
   border-radius: 5px;
   padding: 8px;
   border: 1px solid rgba(0, 0, 0, 0.334);
   border-radius: 16px;
   height: 100%;
+
+  overflow-y: auto;
+}
+
+.validateBtn {
+  position: fixed;
+  right: 10px;
+  top: 10px;
 }

app/components/CodeEditor/CodeEditor.tsx

@@ -1,16 +1,28 @@
 "use client";
-import { CodeFile } from "@/lib/types";
 
 import styles from "./CodeEditor.module.css";
 import ctx from "classnames";
 import { GeistMono } from "geist/font/mono";
 import Editor from "@monaco-editor/react";
+import { Button } from "@chakra-ui/react";
 
-export default function CodeEditor({ code }: { code: Object }) {
-  const codeString = JSON.stringify(code, null, 2);
+export default function CodeEditor({
+  code,
+  setCode,
+}: {
+  code: string;
+  setCode: (code: string) => void;
+}) {
   return (
     <div className={ctx(styles.codeEditor, GeistMono.className)}>
-      <Editor language="jsonc" defaultValue={codeString} />
+      <Editor
+        language="json"
+        defaultValue={code}
+        value={code}
+        height={"100%"}
+        onChange={(code) => setCode(code ? code : "")}
+        options={{ minimap: { enabled: false }, fontSize: 16 }}
+      />
     </div>
   );
 }

app/components/EditorNOutput/EditorNOutput.tsx

@@ -1,18 +1,54 @@
-import React from "react";
+"use client";
+
+import React, { useMemo, useState } from "react";
 import CodeEditor from "../CodeEditor";
 import styles from "./EditorNOutput.module.css";
-import { Box } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import Output from "../Output";
 import { CodeFile } from "@/lib/types";
 
+import { ajv } from "@/lib/validators";
+
 export default function EditorNOutput({ codeFile }: { codeFile: CodeFile }) {
+  const [codeString, setCodeString] = useState(
+    JSON.stringify(codeFile.code, null, 2)
+  );
+
+  const [output, setOutput] = useState<string>("");
+  const [isValid, setIsValid] = useState<boolean>(true);
+
+  const validateCode = useMemo(() => {
+    function validateCode() {
+      const { errors, valid } = ajv(
+        JSON.parse(codeString),
+        codeFile.validationSchema
+      );
+      setIsValid(valid);
+      if (valid) {
+        setOutput("Code is valid");
+      } else {
+        setOutput(errors);
+        console.log(errors);
+      }
+    }
+    return validateCode;
+  }, [codeString, codeFile.validationSchema]);
+
   return (
     <div className={styles.codeEditorNOutput}>
-      <Box flex={7}>
-        <CodeEditor code={codeFile.code} />
+      <Box flex={6}>
+        <CodeEditor code={codeString} setCode={setCodeString} />
       </Box>
-      <Box flex={3}>
-        <Output />
+      <Button
+        className={styles.validateBtn}
+        variant={"default"}
+        onClick={validateCode}
+      >
+        Validate
+      </Button>
+
+      <Box flex={4}>
+        <Output output={output} />
       </Box>
     </div>
   );

app/components/Output/Output.module.css

@@ -5,4 +5,5 @@
   border: 1px solid rgba(0, 0, 0, 0.334);
   border-radius: 16px;
   height: 100%;
+  white-space: pre-wrap;
 }

app/components/Output/Output.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./Output.module.css";
 
-export default function Output() {
-  return <div className={styles.output}>Output</div>;
+export default function Output({ output }: { output: string }) {
+  return <div className={styles.output}>{output}</div>;
 }

content/01-introduction/01-Your-First-Schema/code.ts

@@ -9,20 +9,44 @@ const code = {
   },
 };
 
-function validationLogicFunction() {
-  console.log("Doing some validation logic here");
-}
-
 const validationSchema = {
   type: "object",
   properties: {
     type: {
       type: "string",
+      const: "object",
+    },
+    properties: {
+      type: "object",
+      properties: {
+        name: {
+          type: "object",
+          properties: {
+            type: {
+              type: "string",
+              const: "string",
+            },
+          },
+          required: ["type"],
+        },
+        age: {
+          type: "object",
+          properties: {
+            type: {
+              type: "string",
+              const: "number",
+            },
+          },
+          required: ["type"],
+        },
+      },
+      required: ["name", "age"],
     },
   },
+  required: ["type", "properties"],
 };
 
 module.exports = {
   code,
-  validationLogicFunction,
+  validationSchema,
 };

lib/types.ts

@@ -20,6 +20,7 @@ export type Metadata = {
 
 export type CodeFile = {
   code: Object;
+  validationSchema: Object;
 };
 export type CodeFileExports = {
   exports: CodeFile;

lib/validators.ts

@@ -0,0 +1,42 @@
+import Ajv from "ajv/dist/2020.js";
+// @ts-ignore
+import betterAjvErrors from "better-ajv-errors";
+export function ajv(data: any, schema: any) {
+  const ajv = new Ajv({ allErrors: true, verbose: true }); // options can be passed, e.g. {allErrors: true}
+
+  const validate = ajv.compile(schema);
+  const valid = validate(data);
+  const errors = betterAjvErrors(schema, data, validate.errors);
+  return { valid, errors };
+
+  //   {
+  //     instancePath: '/1',
+  //     schemaPath: '#/items/type',
+  //     keyword: 'type',
+  //     params: { type: 'string' },
+  //     message: 'must be string'
+  //   },
+}
+
+import {
+  validate,
+  registerSchema,
+  setMetaSchemaOutputFormat,
+  unregisterSchema,
+} from "@hyperjump/json-schema/draft-2020-12";
+import { BASIC } from "@hyperjump/json-schema/experimental";
+
+setMetaSchemaOutputFormat(BASIC);
+
+export async function hyperjumpValidate(data: any, schema: any) {
+  registerSchema(schema, "http://example.com/schemas/string");
+  try {
+    const output = await validate("http://example.com/schemas/string", data);
+    return output;
+  } catch (e) {
+    // throw e;
+  } finally {
+    unregisterSchema("http://example.com/schemas/string");
+  }
+  // console.log(BASIC);
+}

package.json

@@ -16,11 +16,15 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@hyperjump/browser": "^1.1.4",
+    "@hyperjump/json-schema": "^1.9.2",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@monaco-editor/react": "^4.6.0",
     "@next/mdx": "^14.2.3",
     "@types/mdx": "^2.0.13",
+    "ajv": "^8.13.0",
+    "better-ajv-errors": "^1.2.0",
     "classnames": "^2.5.1",
     "framer-motion": "^11.1.9",
     "geist": "^1.3.0",