npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@great-expectations/jsonforms-antd-renderers

v1.22.2

Published

ant design renderer set for the jsonforms declarative form framework

Downloads

182

Readme

codecov

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 the version of pnpm specified in the packageManager field in package.json
  • 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

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