Added an unknown field for uniforms

package-lock.json

@@ -42,7 +42,7 @@
         "@vscode/codicons": "0.0.20",
         "@vscode/webview-ui-toolkit": "^0.9.1",
         "@webpack-cli/serve": "^1.6.0",
-        "ajv": "^8.8.2",
+        "ajv": "^8.12.0",
         "array-move": "^4.0.0",
         "assert": "^2.0.0",
         "autoprefixer": "^10.4.13",
@@ -1835,9 +1835,10 @@
       }
     },
     "node_modules/ajv": {
-      "version": "8.8.2",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -11641,9 +11642,10 @@
       }
     },
     "node_modules/uniforms": {
-      "version": "3.7.0",
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/uniforms/-/uniforms-3.10.2.tgz",
+      "integrity": "sha512-5FIqpAqyWDmDhaNkmXOxuz8dJ09jPg0gTpn13O6WiqtCY+nmVtHK4yGSpFU1UIjwBt9KfbRPFFmCAbYlCyV4bw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "invariant": "^2.0.0",
         "lodash": "^4.0.0",
@@ -11653,7 +11655,7 @@
         "url": "https://github.com/vazco/uniforms?sponsor=1"
       },
       "peerDependencies": {
-        "react": "^17.0.0 || ^16.8.0"
+        "react": "^18.0.0 || ^17.0.0 || ^16.8.0"
       }
     },
     "node_modules/uniforms-antd": {
@@ -14180,7 +14182,9 @@
       }
     },
     "ajv": {
-      "version": "8.8.2",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
@@ -20722,7 +20726,9 @@
       }
     },
     "uniforms": {
-      "version": "3.7.0",
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/uniforms/-/uniforms-3.10.2.tgz",
+      "integrity": "sha512-5FIqpAqyWDmDhaNkmXOxuz8dJ09jPg0gTpn13O6WiqtCY+nmVtHK4yGSpFU1UIjwBt9KfbRPFFmCAbYlCyV4bw==",
       "dev": true,
       "requires": {
         "invariant": "^2.0.0",

package.json

@@ -2316,7 +2316,7 @@
     "@vscode/codicons": "0.0.20",
     "@vscode/webview-ui-toolkit": "^0.9.1",
     "@webpack-cli/serve": "^1.6.0",
-    "ajv": "^8.8.2",
+    "ajv": "^8.12.0",
     "array-move": "^4.0.0",
     "assert": "^2.0.0",
     "autoprefixer": "^10.4.13",

src/components/uniforms-frontmatter/AutoField.tsx

@@ -11,6 +11,7 @@ import NumField from './NumField';
 import RadioField from './RadioField';
 import SelectField from './SelectField';
 import TextField from './TextField';
+import UnknownField from './UnknownField';
 
 const AutoField = createAutoField((props) => {
   if (props.allowedValues) {
@@ -33,6 +34,8 @@ const AutoField = createAutoField((props) => {
         return LongTextField;
       }
       return TextField;
+    default:
+      return UnknownField;
   }
 
   return invariant(false, 'Unsupported field type: %s', props.fieldType);

src/components/uniforms-frontmatter/UnknownField.tsx

@@ -0,0 +1,37 @@
+import { Ref } from 'react';
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelField } from './LabelField';
+
+export type UnknownFieldProps = HTMLFieldProps<
+  string,
+  HTMLDivElement,
+  { inputRef?: Ref<HTMLInputElement> }
+>;
+
+function UnknownField({
+  autoComplete,
+  disabled,
+  id,
+  inputRef,
+  label,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  type,
+  value,
+  ...props
+}: UnknownFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      <LabelField label={label} id={id} required={props.required} />
+
+      <div className={`text-[var(--vscode-errorForeground)]`}>Unknown field</div>
+    </div>
+  );
+}
+
+UnknownField.defaultProps = { type: 'text' };
+
+export default connectField<UnknownFieldProps>(UnknownField, { kind: 'leaf' });

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Ajv from 'ajv';
+import Ajv, { FormatDefinition } from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
@@ -21,21 +21,41 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
   onClear
 }: React.PropsWithChildren<IDataFormProps>) => {
   const [bridge, setBridge] = useState<JSONSchemaBridge | null>(null);
+  const [error, setError] = useState<string | undefined>(undefined);
   const { getColors } = useThemeColors();
 
   const ajv = new Ajv({
     allErrors: true,
     useDefaults: true,
+    validateSchema: false,
     strict: false,
+    strictTypes: false
+  });
+
+  // Added the multiline keyword for the textarea field
+  ajv.addKeyword({
+    keyword: 'multiline',
+    type: 'boolean',
+    schemaType: 'boolean'
   });
 
   const jsonValidator = (schema: object) => {
-    const validator = ajv.compile(schema);
+    try {
+      setError(undefined);
+      const validator = ajv.compile(schema);
 
-    return (crntModel: object) => {
-      validator(crntModel);
-      return validator.errors?.length ? { details: validator.errors } : null;
-    };
+      return (crntModel: object) => {
+        if (validator(crntModel)) {
+          return null;
+        } else {
+          console.log(validator.errors)
+          return { details: validator.errors }
+        }
+      };
+    } catch (error) {
+      setError((error as Error).message);
+      return () => { };
+    }
   };
 
   useEffect(() => {
@@ -48,13 +68,21 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
     return null;
   }
 
+  if (error) {
+    return (
+      <div className={`mt-4 text-[var(--vscode-errorForeground)]`}>
+        {error}
+      </div>
+    )
+  }
+
   return (
     <ErrorBoundary>
       <div className="autoform">
         {model ? (
-          <h2 className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}>Modify the data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Modify the data</h2>
         ) : (
-          <h2 className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}>Add new data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Add new data</h2>
         )}
 
         <AutoForm
@@ -70,7 +98,6 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
           <div className={`errors`}>
             <ErrorsField />
           </div>
-
           <DataFormControls model={model} onClear={onClear} />
         </AutoForm>
       </div>

src/dashboardWebView/styles.css

@@ -333,7 +333,7 @@
   }
 }
 
-.experimental {
+.experimental form {
   [type='text'],
   [type='email'],
   [type='url'],