@strictly/react-form 0.0.1 → 0.0.2

package/field_converters/specs/chain_field_converter.tests.ts

@@ -0,0 +1,302 @@
+import {
+  chainAnnotatedFieldConverter,
+  chainUnreliableFieldConverter,
+} from 'field_converters/chain_field_converter'
+import {
+  type AnnotatedFieldConversion,
+  type AnnotatedFieldConverter,
+  type UnreliableFieldConversion,
+  UnreliableFieldConversionType,
+  type UnreliableFieldConverter,
+} from 'types/field_converters'
+import { type Mock } from 'vitest'
+
+const CONTEXT = 'ctx'
+const ERROR1 = 'error 1'
+const ERROR2 = 'error 2'
+
+describe('chainUnreliableFieldConverter', function () {
+  const from: Mock<UnreliableFieldConverter<number, boolean, typeof ERROR1, 'x', typeof CONTEXT>> = vi.fn()
+  const to: Mock<UnreliableFieldConverter<boolean, string, typeof ERROR2, 'x', typeof CONTEXT>> = vi.fn()
+
+  let chained: UnreliableFieldConverter<number, string, typeof ERROR1 | typeof ERROR2, 'x', typeof CONTEXT>
+  let result: UnreliableFieldConversion<string, typeof ERROR1 | typeof ERROR2>
+
+  beforeEach(function () {
+    from.mockReset()
+    to.mockReset()
+
+    chained = chainUnreliableFieldConverter(from, to)
+  })
+  describe('from succeeds', function () {
+    beforeEach(function () {
+      from.mockReturnValue({
+        type: UnreliableFieldConversionType.Success,
+        value: true,
+      })
+    })
+
+    describe('to succeeds', function () {
+      beforeEach(function () {
+        to.mockReturnValue({
+          type: UnreliableFieldConversionType.Success,
+          value: 'x',
+        })
+        result = chained(1, 'x', CONTEXT)
+      })
+
+      it('equals expected type', function () {
+        expect(result).toEqual({
+          type: UnreliableFieldConversionType.Success,
+          value: 'x',
+        })
+      })
+
+      it('has the original value passed to the from converter', function () {
+        expect(from).toHaveBeenCalledOnce()
+        expect(from).toHaveBeenCalledWith(1, 'x', CONTEXT)
+      })
+
+      it('has passed the from result to the to converter', function () {
+        expect(to).toHaveBeenCalledOnce()
+        expect(to).toHaveBeenCalledWith(true, 'x', CONTEXT)
+      })
+    })
+
+    describe('to fails with result', function () {
+      beforeEach(function () {
+        to.mockReturnValue({
+          type: UnreliableFieldConversionType.Failure,
+          value: ['y'],
+          error: ERROR2,
+        })
+        result = chained(1, 'x', CONTEXT)
+      })
+
+      it('equals expected type', function () {
+        expect(result).toEqual({
+          type: UnreliableFieldConversionType.Failure,
+          value: ['y'],
+          error: ERROR2,
+        })
+      })
+    })
+  })
+
+  describe('from fails with a value', function () {
+    beforeEach(function () {
+      from.mockReturnValue({
+        type: UnreliableFieldConversionType.Failure,
+        value: [true],
+        error: ERROR1,
+      })
+    })
+
+    describe('to succeeds', function () {
+      beforeEach(function () {
+        to.mockReturnValue({
+          type: UnreliableFieldConversionType.Success,
+          value: 'x',
+        })
+        result = chained(1, 'x', CONTEXT)
+      })
+
+      it('equals expected type', function () {
+        expect(result).toEqual({
+          type: UnreliableFieldConversionType.Failure,
+          value: ['x'],
+          error: ERROR1,
+        })
+      })
+
+      it('has the original value passed to the from converter', function () {
+        expect(from).toHaveBeenCalledOnce()
+        expect(from).toHaveBeenCalledWith(1, 'x', CONTEXT)
+      })
+
+      it('passes the failure result to the to converter', function () {
+        expect(to).toHaveBeenCalledOnce()
+        expect(to).toHaveBeenCalledWith(true, 'x', CONTEXT)
+      })
+    })
+
+    describe('to fails', function () {
+      beforeEach(function () {
+        to.mockReturnValue({
+          type: UnreliableFieldConversionType.Failure,
+          value: ['x'],
+          error: ERROR2,
+        })
+        result = chained(1, 'x', CONTEXT)
+      })
+
+      it('equals expected type', function () {
+        expect(result).toEqual({
+          type: UnreliableFieldConversionType.Failure,
+          value: ['x'],
+          error: ERROR1,
+        })
+      })
+    })
+  })
+
+  describe('from fails with no value', function () {
+    beforeEach(function () {
+      from.mockReturnValue({
+        type: UnreliableFieldConversionType.Failure,
+        value: null,
+        error: ERROR1,
+      })
+      result = chained(1, 'x', CONTEXT)
+    })
+
+    it('equals expected type', function () {
+      expect(result).toEqual({
+        type: UnreliableFieldConversionType.Failure,
+        value: null,
+        error: ERROR1,
+      })
+    })
+
+    it('does not call to converter', function () {
+      expect(to).not.toHaveBeenCalled()
+    })
+  })
+})
+
+describe('chainAnnotatedFieldConverter', function () {
+  const from: Mock<AnnotatedFieldConverter<string, boolean, 'x', typeof CONTEXT>> = vi.fn()
+  const to: Mock<AnnotatedFieldConverter<boolean, number, 'x', typeof CONTEXT>> = vi.fn()
+
+  let chained: AnnotatedFieldConverter<string, number, 'x', typeof CONTEXT>
+  let result: AnnotatedFieldConversion<number>
+
+  beforeEach(function () {
+    from.mockReset()
+    to.mockReset()
+
+    chained = chainAnnotatedFieldConverter(from, to)
+  })
+
+  describe('value', function () {
+    beforeEach(function () {
+      from.mockReturnValue({
+        value: true,
+        readonly: false,
+        required: false,
+      })
+      to.mockReturnValue({
+        value: 1,
+        readonly: false,
+        required: false,
+      })
+      result = chained('z', 'x', CONTEXT)
+    })
+
+    it('returns expected value', function () {
+      expect(result).toEqual(
+        expect.objectContaining({
+          value: 1,
+        }),
+      )
+    })
+
+    it('calls the from converter', function () {
+      expect(from).toHaveBeenCalledOnce()
+      expect(from).toHaveBeenCalledWith('z', 'x', CONTEXT)
+    })
+
+    it('calls the to converter', function () {
+      expect(to).toHaveBeenCalledOnce()
+      expect(to).toHaveBeenCalledWith(true, 'x', CONTEXT)
+    })
+  })
+
+  describe.each([
+    [
+      true,
+      true,
+      true,
+    ],
+    [
+      true,
+      false,
+      true,
+    ],
+    [
+      false,
+      true,
+      true,
+    ],
+    [
+      false,
+      false,
+      false,
+    ],
+  ] as const)(
+    'from required %s to required %s result %s',
+    function (fromRequired, toRequired, required) {
+      beforeEach(function () {
+        from.mockReturnValue({
+          value: true,
+          readonly: false,
+          required: fromRequired,
+        })
+        to.mockReturnValue({
+          value: 1,
+          readonly: false,
+          required: toRequired,
+        })
+        result = chained('z', 'x', CONTEXT)
+      })
+
+      it('required matches expected', function () {
+        expect(result.required).toEqual(required)
+      })
+    },
+  )
+
+  describe.each([
+    [
+      true,
+      true,
+      true,
+    ],
+    [
+      true,
+      false,
+      true,
+    ],
+    [
+      false,
+      true,
+      true,
+    ],
+    [
+      false,
+      false,
+      false,
+    ],
+  ] as const)(
+    'from disabled %s to disabled %s result %s',
+    function (fromDisabled, toDisabled, disabled) {
+      beforeEach(function () {
+        from.mockReturnValue({
+          value: true,
+          readonly: fromDisabled,
+          required: false,
+        })
+        to.mockReturnValue({
+          value: 1,
+          readonly: toDisabled,
+          required: false,
+        })
+        result = chained('z', 'x', CONTEXT)
+      })
+
+      it('required matches expected', function () {
+        expect(result.readonly).toEqual(disabled)
+      })
+    },
+  )
+})

package/field_converters/trimming_string_converter.ts

@@ -1,7 +1,8 @@
 import {
-  type FieldConversion,
-  FieldConversionResult,
+  type AnnotatedFieldConversion,
   type TwoWayFieldConverter,
+  type UnreliableFieldConversion,
+  UnreliableFieldConversionType,
 } from 'types/field_converters'
 
 export class TrimmingStringConverter<ValuePath extends string, Context>
@@ -10,13 +11,17 @@ export class TrimmingStringConverter<ValuePath extends string, Context>
   constructor() {
   }
 
-  convert(to: string): string {
-    return to.trim()
+  convert(to: string): AnnotatedFieldConversion<string> {
+    return {
+      value: to.trim(),
+      required: false,
+      readonly: false,
+    }
   }
 
-  revert(from: string): FieldConversion<string, never> {
+  revert(from: string): UnreliableFieldConversion<string, never> {
     return {
-      type: FieldConversionResult.Success,
+      type: UnreliableFieldConversionType.Success,
       value: from.trim(),
     }
   }

package/field_converters/validating_converter.ts

@@ -1,24 +1,34 @@
 import {
-  type FieldConversion,
-  FieldConversionResult,
-  type FieldConverter,
+  validate,
+  type Validator,
+} from '@strictly/define'
+import {
+  type UnreliableFieldConversion,
+  UnreliableFieldConversionType,
+  type UnreliableFieldConverter,
 } from 'types/field_converters'
-import { type FieldValidator } from 'types/field_validator'
 
+// delete this?
 export function validatingConverter<
   V,
   E,
   ValuePath extends string,
   Context,
->(validators: readonly FieldValidator<V, E, ValuePath, Context>[] = []): FieldConverter<V, V, E, ValuePath, Context> {
-  return function (value: V, valuePath: ValuePath, context: Context): FieldConversion<V, E> {
-    return validators.reduce<FieldConversion<V, E>>(
+>(validators: readonly Validator<V, E, ValuePath, Context>[] = []): UnreliableFieldConverter<
+  V,
+  V,
+  E,
+  ValuePath,
+  Context
+> {
+  return function (value: V, valuePath: ValuePath, context: Context): UnreliableFieldConversion<V, E> {
+    return validators.reduce<UnreliableFieldConversion<V, E>>(
       function (acc, validator) {
-        if (acc.type === FieldConversionResult.Success) {
-          const error = validator(value, valuePath, context)
+        if (acc.type === UnreliableFieldConversionType.Success) {
+          const error = validate(validator, value, valuePath, context)
           if (error != null) {
             return {
-              type: FieldConversionResult.Failure,
+              type: UnreliableFieldConversionType.Failure,
               error,
               value: [value],
             }
@@ -27,7 +37,7 @@ export function validatingConverter<
         return acc
       },
       {
-        type: FieldConversionResult.Success,
+        type: UnreliableFieldConversionType.Success,
         value,
       },
     )

package/index.ts

@@ -1,6 +1,11 @@
+export * from './core/mobx/field_adapter'
 export * from './core/mobx/field_adapter_builder'
+export * from './core/mobx/field_adapters_of_values'
 export * from './core/mobx/flattened_adapters_of_fields'
+export * from './core/mobx/form_fields_of_field_adapters'
 export * from './core/mobx/form_presenter'
+export * from './core/mobx/merge_field_adapters_with_two_way_converter'
+export * from './core/mobx/merge_field_adapters_with_validators'
 export * from './core/mobx/types'
 export * from './core/props'
 export * from './field_converters/integer_to_string_converter'
@@ -8,9 +13,11 @@ export * from './field_converters/nullable_to_boolean_converter'
 export * from './field_converters/select_value_type_converter'
 export * from './field_converters/trimming_string_converter'
 export * from './field_converters/validating_converter'
-export * from './field_validators/minimum_string_length_field_validator'
 export * from './field_value_factories/prototyping_field_value_factory'
+export * from './mantine/error_renderer'
 export * from './mantine/hooks'
+export * from './types/error_of_field'
 export * from './types/field'
-export * from './types/flattened_form_fields_of'
+export * from './types/field_converters'
+export * from './types/merge_validators'
 export * from './util/partial'

package/mantine/create_checkbox.tsx

@@ -3,10 +3,13 @@ import {
 } from '@mantine/core'
 import { type ComponentType } from 'react'
 import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields'
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import { type Fields } from 'types/field'
 import { createUnsafePartialObserverComponent } from 'util/partial'
-import { type ErrorRenderer } from './hooks'
+import {
+  DefaultErrorRenderer,
+  type ErrorRenderer,
+} from './error_renderer'
 import {
   type MantineFieldComponent,
   type MantineForm,
@@ -33,8 +36,7 @@ export function createCheckbox<
   this: MantineForm<F>,
   valuePath: K,
   Checkbox: ComponentType<Props>,
-  ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>,
-): MantineFieldComponent<SuppliedCheckboxProps, Props> {
+): MantineFieldComponent<SuppliedCheckboxProps, Props, ErrorOfField<F[K]>> {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.onFieldValueChange?.(valuePath, e.target.checked)
   }
@@ -52,9 +54,13 @@ export function createCheckbox<
     }
   }
 
-  const propSource = () => {
+  const propSource = ({
+    ErrorRenderer = DefaultErrorRenderer,
+  }: {
+    ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>>,
+  }) => {
     const {
-      disabled,
+      readonly,
       required,
       value,
       error,
@@ -63,7 +69,7 @@ export function createCheckbox<
     return {
       name: valuePath,
       checked: value,
-      disabled,
+      disabled: readonly,
       required,
       error: error && <ErrorRenderer error={error} />,
       onChange,
@@ -72,8 +78,9 @@ export function createCheckbox<
       onKeyUp,
     }
   }
-  return createUnsafePartialObserverComponent<typeof Checkbox, SuppliedCheckboxProps>(
+  return createUnsafePartialObserverComponent(
     Checkbox,
     propSource,
+    ['ErrorRenderer'],
   )
 }

package/mantine/create_list.tsx

@@ -34,10 +34,7 @@ export function createList<
       values,
     }
   }
-  return createUnsafePartialObserverComponent<
-    typeof List,
-    SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>
-  >(List, propSource)
+  return createUnsafePartialObserverComponent(List, propSource)
 }
 
 export function DefaultList<

package/mantine/create_pill.tsx

@@ -28,7 +28,7 @@ export function createPill<
 ): MantineFieldComponent<SuppliedPillProps, Props> {
   const propSource = () => {
     const {
-      disabled,
+      readonly,
       value,
       // note: individual pills cannot display an error!
       // error,
@@ -36,7 +36,7 @@ export function createPill<
     } = this.fields[valuePath as string]
     return {
       children: value,
-      disabled,
+      disabled: readonly,
     }
   }
   return createUnsafePartialObserverComponent<typeof Pill, SuppliedPillProps>(Pill, propSource)

package/mantine/create_radio.tsx

@@ -25,7 +25,7 @@ export function createRadio<
 ): MantineFieldComponent<SuppliedRadioProps, Props> {
   const propSource = () => {
     return {
-      disabled: this.fields[valuePath].disabled,
+      disabled: this.fields[valuePath].readonly,
       value,
     }
   }

package/mantine/create_radio_group.tsx

@@ -2,7 +2,7 @@ import {
   type RadioGroupProps,
 } from '@mantine/core'
 import { type ComponentType } from 'react'
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import {
   type Fields,
 } from 'types/field'
@@ -10,7 +10,10 @@ import { type StringFieldsOfFields } from 'types/string_fields_of_fields'
 import {
   createUnsafePartialObserverComponent,
 } from 'util/partial'
-import { type ErrorRenderer } from './hooks'
+import {
+  DefaultErrorRenderer,
+  type ErrorRenderer,
+} from './error_renderer'
 import {
   type MantineFieldComponent,
   type MantineForm,
@@ -29,8 +32,7 @@ export function createRadioGroup<
   this: MantineForm<F>,
   valuePath: K,
   RadioGroup: ComponentType<Props>,
-  ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>,
-): MantineFieldComponent<SuppliedRadioGroupProps, Props> {
+): MantineFieldComponent<SuppliedRadioGroupProps, Props, ErrorOfField<F[K]>> {
   const onChange = (value: string) => {
     this.onFieldValueChange?.(valuePath, value)
   }
@@ -48,7 +50,7 @@ export function createRadioGroup<
     }
   }
 
-  const propSource = () => {
+  const propSource = ({ ErrorRenderer = DefaultErrorRenderer }: { ErrorRenderer?: ErrorRenderer }) => {
     const {
       required,
       value,
@@ -67,5 +69,5 @@ export function createRadioGroup<
     }
   }
 
-  return createUnsafePartialObserverComponent(RadioGroup, propSource)
+  return createUnsafePartialObserverComponent(RadioGroup, propSource, ['ErrorRenderer'])
 }

package/mantine/create_text_input.tsx

@@ -1,8 +1,11 @@
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import { type Fields } from 'types/field'
 import { type StringFieldsOfFields } from 'types/string_fields_of_fields'
 import { createUnsafePartialObserverComponent } from 'util/partial'
-import { type ErrorRenderer } from './hooks'
+import {
+  DefaultErrorRenderer,
+  type ErrorRenderer,
+} from './error_renderer'
 import {
   type MantineFieldComponent,
   type MantineForm,
@@ -33,8 +36,7 @@ export function createTextInput<
   this: MantineForm<F>,
   valuePath: K,
   TextInput: React.ComponentType<Props>,
-  ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>,
-): MantineFieldComponent<SuppliedTextInputProps, Props> {
+): MantineFieldComponent<SuppliedTextInputProps, Props, ErrorOfField<F[K]>> {
   const onChange = (e: React.ChangeEvent<TextInputTarget>) => {
     this.onFieldValueChange?.(valuePath, e.target.value)
   }
@@ -52,9 +54,13 @@ export function createTextInput<
     }
   }
 
-  const propSource = () => {
+  const propSource = ({
+    ErrorRenderer = DefaultErrorRenderer,
+  }: {
+    ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>>,
+  }) => {
     const {
-      disabled,
+      readonly,
       required,
       value,
       error,
@@ -64,7 +70,7 @@ export function createTextInput<
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       name: valuePath as string,
       value,
-      disabled,
+      disabled: readonly,
       required,
       error: error && <ErrorRenderer error={error} />,
       onChange,
@@ -73,8 +79,14 @@ export function createTextInput<
       onKeyUp,
     }
   }
-  return createUnsafePartialObserverComponent<typeof TextInput, SuppliedTextInputProps>(
+  return createUnsafePartialObserverComponent<
+    typeof TextInput,
+    SuppliedTextInputProps,
+    { ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>> },
+    ['ErrorRenderer']
+  >(
     TextInput,
     propSource,
+    ['ErrorRenderer'],
   )
 }

package/mantine/create_value_input.tsx

@@ -1,9 +1,12 @@
 import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import { type Fields } from 'types/field'
 import { type ValueTypeOfField } from 'types/value_type_of_field'
 import { createUnsafePartialObserverComponent } from 'util/partial'
-import { type ErrorRenderer } from './hooks'
+import {
+  DefaultErrorRenderer,
+  type ErrorRenderer,
+} from './error_renderer'
 import {
   type MantineFieldComponent,
   type MantineForm,
@@ -31,8 +34,7 @@ export function createValueInput<
   this: MantineForm<F>,
   valuePath: K,
   ValueInput: React.ComponentType<Props>,
-  ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>,
-): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, Props> {
+): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, Props, ErrorOfField<F[K]>> {
   const onChange = (value: ValueTypeOfField<F[K]>) => {
     this.onFieldValueChange?.(valuePath, value)
   }
@@ -50,9 +52,13 @@ export function createValueInput<
     }
   }
 
-  const propSource = () => {
+  const propSource = ({
+    ErrorRenderer = DefaultErrorRenderer,
+  }: {
+    ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>>,
+  }) => {
     const {
-      disabled,
+      readonly,
       required,
       value,
       error,
@@ -62,7 +68,7 @@ export function createValueInput<
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       name: valuePath as string,
       value,
-      disabled,
+      disabled: readonly,
       required,
       error: error && <ErrorRenderer error={error} />,
       onChange,
@@ -73,9 +79,12 @@ export function createValueInput<
   }
   return createUnsafePartialObserverComponent<
     typeof ValueInput,
-    SuppliedValueInputProps<ValueTypeOfField<F[K]>>
+    SuppliedValueInputProps<ValueTypeOfField<F[K]>>,
+    { ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>> },
+    ['ErrorRenderer']
   >(
     ValueInput,
     propSource,
+    ['ErrorRenderer'],
   )
 }