@strictly/react-form 0.0.8 → 0.0.10

package/.out/types/specs/error_of_field.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/types/specs/{error_type_of_field.tests.js → error_of_field.tests.js}

@@ -1,4 +1,4 @@
-describe('ErrorTypeOfField', function () {
+describe('ErrorOfField', function () {
     it('equals expected type', function () {
         const e = Symbol();
         expectTypeOf().toEqualTypeOf();

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 50.73 KB
-CJS ⚡️ Build success in 112ms
-ESM dist/index.js 46.84 KB
-ESM ⚡️ Build success in 113ms
+CJS dist/index.cjs 52.48 KB
+CJS ⚡️ Build success in 120ms
+ESM dist/index.js 48.52 KB
+ESM ⚡️ Build success in 120ms
 DTS Build start
-DTS ⚡️ Build success in 9662ms
-DTS dist/index.d.cts 36.94 KB
-DTS dist/index.d.ts  36.94 KB
-Done in 10.73s.
+DTS ⚡️ Build success in 9937ms
+DTS dist/index.d.cts 39.16 KB
+DTS dist/index.d.ts  39.16 KB
+Done in 11.10s.

package/.turbo/turbo-check-types.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc
-Done in 7.38s.
+Done in 7.83s.

package/core/mobx/field_adapter_builder.ts

@@ -7,12 +7,14 @@ import {
   unreliableIdentityConverter,
 } from 'field_converters/identity_converter'
 import { MaybeIdentityConverter } from 'field_converters/maybe_identity_converter'
+import { TrimmingStringConverter } from 'field_converters/trimming_string_converter'
 import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_field_value_factory'
 import {
   type AnnotatedFieldConverter,
   type FieldValueFactory,
   type TwoWayFieldConverter,
   type TwoWayFieldConverterWithValueFactory,
+  UnreliableFieldConversionType,
   type UnreliableFieldConverter,
 } from 'types/field_converters'
 import { type FieldAdapter } from './field_adapter'
@@ -82,6 +84,65 @@ class FieldAdapterBuilder<
     )
   }
 
+  nullable(): FieldAdapterBuilder<
+    From | null,
+    To | null,
+    E,
+    ValuePath,
+    Context
+  > {
+    return this.or(null)
+  }
+
+  optional(): FieldAdapterBuilder<
+    From | undefined,
+    To | undefined,
+    E,
+    ValuePath,
+    Context
+  > {
+    return this.or(undefined)
+  }
+
+  private or<V>(proto: V): FieldAdapterBuilder<
+    From | V,
+    To | V,
+    E,
+    ValuePath,
+    Context
+  > {
+    function isFrom(v: From | V): v is From {
+      return v !== proto
+    }
+    function isTo(v: To | V): v is To {
+      return v !== proto
+    }
+    return new FieldAdapterBuilder<
+      From | V,
+      To | V,
+      E,
+      ValuePath,
+      Context
+    >(
+      (v, valuePath, context) =>
+        isFrom(v)
+          ? this.convert(v, valuePath, context)
+          : {
+            value: v,
+            readonly: false,
+            required: false,
+          },
+      this.create,
+      (v, valuePath, context) =>
+        isTo(v) && this.revert
+          ? this.revert(v, valuePath, context)
+          : {
+            type: UnreliableFieldConversionType.Success,
+            value: proto,
+          },
+    )
+  }
+
   withIdentity(isFrom: (from: To | From) => from is From): FieldAdapterBuilder<
     From,
     To | From,
@@ -263,6 +324,16 @@ export function identityAdapter<
   )
 }
 
+export function trimmingStringAdapter<
+  ValuePath extends string,
+  Context,
+>() {
+  return adapterFromTwoWayConverter<string, string, never, ValuePath, Context>(
+    new TrimmingStringConverter<ValuePath, Context>(),
+    prototypingFieldValueFactory<string, ValuePath, Context>(''),
+  )
+}
+
 export function listAdapter<
   E,
   ValuePath extends string,

package/core/mobx/form_presenter.ts

@@ -102,7 +102,7 @@ export type ValuePathsToAdaptersOf<
   }
   : never
 
-export class FormPresenter<
+export abstract class FormPresenter<
   T extends Type,
   ValueToTypePaths extends Readonly<Record<string, string>>,
   TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<
@@ -116,7 +116,7 @@ export class FormPresenter<
 > {
   constructor(
     readonly type: T,
-    private readonly adapters: TypePathsToAdapters,
+    protected readonly adapters: TypePathsToAdapters,
   ) {
   }
 
@@ -361,7 +361,7 @@ export class FormPresenter<
     }
   }
 
-  clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(
+  clearFieldValue<K extends StringKeyOf<ValueToTypePaths>>(
     model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>,
     valuePath: K,
   ) {
@@ -375,8 +375,7 @@ export class FormPresenter<
       convert,
       create,
     } = adapter
-    const accessor = model.accessors[valuePath]
-    const value = accessor == null ? create(valuePath, model.value) : accessor.value
+    const value = create(valuePath, model.value)
     const {
       value: displayValue,
     } = convert(value, valuePath, model.value)
@@ -412,6 +411,7 @@ export class FormPresenter<
   validateField<K extends keyof ValuePathsToAdapters>(
     model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>,
     valuePath: K,
+    ignoreDefaultValue = false,
   ): boolean {
     const {
       convert,
@@ -436,7 +436,14 @@ export class FormPresenter<
       : storedValue
     const dirty = storedValue !== value
     assertExists(revert, 'changing field directly not supported {}', valuePath)
-
+    if (ignoreDefaultValue) {
+      const {
+        value: defaultDisplayValue,
+      } = convert(create(valuePath, model.value), valuePath, model.value)
+      if (defaultDisplayValue === value) {
+        return true
+      }
+    }
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const conversion = revert(value, valuePath as string, model.value)
     return runInAction(function () {
@@ -521,18 +528,12 @@ export class FormPresenter<
     })
   }
 
-  createModel(value: ValueOfType<ReadonlyTypeOfType<T>>): FormModel<
+  abstract createModel(value: ValueOfType<ReadonlyTypeOfType<T>>): FormModel<
     T,
     ValueToTypePaths,
     TypePathsToAdapters,
     ValuePathsToAdapters
-  > {
-    return new FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>(
-      this.type,
-      value,
-      this.adapters,
-    )
-  }
+  >
 }
 
 export class FormModel<

package/core/mobx/hooks.tsx

@@ -0,0 +1,196 @@
+import {
+  type ReadonlyTypeOfType,
+  type ValueOfType,
+} from '@strictly/define'
+import {
+  type FieldsViewProps,
+} from 'core/props'
+import {
+  type ComponentType,
+  useCallback,
+  useMemo,
+} from 'react'
+import {
+  createUnsafePartialObserverComponent,
+  type UnsafePartialComponent,
+} from 'util/partial'
+import { type FormPresenter } from './form_presenter'
+import {
+  type FormFieldsOfPresenter,
+  type ToValueOfPresenterValuePath,
+  type ValuePathsOfPresenter,
+} from './types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ValueOfPresenter<P extends FormPresenter<any, any, any, any>> = P extends FormPresenter<infer T, any, any, any>
+  ? ValueOfType<ReadonlyTypeOfType<T>>
+  : never
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ModelOfPresenter<P extends FormPresenter<any, any, any, any>> = ReturnType<P['createModel']>
+
+export function useDefaultMobxFormHooks<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  P extends FormPresenter<any, any, any, any>,
+  C extends ComponentType<FieldsViewProps<F>>,
+  F extends FormFieldsOfPresenter<P> = FormFieldsOfPresenter<P>,
+>(
+  presenter: P,
+  value: ValueOfPresenter<P>,
+  options?: {
+    onValidFieldSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void,
+    onValidFormSubmit?: (model: ModelOfPresenter<P>, value: ValueOfPresenter<P>) => void,
+  },
+): {
+  model: ModelOfPresenter<P>,
+  FormFields?: UnsafePartialComponent<C, FieldsViewProps<F>>,
+  onFormSubmit: () => void,
+  onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void,
+  onFieldFocus?(this: void, key: keyof F): void,
+  onFieldBlur?(this: void, key: keyof F): void,
+  onFieldSubmit?(this: void, key: keyof F): boolean | void,
+}
+export function useDefaultMobxFormHooks<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  P extends FormPresenter<any, any, any, any>,
+  C extends ComponentType<FieldsViewProps<F>>,
+  F extends FormFieldsOfPresenter<P> = FormFieldsOfPresenter<P>,
+>(
+  presenter: P,
+  value: ValueOfPresenter<P>,
+  options: {
+    onValidFieldSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void,
+    onValidFormSubmit?: (model: ModelOfPresenter<P>, value: ValueOfPresenter<P>) => void,
+    FormFieldsView: C,
+  },
+): {
+  model: ModelOfPresenter<P>,
+  FormFields: UnsafePartialComponent<C, FieldsViewProps<F>>,
+  onFormSubmit: () => void,
+  onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void,
+  onFieldFocus?(this: void, key: keyof F): void,
+  onFieldBlur?(this: void, key: keyof F): void,
+  onFieldSubmit?(this: void, key: keyof F): boolean | void,
+}
+export function useDefaultMobxFormHooks<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  P extends FormPresenter<any, any, any, any>,
+  C extends FieldsViewProps<F>,
+  F extends FormFieldsOfPresenter<P> = FormFieldsOfPresenter<P>,
+>(
+  presenter: P,
+  value: ValueOfPresenter<P>,
+  {
+    onValidFieldSubmit,
+    onValidFormSubmit,
+    FormFieldsView,
+  }: {
+    onValidFieldSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void,
+    onValidFormSubmit?: (model: ModelOfPresenter<P>, value: ValueOfPresenter<P>) => void,
+    FormFieldsView?: ComponentType<C>,
+  } = {},
+): {
+  model: ModelOfPresenter<P>,
+  FormFields?: UnsafePartialComponent<ComponentType<C>, FieldsViewProps<F>> | undefined,
+  onFormSubmit: () => void,
+  onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void,
+  onFieldFocus?(this: void, key: keyof F): void,
+  onFieldBlur?(this: void, key: keyof F): void,
+  onFieldSubmit?(this: void, key: keyof F): boolean | void,
+} {
+  const model = useMemo(function () {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return presenter.createModel(value) as ReturnType<P['createModel']>
+  }, [
+    presenter,
+    value,
+  ])
+
+  const onFieldValueChange = useCallback(
+    function<Path extends ValuePathsOfPresenter<P>> (
+      path: Path,
+      value: ToValueOfPresenterValuePath<P, Path>,
+    ) {
+      presenter.clearFieldError(model, path)
+      presenter.setFieldValue<Path>(model, path, value)
+    },
+    [
+      presenter,
+      model,
+    ],
+  )
+
+  const onFieldSubmit = useCallback(
+    function<Path extends ValuePathsOfPresenter<P>> (valuePath: Path) {
+      if (presenter.validateField(model, valuePath)) {
+        onValidFieldSubmit?.(model, valuePath)
+      }
+      return false
+    },
+    [
+      presenter,
+      model,
+      onValidFieldSubmit,
+    ],
+  )
+
+  const onFieldBlur = useCallback(
+    function<Path extends ValuePathsOfPresenter<P>> (path: Path) {
+      // work around potential loss of focus prior to state potentially invalidating change triggering
+      // (e.g. changing a discriminator)
+      // TODO debounce?
+      setTimeout(function () {
+        if (presenter.isValuePathActive(model, path)) {
+          presenter.validateField(model, path, true)
+        }
+      }, 100)
+    },
+    [
+      presenter,
+      model,
+    ],
+  )
+
+  const onFormSubmit = useCallback(
+    function () {
+      if (presenter.validateAll(model)) {
+        onValidFormSubmit?.(model, model.value)
+      }
+    },
+    [
+      presenter,
+      model,
+      onValidFormSubmit,
+    ],
+  )
+
+  const FormFields = useMemo(() => {
+    if (FormFieldsView == null) {
+      return undefined
+    }
+    return createUnsafePartialObserverComponent(FormFieldsView, (): FieldsViewProps<F> => {
+      return {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        fields: model.fields as C['fields'],
+        onFieldBlur,
+        onFieldSubmit,
+        onFieldValueChange,
+      }
+    })
+  }, [
+    model,
+    FormFieldsView,
+    onFieldBlur,
+    onFieldSubmit,
+    onFieldValueChange,
+  ])
+
+  return {
+    model,
+    onFieldValueChange,
+    onFieldSubmit,
+    onFieldBlur,
+    onFormSubmit,
+    FormFields,
+  }
+}

package/core/mobx/specs/form_presenter.tests.ts

@@ -6,10 +6,14 @@ import {
   nullType,
   numberType,
   object,
+  type ReadonlyOfTypeDef,
+  type ReadonlyTypeOfType,
   record,
   stringType,
+  type Type,
   union,
   type ValueOfType,
+  type ValueOfTypeDef,
   type ValueToTypePathsOfType,
 } from '@strictly/define'
 import { type FieldAdapter } from 'core/mobx/field_adapter'
@@ -39,6 +43,21 @@ import {
 
 const IS_NAN_ERROR = 1
 
+class TestFormPresenter<
+  T extends Type,
+  ValueToTypePaths extends Readonly<Record<string, string>>,
+  TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<
+    FlattenedValuesOfType<T, '*'>,
+    ValueOfType<ReadonlyTypeOfType<T>>
+  >,
+> extends FormPresenter<T, ValueToTypePaths, TypePathsToAdapters> {
+  override createModel(value: ValueOfTypeDef<ReadonlyOfTypeDef<T['definition']>, {}>): FormModel<T, ValueToTypePaths,
+    TypePathsToAdapters, ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>>
+  {
+    return new FormModel(this.type, value, this.adapters)
+  }
+}
+
 const originalIntegerToStringAdapter = adapterFromTwoWayConverter(
   new IntegerToStringConverter(IS_NAN_ERROR),
   prototypingFieldValueFactory(0),
@@ -479,7 +498,7 @@ describe('all', function () {
       const adapters = {
         $: integerToStringAdapter,
       } as const
-      const presenter = new FormPresenter<
+      const presenter = new TestFormPresenter<
         typeof typeDef,
         ValueToTypePathsOfType<typeof typeDef>,
         typeof adapters
@@ -600,7 +619,7 @@ describe('all', function () {
       const converters = {
         '$.*': integerToStringAdapter,
       } as const
-      const presenter = new FormPresenter<
+      const presenter = new TestFormPresenter<
         typeof typeDef,
         ValueToTypePathsOfType<typeof typeDef>,
         typeof converters
@@ -927,7 +946,7 @@ describe('all', function () {
           '$.*': integerToStringAdapter,
         } as const
         type ValueToTypePaths = ValueToTypePathsOfType<typeof type>
-        const presenter = new FormPresenter<
+        const presenter = new TestFormPresenter<
           typeof type,
           ValueToTypePaths,
           typeof adapters
@@ -997,7 +1016,7 @@ describe('all', function () {
           '$.x:a': identityAdapter(0).narrow,
           '$.y:b': identityAdapter(false).narrow,
         } as const
-        const presenter = new FormPresenter<
+        const presenter = new TestFormPresenter<
           typeof type,
           ValueToTypePaths,
           typeof adapters
@@ -1068,7 +1087,7 @@ describe('all', function () {
         $: '$',
         '$.fake': '$.fake',
       }
-      const presenter = new FormPresenter<
+      const presenter = new TestFormPresenter<
         typeof typeDef,
         JsonPaths,
         typeof converters

package/core/mobx/sub_form_field_adapters.ts

@@ -1,6 +1,7 @@
 import { type StringConcatOf } from '@strictly/base'
 import {
   flattenValuesOfType,
+  type ReadonlyTypeOfType,
   type Type,
   type ValueOfType,
 } from '@strictly/define'
@@ -47,10 +48,15 @@ export function subFormFieldAdapters<
   subAdapters: SubAdapters,
   parentTypePath: TypePath,
   contextType: ContextType,
-): SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath], ValueOfType<ContextType>> {
+): SubFormFieldAdapters<
+  SubAdapters,
+  TypePath,
+  TypePathsToValuePaths[TypePath],
+  ValueOfType<ReadonlyTypeOfType<ContextType>>
+> {
   // assume the number of '.' in the type path will correspond to the number of '.' in the value path
   const dotCount = parentTypePath.split('.').length
-  function getSubValuePathAndContext(valuePath: string, context: ValueOfType<ContextType>) {
+  function getSubValuePathAndContext(valuePath: string, context: ValueOfType<ReadonlyTypeOfType<ContextType>>) {
     const parentValuePath = valuePath.split('.').slice(0, dotCount).join('.')
     const subValuePath = valuePath.replace(parentValuePath, '$')
     const subContext = flattenValuesOfType(contextType, context)[parentValuePath]
@@ -80,5 +86,10 @@ export function subFormFieldAdapters<
     }
     acc[typePath] = adaptedAdapter
     return acc
-  }, {}) as SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath], ValueOfType<ContextType>>
+  }, {}) as SubFormFieldAdapters<
+    SubAdapters,
+    TypePath,
+    TypePathsToValuePaths[TypePath],
+    ValueOfType<ReadonlyTypeOfType<ContextType>>
+  >
 }