WIP: upgrade rsjf form to v5

apps/haddock3-download/src/App.css

@@ -6,15 +6,20 @@
     grid-template-areas: "head head head"
                          "catalog workflow node"
                          "catalog workflow-actions node-actions";
-    grid-template-columns: 1fr 1fr 2fr;
+    grid-template-columns: min-content 26rem 1fr;
     grid-template-rows: auto 1fr auto;
-    column-gap: 0.5rem;
+    column-gap: 1rem;
 }
 
-.page > div {
+/* .page > div {
     overflow: auto;
-}
+} */
 
 .action-row {
     padding: 0.25rem
 }
+
+
+.btn-toolbar > .btn {
+    margin: 0.25rem;
+}

packages/core/package.json

@@ -69,14 +69,12 @@
     "@i-vresse/wb-form": "workspace:^",
     "@ltd/j-toml": "^1.24.0",
     "@zip.js/zip.js": "^2.3.23",
-    "ajv": "^8.9.0",
-    "ajv-formats": "^2.1.1",
     "bootstrap": "^4",
     "file-saver": "^2.0.5",
     "js-yaml": "^4.1.0",
     "nanoid": "^4.0.0",
     "papaparse": "^5.3.2",
-    "react-bootstrap": "^1",
+    "react-bootstrap": "^2",
     "react-dnd-html5-backend": "^14.1.0",
     "react-icons": "^3.10.0",
     "react-syntax-highlighter": "^15.4.5",

packages/core/src/CatalogPanel.tsx

@@ -14,7 +14,7 @@ import { useCatalog } from './store'
 export const CatalogPanel = ({ children }: PropsWithChildren<{}>): JSX.Element => {
   const catalog = useCatalog()
   return (
-    <fieldset>
+    <fieldset style={{ padding: '0.5rem' }}>
       <legend>Catalog</legend>
       <React.Suspense fallback={<span>Loading catalog...</span>}>
         {children}

packages/core/src/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ValidationError } from './validate'
+// import { ValidationError } from './validate'
 
 interface State {
   error: Error | null
@@ -16,9 +16,9 @@ export class ErrorBoundary extends React.Component<{}, State> {
 
   render (): React.ReactNode {
     if (this.state.error !== null) {
-      if (this.state.error instanceof ValidationError) {
-        console.error(this.state.error.errors)
-      }
+      // if (this.state.error instanceof ValidationError) {
+      //   console.error(this.state.error.errors)
+      // }
       return (
         <div>
           <h1>Something went terribly wrong.</h1>

packages/core/src/FormProps.ts

@@ -1,14 +1,14 @@
-import { Field, Widget } from '@rjsf/core'
+import { FieldProps, WidgetProps } from '@rjsf/utils'
 
 export interface FormProps {
   /**
    * Custom fields for React JSON schema form.
    * See https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields
    */
-  fields?: { [name: string]: Field }
+  fields?: { [name: string]: FieldProps }
   /**
    * Custom widgets for React JSON schema form.
    * See https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields
    */
-  widgets?: { [name: string]: Widget }
+  widgets?: { [name: string]: WidgetProps }
 }

packages/core/src/GlobalForm.tsx

@@ -1,16 +1,25 @@
 import React from 'react'
 import { Form } from '@i-vresse/wb-form'
+import validator from '@rjsf/validator-ajv8'
 
-import { FormProps } from './FormProps'
+// import { FormProps } from './FormProps'
 import { useCatalog, useGlobalFormData, useSetActiveSubmitButton } from './store'
 
 import '@i-vresse/wb-form/dist/index.css'
 
-export const GlobalForm = ({ fields, widgets }: FormProps): JSX.Element => {
+export const GlobalForm = ({ fields, widgets }: any): JSX.Element => {
   const { global: globalSchemas } = useCatalog()
   const [formData, setFormData] = useGlobalFormData()
   const submitFormRefSetter = useSetActiveSubmitButton()
   const uiSchema = globalSchemas.formUiSchema
+
+  console.group('GlobalForm')
+  console.log('fields...', fields)
+  console.log('widgets...', widgets)
+  console.log('globalSchemas...', globalSchemas)
+  console.log('uiSchema...', uiSchema)
+  console.groupEnd()
+
   return (
     <Form
       schema={globalSchemas.formSchema ?? {}}
@@ -19,6 +28,18 @@ export const GlobalForm = ({ fields, widgets }: FormProps): JSX.Element => {
       onSubmit={({ formData }) => setFormData(formData)}
       fields={fields}
       widgets={widgets}
+      validator={validator}
+      liveValidate={false}
+      showErrorList={false}
+      // onChange={(props) => {
+      //   const { errors, formData } = props
+      //   if (errors?.length === 0) {
+      //     setFormData(formData)
+      //   }
+      // }}
+      onBlur={(...props) => {
+        console.log('NodeForm.onBlur...', props)
+      }}
     >
       <button ref={submitFormRefSetter} style={{ display: 'none' }} />
     </Form>

packages/core/src/NodeForm.tsx

@@ -1,18 +1,27 @@
 import React from 'react'
 import { Form } from '@i-vresse/wb-form'
 
-import { FormProps } from './FormProps'
+// import { FormProps } from './FormProps'
 import { useSelectedCatalogNode, useSelectedNode, useSelectedNodeFormData, useSelectedNodeFormSchema, useSelectedNodeFormUiSchema, useSetActiveSubmitButton } from './store'
+import validator from '@rjsf/validator-ajv8'
 
 import '@i-vresse/wb-form/dist/index.css'
 
-export const NodeForm = ({ fields, widgets }: FormProps): JSX.Element => {
+export const NodeForm = ({ fields, widgets }: any): JSX.Element => {
   const [formData, setFormData] = useSelectedNodeFormData()
   const node = useSelectedNode()
   const catalogNode = useSelectedCatalogNode()
   const schema = useSelectedNodeFormSchema() ?? {}
   const submitFormRefSetter = useSetActiveSubmitButton()
   const uiSchema = useSelectedNodeFormUiSchema() ?? {}
+
+  console.group('NodeForm')
+  console.log('fields...', fields)
+  console.log('widgets...', widgets)
+  console.log('schema...', schema)
+  console.log('uiSchema...', uiSchema)
+  console.groupEnd()
+
   if (node === undefined) {
     return <div>No node selected</div>
   }
@@ -33,6 +42,18 @@ export const NodeForm = ({ fields, widgets }: FormProps): JSX.Element => {
         onSubmit={({ formData }) => setFormData(formData)}
         fields={fields}
         widgets={widgets}
+        validator={validator}
+        liveValidate={false}
+        showErrorList={false}
+        // onChange={(props) => {
+        //   const { errors, formData } = props
+        //   if (errors?.length === 0) {
+        //     setFormData(formData)
+        //   }
+        // }}
+        onBlur={(...props) => {
+          console.log('NodeForm.onBlur...', props)
+        }}
       >
         <button ref={submitFormRefSetter} style={{ display: 'none' }} />
       </Form>

packages/core/src/NodePanel.tsx

@@ -10,6 +10,11 @@ import { useSelectNodeIndex, useWorkflow } from './store'
  *
  */
 export const NodePanel = ({ fields, widgets }: FormProps): JSX.Element => {
+  console.group('NodePanel')
+  console.log('fields...', fields)
+  console.log('widgets...', widgets)
+  console.groupEnd()
+
   const selectedNodeIndex = useSelectNodeIndex()
   const { editingGlobal } = useWorkflow()
   let form = <div>No node or global parameters selected for configuration.</div>

packages/core/src/catalog.ts

@@ -1,7 +1,7 @@
 import { load } from 'js-yaml'
 import { groupCatalog } from './grouper'
 import { ICatalog, ICatalogIndex, IGlobal } from './types'
-import { validateCatalog, ValidationError } from './validate'
+// import { validateCatalog, ValidationError } from './validate'
 
 /**
  * URL where catalog index can be found. Defaults to `/catalog/index.json` relative to the `import.meta.url`.
@@ -33,10 +33,10 @@ export function prepareCatalog (unGroupedCatalog: unknown): ICatalog {
     throw new Error('Retrieved catalog is malformed')
   }
   const catalog = groupCatalog(unGroupedCatalog)
-  const errors = validateCatalog(catalog)
-  if (errors.length > 0) {
-    throw new ValidationError('Invalid catalog loaded', errors)
-  }
+  // const errors = validateCatalog(catalog)
+  // if (errors.length > 0) {
+  //   throw new ValidationError('Invalid catalog loaded', errors)
+  // }
   return catalog
 }
 

packages/core/src/grouper.test.ts

@@ -1,6 +1,6 @@
 import { expect, describe, it, beforeEach } from 'vitest'
 import { JSONSchema7 } from 'json-schema'
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 import { groupCatalog, groupParameters, groupSchema, groupUiSchema, unGroupParameters } from './grouper'
 import { ICatalog, IParameters } from './types'
 

packages/core/src/grouper.ts

@@ -13,7 +13,7 @@
  *
  * @packageDocumentation
  */
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 import { ICatalog, IParameters } from './types'
 import { JSONSchema7 } from 'json-schema'
 import { isObject } from './utils/isObject'

packages/core/src/molecule/addMoleculeValidation.test.ts

@@ -1,4 +1,4 @@
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 import { JSONSchema7 } from 'json-schema'
 import { beforeEach, describe, expect, it } from 'vitest'
 

packages/core/src/molecule/addMoleculeValidation.ts

@@ -4,7 +4,7 @@ import { dataURL2content } from '../dataurls'
 import { JSONSchema7WithMaxItemsFrom } from '../resolveMaxItemsFrom'
 import { IFiles, IParameters } from '../types'
 import { MoleculeInfo, parsePDB } from './parse'
-import { UiSchema, utils } from '@rjsf/core'
+import { UiSchema, getUiOptions } from '@rjsf/utils'
 
 // TODO can be quite expensive to parse big molecules, should try to use memoization
 export async function parseMolecules (
@@ -262,7 +262,7 @@ function walkUiSchemaForMoleculeFormats (
     if (schema.properties !== undefined && k in schema.properties) {
       const s = schema.properties[k] as JSONSchema7WithMaxItemsFrom
 
-      const uiOptions = utils.getUiOptions(v)
+      const uiOptions = getUiOptions(v)
       const isIndexable =
         uiOptions !== undefined &&
         'indexable' in uiOptions &&

packages/core/src/resolveMaxItemsFrom.ts

@@ -1,4 +1,4 @@
-import { KeywordCxt, KeywordDefinition } from 'ajv'
+// import { KeywordCxt, KeywordDefinition } from 'ajv'
 import { JSONSchema7 } from 'json-schema'
 import { IParameters } from './types'
 
@@ -44,29 +44,29 @@ export function resolveMaxItemsFrom (formSchema: JSONSchema7WithMaxItemsFrom, gl
   return newFormSchema
 }
 
-/**
- * Keyword that can be added to ajv instance with addKeyword()
- * to make it aware of `maxItemsFrom` keyword in JSON schemas.
- */
-export const ajvKeyword: KeywordDefinition = {
-  keyword: 'maxItemsFrom',
-  type: 'array',
-  schemaType: 'string',
-  code (cxt: KeywordCxt) {
-    // Unable to validate because needs data from outside, so always OK
-    cxt.ok(true)
-  }
-}
+// /**
+//  * Keyword that can be added to ajv instance with addKeyword()
+//  * to make it aware of `maxItemsFrom` keyword in JSON schemas.
+//  */
+// export const ajvKeyword: KeywordDefinition = {
+//   keyword: 'maxItemsFrom',
+//   type: 'array',
+//   schemaType: 'string',
+//   code (cxt: KeywordCxt) {
+//     // Unable to validate because needs data from outside, so always OK
+//     cxt.ok(true)
+//   }
+// }
 
-/**
- * Keyword that can be added to ajv instance with addKeyword()
- * to make it aware of `maxPropertiesFrom` keyword in JSON schemas.
- */
-export const ajvKeyword2: KeywordDefinition = {
-  keyword: 'maxPropertiesFrom',
-  type: 'object',
-  code (cxt: KeywordCxt) {
-    // Unable to validate because needs data from outside, so always OK
-    cxt.ok(true)
-  }
-}
+// /**
+//  * Keyword that can be added to ajv instance with addKeyword()
+//  * to make it aware of `maxPropertiesFrom` keyword in JSON schemas.
+//  */
+// export const ajvKeyword2: KeywordDefinition = {
+//   keyword: 'maxPropertiesFrom',
+//   type: 'object',
+//   code (cxt: KeywordCxt) {
+//     // Unable to validate because needs data from outside, so always OK
+//     cxt.ok(true)
+//   }
+// }

packages/core/src/store.ts

@@ -14,7 +14,7 @@ import {
   useSetRecoilState
 } from 'recoil'
 import { JSONSchema7 } from 'json-schema'
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 import { nanoid } from 'nanoid'
 
 import { externalizeDataUrls, internalizeDataUrls } from './dataurls'

packages/core/src/types.ts

@@ -1,5 +1,5 @@
 import { JSONSchema7 } from 'json-schema'
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 
 /**
  * Array of tuples.