@strictly/react-form 0.0.5 → 0.0.7

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.js 43.08 KB
-ESM ⚡️ Build success in 117ms
-CJS dist/index.cjs 46.78 KB
-CJS ⚡️ Build success in 117ms
+CJS dist/index.cjs 50.08 KB
+CJS ⚡️ Build success in 121ms
+ESM dist/index.js 46.21 KB
+ESM ⚡️ Build success in 122ms
 DTS Build start
-DTS ⚡️ Build success in 9983ms
-DTS dist/index.d.cts 34.96 KB
-DTS dist/index.d.ts  34.96 KB
-Done in 11.02s.
+DTS ⚡️ Build success in 9863ms
+DTS dist/index.d.cts 36.28 KB
+DTS dist/index.d.ts  36.28 KB
+Done in 10.98s.

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

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

package/core/mobx/hooks.ts

@@ -0,0 +1,94 @@
+import {
+  type ReadonlyTypeOfType,
+  type ValueOfType,
+} from '@strictly/define'
+import { type FieldsViewProps } from 'core/props'
+import {
+  useCallback,
+  useMemo,
+} from 'react'
+import { type FormPresenter } from './form_presenter'
+import {
+  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']>
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>>(
+  presenter: P,
+  value: ValueOfPresenter<P>,
+  onValidSubmit?: <Path extends ValuePathsOfPresenter<P>>(
+    model: ModelOfPresenter<P>,
+    valuePath: Path,
+  ) => void,
+): {
+  model: ModelOfPresenter<P>,
+} & Omit<FieldsViewProps<ModelOfPresenter<P>['fields']>, 'fields'> {
+  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)) {
+        onValidSubmit?.(model, valuePath)
+      }
+      return false
+    },
+    [
+      presenter,
+      model,
+      onValidSubmit,
+    ],
+  )
+
+  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)
+        }
+      }, 100)
+    },
+    [
+      presenter,
+      model,
+    ],
+  )
+
+  return {
+    model,
+    onFieldValueChange,
+    onFieldSubmit,
+    onFieldBlur,
+  }
+}

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

@@ -85,14 +85,14 @@ describe('all', function () {
           ValueOfType<typeof typeDef>
         >
       >
-      let t: Partial<{
+      type C = Partial<{
         readonly $: ConvenientFieldAdapter<Readonly<Record<'a' | 'b', number>>, ValueOfType<typeof typeDef>>,
         readonly ['$.a']: ConvenientFieldAdapter<number, ValueOfType<typeof typeDef>>,
         readonly ['$.b']: ConvenientFieldAdapter<number, ValueOfType<typeof typeDef>>,
       }>
 
       it('equals expected type', function () {
-        expectTypeOf(t).toEqualTypeOf<T>()
+        expectTypeOf<C>().toEqualTypeOf<T>()
       })
     })
 
@@ -104,13 +104,13 @@ describe('all', function () {
         FlattenedValuesOfType<typeof typeDef>,
         ValueOfType<typeof typeDef>
       >
-      let t: Partial<{
+      type C = Partial<{
         readonly $: ConvenientFieldAdapter<{ readonly x: string, readonly y: boolean }, ValueOfType<typeof typeDef>>,
         readonly ['$.x']: ConvenientFieldAdapter<string, ValueOfType<typeof typeDef>>,
         readonly ['$.y']: ConvenientFieldAdapter<boolean, ValueOfType<typeof typeDef>>,
       }>
       it('equals expected type', function () {
-        expectTypeOf(t).toEqualTypeOf<T>()
+        expectTypeOf<C>().toEqualTypeOf<T>()
       })
 
       it('matches representative adapters', function () {
@@ -147,12 +147,12 @@ describe('all', function () {
         A,
         typeof valuePathsToTypePaths
       >
-      let t: {
+      type C = {
         readonly '$.a': A['$.x'],
         readonly '$.b': A['$.y'],
       }
       it('equals expected type', function () {
-        expectTypeOf(t).toEqualTypeOf<T>()
+        expectTypeOf<C>().toEqualTypeOf<T>()
       })
     })
   })

package/core/mobx/specs/{merge_field_adapters_with_two_way_converter.ts → merge_field_adapters_with_two_way_converter.tests.ts}

@@ -33,14 +33,14 @@ describe('MergedOfFieldAdapterWithTwoWayConverter', function () {
   }
   type M = MergedOfFieldAdaptersWithTwoWayConverter<T, typeof error4, typeof context>
 
-  let m: {
+  type C = {
     readonly x: FieldAdapter<boolean, string, typeof error1 | typeof error4, 'x', typeof context>,
     readonly y: FieldAdapter<number, boolean, typeof error2 | typeof error4, 'y', typeof context>,
     readonly z: FieldAdapter<string, number, typeof error3 | typeof error4, 'z', typeof context>,
   }
 
   it('merges the errors', function () {
-    expectTypeOf<M>().toEqualTypeOf(m)
+    expectTypeOf<M>().toEqualTypeOf<C>()
   })
 })
 
@@ -117,23 +117,23 @@ describe('mergeFieldAdaptersWithTwoWayConverter', function () {
         beforeEach(function () {
           result = merged.booleanAdapter.revert!(true, 'booleanAdapter', context)
         })
-      })
 
-      it('returns the same value on revert', function () {
-        expect(result).toEqual(expect.objectContaining({
-          value: true,
-          type: UnreliableFieldConversionType.Success,
-        }))
-      })
+        it('returns the same value on revert', function () {
+          expect(result).toEqual(expect.objectContaining({
+            value: true,
+            type: UnreliableFieldConversionType.Success,
+          }))
+        })
 
-      it('calls the mocked converter', function () {
-        expect(converter.revert).toHaveBeenCalledOnce()
-        expect(converter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context)
-      })
+        it('calls the mocked converter', function () {
+          expect(converter.revert).toHaveBeenCalledOnce()
+          expect(converter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context)
+        })
 
-      it('calls the mocked adapter', function () {
-        expect(booleanAdapter.revert).toHaveBeenCalledOnce()
-        expect(booleanAdapter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context)
+        it('calls the mocked adapter', function () {
+          expect(booleanAdapter.revert).toHaveBeenCalledOnce()
+          expect(booleanAdapter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context)
+        })
       })
     })
   })

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

@@ -1,15 +1,23 @@
+import {
+  numberType,
+  object,
+  stringType,
+} from '@strictly/define'
 import { type FieldAdapter } from 'core/mobx/field_adapter'
 import {
   subFormFieldAdapters,
 } from 'core/mobx/sub_form_field_adapters'
+import { UnreliableFieldConversionType } from 'types/field_converters'
 import { mockDeep } from 'vitest-mock-extended'
 
 describe('subFormFieldAdapters', () => {
-  const fieldAdapter1: FieldAdapter<string, boolean> = mockDeep()
-  const fieldAdapter2: FieldAdapter<number, boolean> = mockDeep()
+  const mockedFieldAdapter1 = mockDeep<Required<FieldAdapter<string, boolean>>>()
+  const fieldAdapter1: FieldAdapter<string, boolean> = mockedFieldAdapter1
+  const mockedFieldAdapter2 = mockDeep<FieldAdapter<number, boolean>>()
+  const fieldAdapter2: FieldAdapter<number, boolean> = mockedFieldAdapter2
 
   describe('empty value', () => {
-    const adapters = subFormFieldAdapters({}, '$.a')
+    const adapters = subFormFieldAdapters({}, '$.a', stringType)
 
     it('equals expected type', () => {
       expectTypeOf(adapters).toEqualTypeOf<{}>()
@@ -21,29 +29,68 @@ describe('subFormFieldAdapters', () => {
   })
 
   describe('single adapter', () => {
+    const type = object().field('a', stringType)
     const adapters = subFormFieldAdapters({
       $: fieldAdapter1,
-    }, '$.a')
+    }, '$.a', type)
 
     it('equals expected type', () => {
-      expectTypeOf(adapters).toEqualTypeOf<{
+      // TODO toEqualTypeOf (seems to be a TS error)
+      expectTypeOf(adapters).toMatchTypeOf<{
         '$.a': FieldAdapter<string, boolean>,
       }>()
     })
 
     it('equals expected value', () => {
-      expect(adapters).toEqual({ '$.a': fieldAdapter1 })
+      expect(adapters).toEqual({ '$.a': expect.anything() })
+    })
+
+    it('calls convert with the correct paths and values', () => {
+      const mockedReturnedValue = {
+        value: false,
+        required: false,
+        readonly: false,
+      }
+      mockedFieldAdapter1.convert.mockReturnValue(mockedReturnedValue)
+
+      const returnedValue = adapters['$.a'].convert('x', '$.a', { a: 'y' })
+      expect(fieldAdapter1.convert).toHaveBeenCalledWith('x', '$', 'y')
+      expect(returnedValue).toEqual(mockedReturnedValue)
+    })
+
+    it('calls revert with the correct paths and values', () => {
+      const mockedReturnedValue = {
+        type: UnreliableFieldConversionType.Success,
+        value: 'ok',
+      } as const
+      mockedFieldAdapter1.revert.mockReturnValue(mockedReturnedValue)
+
+      const returnedValue = adapters['$.a'].revert?.(true, '$.a', { a: 'y' })
+      expect(fieldAdapter1.revert).toHaveBeenCalledWith(true, '$', 'y')
+      expect(returnedValue).toEqual(mockedReturnedValue)
+    })
+
+    it('calls create with the correct paths and values', () => {
+      const mockedReturnedValue = 'x'
+      mockedFieldAdapter1.create.mockReturnValue(mockedReturnedValue)
+
+      const returnedValue = adapters['$.a'].create('$.a', { a: 'y' })
+      expect(fieldAdapter1.create).toHaveBeenCalledWith('$', 'y')
+      expect(returnedValue).toEqual(mockedReturnedValue)
     })
   })
 
   describe('multiple adapters', () => {
+    const type = object()
+      .field('a', object().field('x', stringType).field('y', numberType))
     const adapters = subFormFieldAdapters({
       '$.x': fieldAdapter1,
       '$.y': fieldAdapter2,
-    }, '$.a')
+    }, '$.a', type)
 
     it('equals expected type', () => {
-      expectTypeOf(adapters).toEqualTypeOf<{
+      // TODO toEqualTypeOf (seems to be a TS error)
+      expectTypeOf(adapters).toMatchTypeOf<{
         '$.a.x': FieldAdapter<string, boolean>,
         '$.a.y': FieldAdapter<number, boolean>,
       }>()
@@ -51,8 +98,44 @@ describe('subFormFieldAdapters', () => {
 
     it('equals expected value', () => {
       expect(adapters).toEqual({
-        '$.a.x': fieldAdapter1,
-        '$.a.y': fieldAdapter2,
+        '$.a.x': expect.anything(),
+        '$.a.y': expect.anything(),
+      })
+    })
+
+    describe('calls convert with correct paths and values', () => {
+      const subContext = {
+        x: 'a',
+        y: 1,
+      } as const
+      const context = {
+        a: subContext,
+      }
+
+      it('calls $.a.x', () => {
+        const mockedReturnedValue = {
+          value: true,
+          readonly: true,
+          required: false,
+        }
+        mockedFieldAdapter1.convert.mockReturnValue(mockedReturnedValue)
+
+        const returnedValue = adapters['$.a.x'].convert('b', '$.a.x', context)
+        expect(fieldAdapter1.convert).toHaveBeenCalledWith('b', '$.x', subContext)
+        expect(returnedValue).toEqual(mockedReturnedValue)
+      })
+
+      it('calls $.a.y', () => {
+        const mockedReturnedValue = {
+          value: false,
+          readonly: false,
+          required: false,
+        }
+        mockedFieldAdapter2.convert.mockReturnValue(mockedReturnedValue)
+
+        const returnedValue = adapters['$.a.y'].convert(2, '$.a.y', context)
+        expect(fieldAdapter2.convert).toHaveBeenCalledWith(2, '$.y', subContext)
+        expect(returnedValue).toEqual(mockedReturnedValue)
       })
     })
   })

package/core/mobx/sub_form_field_adapters.ts

@@ -1,21 +1,68 @@
 import { type StringConcatOf } from '@strictly/base'
-import { type FieldAdapter } from './field_adapter'
+import {
+  flattenValuesOfType,
+  type Type,
+  type ValueOfType,
+} from '@strictly/define'
+import {
+  type ErrorOfFieldAdapter,
+  type FieldAdapter,
+  type FromOfFieldAdapter,
+  type ToOfFieldAdapter,
+} from './field_adapter'
 
-type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
-  [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K]
+type SubFormFieldAdapter<F extends FieldAdapter, P extends string, Context> = FieldAdapter<
+  FromOfFieldAdapter<F>,
+  ToOfFieldAdapter<F>,
+  ErrorOfFieldAdapter<F>,
+  P,
+  Context
+>
+
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string, Context> = {
+  [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: K extends
+    StringConcatOf<'$', infer S> ? SubFormFieldAdapter<
+      SubAdapters[K],
+      `${P}${S}`,
+      Context
+    >
+    : never
 }
 
-export function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(
+export function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string,
+  ContextType extends Type>(
   subAdapters: SubAdapters,
   prefix: P,
-): SubFormFieldAdapters<SubAdapters, P> {
+  contextType: ContextType,
+): SubFormFieldAdapters<SubAdapters, P, ValueOfType<ContextType>> {
+  function getSubValuePathAndContext(valuePath: string, context: ValueOfType<ContextType>) {
+    const subValuePath = valuePath.replace(prefix, '$')
+    const subContext = flattenValuesOfType(contextType, context)[prefix]
+    return [
+      subValuePath,
+      subContext,
+    ] as const
+  }
+
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   return Object.entries(subAdapters).reduce<Record<string, FieldAdapter>>((acc, [
     subKey,
     subValue,
   ]) => {
     const key = subKey.replace('$', prefix)
-    acc[key] = subValue
+    // adapt field adapter with new path and context
+    const adaptedAdapter: FieldAdapter = {
+      convert: (from, valuePath, context) => {
+        return subValue.convert(from, ...getSubValuePathAndContext(valuePath, context))
+      },
+      create: (valuePath, context) => {
+        return subValue.create(...getSubValuePathAndContext(valuePath, context))
+      },
+      revert: subValue.revert && ((from, valuePath, context) => {
+        return subValue.revert!(from, ...getSubValuePathAndContext(valuePath, context))
+      }),
+    }
+    acc[key] = adaptedAdapter
     return acc
-  }, {}) as SubFormFieldAdapters<SubAdapters, P>
+  }, {}) as SubFormFieldAdapters<SubAdapters, P, ValueOfType<ContextType>>
 }

package/core/props.ts

@@ -1,6 +1,6 @@
 import { type Fields } from 'types/field'
 
-export type FormProps<F extends Fields> = {
+export type FieldsViewProps<F extends Fields> = {
   fields: F,
 
   onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void,
@@ -14,7 +14,7 @@ export type FormProps<F extends Fields> = {
   onFieldSubmit?(this: void, key: keyof F): boolean | void,
 }
 
-export type EditorProps<O> = {
+export type FormProps<O> = {
   value: O,
 
   onValueChange: (value: O) => void,