feat: Implement DatetimeControl and add tests

package.json

@@ -52,6 +52,8 @@
     "@jsonforms/core": "^3.2.1",
     "@jsonforms/react": "^3.2.1",
     "antd": "^5.14.0",
+    "date-fns": "^3.3.1",
+    "rc-picker": "^4.2.0",
     "react": "^17 || ^18"
   },
   "devDependencies": {
@@ -79,6 +81,7 @@
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
     "antd": "^5.14.0",
+    "date-fns": "^3.3.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -87,6 +90,7 @@
     "eslint-plugin-testing-library": "^6.2.0",
     "jsdom": "^24.0.0",
     "json-schema-to-ts": "^3.0.0",
+    "rc-picker": "^4.2.0",
     "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/controls/DatetimeControl.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, test, it } from "vitest"
+import { render } from "../common/test-render"
+
+import { screen } from "@testing-library/react"
+import {
+  datetimeSchema,
+  datetimeUISchema,
+  datetimeUISchemaWithRule,
+} from "../testSchemas/datetimeSchema"
+import { isDateTimeControl, rankWith } from "@jsonforms/core"
+
+describe("DatetimeControlTester", () => {
+  test("tester works", () => {
+    const uiSchema = {
+      type: "Control",
+      scope: "#/properties/datetime",
+    }
+    const schema = {
+      type: "string",
+      title: "The Future is Now",
+      format: "date-time",
+    }
+    const context = { rootSchema: datetimeSchema, config: {} }
+
+    expect(rankWith(1, isDateTimeControl)(uiSchema, schema, context)).toBe(1)
+  })
+})
+describe("DatetimeControl", () => {
+  const timestamp = "2023-07-18T01:02:01.182Z"
+  const title = "The Future is Now"
+  test("renders a datetime input with no UISchema provided", async () => {
+    render({
+      schema: datetimeSchema,
+    })
+    await screen.findByText(title)
+  })
+
+  it("Follows the hide rule", () => {
+    render({
+      data: { datetime: timestamp },
+      schema: datetimeSchema,
+      uischema: datetimeUISchemaWithRule,
+    })
+    expect(screen.queryByText(title)).toBeNull()
+  })
+
+  it("renders when data is included", async () => {
+    render({
+      data: { datetime: timestamp },
+      schema: datetimeSchema,
+      uischema: datetimeUISchema,
+    })
+    await screen.findByText(title)
+  })
+})

src/controls/DatetimeControl.tsx

@@ -0,0 +1,35 @@
+import { ControlProps } from "@jsonforms/core"
+import { withJsonFormsControlProps } from "@jsonforms/react"
+import { DatePicker, Form } from "antd"
+import dateFnsGenerateConfig from "rc-picker/lib/generate/dateFns"
+
+interface DatetimeControlProps extends ControlProps {
+  data: string
+  handleChange(path: string, value: Date | null): void
+  path: string
+}
+
+const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig)
+
+export function DatetimeControl({
+  data,
+  handleChange,
+  path,
+  label,
+  visible,
+  id,
+  required,
+}: DatetimeControlProps) {
+  const dateFormat = "MM/DD/YYYY"
+  return !visible ? null : (
+    <Form.Item label={label} id={id} name={path} required={required}>
+      <MyDatePicker
+        value={data ? new Date(data) : null}
+        format={dateFormat}
+        onChange={(e) => handleChange(path, e)}
+      />
+    </Form.Item>
+  )
+}
+
+export const DatetimeRenderer = withJsonFormsControlProps(DatetimeControl)

src/renderer-registry-entries.ts

@@ -19,6 +19,7 @@ import {
   or,
   isPrimitiveArrayControl,
   isOneOfControl,
+  isDateTimeControl,
 } from "@jsonforms/core"
 import { withJsonFormsCellProps } from "@jsonforms/react"
 
@@ -37,6 +38,7 @@ import {
   PrimitiveArrayRenderer,
 } from "./controls/ArrayControl"
 import { OneOfRenderer } from "./controls/combinators/OneOfControl"
+import { DatetimeRenderer } from "./controls/DatetimeControl"
 
 // Ordered from lowest rank to highest rank. Higher rank renderers will be preferred over lower rank renderers.
 export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
@@ -72,6 +74,10 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
     tester: rankWith(2, or(isNumberControl, isIntegerControl)),
     renderer: NumericRenderer,
   },
+  {
+    tester: rankWith(3, isDateTimeControl),
+    renderer: DatetimeRenderer,
+  },
   {
     tester: rankWith(
       3,

src/stories/controls/DatetimeControl.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
+import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
+import {
+  datetimeSchema,
+  datetimeUISchema,
+} from "../../testSchemas/datetimeSchema"
+
+const meta: Meta<typeof StorybookAntDJsonForm> = {
+  title: "Control/Datetime",
+  component: StorybookAntDJsonForm,
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: datetimeSchema,
+    rendererRegistryEntries: [...rendererRegistryEntries],
+  },
+  argTypes: {
+    rendererRegistryEntries: { table: { disable: true } },
+    uiSchemaRegistryEntries: { table: { disable: true } },
+    jsonSchema: {
+      control: "object",
+    },
+    data: { table: { disable: true } },
+    config: { control: "object" },
+    onChange: { table: { disable: true, action: "on-change" } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StorybookAntDJsonForm>
+
+export const Datetime: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: datetimeSchema,
+    uiSchema: datetimeUISchema,
+  },
+}
+
+export const RequiredDatetime: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: {
+      ...datetimeSchema,
+      required: ["datetime"],
+    },
+    uiSchema: datetimeUISchema,
+  },
+}

src/testSchemas/datetimeSchema.ts

@@ -0,0 +1,38 @@
+import { JSONSchema } from "json-schema-to-ts"
+import { UISchema } from "../ui-schema"
+import { RuleEffect } from "@jsonforms/core"
+
+export const datetimeSchema = {
+  type: "object",
+  properties: {
+    datetime: {
+      type: "string",
+      title: "The Future is Now",
+      format: "date-time",
+    },
+  },
+} satisfies JSONSchema
+
+export const datetimeUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/datetime",
+    },
+  ],
+} satisfies UISchema
+
+export const datetimeUISchemaWithRule = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/datetime",
+      rule: {
+        effect: RuleEffect.HIDE,
+        condition: {},
+      },
+    },
+  ],
+} satisfies UISchema