fix: selectField w/ required error message

README.md

@@ -49,11 +49,6 @@ Most UI libraries provide styled primitive `<Input>` components, form `<Label>`
 
 ## Contents
 
-| Field                           | About                                   |
-| ------------------------------- | --------------------------------------- |
-| [`textField()`](#textfield)     | A fieldAtom to capture `string` values. |
-| [`selectField()`](#selectfield) | A fieldAtom to capture enum values.     |
-
 | Hooks                                                   | About                         |
 | ------------------------------------------------------- | ----------------------------- |
 | [`useClearFileFieldEffect()`](#useclearfilefieldeffect) | A hook to control file input. |

src/Intro.contents.md

@@ -7,6 +7,7 @@
 | [fileField()](?path=/docs/fields-filefield--docs)         | A field to hold a `FileList` value.                         |
 | [numberField()](?path=/docs/fields-numberfield--docs)     | A field to hold a `number` type.                            |
 | [textField()](?path=/docs/fields-textfield--docs)         | A field to hold a `string` type.                            |
+| [selectField()](?path=/docs/fields-selectfield--docs)     | A generic field to hold one of radio or select options.     |
 
 ### Components
 

src/fields/select-field/Docs.mdx

@@ -0,0 +1,43 @@
+import { Meta, Markdown } from "@storybook/blocks";
+
+import Config from "./config.md?raw";
+
+<Meta title="fields/selectField" />
+
+# `selectField<Value = string>(): ValidatedFieldAtom<Value | undefined>`
+
+A generic choice field to hold a key of some options e.g. in `<input type="radio" />` or `<select />` elements.
+The `undefined` empty value means that no option is selected.
+
+```ts
+import { selectField } from "@form-atoms/field";
+
+// required string, must be filled to submit
+const favoriteCategory = selectField();
+
+// optional string, can be empty to submit
+const companySize = selectField({ optional: true });
+```
+
+## Initial Config
+
+<Markdown>{Config}</Markdown>
+
+## Examples
+
+### Number select
+
+By default the select field works with `string` values. You can specify your own type. For example to make a rating field with choices 1-5
+you will need a `numericSelectField`:
+
+```ts
+import { selectField } from "@form-atoms/field";
+import { useFieldActions } from "form-atoms";
+
+const rating = selectField<number>({ schema: z.number() });
+
+const actions = useFieldActions(rating);
+
+actions.setValue("4"); // ERR!
+actions.setValue(4); // OK
+```

src/fields/select-field/config.md

@@ -0,0 +1,5 @@
+| Param            | Value               |
+| ---------------- | ------------------- |
+| `value`          | `undefined`         |
+| `schema`         | `z.string()`        |
+| `optionalSchema` | `schema.optional()` |

src/fields/select-field/selectField.ts

@@ -5,18 +5,18 @@ import {
   ValidatedFieldAtomConfig,
   validatedFieldAtom,
 } from "..";
+import { ZodParams, defaultParams } from "../zodParams";
 
 export type SelectFieldAtom<Value = string> = ValidatedFieldAtom<
   Value | undefined
 >;
 
-// possibly validate option literals, or union of literals
-// https://zod.dev/?id=unions
-export const selectField = <Value = string>(
-  config: Partial<ValidatedFieldAtomConfig<Value | undefined>> = {}
-) =>
+export const selectField = <Value = string>({
+  required_error = defaultParams.required_error,
+  ...config
+}: Partial<ValidatedFieldAtomConfig<Value | undefined>> & ZodParams = {}) =>
   validatedFieldAtom({
     value: undefined,
-    schema: z.string({ required_error: "This field is required" }),
+    schema: z.string({ required_error }),
     ...config,
   });

src/fields/text-field/useTextFieldProps.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from "react";
 
-import { TextFieldAtom, TextValue } from "./textField";
+import { TextFieldAtom, TextFieldValue } from "./textField";
 import { FieldProps, useFieldProps } from "..";
 
 export type TextFieldProps = FieldProps<TextFieldAtom>;
@@ -10,7 +10,7 @@ const getEventValue = (
 ) => event.target.value;
 
 export const useTextFieldProps = <F extends TextFieldAtom>(field: F) =>
-  useFieldProps<TextValue, HTMLInputElement | HTMLTextAreaElement>(
+  useFieldProps<TextFieldValue, HTMLInputElement | HTMLTextAreaElement>(
     field,
     getEventValue
   );