@strictly/react-form 0.0.17 → 0.0.19

package/.out/util/partial.d.ts

@@ -1,7 +1,10 @@
 import { type FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
-import { type ComponentProps, type ComponentType, type DependencyList, type ForwardRefExoticComponent, type PropsWithoutRef } from 'react';
+import { type ComponentProps, type ComponentType, type DependencyList, type ForwardRefExoticComponent, type PropsWithoutRef, type Ref, type RefAttributes } from 'react';
+export type RefOfProps<P, Fallback = unknown> = P extends RefAttributes<infer R> ? R : Fallback;
 export type PartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps> : keyof CurriedProps extends (string | number) ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}` : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>;
-export type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>>;
+export type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}, R = RefOfProps<ComponentProps<Component>>> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps> & {
+    ref?: Ref<R>;
+}>;
 export declare function createSimplePartialComponent<Component extends ComponentType<any>, CurriedProps extends Partial<ComponentProps<Component>>>(Component: Component, curriedProps: CurriedProps): PartialComponent<Component, CurriedProps>;
 export declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): PartialComponent<Component, CurriedProps, {}>;
 export declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;

package/.out/util/specs/partial.tests.d.ts

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

package/.out/util/specs/partial.tests.js

@@ -0,0 +1,8 @@
+describe('partial', () => {
+    describe('UnsafePartialComponent', () => {
+        it('allows a ref of a specific type to be passed', () => {
+            expectTypeOf().toEqualTypeOf();
+        });
+    });
+});
+export {};

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 62.28 KB
-CJS ⚡️ Build success in 117ms
-ESM dist/index.js 58.27 KB
-ESM ⚡️ Build success in 140ms
+CJS dist/index.cjs 60.71 KB
+CJS ⚡️ Build success in 113ms
+ESM dist/index.js 56.70 KB
+ESM ⚡️ Build success in 113ms
 DTS Build start
-DTS ⚡️ Build success in 9749ms
-DTS dist/index.d.cts 38.08 KB
-DTS dist/index.d.ts  38.08 KB
-Done in 10.88s.
+DTS ⚡️ Build success in 9852ms
+DTS dist/index.d.cts 38.50 KB
+DTS dist/index.d.ts  38.50 KB
+Done in 10.92s.

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

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

package/core/mobx/form_model.ts

@@ -26,7 +26,6 @@ import {
   type ValueOfType,
   valuePathToTypePath,
 } from '@strictly/define'
-import { type FormMode } from 'core/props'
 import {
   computed,
   observable,
@@ -89,10 +88,15 @@ type FlattenedFieldOverrides<
   >
 }
 
-type FlattenedErrors<
+export enum Validation {
+  Changed = 1,
+  Always = 2,
+}
+
+type FlattenedValidation<
   ValuePathsToAdapters extends Readonly<Record<string, FieldAdapter>>,
 > = {
-  -readonly [K in keyof ValuePathsToAdapters]?: ErrorOfFieldAdapter<ValuePathsToAdapters[K]>
+  -readonly [K in keyof ValuePathsToAdapters]?: Validation
 }
 
 export type ValuePathsToAdaptersOf<
@@ -119,6 +123,8 @@ export type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string
     | {}
   >
 
+export type FormMode = 'edit' | 'create'
+
 export abstract class FormModel<
   T extends Type,
   ValueToTypePaths extends Readonly<Record<string, string>>,
@@ -137,16 +143,21 @@ export abstract class FormModel<
   @observable.shallow
   accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>
   @observable.shallow
-  accessor errors: FlattenedErrors<ValuePathsToAdapters> = {}
+  accessor validation: FlattenedValidation<ValuePathsToAdapters> = {}
 
   private readonly flattenedTypeDefs: Readonly<Record<string, Type>>
 
+  // cannot be type safe
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private readonly originalValues: Record<string, any>
+
   constructor(
     readonly type: T,
-    private readonly originalValue: ValueOfType<ReadonlyTypeOfType<T>>,
+    originalValue: ValueOfType<ReadonlyTypeOfType<T>>,
     protected readonly adapters: TypePathsToAdapters,
     protected readonly mode: FormMode,
   ) {
+    this.originalValues = flattenValuesOfType<ReadonlyTypeOfType<T>>(type, originalValue)
     this.value = mobxCopy(type, originalValue)
     this.flattenedTypeDefs = flattenTypesOfType(type)
     // pre-populate field overrides for consistent behavior when default information is overwritten
@@ -270,6 +281,7 @@ export abstract class FormModel<
     const {
       convert,
       create,
+      revert,
     } = adapter
 
     const fieldOverride = this.fieldOverrides[valuePath]
@@ -277,6 +289,9 @@ export abstract class FormModel<
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const fieldTypeDef = this.flattenedTypeDefs[typePath as string]
     const context = this.toContext(this.value, valuePath)
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const defaultValue = create(valuePath as string, context)
+
     const {
       value,
       required,
@@ -287,17 +302,50 @@ export abstract class FormModel<
         : fieldTypeDef != null
         ? mobxCopy(
           fieldTypeDef,
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          create(valuePath as string, context),
+          defaultValue,
         )
         // fake values can't be copied
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        : create(valuePath as string, context),
+        : defaultValue,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath as string,
       context,
     )
-    const error = this.errors[valuePath]
+    // const error = this.errors[valuePath]
+    let error: unknown = undefined
+    const displayedValue = fieldOverride != null ? fieldOverride[0] : value
+    const validation = this.validation[valuePath]
+    switch (validation) {
+      case undefined:
+        // skip validation
+        break
+      case Validation.Changed:
+        if (revert != null) {
+          const originalValue = valuePath in this.originalValues
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            ? this.originalValues[valuePath as string]
+            : defaultValue
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          const { value: originalDisplayedValue } = convert(originalValue, valuePath as string, context)
+          // TODO better comparisons, displayed values can still be complex
+          if (displayedValue !== originalDisplayedValue) {
+            const revertResult = revert(displayedValue, valuePath, context)
+            if (revertResult?.type === UnreliableFieldConversionType.Failure) {
+              ;({ error } = revertResult)
+            }
+          }
+        }
+        break
+      case Validation.Always:
+        {
+          const revertResult = revert?.(displayedValue, valuePath, context)
+          if (revertResult?.type === UnreliableFieldConversionType.Failure) {
+            ;({ error } = revertResult)
+          }
+        }
+        break
+      default:
+        throw new UnreachableError(validation)
+    }
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
@@ -342,18 +390,12 @@ export abstract class FormModel<
     return valuePathToTypePath<ValueToTypePaths, K>(this.type, valuePath, true)
   }
 
-  setFieldValueAndValidate<K extends keyof ValuePathsToAdapters>(
-    valuePath: K,
-    value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
-  ): boolean {
-    return this.internalSetFieldValue(valuePath, value, true)
-  }
-
   setFieldValue<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
+    validation: Validation | undefined | null = this.validation[valuePath],
   ): boolean {
-    return this.internalSetFieldValue(valuePath, value, false)
+    return this.internalSetFieldValue(valuePath, value, validation)
   }
 
   addListItem<K extends keyof FlattenedListTypesOfType<T>>(
@@ -429,9 +471,9 @@ export abstract class FormModel<
         const fieldOverride = this.fieldOverrides[fromJsonPath]
         delete this.fieldOverrides[fromJsonPath]
         this.fieldOverrides[toJsonPath] = fieldOverride
-        const error = this.errors[fromJsonPath]
-        delete this.errors[fromJsonPath]
-        this.errors[toJsonPath] = error
+        const validation = this.validation[fromJsonPath]
+        delete this.validation[fromJsonPath]
+        this.validation[toJsonPath] = validation
       })
       accessor.set(newList)
       // delete any value overrides so the new list isn't shadowed
@@ -506,9 +548,9 @@ export abstract class FormModel<
           const fieldOverride = this.fieldOverrides[fromJsonPath]
           delete this.fieldOverrides[fromJsonPath]
           this.fieldOverrides[toJsonPath] = fieldOverride
-          const error = this.errors[fromJsonPath]
-          delete this.errors[fromJsonPath]
-          this.errors[toJsonPath] = error
+          const validation = this.validation[fromJsonPath]
+          delete this.validation[fromJsonPath]
+          this.validation[toJsonPath] = validation
         })
         accessor.set(newList)
         // delete any value overrides so the new list isn't shadowed
@@ -521,7 +563,7 @@ export abstract class FormModel<
   private internalSetFieldValue<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
-    displayValidation: boolean,
+    validation: Validation | undefined | null,
   ): boolean {
     const { revert } = this.getAdapterForValuePath(valuePath)
 
@@ -532,17 +574,18 @@ export abstract class FormModel<
     const accessor = this.getAccessorForValuePath(valuePath)
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value]
+      if (validation != null) {
+        this.validation[valuePath] = validation
+      } else {
+        delete this.validation[valuePath]
+      }
       switch (conversion.type) {
         case UnreliableFieldConversionType.Failure:
-          if (displayValidation) {
-            this.errors[valuePath] = conversion.error
-          }
           if (conversion.value != null && accessor != null) {
             accessor.set(conversion.value[0])
           }
           return false
         case UnreliableFieldConversionType.Success:
-          delete this.errors[valuePath]
           accessor?.set(conversion.value)
           return true
         default:
@@ -555,12 +598,12 @@ export abstract class FormModel<
     const fieldOverride = this.fieldOverrides[valuePath]
     if (fieldOverride != null) {
       runInAction(() => {
-        delete this.errors[valuePath]
+        delete this.validation[valuePath]
       })
     }
   }
 
-  clearFieldValue<K extends StringKeyOf<ValueToTypePaths>>(valuePath: K) {
+  clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(valuePath: K) {
     const typePath = this.typePath(valuePath)
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const adapter = this.adapters[typePath as keyof TypePathsToAdapters]
@@ -581,12 +624,13 @@ export abstract class FormModel<
     const key = valuePath as unknown as keyof ValuePathsToAdapters
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue]
+      delete this.validation[key]
     })
   }
 
   clearAll(value: ValueOfType<T>): void {
     runInAction(() => {
-      this.errors = {}
+      this.validation = {}
       // TODO this isn't correct, should reload from value
       this.fieldOverrides = {}
       this.value = mobxCopy(this.type, value)
@@ -602,137 +646,32 @@ export abstract class FormModel<
 
   validateField<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
-    ignoreDefaultValue = false,
+    validation: Validation = Math.max(
+      this.mode === 'create' ? Validation.Always : Validation.Changed,
+      this.validation[valuePath] ?? Validation.Changed,
+    ),
   ): boolean {
-    const {
-      convert,
-      revert,
-      create,
-    } = this.getAdapterForValuePath(valuePath)
-    const fieldOverride = this.fieldOverrides[valuePath]
-    const accessor = this.getAccessorForValuePath(valuePath)
-    const context = this.toContext(this.value, valuePath)
-
-    const {
-      value: storedValue,
-    } = convert(
-      accessor != null
-        ? accessor.value
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        : create(valuePath as string, context),
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      valuePath as string,
-      context,
-    )
-    const value = fieldOverride != null
-      ? fieldOverride[0]
-      : storedValue
-    const dirty = storedValue !== value
-    assertExists(revert, 'changing field directly not supported {}', valuePath)
-    if (ignoreDefaultValue) {
-      const {
-        value: defaultDisplayValue,
-      } = convert(create(valuePath, context), valuePath, context)
-      if (defaultDisplayValue === value) {
-        return true
-      }
-    }
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const conversion = revert(value, valuePath as string, context)
-    return runInAction(() => {
-      switch (conversion.type) {
-        case UnreliableFieldConversionType.Failure:
-          this.errors[valuePath] = conversion.error
-          if (conversion.value != null && accessor != null && dirty) {
-            accessor.set(conversion.value[0])
-          }
-          return false
-        case UnreliableFieldConversionType.Success:
-          delete this.errors[valuePath]
-          if (accessor != null && dirty) {
-            accessor.set(conversion.value)
-          }
-          return true
-        default:
-          throw new UnreachableError(conversion)
-      }
+    runInAction(() => {
+      this.validation[valuePath] = validation
     })
+    return this.fields[valuePath].error == null
   }
 
-  validateAll(force: boolean = this.mode === 'create'): boolean {
-    // sort keys shortest to longest so parent changes don't overwrite child changes
-    const accessors = toArray(this.accessors).toSorted(function ([a], [b]) {
-      return a.length - b.length
-    })
-
-    const flattenedOriginalValues = flattenValuesOfType(this.type, this.originalValue)
+  validateAll(validation: Validation = this.mode === 'create' ? Validation.Always : Validation.Changed): boolean {
+    const accessors = toArray(this.accessors)
 
-    return runInAction(() => {
-      return accessors.reduce(
-        (
-          success,
-          [
-            valuePath,
-            accessor,
-          ],
-        ): boolean => {
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          const adapterPath = valuePath as keyof ValuePathsToAdapters
-          const adapter = this.maybeGetAdapterForValuePath(adapterPath)
-          if (adapter == null) {
-            // no adapter == there should be nothing specified for this field
-            return success
-          }
-          const {
-            convert,
-            revert,
-          } = adapter
-          if (revert == null) {
-            // no convert method means this field is immutable
-            return success
-          }
-          const fieldOverride = this.fieldOverrides[adapterPath]
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          const context = this.toContext(this.value, valuePath as keyof ValuePathsToAdapters)
-          const {
-            value: storedValue,
-          } = convert(accessor.value, valuePath, context)
-          const value = fieldOverride != null
-            ? fieldOverride[0]
-            : storedValue
-          // TODO customizable comparisons
-          const dirty = fieldOverride != null && fieldOverride[0] !== storedValue
-          const needsValidation = force
-            || !(valuePath in flattenedOriginalValues)
-            || storedValue !== convert(
-                flattenedOriginalValues[valuePath],
-                valuePath,
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                this.toContext(this.originalValue, valuePath as keyof ValuePathsToAdapters),
-              ).value
-          if (needsValidation) {
-            const conversion = revert(value, valuePath, context)
-            switch (conversion.type) {
-              case UnreliableFieldConversionType.Failure:
-                this.errors[adapterPath] = conversion.error
-                if (conversion.value != null && dirty) {
-                  accessor.set(conversion.value[0])
-                }
-                return false
-              case UnreliableFieldConversionType.Success:
-                if (dirty) {
-                  accessor.set(conversion.value)
-                }
-                delete this.errors[adapterPath]
-                return success
-              default:
-                throw new UnreachableError(conversion)
-            }
-          }
-          return success
-        },
-        true,
-      )
+    runInAction(() => {
+      accessors.forEach(([valuePath]) => {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        this.validation[valuePath as keyof ValuePathsToAdapters] = validation
+      })
     })
+    return accessors.every(
+      ([valuePath]): boolean => {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const field = this.fields[valuePath as keyof ValuePathsToAdapters]
+        return field?.error == null
+      },
+    )
   }
 }

package/core/mobx/hooks.tsx

@@ -5,7 +5,9 @@ import {
 import {
   useCallback,
 } from 'react'
-import { type FormModel } from './form_model'
+import {
+  type FormModel,
+} from './form_model'
 import {
   type FormFieldsOfModel,
   type ToValueOfModelValuePath,
@@ -42,9 +44,8 @@ export function useDefaultMobxFormHooks<
       path: Path,
       value: ToValueOfModelValuePath<M, Path>,
     ) {
-      // TODO do in one action
-      model.clearFieldError(path)
-      model.setFieldValue<Path>(path, value)
+      // clear any validation
+      model.setFieldValue<Path>(path, value, null)
     },
     [model],
   )
@@ -69,7 +70,7 @@ export function useDefaultMobxFormHooks<
       // TODO debounce?
       setTimeout(function () {
         if (model.isValuePathActive(path)) {
-          model.validateField(path, true)
+          model.validateField(path)
         }
       }, 100)
     },

package/core/mobx/merge_field_adapters_with_two_way_converter.ts

@@ -40,13 +40,14 @@ export function mergeFieldAdaptersWithTwoWayConverter<
   FieldAdapters extends Readonly<Record<string, FieldAdapter>>,
   E,
   Context,
+  P extends ValuePathsOfFieldAdapters<FieldAdapters>,
 >(
   fieldAdapters: FieldAdapters,
   converter: TwoWayFieldConverter<
     TosOfFieldAdapters<FieldAdapters>,
     TosOfFieldAdapters<FieldAdapters>,
     E,
-    ValuePathsOfFieldAdapters<FieldAdapters>,
+    P,
     Context
   >,
 ): MergedOfFieldAdaptersWithTwoWayConverter<FieldAdapters, E, Context> {

package/core/mobx/merge_field_adapters_with_validators.ts

@@ -88,7 +88,7 @@ export function mergeAdaptersWithValidators<
         }
       }
       acc[key] = {
-        ...adapter,
+        create: adapter.create.bind(adapter),
         convert,
         revert: adapter.revert && revert,
       }