@axdspub/axiom-ui-forms v0.3.0

React library that allows:

• Creation of forms using a json config file
• Creation of forms using a json schema draft 7, with selective overrides using json config
• To do:
  • allow addition of new form types and UI components by consuming library
  • allow schema version 4 and draft 6
  • support schema required
  • support version 7 if/then/else
  • support version 7 readOnly
  • support version 7 writeOnly

.

Examples

Create a form using a config

Test form config here. Note: currently, forms with wizards or pages require that the parent route includes * (only tested with react-router-dom@7). Todo: make url navigation on form optional.

{
    "id": "example",
    "label": "Example form",
    "description": "This is just an example",
    "fields": [
        {
            "id": "title",
            "type": "text",
            "label": "Title"
        },
        {
            "id": "description",
            "type": "long_text",
            "label": "Description"
        },
         {
            "id": "favorites",
            "type": "text",
            "label": "List your favorite things",
           "multiple": true
        },
        {
            "id": "agree",
            "type": "boolean",
            "label": "Do you agree?"
        },
        {
            "id": "signature",
            "type": "text",
            "label": "Sign your name then",
            "conditions": { "dependsOn": "agree" }
        }
    ]
}

import React, {type ReactElement} from 'react'
import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'

export default ExampleForm = ({formConfig}: {formConfig: IForm}): ReactElement => {
    const formValueState = React.useState<IFormValues>({})
    const [formValues] = formValueState
    useEffect(()=>{
        // respond to change in formValues
    },[formValues])

    return (
        <FormCreator form={formConfig} formValueState={formValueState} />
    )
}

Config to create a form with wizard steps using config.

Example here.

{
    "id": "example",
    "label": "Example form",
    "description": "This is just an example",
    "wizard_steps":[
      {
        "id":"intro",
        "label":"Introduction",
        "order": 0,
        "fields":[
            {
              "id": "title",
              "type": "text",
              "label": "Title"
          },
          {
              "id": "description",
              "type": "long_text",
              "label": "Description"
          }
        ]

      },
      {
        "id": "map",
        "label": "Step 2",
        "order": 1,
        "fields": [
          {
            "id": "map",
            "type": "geojson",
            "label": "Location"
          }
        ]
      },
      {
        "id": "about",
        "label": "About yourself",
        "order": 2,
        "pages":[
          {
            "id": "favorites",
            "label": "Favorites",
            "fields": [
                {
                  "id": "favorites_list",
                  "type": "text",
                  "label": "List your favorite things",
                  "multiple": true
                }
            ]
          },
          {
            "id":"sign",
            "label": "Signature",
            "fields": [
              {
                  "id": "agree",
                  "type": "boolean",
                  "label": "Do you agree?"
              },
              {
                  "id": "signature",
                  "type": "text",
                  "label": "Sign your name then"
              }
            ]
          }
        ]

      }

    ]
}

Create a form using a schema

Test schema to form here

{
  "$id": "/test/schema",
  "type": "object",
  "properties": {
    "label": {
      "type": "string",
      "maxLength": 100
    },
    "description": {
      "type": "string"
    },
    "agree": {
      "type": "boolean",
    },
    "signature": {
        "type": "string"
    }
  }
}

Coming soon...

{
  "$id": "/test/schema",
  "type": "object",
  "required": [
    "label",
    "description",
    "agree"
  ],
  "properties": {
    "label": {
      "type": "string",
      "maxLength": 100
    },
    "description": {
      "type": "string"
    },
    "agree": {
      "type": "boolean"
    }
  },
  "dependentSchemas": {
    "agree": {
      "properties": {
        "signature": {
          "type": "string",
          "maxLength": 100
        }
      }
    }
  }
}

import React, {type ReactElement} from 'react'
import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'
import { type JSONSchema7 } from 'json-schema'

export default ExampleForm = ({schema}:{schema: JSONSchema7 }): ReactElement => {
    const formValueState = React.useState<IFormValues>({})
    const [formValues] = formValueState
    useEffect(()=>{
        // respond to change in formValues
    },[formValues])
    const errors = validateSchema(schema)
    const formConfig = errors === null
        ? schemaToFormObject(schema)
        : null

    return (
        <>{
            errors !== null
                ? <p>Schema errors: {{errors}}</p>
                : <FormCreator form={formConfig} formValueState={} >
        }</>
        
    )

}

Create a form using a schema, and modify it with a form config

Coming soon

Testing build locally

npm i spa-http-server -g
npm run build
cd build
http-server --push-state -p 8091 -o

Publish version to NPM

npm login --scope=@axdspub
npm publish --access public