Add boilerplate files and licenses

src/components/form/CheckboxField.tsx

@@ -0,0 +1,37 @@
+import { Controller, FieldPath, FieldValues, useFormContext } from 'react-hook-form';
+import CheckBox from '../ui/CheckBox';
+
+function CheckboxField<T extends FieldValues = FieldValues>({
+  name,
+  title,
+  disabled,
+  helperText,
+  className,
+}: {
+  name: FieldPath<T>;
+  title: string;
+  disabled?: boolean;
+  helperText?: string;
+  className?: string;
+}) {
+  const { control } = useFormContext<T>();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <CheckBox
+          checked={field.value as boolean}
+          onChange={(checked) => field.onChange(checked)}
+          title={title}
+          disabled={disabled ?? false}
+          helperText={helperText}
+          className={className}
+        />
+      )}
+    />
+  );
+}
+
+export default CheckboxField;

src/components/form/InputField.tsx

@@ -0,0 +1,42 @@
+import { Controller, FieldPath, FieldValues, useFormContext } from 'react-hook-form';
+import Input from '../ui/Input';
+
+function InputField<T extends FieldValues = FieldValues>({
+  name,
+  label,
+  disabled,
+  className,
+  placeholder,
+  transform,
+}: {
+  name: FieldPath<T>;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  transform?: (value: string) => string;
+}) {
+  const { control } = useFormContext<T>();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <Input
+          label={label}
+          value={field.value as string}
+          onChange={(e: Event) => {
+            const raw = (e.currentTarget as HTMLInputElement).value;
+            field.onChange(transform ? transform(raw) : raw);
+          }}
+          disabled={disabled}
+          className={className}
+          placeholder={placeholder}
+        />
+      )}
+    />
+  );
+}
+
+export default InputField;

src/components/form/SelectField.tsx

@@ -0,0 +1,39 @@
+import { JSX } from 'preact';
+import { Controller, FieldPath, FieldValues, useFormContext } from 'react-hook-form';
+import Select from '../ui/Select';
+
+function SelectField<T extends FieldValues = FieldValues>({
+  name,
+  children,
+  disabled,
+  className,
+}: {
+  name: FieldPath<T>;
+  children: any;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const { control } = useFormContext<T>();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <Select
+          onChange={(e: JSX.TargetedEvent<HTMLSelectElement, Event>) =>
+            field.onChange(e.currentTarget.value)
+          }
+          value={field.value as string}
+          name={name}
+          disabled={disabled}
+          className={className}
+        >
+          {children}
+        </Select>
+      )}
+    />
+  );
+}
+
+export default SelectField;