refactor: infer field value from field schema

BREAKING CHANGE: renamed select&multiselect field as those are not 'real'. For multiselect there is arrayField and the selectField is regular stringField.

selectFieldHook will be made generic to support boolean, number, string, date (all primitive values) selection from list of options.

src/fields/array-field/arrayField.ts

@@ -0,0 +1,22 @@
+import { ZodArray, z } from "zod";
+
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
+import { ZodParams, defaultParams } from "../zodParams";
+
+export const arrayField = <ElementSchema extends z.Schema>({
+  required_error = defaultParams.required_error,
+  elementSchema,
+  ...config
+}: { elementSchema: ElementSchema } & Partial<
+  ValidatedFieldAtomConfig<
+    ZodArray<ElementSchema, "atleastone">,
+    ZodArray<ElementSchema, "many">
+  >
+> &
+  ZodParams) =>
+  validatedFieldAtom({
+    value: [],
+    schema: z.array(elementSchema).nonempty(required_error),
+    optionalSchema: z.array(elementSchema),
+    ...config,
+  });

src/fields/multi-select-field/checkboxGroup.stories.tsx → src/fields/array-field/checkboxGroup.stories.tsx

@@ -1,15 +1,15 @@
-import { multiSelectField } from "./multiSelectField";
+import { stringArrayField } from "./stringArrayField";
 import {
-  MultiSelectFieldProps,
-  useMultiSelectFieldProps,
-} from "./useMultiSelectFieldProps";
+  StringArrayFieldProps,
+  useArrayFieldProps,
+} from "./useArrayFieldProps";
 import { FieldErrors } from "../../components/field-errors";
+import { useOptions } from "../../hooks";
 import { FormStory, fixArgs, meta } from "../../scenarios/StoryForm";
-import { useOptions } from "../select-field";
 
 export default {
   ...meta,
-  title: "fields/multiSelectField/checkboxGroup",
+  title: "fields/arrayField/checkboxGroup",
 };
 
 const CheckboxGroup = <Option,>({
@@ -18,8 +18,8 @@ const CheckboxGroup = <Option,>({
   getValue,
   getLabel,
   options,
-}: MultiSelectFieldProps<Option>) => {
-  const props = useMultiSelectFieldProps(field);
+}: StringArrayFieldProps<Option>) => {
+  const props = useArrayFieldProps(field);
 
   const { renderOptions } = useOptions(field, {
     getValue,
@@ -67,7 +67,7 @@ const languagesOptions = [
 export const Required: FormStory = {
   args: fixArgs({
     fields: {
-      languages: multiSelectField(),
+      languages: stringArrayField(),
     },
     children: ({ fields }) => (
       <CheckboxGroup
@@ -84,7 +84,7 @@ export const Required: FormStory = {
 export const Optional: FormStory = {
   args: fixArgs({
     fields: {
-      attachment: multiSelectField({
+      attachment: stringArrayField({
         optional: true,
       }),
     },

src/fields/array-field/index.ts

@@ -0,0 +1,2 @@
+export * from "./arrayField";
+export * from "./useArrayFieldProps";

src/fields/array-field/stringArrayField.ts

@@ -0,0 +1,19 @@
+import { ExtractAtomValue } from "jotai";
+import { z } from "zod";
+
+import { arrayField } from "./arrayField";
+import { ZodParams } from "../zodParams";
+
+export const stringArrayField = (
+  params: ZodParams & {
+    value?: string[];
+    optional?: boolean;
+    name?: string;
+  } = {}
+) => arrayField({ elementSchema: z.string(), ...params });
+
+export type StringArrayField = ReturnType<typeof stringArrayField>;
+
+export type StringArrayFieldValue = ExtractAtomValue<
+  ExtractAtomValue<StringArrayField>["value"]
+>;

src/fields/multi-select-field/useMultiSelectFieldProps.tsx → src/fields/array-field/useArrayFieldProps.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from "react";
 
-import { MultiSelectFieldAtom } from "./multiSelectField";
+import { StringArrayField, StringArrayFieldValue } from "./stringArrayField";
 import { FieldProps, OptionProps, useFieldProps } from "../../hooks";
 
 // TODO: make not dependent on checkbox input event
@@ -9,10 +9,8 @@ const getEventValue = (event: ChangeEvent<HTMLInputElement>, value: string[]) =>
     ? [...value, event.target.value]
     : value.filter((val) => val != event.target.value);
 
-export type MultiSelectFieldProps<Option, OptionValue = string> = FieldProps<
-  MultiSelectFieldAtom<OptionValue>
-> &
-  OptionProps<Option, OptionValue, OptionValue[]>;
+export type StringArrayFieldProps<Option> = FieldProps<StringArrayField> &
+  OptionProps<Option, string, StringArrayFieldValue>;
 
-export const useMultiSelectFieldProps = (field: MultiSelectFieldAtom) =>
+export const useArrayFieldProps = (field: StringArrayField) =>
   useFieldProps<string[], HTMLInputElement>(field, getEventValue);

src/fields/boolean-field/booleanField.stories.tsx

@@ -3,7 +3,7 @@ import { useBooleanFieldProps } from "./useBooleanFieldProps";
 import { FieldLabel } from "../../components";
 import { FieldErrors } from "../../components/field-errors";
 import { FormStory, fixArgs, meta } from "../../scenarios/StoryForm";
-import { SelectFieldProps, useSelectOptions } from "../select-field";
+import { SelectFieldProps, useSelectOptions } from "../string-field";
 
 export default {
   ...meta,

src/fields/boolean-field/booleanField.ts

@@ -1,20 +1,19 @@
-import { z } from "zod";
+import { ExtractAtomValue } from "jotai";
+import { ZodBoolean, z } from "zod";
 
-import {
-  ValidatedFieldAtom,
-  ValidatedFieldAtomConfig,
-  validatedFieldAtom,
-} from "..";
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
 import { ZodParams, defaultParams } from "../zodParams";
 
-export type BooleanFieldValue = boolean | undefined;
+export type BooleanFieldAtom = ReturnType<typeof booleanField>;
 
-export type BooleanFieldAtom = ValidatedFieldAtom<BooleanFieldValue>;
+export type BooleanFieldValue = ExtractAtomValue<
+  ExtractAtomValue<BooleanFieldAtom>["value"]
+>;
 
 export const booleanField = ({
   required_error = defaultParams.required_error,
   ...config
-}: Partial<ValidatedFieldAtomConfig<BooleanFieldValue>> & ZodParams = {}) =>
+}: Partial<ValidatedFieldAtomConfig<ZodBoolean>> & ZodParams = {}) =>
   validatedFieldAtom({
     value: undefined,
     schema: z.boolean({ required_error }),

src/fields/checkbox-field/checkboxField.ts

@@ -1,20 +1,25 @@
-import { z } from "zod";
+import { ExtractAtomValue } from "jotai";
+import { ZodBoolean, ZodLiteral, z } from "zod";
 
-import {
-  ValidatedFieldAtom,
-  ValidatedFieldAtomConfig,
-  validatedFieldAtom,
-} from "..";
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
 import { ZodParams, defaultParams } from "../zodParams";
 
-export type CheckboxFieldValue = boolean;
+export type CheckboxFieldAtom = ReturnType<typeof checkboxField>;
 
-export type CheckboxFieldAtom = ValidatedFieldAtom<CheckboxFieldValue>;
+export type CheckboxFieldValue = ExtractAtomValue<
+  ExtractAtomValue<CheckboxFieldAtom>["value"]
+>;
 
 export const checkboxField = ({
   required_error = defaultParams.required_error,
   ...config
-}: Partial<ValidatedFieldAtomConfig<CheckboxFieldValue>> & ZodParams = {}) =>
+}: Partial<
+  Omit<
+    ValidatedFieldAtomConfig<ZodLiteral<true>, ZodBoolean>,
+    "schema" | "optionalSchema" | "validate"
+  >
+> &
+  ZodParams = {}) =>
   validatedFieldAtom({
     value: false,
     /**

src/fields/file-field/fileField.ts

@@ -1,20 +1,22 @@
+import { ExtractAtomValue } from "jotai";
 import { z } from "zod";
 
-import {
-  ValidatedFieldAtom,
-  ValidatedFieldAtomConfig,
-  validatedFieldAtom,
-} from "..";
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
 import { ZodParams, defaultParams } from "../zodParams";
 
-export type FileFieldValue = FileList | undefined;
+export type FileFieldAtom = ReturnType<typeof fileField>;
 
-export type FileFieldAtom = ValidatedFieldAtom<FileFieldValue>;
+export type FileFieldValue = ExtractAtomValue<
+  ExtractAtomValue<FileFieldAtom>["value"]
+>;
+
+const fileListInstanceSchema = z.instanceof(FileList);
+type ZodFileListInstance = typeof fileListInstanceSchema;
 
 export const fileField = ({
   required_error = defaultParams.required_error,
   ...config
-}: Partial<ValidatedFieldAtomConfig<FileFieldValue>> & ZodParams = {}) =>
+}: Partial<ValidatedFieldAtomConfig<ZodFileListInstance>> & ZodParams = {}) =>
   validatedFieldAtom({
     value: undefined,
     schema: z.instanceof(FileList, required_error),

src/fields/index.ts

@@ -1,8 +1,8 @@
 export * from "./boolean-field";
 export * from "./checkbox-field";
 export * from "./file-field";
-export * from "./multi-select-field";
+export * from "./array-field";
 export * from "./number-field";
-export * from "./select-field";
+export * from "./string-field";
 export * from "./text-field";
 export * from "./validatedFieldAtom";

src/fields/number-field/numberField.ts

@@ -1,20 +1,19 @@
-import { z } from "zod";
+import { ExtractAtomValue } from "jotai";
+import { ZodNumber, z } from "zod";
 
-import {
-  ValidatedFieldAtom,
-  ValidatedFieldAtomConfig,
-  validatedFieldAtom,
-} from "..";
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
 import { ZodParams, defaultParams } from "../zodParams";
 
-export type NumberFieldValue = number | undefined;
+export type NumberFieldAtom = ReturnType<typeof numberField>;
 
-export type NumberFieldAtom = ValidatedFieldAtom<NumberFieldValue>;
+export type NumberFieldValue = ExtractAtomValue<
+  ExtractAtomValue<NumberFieldAtom>["value"]
+>;
 
 export const numberField = ({
   required_error = defaultParams.required_error,
   ...config
-}: Partial<ValidatedFieldAtomConfig<NumberFieldValue>> & ZodParams = {}) =>
+}: Partial<ValidatedFieldAtomConfig<ZodNumber>> & ZodParams = {}) =>
   validatedFieldAtom({
     value: undefined,
     schema: z.number({ required_error }),

src/fields/string-field/index.ts

@@ -0,0 +1,2 @@
+export * from "./stringField";
+export * from "./useSelectFieldProps";

src/fields/select-field/selectField.stories.tsx → src/fields/string-field/selectField.stories.tsx

@@ -1,8 +1,11 @@
 import { ReactNode } from "react";
 
-import { SelectFieldAtom, selectField } from "./selectField";
+import { SelectFieldAtom, selectField } from "./stringField";
 import { useSelectFieldProps } from "./useSelectFieldProps";
-import { SelectOptionsProps, useSelectOptions } from "./useSelectOptions";
+import {
+  SelectOptionsProps,
+  useSelectOptions,
+} from "../../hooks/use-select-options/useSelectOptions";
 import { FieldLabel } from "../../components";
 import { FieldErrors } from "../../components/field-errors";
 import { FormStory, fixArgs, meta } from "../../scenarios/StoryForm";

src/fields/string-field/stringField.ts

@@ -0,0 +1,21 @@
+import { ExtractAtomValue } from "jotai";
+import { ZodString, z } from "zod";
+
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
+import { ZodParams, defaultParams } from "../zodParams";
+
+export type StringFieldAtom = ReturnType<typeof stringField>;
+
+export type StringFieldValue = ExtractAtomValue<
+  ExtractAtomValue<StringFieldAtom>["value"]
+>;
+
+export const stringField = ({
+  required_error = defaultParams.required_error,
+  ...config
+}: Partial<ValidatedFieldAtomConfig<ZodString>> & ZodParams = {}) =>
+  validatedFieldAtom({
+    value: undefined,
+    schema: z.string({ required_error }),
+    ...config,
+  });

src/fields/select-field/useSelectFieldProps.tsx → src/fields/string-field/useSelectFieldProps.tsx

@@ -1,13 +1,14 @@
 import { ChangeEvent } from "react";
 
-import { SelectFieldAtom } from "./selectField";
+import { StringFieldAtom } from "./stringField";
 import { useFieldProps } from "../../hooks";
 
 const getEventValue = (
   event: ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLInputElement>
 ) => event.target.value || undefined;
 
-export const useSelectFieldProps = (field: SelectFieldAtom) =>
+// TODO: Coerce primitives & make generic
+export const useSelectFieldProps = (field: StringFieldAtom) =>
   useFieldProps<string | undefined, HTMLSelectElement | HTMLInputElement>(
     field,
     getEventValue

src/fields/text-field/textField.ts

@@ -1,20 +1,19 @@
-import { z } from "zod";
+import { ExtractAtomValue } from "jotai";
+import { ZodString, z } from "zod";
 
-import {
-  ValidatedFieldAtom,
-  ValidatedFieldAtomConfig,
-  validatedFieldAtom,
-} from "..";
+import { ValidatedFieldAtomConfig, validatedFieldAtom } from "..";
 import { ZodParams, defaultParams } from "../zodParams";
 
-export type TextFieldValue = string;
+export type TextFieldAtom = ReturnType<typeof textField>;
 
-export type TextFieldAtom = ValidatedFieldAtom<TextFieldValue>;
+export type TextFieldValue = ExtractAtomValue<
+  ExtractAtomValue<TextFieldAtom>["value"]
+>;
 
 export const textField = ({
   required_error = defaultParams.required_error,
   ...config
-}: Partial<ValidatedFieldAtomConfig<TextFieldValue>> & ZodParams = {}) =>
+}: Partial<ValidatedFieldAtomConfig<ZodString, ZodString>> & ZodParams = {}) =>
   validatedFieldAtom({
     value: "",
     // https://github.com/colinhacks/zod/issues/63