@great-expectations/jsonforms-antd-renderers NPM

Ant Design Renderers for `jsonforms`

jsonforms is "a declarative framework for efficiently building form-based web UIs." jsonforms has multiple renderer packages for different frameworks and component libraries, and this is one such package.

Storybook

This package includes a storybook to help you see the different renderers in action. To run the storybook:

$ pnpm storybook

To view the published storybook, visit https://great-expectations.github.io/jsonforms-antd-renderers/

Getting started

$ npm install @great-expectations/jsonforms-antd-renderers

Using AntD Renderers

In order to use this package, you need to import the renderer registry entries from this package and provide them to the @jsonforms/react JsonForms component:

import { JsonForms } from "@jsonforms/react"
import {
  rendererRegistryEntries,
  cellRegistryEntries,
} from "@great-expectations/jsonforms-antd-renderers"

function MyForm() {
  return (
    <JsonForms
      schema={schema}
      renderers={rendererRegistryEntries}
      cells={cellRegistryEntries}
    />
  )
}

Writing UISchemas

This package expands upon the types and configurability of jsonforms UISchemas. When writing UISchemas, you'll want to provide your jsonschema's type to our UISchema type to take advantage of advanced typechecking & UI configurability. See our storybooks (instructions for running storybooks under Contributing) for more examples.

import { JsonForms } from "@jsonforms/react"
import {
  rendererRegistryEntries,
  cellRegistryEntries,
} from "@great-expectations/jsonforms-antd-renderers"

const schema = {
  type: "object",
  properties: { password: { type: "string" } },
}

const uischema: UISchema<typeof schema> = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/password",
      // properties like type: "password" here are unique to this renderer package. This allows you more declarative control over how your forms
      // render. In this case, the password field will be rendered with AntD's password input component
      options: { type: "password" },
    },
  ],
}

function MyForm() {
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      renderers={rendererRegistryEntries}
      cells={cellRegistryEntries}
    />
  )
}

Form Validation & Submission

Here's a somewhat minimal example showing how to validate & save a form on form submission

import { useCallback, useState } from "react"
import { Form, Button } from "antd"
import { JsonForms } from "@jsonforms/react"
import {
  rendererRegistryEntries,
  cellRegistryEntries,
} from "@great-expectations/jsonforms-antd-renderers"

function MyForm() {
  const [data, setData] = useState<Record<string, unknown>>({})
  const [form] = Form.useForm()
  const onSubmit = useCallback(async () => {
    const formValidationResult = await form
      .validateFields()
      .then((values: Record<string, unknown>) => values)
      .catch((errorInfo: { errorFields: unknown[] }) => errorInfo)

    if ("errorFields" in formValidationResult) {
      return // nothing to do; validateFields will have already rendered error messages on form fields
    }
    // api call to save form data goes here, e.g.
    await yourApiCall(data)
  }, [form, data])

  return (
    <Form form={form}>
      <JsonForms
        data={data}
        onChange={(result) => setData(result.data as Record<string, unknown>)}
        schema={schema}
        uischema={uischema}
        renderers={rendererRegistryEntries}
        cells={cellRegistryEntries}
      />
      <Form.Item>
        <Button type="primary" onClick={onSubmit}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

Contributing

First time setup

Install node.js (only Node v20 is currently supported)
Install pnpm: https://pnpm.io/installation (use pnpm 8.6.8+)
Clone this repository
Install dependencies: pnpm i --frozen-lockfile
Run tests: pnpm test
Run tests and view coverage:
- pnpm test:cov
- npx vite preview --outDir html
- in the terminal, type o + enter to open the results in a browser
Run storybook: pnpm storybook

Making changes

Make changes to the code
Run tests: pnpm test
Run storybook: pnpm storybook
Run format: pnpm format:write
Run lint: pnpm lint
Commit your changes

Conventional commits

We use semantic release to version & release our package, so make sure your commits adhere to the conventional commit format

Testing package locally

Run pack: pnpm pack
If you previously installed the package, you may need to remove it first: yarn remove @great-expectations/jsonforms-antd-renderers and clear cache: yarn cache clean
Install the package in your project: yarn add /path/to/jsonforms-antd-renderers-0.0.0-semantic-release.tgz