@strictly/react-form 0.0.4 → 0.0.6

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 46.90 KB
-CJS ⚡️ Build success in 104ms
-ESM dist/index.js 43.20 KB
+CJS dist/index.cjs 49.29 KB
+CJS ⚡️ Build success in 106ms
+ESM dist/index.js 45.41 KB
 ESM ⚡️ Build success in 106ms
 DTS Build start
-DTS ⚡️ Build success in 9810ms
-DTS dist/index.d.cts 34.83 KB
-DTS dist/index.d.ts  34.83 KB
-Done in 10.96s.
+DTS ⚡️ Build success in 10312ms
+DTS dist/index.d.cts 35.93 KB
+DTS dist/index.d.ts  35.93 KB
+Done in 11.43s.

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

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

package/core/mobx/field_adapter_builder.ts

@@ -6,7 +6,6 @@ import {
   annotatedIdentityConverter,
   unreliableIdentityConverter,
 } from 'field_converters/identity_converter'
-import { listConverter } from 'field_converters/list_converter'
 import { MaybeIdentityConverter } from 'field_converters/maybe_identity_converter'
 import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_field_value_factory'
 import {
@@ -266,12 +265,12 @@ export function identityAdapter<
 
 export function listAdapter<
   E,
-  K extends string,
   ValuePath extends string,
   Context,
 >() {
-  return new FieldAdapterBuilder<readonly E[], readonly K[], never, ValuePath, Context>(
-    listConverter<E, K, ValuePath, Context>(),
+  return new FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>(
+    annotatedIdentityConverter<readonly E[], ValuePath, Context>(false),
     prototypingFieldValueFactory<readonly E[], ValuePath, Context>([]),
+    unreliableIdentityConverter<readonly E[], ValuePath, Context>(),
   )
 }

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/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,

package/dist/index.cjs

@@ -45,7 +45,8 @@ __export(index_exports, {
   mergeValidators: () => mergeValidators,
   prototypingFieldValueFactory: () => prototypingFieldValueFactory,
   subFormFieldAdapters: () => subFormFieldAdapters,
-  useMantineForm: () => useMantineForm,
+  useDefaultMobxFormHooks: () => useDefaultMobxFormHooks,
+  useMantineFormFields: () => useMantineFormFields,
   usePartialComponent: () => usePartialComponent,
   usePartialObserverComponent: () => usePartialObserverComponent,
   validatingConverter: () => validatingConverter
@@ -139,20 +140,6 @@ function unreliableIdentityConverter() {
   };
 }
 
-// field_converters/list_converter.ts
-function listConverter() {
-  return function(from, valuePath) {
-    const value = from.map(function(_v, i) {
-      return `${valuePath}.${i}`;
-    });
-    return {
-      value,
-      required: false,
-      readonly: false
-    };
-  };
-}
-
 // field_converters/maybe_identity_converter.ts
 var MaybeIdentityConverter = class {
   constructor(converter, isFrom) {
@@ -241,8 +228,9 @@ function identityAdapter(prototype, required) {
 }
 function listAdapter() {
   return new FieldAdapterBuilder(
-    listConverter(),
-    prototypingFieldValueFactory([])
+    annotatedIdentityConverter(false),
+    prototypingFieldValueFactory([]),
+    unreliableIdentityConverter()
   );
 }
 
@@ -700,6 +688,59 @@ var FormModel = class {
   }
 };
 
+// core/mobx/hooks.ts
+var import_react = require("react");
+function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
+  const model = (0, import_react.useMemo)(function() {
+    return presenter.createModel(value);
+  }, [
+    presenter,
+    value
+  ]);
+  const onFieldValueChange = (0, import_react.useCallback)(
+    function(path, value2) {
+      presenter.clearFieldError(model, path);
+      presenter.setFieldValue(model, path, value2);
+    },
+    [
+      presenter,
+      model
+    ]
+  );
+  const onFieldSubmit = (0, import_react.useCallback)(
+    function(valuePath) {
+      if (presenter.validateField(model, valuePath)) {
+        onValidSubmit?.(model, valuePath);
+      }
+      return false;
+    },
+    [
+      presenter,
+      model,
+      onValidSubmit
+    ]
+  );
+  const onFieldBlur = (0, import_react.useCallback)(
+    function(path) {
+      setTimeout(function() {
+        if (presenter.isValuePathActive(model, path)) {
+          presenter.validateField(model, path);
+        }
+      }, 100);
+    },
+    [
+      presenter,
+      model
+    ]
+  );
+  return {
+    model,
+    onFieldValueChange,
+    onFieldSubmit,
+    onFieldBlur
+  };
+}
+
 // core/mobx/merge_field_adapters_with_two_way_converter.ts
 var import_base3 = require("@strictly/base");
 function mergeFieldAdaptersWithTwoWayConverter(fieldAdapters, converter) {
@@ -1003,14 +1044,14 @@ function DefaultErrorRenderer({
 var import_core = require("@mantine/core");
 var import_base6 = require("@strictly/base");
 var import_mobx2 = require("mobx");
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // util/partial.tsx
 var import_mobx_react = require("mobx-react");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function createSimplePartialComponent(Component, curriedProps) {
-  return (0, import_react.forwardRef)(
+  return (0, import_react2.forwardRef)(
     function(exposedProps, ref) {
       const C = Component;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1025,7 +1066,7 @@ function createSimplePartialComponent(Component, curriedProps) {
   );
 }
 function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_react.forwardRef)(
+  return (0, import_react2.forwardRef)(
     function(props, ref) {
       const C = Component;
       const [
@@ -1067,7 +1108,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
   );
 }
 function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react.useMemo)(
+  return (0, import_react2.useMemo)(
     function() {
       return createPartialComponent(
         Component,
@@ -1094,7 +1135,7 @@ function createPartialObserverComponent(Component, curriedPropsSource, additiona
 }
 function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
   return (0, import_mobx_react.observer)(
-    (0, import_react.forwardRef)(
+    (0, import_react2.forwardRef)(
       function(props, ref) {
         const C = Component;
         const [
@@ -1137,7 +1178,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react.useMemo)(
+  return (0, import_react2.useMemo)(
     function() {
       return createPartialObserverComponent(
         Component,
@@ -1204,23 +1245,97 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
-// mantine/create_list.tsx
+// mantine/create_fields_view.tsx
+var import_mobx_react2 = require("mobx-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function createFieldsView(valuePath, FieldsView, observableProps) {
+  function toKey(subKey) {
+    return subKey.replace("$", valuePath);
+  }
+  function toSubKey(key) {
+    return key.replace(valuePath, "$");
+  }
+  function onFieldValueChange(subKey, value) {
+    observableProps.onFieldValueChange(toKey(subKey), value);
+  }
+  function onFieldBlur(subKey) {
+    observableProps.onFieldBlur?.(toKey(subKey));
+  }
+  function onFieldFocus(subKey) {
+    observableProps.onFieldFocus?.(toKey(subKey));
+  }
+  function onFieldSubmit(subKey) {
+    observableProps.onFieldSubmit?.(toKey(subKey));
+  }
+  return (0, import_mobx_react2.observer)(function(props) {
+    const subFields = Object.entries(observableProps.fields).reduce((acc, [
+      fieldKey,
+      fieldValue
+    ]) => {
+      if (fieldKey.startsWith(valuePath)) {
+        acc[toSubKey(fieldKey)] = fieldValue;
+      }
+      return acc;
+    }, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      FieldsView,
+      {
+        // maybe we can do this in a more type safe way
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+        ...props,
+        fields: subFields,
+        onFieldBlur,
+        onFieldFocus,
+        onFieldSubmit,
+        onFieldValueChange
+      }
+    );
+  });
+}
+
+// mantine/create_form.tsx
+var import_mobx_react3 = require("mobx-react");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function createForm(valuePath, Form, observableProps) {
+  return (0, import_mobx_react3.observer)((props) => {
+    const { value } = observableProps.fields[valuePath];
+    const onValueChange = (0, import_react3.useCallback)((value2) => {
+      observableProps.onFieldValueChange(valuePath, value2);
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Form,
+      {
+        // maybe we can do this in a more type safe way
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+        ...props,
+        onValueChange,
+        value
+      }
+    );
+  });
+}
+
+// mantine/create_list.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
     return {
-      values
+      values,
+      listPath: valuePath
     };
   };
   return createUnsafePartialObserverComponent(List, propSource);
 }
 function DefaultList({
   values,
+  listPath,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: values.map(function(value, index) {
-    return children(value, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: values.map(function(value, index) {
+    const valuePath = `${listPath}.${index}`;
+    return children(valuePath, value, index);
   }) });
 }
 
@@ -1257,7 +1372,7 @@ function createRadio(valuePath, value, Radio) {
 }
 
 // mantine/create_radio_group.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function createRadioGroup(valuePath, RadioGroup) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1285,7 +1400,7 @@ function createRadioGroup(valuePath, RadioGroup) {
       name: valuePath,
       value,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1295,53 +1410,8 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_sub_form.tsx
-var import_mobx_react2 = require("mobx-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function createSubForm(valuePath, SubForm, observableProps) {
-  function toKey(subKey) {
-    return subKey.replace("$", valuePath);
-  }
-  function toSubKey(key) {
-    return key.replace(valuePath, "$");
-  }
-  function onFieldValueChange(subKey, value) {
-    observableProps.onFieldValueChange(toKey(subKey), value);
-  }
-  function onFieldBlur(subKey) {
-    observableProps.onFieldBlur?.(toKey(subKey));
-  }
-  function onFieldFocus(subKey) {
-    observableProps.onFieldFocus?.(toKey(subKey));
-  }
-  function onFieldSubmit(subKey) {
-    observableProps.onFieldSubmit?.(toKey(subKey));
-  }
-  return (0, import_mobx_react2.observer)(function() {
-    const subFields = Object.entries(observableProps.fields).reduce((acc, [
-      fieldKey,
-      fieldValue
-    ]) => {
-      if (fieldKey.startsWith(valuePath)) {
-        acc[toSubKey(fieldKey)] = fieldValue;
-      }
-      return acc;
-    }, {});
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SubForm,
-      {
-        fields: subFields,
-        onFieldBlur,
-        onFieldFocus,
-        onFieldSubmit,
-        onFieldValueChange
-      }
-    );
-  });
-}
-
 // mantine/create_text_input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1375,7 +1445,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1390,7 +1460,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1424,7 +1494,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1439,18 +1509,18 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function SimpleSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core.Select, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core.Select, { ...props });
 }
-function useMantineForm({
+function useMantineFormFields({
   onFieldValueChange,
   onFieldBlur,
   onFieldFocus,
   onFieldSubmit,
   fields
 }) {
-  const form = (0, import_react2.useMemo)(
+  const form = (0, import_react4.useMemo)(
     function() {
       return new MantineFormImpl(fields);
     },
@@ -1458,7 +1528,7 @@ function useMantineForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react2.useEffect)(function() {
+  (0, import_react4.useEffect)(function() {
     (0, import_mobx2.runInAction)(function() {
       form.fields = fields;
     });
@@ -1466,25 +1536,25 @@ function useMantineForm({
     form,
     fields
   ]);
-  (0, import_react2.useEffect)(function() {
+  (0, import_react4.useEffect)(function() {
     form.onFieldValueChange = onFieldValueChange;
   }, [
     form,
     onFieldValueChange
   ]);
-  (0, import_react2.useEffect)(function() {
+  (0, import_react4.useEffect)(function() {
     form.onFieldBlur = onFieldBlur;
   }, [
     form,
     onFieldBlur
   ]);
-  (0, import_react2.useEffect)(function() {
+  (0, import_react4.useEffect)(function() {
     form.onFieldFocus = onFieldFocus;
   }, [
     form,
     onFieldFocus
   ]);
-  (0, import_react2.useEffect)(function() {
+  (0, import_react4.useEffect)(function() {
     form.onFieldSubmit = onFieldSubmit;
   }, [
     form,
@@ -1514,9 +1584,10 @@ var MantineFormImpl = class {
   listCache = new import_base6.Cache(
     createList.bind(this)
   );
-  subFormCache = new import_base6.Cache(
-    createSubForm.bind(this)
+  fieldsViewCache = new import_base6.Cache(
+    createFieldsView.bind(this)
   );
+  formCache = new import_base6.Cache(createForm.bind(this));
   @import_mobx2.observable.ref
   accessor fields;
   onFieldValueChange;
@@ -1582,13 +1653,21 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
-  // TODO have the returned component take any non-overlapping props as props
-  subForm(valuePath, SubForm) {
-    return this.subFormCache.retrieveOrCreate(
+  fieldsView(valuePath, FieldsView) {
+    return this.fieldsViewCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      FieldsView,
+      this
+    );
+  }
+  form(valuePath, Form) {
+    return this.formCache.retrieveOrCreate(
       valuePath,
       // strip props from component since we lose information in the cache
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      SubForm,
+      Form,
       this
     );
   }
@@ -1659,7 +1738,8 @@ function mergeValidators(validators1, validators2) {
   mergeValidators,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
-  useMantineForm,
+  useDefaultMobxFormHooks,
+  useMantineFormFields,
   usePartialComponent,
   usePartialObserverComponent,
   validatingConverter