fix: refactor renderers to renderer registry entries for clarity (#45)

* fix: refactor renderers to renderer registry entries for clarity

* remove file that got moved

src/common/AntDJsonForm.tsx

@@ -8,7 +8,7 @@ import { UISchema } from "../ui-schema"
 import {
   rendererRegistryEntries as _rendererRegistryEntries,
   cellRegistryEntries,
-} from "../renderers"
+} from "../renderer-registry-entries"
 
 type Props = {
   data: Record<string, unknown>

src/common/FormStateWrapper.tsx

@@ -4,7 +4,10 @@ import { Form } from "antd"
 
 import { JsonSchema7 } from "@jsonforms/core"
 import { UISchema } from "../ui-schema"
-import { cellRegistryEntries, rendererRegistryEntries } from "../renderers"
+import {
+  cellRegistryEntries,
+  rendererRegistryEntries,
+} from "../renderer-registry-entries"
 import { useState } from "react"
 
 type RenderProps<T extends Record<string, unknown>> = {

src/controls/BooleanControl.tsx

@@ -3,6 +3,7 @@ import { ControlProps, isDescriptionHidden } from "@jsonforms/core"
 import { Form } from "antd"
 import { Checkbox } from "../antd/Checkbox"
 import { QuestionCircleOutlined } from "@ant-design/icons"
+import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export function BooleanControl({
   data,
@@ -72,3 +73,5 @@ export function BooleanControl({
     </Form.Item>
   )
 }
+
+export const BooleanRenderer = withJsonFormsControlProps(BooleanControl)

src/controls/NumericControl.tsx

@@ -2,6 +2,7 @@ import type { ControlProps, RendererProps } from "@jsonforms/core"
 import { Col, Form } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
+import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export const NumericControl = (props: ControlProps & RendererProps) => {
   if (!props.visible) return null
@@ -27,3 +28,5 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
     </Form.Item>
   )
 }
+
+export const NumericRenderer = withJsonFormsControlProps(NumericControl)

src/controls/NumericSliderControl.tsx

@@ -3,6 +3,7 @@ import { Col, Form, Row } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
 import { Slider } from "../antd/Slider"
+import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export const NumericSliderControl = (props: ControlProps & RendererProps) => {
   if (!props.visible) return null
@@ -33,3 +34,6 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
     </Form.Item>
   )
 }
+
+export const NumericSliderRenderer =
+  withJsonFormsControlProps(NumericSliderControl)

src/controls/ObjectControl.tsx

@@ -4,7 +4,7 @@ import {
   Generate,
   StatePropsOfControlWithDetail,
 } from "@jsonforms/core"
-import { JsonFormsDispatch } from "@jsonforms/react"
+import { JsonFormsDispatch, withJsonFormsDetailProps } from "@jsonforms/react"
 import isEmpty from "lodash.isempty"
 
 export function ObjectControl({
@@ -53,3 +53,5 @@ export function ObjectControl({
     />
   )
 }
+
+export const ObjectRenderer = withJsonFormsDetailProps(ObjectControl)

src/controls/TextControl.tsx

@@ -9,6 +9,7 @@ import type { ControlProps } from "@jsonforms/core"
 
 import type { TextControlOptions, TextControlType } from "../ui-schema"
 import { assertNever } from "../common/assert-never"
+import { withJsonFormsControlProps } from "@jsonforms/react"
 interface TextControlProps extends ControlProps {
   data: string
   handleChange(path: string, value: string): void
@@ -113,3 +114,5 @@ function TextControlInput({ type, ...rest }: TextControlInputProps) {
 function coerceToString(value: number) {
   return value.toString()
 }
+
+export const TextRenderer = withJsonFormsControlProps(TextControl)

src/controls/UnknownControl.tsx

@@ -1,4 +1,5 @@
 import { CellProps, ControlProps } from "@jsonforms/core"
+import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export function UnknownControl(props: ControlProps | CellProps) {
   // console.log({ schema: props.schema, path: props.path, schemaPath: props.schemaPath, props })
@@ -9,3 +10,5 @@ export function UnknownControl(props: ControlProps | CellProps) {
     </div>
   )
 }
+
+export const UnknownRenderer = withJsonFormsControlProps(UnknownControl)

src/index.ts

@@ -1,13 +1,16 @@
-export { rendererRegistryEntries, cellRegistryEntries } from "./renderers"
+export {
+  rendererRegistryEntries,
+  cellRegistryEntries,
+} from "./renderer-registry-entries"
 export type * from "./ui-schema"
 
 export { AlertLayout } from "./layouts/AlertLayout"
 export { BooleanControl } from "./controls/BooleanControl"
-export { TextControl } from "./controls/TextControl"
-export { UnknownControl } from "./controls/UnknownControl"
-export { HorizontalLayout } from "./layouts/HorizontalLayout"
-export { VerticalLayout } from "./layouts/VerticalLayout"
-export { ObjectControl } from "./controls/ObjectControl"
 export { GroupLayout } from "./layouts/GroupLayout"
+export { HorizontalLayout } from "./layouts/HorizontalLayout"
 export { NumericControl } from "./controls/NumericControl"
 export { NumericSliderControl } from "./controls/NumericSliderControl"
+export { ObjectControl } from "./controls/ObjectControl"
+export { TextControl } from "./controls/TextControl"
+export { UnknownControl } from "./controls/UnknownControl"
+export { VerticalLayout } from "./layouts/VerticalLayout"

src/layouts/AlertLayout.tsx

@@ -1,6 +1,7 @@
 import { LabelProps, RendererProps } from "@jsonforms/core"
 import { Alert } from "antd"
 import { AlertLayoutOptions } from "../ui-schema"
+import { withJsonFormsLabelProps } from "@jsonforms/react"
 
 export function AlertLayout({ text, uischema }: LabelProps & RendererProps) {
   const options = uischema.options as AlertLayoutOptions
@@ -13,3 +14,5 @@ export function AlertLayout({ text, uischema }: LabelProps & RendererProps) {
     />
   )
 }
+
+export const AlertLayoutRenderer = withJsonFormsLabelProps(AlertLayout)

src/layouts/GroupLayout.tsx

@@ -5,6 +5,7 @@ import {
 import { UISchema } from "../ui-schema"
 import { Divider } from "antd"
 import { AntDLayout } from "./LayoutRenderer"
+import React from "react"
 
 export type LayoutRendererProps = OwnPropsOfRenderer & {
   elements: UISchema[]
@@ -31,3 +32,5 @@ export function GroupLayout({
     </>
   )
 }
+
+export const GroupLayoutRenderer = React.memo(GroupLayout)

src/layouts/HorizontalLayout.tsx

@@ -3,6 +3,7 @@ import isEmpty from "lodash.isempty"
 import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
 import { HorizontalLayout as HorizontalLayoutUISchema } from "../ui-schema"
 import { Form, Row } from "antd"
+import { withJsonFormsLayoutProps } from "@jsonforms/react"
 
 export function HorizontalLayout({
   uischema,
@@ -37,3 +38,6 @@ export function HorizontalLayout({
     </Form>
   )
 }
+
+export const HorizontalLayoutRenderer =
+  withJsonFormsLayoutProps(HorizontalLayout)

src/layouts/VerticalLayout.tsx

@@ -2,6 +2,7 @@ import { LayoutProps, GroupLayout } from "@jsonforms/core"
 import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
 import { Form, FormInstance, FormProps } from "antd"
 import { VerticalLayout as VerticalLayoutUISchema } from "../ui-schema"
+import { withJsonFormsLayoutProps } from "@jsonforms/react"
 
 export function VerticalLayout({
   uischema,
@@ -38,3 +39,5 @@ function getFormLayoutOptions(form: FormInstance): Partial<FormProps> {
     component: form ? "div" : "form",
   }
 }
+
+export const VerticalLayoutRenderer = withJsonFormsLayoutProps(VerticalLayout)

src/renderers.ts → src/renderer-registry-entries.ts

@@ -15,59 +15,52 @@ import {
   and,
   or,
 } from "@jsonforms/core"
-import {
-  withJsonFormsControlProps,
-  withJsonFormsLabelProps,
-  withJsonFormsCellProps,
-  withJsonFormsLayoutProps,
-  withJsonFormsDetailProps,
-} from "@jsonforms/react"
+import { withJsonFormsCellProps } from "@jsonforms/react"
 
-import { BooleanControl } from "./controls/BooleanControl"
-import { AlertLayout } from "./layouts/AlertLayout"
-import { TextControl } from "./controls/TextControl"
-import { UnknownControl } from "./controls/UnknownControl"
-import { HorizontalLayout } from "./layouts/HorizontalLayout"
-import { VerticalLayout } from "./layouts/VerticalLayout"
-import { ObjectControl } from "./controls/ObjectControl"
-import { GroupLayout } from "./layouts/GroupLayout"
-import { NumericControl } from "./controls/NumericControl"
-import { NumericSliderControl } from "./controls/NumericSliderControl"
-import React from "react"
+import { BooleanRenderer } from "./controls/BooleanControl"
+import { AlertLayoutRenderer } from "./layouts/AlertLayout"
+import { TextRenderer } from "./controls/TextControl"
+import { UnknownControl, UnknownRenderer } from "./controls/UnknownControl"
+import { HorizontalLayoutRenderer } from "./layouts/HorizontalLayout"
+import { VerticalLayoutRenderer } from "./layouts/VerticalLayout"
+import { ObjectRenderer } from "./controls/ObjectControl"
+import { GroupLayoutRenderer } from "./layouts/GroupLayout"
+import { NumericRenderer } from "./controls/NumericControl"
+import { NumericSliderRenderer } from "./controls/NumericSliderControl"
 
 // Ordered from lowest rank to highest rank. Higher rank renderers will be preferred over lower rank renderers.
 export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
   {
     tester: rankWith(1, () => true),
-    renderer: withJsonFormsControlProps(UnknownControl),
+    renderer: UnknownRenderer,
   },
   {
     tester: rankWith(1, uiTypeIs("Group")),
-    renderer: React.memo(GroupLayout),
+    renderer: GroupLayoutRenderer,
   },
   {
     tester: rankWith(2, uiTypeIs("HorizontalLayout")),
-    renderer: withJsonFormsLayoutProps(HorizontalLayout),
+    renderer: HorizontalLayoutRenderer,
   },
   {
     tester: rankWith(2, uiTypeIs("VerticalLayout")),
-    renderer: withJsonFormsLayoutProps(VerticalLayout),
+    renderer: VerticalLayoutRenderer,
   },
   {
     tester: rankWith(2, isBooleanControl),
-    renderer: withJsonFormsControlProps(BooleanControl),
+    renderer: BooleanRenderer,
   },
   {
     tester: rankWith(2, isStringControl),
-    renderer: withJsonFormsControlProps(TextControl),
+    renderer: TextRenderer,
   },
   {
     tester: rankWith(2, uiTypeIs("Label")),
-    renderer: withJsonFormsLabelProps(AlertLayout),
+    renderer: AlertLayoutRenderer,
   },
   {
     tester: rankWith(2, or(isNumberControl, isIntegerControl)),
-    renderer: withJsonFormsControlProps(NumericControl),
+    renderer: NumericRenderer,
   },
   {
     tester: rankWith(
@@ -79,11 +72,11 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
         }),
       ),
     ),
-    renderer: withJsonFormsControlProps(NumericSliderControl),
+    renderer: NumericSliderRenderer,
   },
   {
     tester: rankWith(10, and(isObjectControl, not(isLayout))),
-    renderer: withJsonFormsDetailProps(ObjectControl),
+    renderer: ObjectRenderer,
   },
 ]
 

src/stories/controls/BooleanControl.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { rendererRegistryEntries } from "../../renderers"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
 import { UISchema } from "../../ui-schema"
 import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 

src/stories/controls/ObjectControl.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { rendererRegistryEntries } from "../../renderers"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
 import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 import {
   objectSchema,

src/stories/controls/TextControl.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { rendererRegistryEntries } from "../../renderers"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
 import { TextControlOptions, UISchema } from "../../ui-schema"
 import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 

src/stories/layouts/AlertLayout.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react"
-import { rendererRegistryEntries } from "../../renderers"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
 import { UISchema } from "../../ui-schema"
 import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"