From e7e2e71fd3130bfe81a30f4ce9e0fc1670334280 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Mon, 27 Feb 2023 18:09:35 +0100
Subject: [PATCH] fix: selectField w/ required error message

---
 README.md                                   |  5 ---
 src/Intro.contents.md                       |  1 +
 src/fields/select-field/Docs.mdx            | 43 +++++++++++++++++++++
 src/fields/select-field/config.md           |  5 +++
 src/fields/select-field/selectField.ts      | 12 +++---
 src/fields/text-field/useTextFieldProps.tsx |  4 +-
 6 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 src/fields/select-field/Docs.mdx
 create mode 100644 src/fields/select-field/config.md

diff --git a/README.md b/README.md
index 7a251d4..6b86b72 100644
--- a/README.md
+++ b/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. |
diff --git a/src/Intro.contents.md b/src/Intro.contents.md
index db4a9cb..cae2f7d 100644
--- a/src/Intro.contents.md
+++ b/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
 
diff --git a/src/fields/select-field/Docs.mdx b/src/fields/select-field/Docs.mdx
new file mode 100644
index 0000000..1073099
--- /dev/null
+++ b/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
+```
diff --git a/src/fields/select-field/config.md b/src/fields/select-field/config.md
new file mode 100644
index 0000000..f659895
--- /dev/null
+++ b/src/fields/select-field/config.md
@@ -0,0 +1,5 @@
+| Param            | Value               |
+| ---------------- | ------------------- |
+| `value`          | `undefined`         |
+| `schema`         | `z.string()`        |
+| `optionalSchema` | `schema.optional()` |
diff --git a/src/fields/select-field/selectField.ts b/src/fields/select-field/selectField.ts
index 08f6750..77663c0 100644
--- a/src/fields/select-field/selectField.ts
+++ b/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,
   });
diff --git a/src/fields/text-field/useTextFieldProps.tsx b/src/fields/text-field/useTextFieldProps.tsx
index 0694963..630f493 100644
--- a/src/fields/text-field/useTextFieldProps.tsx
+++ b/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
   );