Pass signal value to input

.changeset/eight-rats-smell.md

@@ -0,0 +1,5 @@
+---
+"signal-form": patch
+---
+
+Pass signal value to input

.storybook/preview.tsx

@@ -6,4 +6,11 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    default: "light",
+    values: [
+      { name: "light", value: "#ffffff" },
+      { name: "dark", value: "#000000" },
+    ],
+  },
 };

lib/controls/check-box-input.tsx

@@ -1,6 +1,6 @@
 import { batch } from "@preact/signals-react";
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
+import { forwardRef, useCallback } from "react";
+import type { ChangeEventHandler, InputHTMLAttributes } from "react";
 import { useField } from "~/use-field";
 
 export type CheckBoxInputProps = Omit<
@@ -14,6 +14,17 @@ export const CheckBoxInput = forwardRef<HTMLInputElement, CheckBoxInputProps>(
   ({ name, onChange, ...props }, ref) => {
     let field = useField<boolean>(name, { defaultValue: false });
 
+    let onChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        onChange?.(e);
+        batch(() => {
+          field.setData(e.target.checked);
+          field.setTouched();
+        });
+      },
+      []
+    );
+
     return (
       <>
         <input
@@ -22,13 +33,7 @@ export const CheckBoxInput = forwardRef<HTMLInputElement, CheckBoxInputProps>(
           {...props}
           name={field.name}
           checked={field.data.value}
-          onChange={(e) => {
-            onChange?.(e);
-            batch(() => {
-              field.setData(e.target.checked);
-              field.setTouched();
-            });
-          }}
+          onChange={onChangeHandler}
           value="true"
         />
         <input type="hidden" name={field.name} value="false" />

lib/controls/input.tsx

@@ -1,29 +1,49 @@
-import { batch } from "@preact/signals-react";
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
+import type { ReadonlySignal } from "@preact/signals-react";
+import { batch, useComputed } from "@preact/signals-react";
+import { forwardRef, useCallback } from "react";
+import type { ChangeEventHandler, InputHTMLAttributes } from "react";
 import { useField } from "~/use-field";
 
-export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+export type InputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value"
+> & {
   name: string;
+  value?: string | ReadonlySignal<string>;
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ name, onChange, ...props }, ref) => {
+  ({ name, value, onChange, ...props }, ref) => {
     let field = useField<string>(name, { defaultValue: "" });
 
+    let valueResult = useComputed(() => {
+      if (typeof value === "string") {
+        return value;
+      } else if (value) {
+        return value.value;
+      } else {
+        return field.data.value;
+      }
+    });
+
+    let onChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        onChange?.(e);
+        batch(() => {
+          field.setData(e.target.value);
+          field.setTouched();
+        });
+      },
+      []
+    );
+
     return (
       <input
         ref={ref}
         {...props}
         name={field.name}
-        value={field.data as any}
-        onChange={(e) => {
-          onChange?.(e);
-          batch(() => {
-            field.setData(e.target.value);
-            field.setTouched();
-          });
-        }}
+        value={valueResult.value}
+        onChange={onChangeHandler}
       />
     );
   }

lib/controls/radio-input.tsx

@@ -1,6 +1,6 @@
 import { batch, useComputed } from "@preact/signals-react";
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
+import { forwardRef, useCallback } from "react";
+import type { ChangeEventHandler, InputHTMLAttributes } from "react";
 import { useField } from "~/use-field";
 
 export type RadioInputProps = Omit<
@@ -18,20 +18,25 @@ export const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
       return field.data.value?.toString() === value.toString();
     });
 
+    let onChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        onChange?.(e);
+        batch(() => {
+          field.setData(value);
+          field.setTouched();
+        });
+      },
+      []
+    );
+
     return (
       <input
         type="radio"
         ref={ref}
         {...props}
         name={field.name}
         checked={isChecked.value}
-        onChange={(e) => {
-          onChange?.(e);
-          batch(() => {
-            field.setData(value);
-            field.setTouched();
-          });
-        }}
+        onChange={onChangeHandler}
         value={value}
       />
     );

lib/controls/select.tsx

@@ -1,6 +1,6 @@
 import { batch } from "@preact/signals-react";
-import { forwardRef } from "react";
-import type { SelectHTMLAttributes } from "react";
+import { forwardRef, useCallback } from "react";
+import type { ChangeEventHandler, SelectHTMLAttributes } from "react";
 import { useField } from "~/use-field";
 
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
@@ -11,19 +11,24 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ name, onChange, ...props }, ref) => {
     let field = useField<string>(name, { defaultValue: "" });
 
+    let onChangeHandler: ChangeEventHandler<HTMLSelectElement> = useCallback(
+      (e) => {
+        onChange?.(e);
+        batch(() => {
+          field.setData(e.target.value);
+          field.setTouched();
+        });
+      },
+      []
+    );
+
     return (
       <select
         ref={ref}
         {...props}
         name={field.name}
         value={field.data.value}
-        onChange={(e) => {
-          onChange?.(e);
-          batch(() => {
-            field.setData(e.target.value);
-            field.setTouched();
-          });
-        }}
+        onChange={onChangeHandler}
       />
     );
   }

lib/controls/text-area.tsx

@@ -1,29 +1,49 @@
-import { batch } from "@preact/signals-react";
-import { forwardRef } from "react";
-import type { TextareaHTMLAttributes } from "react";
+import type { ReadonlySignal } from "@preact/signals-react";
+import { batch, useComputed } from "@preact/signals-react";
+import { forwardRef, useCallback } from "react";
+import type { ChangeEventHandler, TextareaHTMLAttributes } from "react";
 import { useField } from "~/use-field";
 
-export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+export type TextAreaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "value"
+> & {
   name: string;
+  value?: string | ReadonlySignal<string>;
 };
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ name, onChange, ...props }, ref) => {
+  ({ name, value, onChange, ...props }, ref) => {
     let field = useField<string>(name, { defaultValue: "" });
 
+    let valueResult = useComputed(() => {
+      if (typeof value === "string") {
+        return value;
+      } else if (value) {
+        return value.value;
+      } else {
+        return field.data.value;
+      }
+    });
+
+    let onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+      (e) => {
+        onChange?.(e);
+        batch(() => {
+          field.setData(e.target.value);
+          field.setTouched();
+        });
+      },
+      []
+    );
+
     return (
       <textarea
         ref={ref}
         {...props}
         name={field.name}
-        value={field.data as any}
-        onChange={(e) => {
-          onChange?.(e);
-          batch(() => {
-            field.setData(e.target.value);
-            field.setTouched();
-          });
-        }}
+        value={valueResult.value}
+        onChange={onChangeHandler}
       />
     );
   }

stories/Input.stories.tsx

@@ -0,0 +1,77 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Input, SignalForm, useField } from "~/index";
+import { createRemixStoryDecorator } from "./utils/decorators";
+import { useComputed } from "@preact/signals-react";
+
+const meta = {
+  title: "SignalForm/Input",
+  component: SignalForm,
+  decorators: [createRemixStoryDecorator()],
+} satisfies Meta<typeof SignalForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Calculated: Story = {
+  render() {
+    function FullName(): JSX.Element {
+      let firstName = useField<string>("firstName");
+      let lastName = useField<string>("lastName");
+
+      let fullName = useComputed(() => {
+        return [firstName.data.value, lastName.data.value]
+          .filter(Boolean)
+          .join(" ");
+      });
+
+      return (
+        <p>
+          <label>
+            Full name: <Input readOnly name="fullName" value={fullName} />
+          </label>
+        </p>
+      );
+    }
+
+    return (
+      <SignalForm
+        defaultData={{ color: "blue", size: 0, beatle: "paul", isActive: true }}
+      >
+        <p>
+          <label>
+            First name: <Input name="firstName" />
+          </label>
+        </p>
+        <p>
+          <label>
+            Last name: <Input name="lastName" />
+          </label>
+        </p>
+        <FullName />
+      </SignalForm>
+    );
+  },
+};
+
+export const Duplicate: Story = {
+  render() {
+    return (
+      <SignalForm
+        defaultData={{ color: "blue", size: 0, beatle: "paul", isActive: true }}
+      >
+        <p>
+          <label>
+            Name: <Input name="name" />
+          </label>
+        </p>
+        <p>
+          <label>
+            Name: <Input name="name" />
+          </label>
+        </p>
+      </SignalForm>
+    );
+  },
+};

stories/SignalForm.stories.tsx

@@ -22,7 +22,7 @@ function FormValues(): JSX.Element {
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
-  title: "Example/SignalForm",
+  title: "SignalForm/SignalForm",
   component: SignalForm,
   decorators: [createRemixStoryDecorator()],
 } satisfies Meta<typeof SignalForm>;