fix: improve typing of JSFormDialog

Allow open and onOpenChange prop to be more flexible and work the same as the Dialog.

Author: stuarthendren

package-lock.json

@@ -40,6 +40,7 @@
   },
   "peerDependencies": {
     "@committed/components": "^8.0.0",
+    "@committed/hooks": "^0.10.4",
     "react": "^16.8.0 || ^17.0.0"
   },
   "prettier": {
@@ -83,9 +84,10 @@
     ]
   },
   "devDependencies": {
-    "@committed/components": "^8.2.1",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
+    "@committed/components": "^8.2.1",
+    "@committed/hooks": "^0.10.4",
     "@fontsource/dosis": "^4.5.7",
     "@fontsource/inter": "^4.5.7",
     "@sinclair/typebox": "0.22.1",

package.json

@@ -17,6 +17,7 @@ import {
   ObjectFieldTemplate,
 } from '../templates'
 import { Widgets } from '../widgets'
+
 const { getDefaultRegistry } = utils
 const { fields, widgets } = getDefaultRegistry()
 

src/components/JSForm/JSForm.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Checkbox,
   Dialog,
   DialogContent,
   DialogTitle,
@@ -10,7 +11,7 @@ import { ISubmitEvent } from '@rjsf/core'
 import { Type } from '@sinclair/typebox'
 import { Meta, Story } from '@storybook/react'
 import { JSONSchema7 } from 'json-schema'
-import React from 'react'
+import React, { useState } from 'react'
 import { JSFormDialog, JSFormDialogProps } from '.'
 
 export default {
@@ -130,7 +131,7 @@ type MyFormData = {
 
 export const Typed: Story = () => {
   const handleSubmit = (e: ISubmitEvent<MyFormData>) => {
-    alert(e.formData)
+    alert(JSON.stringify(e.formData, null, 2))
   }
 
   return (
@@ -143,7 +144,7 @@ export const Typed: Story = () => {
           properties: {
             first: {
               type: 'string',
-              title: 'Firstname',
+              title: 'First name',
             },
             second: {
               type: 'string',
@@ -158,3 +159,75 @@ export const Typed: Story = () => {
     </div>
   )
 }
+
+export const Controlled: Story = () => {
+  const [open, setOpen] = useState(false)
+
+  const handleSubmit = (e: ISubmitEvent<MyFormData>) => {
+    alert(JSON.stringify(e.formData, null, 2))
+  }
+
+  return (
+    <div>
+      <Checkbox label="Open" checked={open} onCheckedChange={setOpen} />
+      <JSFormDialog<MyFormData>
+        open={open}
+        onOpenChange={setOpen}
+        schema={{
+          title: 'name',
+          type: 'object',
+          required: ['first', 'second'],
+          properties: {
+            first: {
+              type: 'string',
+              title: 'Firstname',
+            },
+            second: {
+              type: 'string',
+              title: 'Surname',
+            },
+          },
+        }}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  )
+}
+
+export const SetControlled: Story = () => {
+  const [open, setOpen] = useState(false)
+
+  const handleSubmit = (e: ISubmitEvent<MyFormData>) => {
+    alert(JSON.stringify(e.formData, null, 2))
+  }
+
+  return (
+    <div>
+      <Checkbox
+        label="Open"
+        checked={open}
+        onCheckedChange={(value: boolean) => setOpen(value)}
+      />
+      <JSFormDialog<MyFormData>
+        open={open}
+        onOpenChange={setOpen}
+        schema={{
+          title: 'name',
+          type: 'object',
+          required: ['first', 'second'],
+          properties: {
+            first: {
+              type: 'string',
+              title: 'Firstname',
+            },
+            second: {
+              type: 'string',
+              title: 'Surname',
+            },
+          },
+        }}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  )
+}

src/components/JSFormDialog/JSFormDialog.stories.tsx

@@ -6,9 +6,11 @@ import { Default } from './JSFormDialog.stories'
 
 it('renders and can submit', () => {
   const onSubmit = jest.fn()
+  const setOpen = jest.fn()
   const { asFragment } = renderLight(
     <Default
-      dialog={{ open: true }}
+      open={true}
+      onOpenChange={setOpen}
       schema={Type.String()}
       onSubmit={onSubmit}
     />
@@ -22,9 +24,11 @@ it('renders and can submit', () => {
 
 it('renders and can cancel', () => {
   const onSubmit = jest.fn()
+  const setOpen = jest.fn()
   renderLight(
     <Default
-      dialog={{ open: true }}
+      open={true}
+      onOpenChange={setOpen}
       schema={Type.String()}
       onSubmit={onSubmit}
     />

src/components/JSFormDialog/JSFormDialog.test.tsx

@@ -6,19 +6,23 @@ import {
   DialogTrigger,
   Inline,
 } from '@committed/components'
-import React, { ComponentProps, FormEvent, useCallback, useState } from 'react'
+import { useControllableState } from '@committed/hooks'
+import React, { ComponentProps, FormEvent, useCallback } from 'react'
 import { generateForm, JSFormProps, JSFormSubmit } from '../JSForm'
 
-export type JSFormDialogProps<T> = JSFormProps<T> & {
-  dialog?: ComponentProps<typeof Dialog>
-  css?: CSS
-  cancelText?: string
-  submitText?: string
-}
+export type JSFormDialogProps<T> = JSFormProps<T> &
+  ComponentProps<typeof Dialog> & {
+    css?: CSS
+    cancelText?: string
+    submitText?: string
+  }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function JSFormDialog<T = any>({
-  dialog,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  modal = true,
+  defaultOpen = false,
   css,
   Form = generateForm<T>(),
   cancelText = 'Cancel',
@@ -27,7 +31,11 @@ export function JSFormDialog<T = any>({
   onSubmit,
   ...props
 }: JSFormDialogProps<T>) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useControllableState(
+    controlledOpen,
+    controlledOnOpenChange,
+    defaultOpen
+  )
 
   const handleSubmit = useCallback(
     (e: JSFormSubmit<T>, n: FormEvent<HTMLFormElement>) => {
@@ -42,7 +50,7 @@ export function JSFormDialog<T = any>({
   const handleClose = useCallback(() => setOpen(false), [setOpen])
 
   return (
-    <Dialog modal={true} open={open} {...dialog}>
+    <Dialog modal={modal} open={open} onOpenChange={setOpen}>
       <DialogTrigger onClick={handleOpen}>{children}</DialogTrigger>
       <DialogContent css={css as CSS} defaultClose={false}>
         <Form {...props} onSubmit={handleSubmit}>