Update docs + make checkbox and radio group re-usable

sverhoeven · sverhoeven · commit bbdfe30eeae9 · 2025-03-04T12:42:10.000+01:00
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ The class model can be run from the command line, see [packages/class/README.md]
 
 The class model can be used a package or library, see [packages/class/README.md](packages/class/README.md#package-usage) for more information.
 
-The app use a form component has been generalized into a package, see [packages/form/README.md](packages/form/README.md) for more information.
+The app uses a form component that has been generalized into a package, see [packages/form/README.md](packages/form/README.md) for more information.
 
 ## Developers
 
diff --git a/packages/class/scripts/json2ts.mjs b/packages/class/scripts/json2ts.mjs
@@ -131,5 +131,5 @@ function main() {
   }
 }
 
-// TODO temporary disabled as json-schema-to-typescript can not handle if/then/else
+// TODO disabled as json-schema-to-typescript can not handle if/then/else
 // main();
diff --git a/packages/form/README.md b/packages/form/README.md
@@ -63,40 +63,47 @@ export default {
 
 The form expects a JSON schema of 2020-12 version. The schema is used to generate and validate the form.
 
-Some additional keywords are allowed that are used specialize the form generation.
+Some additional keywords can be used to specialize the form generation.
 
 ### symbol keyword
 
 The form label uses the value of the `title` key or property key.
-If you want an even shorter label you can add the `symbol` key with a string value.
+If you want an shorter label you can add the `symbol` key with a string value.
 An example value could be `β` for beta.
 When symbol is set the title will be displayed as a tooltip.
 
 ### unit keyword
 
-A property can have a `unit` key with a string value. The value can for example
-`kg kg-1`. The unit will be displayed in the form.
+A property can have a `unit` key with a string value.
+An example value could be `kg kg-1`.
+The unit will be displayed in the form.
 
 ### ui:group keyword
 
 The JSON schema must be flat, due to its use for form generation. There can not be a nested object in the schema.
-In the form generation use the `ui:group` key and any string value to group properties together. 
-The group name will be displayed as a header in the form. The `ui:group` value should not be used across different `then` blocks.
+During the form generation, the `ui:group` key and its string value are used to group properties together. 
+The group name will be displayed as a header in the form. 
+The `ui:group` value should be the same for the properties in a `if` and `then` block.
 
 ### ui:widget keyword
 
-Some property you would like to have a different input widget for. This widget can be chosen by setting the `ui:widget` key to a string value. Valid values are
+Some property you would like to have a different input widget for.
+This widget can be chosen by setting the `ui:widget` key to a string value.
+Valid values are
 
-- `textarea` for a text area input
+- `textarea` for a text area input. Given property type is `string`.
 
 ### Supported types
 
-The form generation can handle the following types:
+The form generation can handle the following property types:
 
 - string
+  - rendered as text input or 
+  - if has enum values then rendered as radio group
 - number
-- boolean
-- array of numbers: The form will display a text input that can be filled with a comma separated list of numbers.
+- integer
+- boolean: rendered as checkbox
+- array of numbers: rendered as text input that can be filled with a comma separated list of numbers
 
 ## API
 
@@ -107,20 +114,20 @@ Properties of Form component:
 - `schema` - The JSON schema for the form. Must be version 2020-12.
 - `values` - Initial values for the form fields.
 - `onSubmit` - Callback function to handle form submission. Called with the form values.
-- `defaults` - Default values to overwrite in the schema.
-- `id` - The id of the form element. Can be used to submit form from a non-child element.
-- `children` - Child elements to render inside the form. Mostly used for submit button.
-- `uiComponents` - Custom UI components to use in the form.
+- `defaults` - Default values to overwrite in the schema. Optional.
+- `id` - The id of the form element. Can be used to submit form from a non-child element. Optional.
+- `children` - Child elements to render inside the form. Mostly used for submit button. Optional.
+- `uiComponents` - Custom UI components to use in the form. Optional.
 
 The values, defaults and onSubmit argument are the same type.
 
 ## Development
 
-To use in a monorepo as a dependency this package needs to be built first with
+To use this package in this monorepo, the package needs to be built first with
 
 ```bash
 pnpm build
-# or during development
+# or during development of the form package
 pnpm dev
 ```
 
diff --git a/packages/form/index.html b/packages/form/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <title>Solid App</title>
+    <title>@classmodel/form package examples</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/form/package.json b/packages/form/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@classmodel/form",
   "version": "0.0.1",
-  "description": "JSON schema to form with Solid UI components",
+  "description": "Generate form from JSON schema with Solid UI components",
   "type": "module",
   "repository": {
     "type": "git",
diff --git a/packages/form/src/App.tsx b/packages/form/src/App.tsx
@@ -312,6 +312,28 @@ function GroupEnumToggle() {
   );
 }
 
+function StringEnumExample() {
+  const values = {
+    s1: "a",
+  };
+  const schema: JSONSchemaType<typeof values> = {
+    type: "object",
+    properties: {
+      s1: { type: "string", enum: ["a", "b", "c"] },
+    },
+    required: ["s1"],
+  };
+  return (
+    <Form
+      schema={schema}
+      onSubmit={(data) => console.log(data)}
+      values={values}
+    >
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+
 function NumberExample() {
   const values = {
     n1: 3.14,
@@ -358,6 +380,29 @@ function IntegerExample() {
   );
 }
 
+function BooleanExample() {
+  const values = {
+    b1: true,
+  };
+  const schema: JSONSchemaType<typeof values> = {
+    type: "object",
+    properties: {
+      b1: { type: "boolean" },
+    },
+    required: ["b1"],
+  };
+  return (
+    <Form
+      schema={schema}
+      onSubmit={(data) => console.log(data)}
+      values={values}
+    >
+      <Button type="submit">Submit</Button>
+      <p>on submit returns boolean `true` if unchanged.</p>
+    </Form>
+  );
+}
+
 function ArrayOfNumberExample() {
   const values = {
     nn1: [1, 2, 3],
@@ -459,12 +504,18 @@ const App: Component = () => {
       <ExampleWrapper legend="Group enum toggle">
         <GroupEnumToggle />
       </ExampleWrapper>
+      <ExampleWrapper legend="String as radio group">
+        <StringEnumExample />
+      </ExampleWrapper>
       <ExampleWrapper legend="Number">
         <NumberExample />
       </ExampleWrapper>
       <ExampleWrapper legend="Integer">
         <IntegerExample />
       </ExampleWrapper>
+      <ExampleWrapper legend="Boolean as checkbox">
+        <BooleanExample />
+      </ExampleWrapper>
       <ExampleWrapper legend="Array of number">
         <ArrayOfNumberExample />
       </ExampleWrapper>
diff --git a/packages/form/src/Form.tsx b/packages/form/src/Form.tsx
@@ -63,6 +63,7 @@ const MyCheckbox: Component<{
   id?: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
+  disabled?: boolean;
 }> = Checkbox;
 
 const DEFAULT_UI_COMPONENTS = {
@@ -293,12 +294,22 @@ const PropField: Component<PropFieldProps> = (props) => {
         <InputInteger item={props.item} disabled={props.disabled} />
       </Match>
       <Match when={props.item.schema.type === "string"}>
-        <Show
-          when={props.item.schema["ui:widget"] === "textarea"}
-          fallback={<InputText item={props.item} disabled={props.disabled} />}
-        >
-          <TextAreaWidget item={props.item} disabled={props.disabled} />
-        </Show>
+        <Switch>
+          {/* TODO when enum.length > 10 then use select/combobox */}
+          <Match when={props.item.schema.enum}>
+            {/* TODO allow user to overwrite used input with ui:widget */}
+            <InputTextEnum item={props.item} disabled={props.disabled} />
+          </Match>
+          <Match when={props.item.schema["ui:widget"] === "textarea"}>
+            <TextAreaWidget item={props.item} disabled={props.disabled} />
+          </Match>
+          <Match when={props.item.schema.type === "string"}>
+            <InputText item={props.item} disabled={props.disabled} />
+          </Match>
+        </Switch>
+      </Match>
+      <Match when={props.item.schema.type === "boolean"}>
+        <InputBoolean item={props.item} disabled={props.disabled} />
       </Match>
       <Match
         when={
@@ -513,6 +524,74 @@ const InputNumber: Component<PropFieldProps> = (props) => {
   );
 };
 
+const InputBoolean: Component<PropFieldProps> = (props) => {
+  const UiComponents = useFormContext().uiComponents;
+  const id = createUniqueId();
+  const checked = createMemo(
+    () => useFormContext().values[props.item.key] as boolean,
+  );
+  const label = createLabel(props.item);
+  const setProperty = useFormContext().setProperty;
+  function onChange(checked: boolean) {
+    setProperty(props.item.key, checked);
+    // TODO when unchecked the checkedMembers should be removed/reset
+  }
+  return (
+    <div class="flex items-center space-x-2">
+      <div class="basis-1/2">
+        <UiComponents.Label for={id}>{label()}</UiComponents.Label>
+        <DescriptionTooltip schema={props.item.schema} />
+      </div>
+      <UiComponents.Checkbox
+        id={id}
+        checked={checked()}
+        onChange={onChange}
+        disabled={props.disabled}
+      />
+    </div>
+  );
+};
+
+const InputTextEnum: Component<PropFieldProps> = (props) => {
+  const UiComponents = useFormContext().uiComponents;
+  const label = createLabel(props.item);
+  const id = createUniqueId();
+  const value = createMemo(
+    () => useFormContext().values[props.item.key] as string,
+  );
+  const setProperty = useFormContext().setProperty;
+  function onChange(value: string) {
+    setProperty(props.item.key, value);
+    // TODO choice members that are not in the new choice should be removed/reset
+  }
+
+  return (
+    <div class="flex items-center gap-2">
+      <div class="basis-1/2">
+        <UiComponents.Label for={id}>{label()}</UiComponents.Label>
+        <DescriptionTooltip schema={props.item.schema} />
+      </div>
+      <UiComponents.RadioGroup
+        id={id}
+        value={value()}
+        onChange={onChange}
+        class="basis-1/2"
+        disabled={props.disabled}
+      >
+        <For each={props.item.schema.enum}>
+          {(choice) => (
+            <UiComponents.RadioGroupItem value={choice}>
+              <UiComponents.RadioGroupItemLabel>
+                {choice}
+              </UiComponents.RadioGroupItemLabel>
+            </UiComponents.RadioGroupItem>
+          )}
+        </For>
+      </UiComponents.RadioGroup>
+    </div>
+  );
+};
+
 function string2numbers(value: string): number[] {
   return value
     .split(",")
@@ -570,31 +649,13 @@ const InputNumbers: Component<PropFieldProps> = (props) => {
 };
 
 function BooleanChoicesField(props: { item: Choices }) {
-  const UiComponents = useFormContext().uiComponents;
-  const id = createUniqueId();
   const checked = createMemo(
     () => useFormContext().values[props.item.key] as boolean,
   );
-  const label = createLabel(props.item);
   const checkedMembers = createMemo(() => props.item.choices[0].members);
-  const setProperty = useFormContext().setProperty;
-  function onChange(checked: boolean) {
-    setProperty(props.item.key, checked);
-    // TODO when unchecked the checkedMembers should be removed/reset
-  }
   return (
     <>
-      <div class="flex items-center space-x-2">
-        <div class="basis-1/2">
-          <UiComponents.Label for={id}>{label()}</UiComponents.Label>
-          <DescriptionTooltip schema={props.item.schema} />
-        </div>
-        <UiComponents.Checkbox
-          id={id}
-          checked={checked()}
-          onChange={onChange}
-        />
-      </div>
+      <InputBoolean item={props.item} />
       <For each={checkedMembers()}>
         {(item) => <ItemField item={item} disabled={!checked()} />}
       </For>
@@ -603,42 +664,13 @@ function BooleanChoicesField(props: { item: Choices }) {
 }
 
 function StringChoicesField(props: { item: Choices }) {
-  const UiComponents = useFormContext().uiComponents;
-  const id = createUniqueId();
   const value = createMemo(
     () => useFormContext().values[props.item.key] as string,
   );
-  const setProperty = useFormContext().setProperty;
-  function onChange(value: string) {
-    setProperty(props.item.key, value);
-    // TODO choice members that are not in the new choice should be removed/reset
-  }
 
-  const label = createLabel(props.item);
   return (
     <>
-      <div class="flex items-center gap-2">
-        <div class="basis-1/2">
-          <UiComponents.Label for={id}>{label()}</UiComponents.Label>
-          <DescriptionTooltip schema={props.item.schema} />
-        </div>
-        <UiComponents.RadioGroup
-          id={id}
-          value={value()}
-          onChange={onChange}
-          class="basis-1/2"
-        >
-          <For each={props.item.schema.enum}>
-            {(choice) => (
-              <UiComponents.RadioGroupItem value={choice}>
-                <UiComponents.RadioGroupItemLabel>
-                  {choice}
-                </UiComponents.RadioGroupItemLabel>
-              </UiComponents.RadioGroupItem>
-            )}
-          </For>
-        </UiComponents.RadioGroup>
-      </div>
+      <InputTextEnum item={props.item} />
       <div>
         <For each={props.item.choices}>
           {(choice) => (
diff --git a/packages/form/src/utils.ts b/packages/form/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -131,5 +131,5 @@ function main() {`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`
`134`		`-// TODO temporary disabled as json-schema-to-typescript can not handle if/then/else`
	`134`	`+// TODO disabled as json-schema-to-typescript can not handle if/then/else`
`135`	`135`	`// main();`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@classmodel/form",`
`3`	`3`	`"version": "0.0.1",`
`4`		`- "description": "JSON schema to form with Solid UI components",`
	`4`	`+ "description": "Generate form from JSON schema with Solid UI components",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"repository": {`
`7`	`7`	`"type": "git",`