@strictly/react-form 0.0.9 → 0.0.11

package/.out/tsup.config.js

@@ -1,12 +1,5 @@
 import { defineConfig, } from 'tsup';
-export default defineConfig((options) => ({
-    entry: ['index.ts'],
-    tsconfig: './tsconfig.build.json',
-    clean: false,
-    dts: true,
-    format: [
+export default defineConfig((options) => (Object.assign({ entry: ['index.ts'], tsconfig: './tsconfig.build.json', clean: false, dts: true, format: [
         'cjs',
         'esm',
-    ],
-    ...options,
-}));
+    ] }, options)));

package/.out/types/merge_validators.js

@@ -1,9 +1,6 @@
 import { annotations, validate, } from '@strictly/define';
 export function mergeValidators(validators1, validators2) {
-    const validators = {
-        ...validators1,
-        ...validators2,
-    };
+    const validators = Object.assign(Object.assign({}, validators1), validators2);
     const keys1 = new Set(Object.keys(validators1));
     const keys2 = new Set(Object.keys(validators2));
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/.out/util/partial.js

@@ -8,7 +8,7 @@ export function createSimplePartialComponent(Component, curriedProps) {
         // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
         const C = Component;
-        return (_jsx(C, { ref: ref, ...curriedProps, ...exposedProps }));
+        return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
     });
 }
 export function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
@@ -34,11 +34,11 @@ export function createPartialComponent(Component, curriedPropsSource, additional
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             {},
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            { ...props },
+            Object.assign({}, props),
         ]);
         // TODO is there any way we can memoize this transformation?
         const curriedProps = curriedPropsSource(additionalProps);
-        return (_jsx(C, { ref: ref, ...curriedProps, ...exposedProps }));
+        return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
     });
 }
 export function usePartialComponent(
@@ -88,11 +88,11 @@ export function createUnsafePartialObserverComponent(Component, curriedPropsSour
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             {},
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            { ...props },
+            Object.assign({}, props),
         ]);
         // TODO is there any way we can memoize this transformation?
         const curriedProps = curriedPropsSource(additionalProps);
-        return (_jsx(C, { ref: ref, ...curriedProps, ...exposedProps }));
+        return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
     }));
 }
 export function usePartialObserverComponent(

package/.out/vitest.workspace.js

@@ -4,19 +4,11 @@ import tsconfig from './tsconfig.json';
 const config = createVitestUserConfig(tsconfig);
 export default defineWorkspace([
     '.',
-    {
-        ...config,
-        extends: './.storybook/vite.config.mts',
-        test: {
-            ...(config.test || {}),
-            environment: 'jsdom',
-            setupFiles: [
+    Object.assign(Object.assign({}, config), { extends: './.storybook/vite.config.mts', test: Object.assign(Object.assign({}, (config.test || {})), { environment: 'jsdom', setupFiles: [
                 './.vitest/install_deterministic_random.ts',
                 // install storybook setup for unit tests that import stories directly
                 './.vitest/install_storybook_preview.ts',
                 './.vitest/match_media.ts',
                 './.vitest/resize_observer.ts',
-            ],
-        },
-    },
+            ] }) }),
 ]);

package/.turbo/turbo-build.log

@@ -4,15 +4,15 @@ $ tsup
 CLI Using tsconfig: tsconfig.build.json
 CLI tsup v8.3.5
 CLI Using tsup config: /home/runner/work/strictly/strictly/packages/react-form/tsup.config.ts
-CLI Target: esnext
+CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 51.55 KB
-CJS ⚡️ Build success in 120ms
-ESM dist/index.js 47.61 KB
-ESM ⚡️ Build success in 121ms
+ESM dist/index.js 56.04 KB
+ESM ⚡️ Build success in 111ms
+CJS dist/index.cjs 59.85 KB
+CJS ⚡️ Build success in 113ms
 DTS Build start
-DTS ⚡️ Build success in 10031ms
-DTS dist/index.d.cts 37.40 KB
-DTS dist/index.d.ts  37.40 KB
-Done in 11.07s.
+DTS ⚡️ Build success in 9897ms
+DTS dist/index.d.cts 39.16 KB
+DTS dist/index.d.ts  39.16 KB
+Done in 10.95s.

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

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

package/.turbo/turbo-release$colon$exports.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ json -f package.json -f package.exports.json --merge > package.release.json
-Done in 0.12s.
+Done in 0.11s.

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,197 @@
+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,
+    // TODO the types of C are not working, needs a local implementation to test
+    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>>
+  >
 }