@strictly/react-form 0.0.4 → 0.0.6

package/dist/index.js

@@ -87,20 +87,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) {
@@ -189,8 +175,9 @@ function identityAdapter(prototype, required) {
 }
 function listAdapter() {
   return new FieldAdapterBuilder(
-    listConverter(),
-    prototypingFieldValueFactory([])
+    annotatedIdentityConverter(false),
+    prototypingFieldValueFactory([]),
+    unreliableIdentityConverter()
   );
 }
 
@@ -668,6 +655,62 @@ var FormModel = class {
   }
 };
 
+// core/mobx/hooks.ts
+import {
+  useCallback,
+  useMemo
+} from "react";
+function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
+  const model = useMemo(function() {
+    return presenter.createModel(value);
+  }, [
+    presenter,
+    value
+  ]);
+  const onFieldValueChange = useCallback(
+    function(path, value2) {
+      presenter.clearFieldError(model, path);
+      presenter.setFieldValue(model, path, value2);
+    },
+    [
+      presenter,
+      model
+    ]
+  );
+  const onFieldSubmit = useCallback(
+    function(valuePath) {
+      if (presenter.validateField(model, valuePath)) {
+        onValidSubmit?.(model, valuePath);
+      }
+      return false;
+    },
+    [
+      presenter,
+      model,
+      onValidSubmit
+    ]
+  );
+  const onFieldBlur = 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
 import { map as map2 } from "@strictly/base";
 function mergeFieldAdaptersWithTwoWayConverter(fieldAdapters, converter) {
@@ -995,14 +1038,14 @@ import {
 } from "mobx";
 import {
   useEffect,
-  useMemo as useMemo2
+  useMemo as useMemo3
 } from "react";
 
 // util/partial.tsx
 import { observer } from "mobx-react";
 import {
   forwardRef,
-  useMemo
+  useMemo as useMemo2
 } from "react";
 import { jsx } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
@@ -1063,7 +1106,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
   );
 }
 function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return useMemo(
+  return useMemo2(
     function() {
       return createPartialComponent(
         Component,
@@ -1133,7 +1176,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return useMemo(
+  return useMemo2(
     function() {
       return createPartialObserverComponent(
         Component,
@@ -1200,23 +1243,99 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_fields_view.tsx
+import { observer as observer2 } from "mobx-react";
+import { jsx as jsx3 } from "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 observer2(function(props) {
+    const subFields = Object.entries(observableProps.fields).reduce((acc, [
+      fieldKey,
+      fieldValue
+    ]) => {
+      if (fieldKey.startsWith(valuePath)) {
+        acc[toSubKey(fieldKey)] = fieldValue;
+      }
+      return acc;
+    }, {});
+    return /* @__PURE__ */ jsx3(
+      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
+import { observer as observer3 } from "mobx-react";
+import {
+  useCallback as useCallback2
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function createForm(valuePath, Form, observableProps) {
+  return observer3((props) => {
+    const { value } = observableProps.fields[valuePath];
+    const onValueChange = useCallback2((value2) => {
+      observableProps.onFieldValueChange(valuePath, value2);
+    }, []);
+    return /* @__PURE__ */ jsx4(
+      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
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "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__ */ jsx3(Fragment, { children: values.map(function(value, index) {
-    return children(value, index);
+  return /* @__PURE__ */ jsx5(Fragment, { children: values.map(function(value, index) {
+    const valuePath = `${listPath}.${index}`;
+    return children(valuePath, value, index);
   }) });
 }
 
@@ -1253,7 +1372,7 @@ function createRadio(valuePath, value, Radio) {
 }
 
 // mantine/create_radio_group.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function createRadioGroup(valuePath, RadioGroup) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1281,7 +1400,7 @@ function createRadioGroup(valuePath, RadioGroup) {
       name: valuePath,
       value,
       required,
-      error: error && /* @__PURE__ */ jsx4(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1291,53 +1410,8 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_sub_form.tsx
-import { observer as observer2 } from "mobx-react";
-import { jsx as jsx5 } from "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 observer2(function() {
-    const subFields = Object.entries(observableProps.fields).reduce((acc, [
-      fieldKey,
-      fieldValue
-    ]) => {
-      if (fieldKey.startsWith(valuePath)) {
-        acc[toSubKey(fieldKey)] = fieldValue;
-      }
-      return acc;
-    }, {});
-    return /* @__PURE__ */ jsx5(
-      SubForm,
-      {
-        fields: subFields,
-        onFieldBlur,
-        onFieldFocus,
-        onFieldSubmit,
-        onFieldValueChange
-      }
-    );
-  });
-}
-
 // mantine/create_text_input.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1371,7 +1445,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1386,7 +1460,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1420,7 +1494,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1435,18 +1509,18 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx8(Select, { ...props });
+  return /* @__PURE__ */ jsx9(Select, { ...props });
 }
-function useMantineForm({
+function useMantineFormFields({
   onFieldValueChange,
   onFieldBlur,
   onFieldFocus,
   onFieldSubmit,
   fields
 }) {
-  const form = useMemo2(
+  const form = useMemo3(
     function() {
       return new MantineFormImpl(fields);
     },
@@ -1510,9 +1584,10 @@ var MantineFormImpl = class {
   listCache = new Cache(
     createList.bind(this)
   );
-  subFormCache = new Cache(
-    createSubForm.bind(this)
+  fieldsViewCache = new Cache(
+    createFieldsView.bind(this)
   );
+  formCache = new Cache(createForm.bind(this));
   @observable2.ref
   accessor fields;
   onFieldValueChange;
@@ -1578,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
     );
   }
@@ -1657,7 +1740,8 @@ export {
   mergeValidators,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
-  useMantineForm,
+  useDefaultMobxFormHooks,
+  useMantineFormFields,
   usePartialComponent,
   usePartialObserverComponent,
   validatingConverter

package/index.ts

@@ -4,6 +4,7 @@ export * from './core/mobx/field_adapters_of_values'
 export * from './core/mobx/flattened_adapters_of_fields'
 export * from './core/mobx/form_fields_of_field_adapters'
 export * from './core/mobx/form_presenter'
+export * from './core/mobx/hooks'
 export * from './core/mobx/merge_field_adapters_with_two_way_converter'
 export * from './core/mobx/merge_field_adapters_with_validators'
 export * from './core/mobx/sub_form_field_adapters'

package/mantine/{create_sub_form.tsx → create_fields_view.tsx}

@@ -1,20 +1,24 @@
-import type { FormProps } from 'core/props'
+import type { FieldsViewProps } from 'core/props'
 import { observer } from 'mobx-react'
-import type { ComponentType } from 'react'
+import type {
+  ComponentProps,
+  ComponentType,
+} from 'react'
 import type { AllFieldsOfFields } from 'types/all_fields_of_fields'
 import type { Fields } from 'types/field'
 import type { SubFormFields } from 'types/sub_form_fields'
 import type { ValueTypeOfField } from 'types/value_type_of_field'
+import type { MantineFieldComponent } from './types'
 
-export function createSubForm<
+export function createFieldsView<
   F extends Fields,
   K extends keyof AllFieldsOfFields<F>,
-  S extends Fields = SubFormFields<F, K>,
+  P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,
 >(
   valuePath: K,
-  SubForm: ComponentType<FormProps<S>>,
-  observableProps: FormProps<F>,
-) {
+  FieldsView: ComponentType<P>,
+  observableProps: FieldsViewProps<F>,
+): MantineFieldComponent<FieldsViewProps<P['fields']>, P> {
   function toKey(subKey: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return (subKey as string).replace('$', valuePath as string)
@@ -25,25 +29,27 @@ export function createSubForm<
     return (key as string).replace(valuePath as string, '$')
   }
 
-  function onFieldValueChange<SubK extends keyof S>(
+  function onFieldValueChange<SubK extends keyof P['fields']>(
     subKey: SubK,
-    value: ValueTypeOfField<S[SubK]>,
+    value: ValueTypeOfField<P['fields'][SubK]>,
   ) {
     // convert from subKey to key
     observableProps.onFieldValueChange(toKey(subKey), value)
   }
-  function onFieldBlur(subKey: keyof S) {
+  function onFieldBlur(subKey: keyof P['fields']) {
     observableProps.onFieldBlur?.(toKey(subKey))
   }
 
-  function onFieldFocus(subKey: keyof S) {
+  function onFieldFocus(subKey: keyof P['fields']) {
     observableProps.onFieldFocus?.(toKey(subKey))
   }
 
-  function onFieldSubmit(subKey: keyof S) {
+  function onFieldSubmit(subKey: keyof P['fields']) {
     observableProps.onFieldSubmit?.(toKey(subKey))
   }
-  return observer(function () {
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return observer(function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P>>) {
     // convert fields to sub-fields
     const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>((acc, [
       fieldKey,
@@ -57,14 +63,19 @@ export function createSubForm<
     }, {})
 
     return (
-      <SubForm
+      <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 as any
+        }
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        fields={subFields as S}
+        fields={subFields as P['fields']}
         onFieldBlur={onFieldBlur}
         onFieldFocus={onFieldFocus}
         onFieldSubmit={onFieldSubmit}
         onFieldValueChange={onFieldValueChange}
       />
     )
-  })
+  }) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P>
 }

package/mantine/create_form.tsx

@@ -0,0 +1,43 @@
+import {
+  type FieldsViewProps,
+  type FormProps,
+} from 'core/props'
+import { observer } from 'mobx-react'
+import {
+  type ComponentProps,
+  type ComponentType,
+  useCallback,
+} from 'react'
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
+import { type Fields } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { type MantineFieldComponent } from './types'
+
+export function createForm<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+  P extends FormProps<ValueTypeOfField<F[K]>> = FormProps<ValueTypeOfField<F[K]>>,
+>(
+  valuePath: K,
+  Form: ComponentType<P>,
+  observableProps: FieldsViewProps<F>,
+): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return observer((props: ComponentProps<MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>>) => {
+    const { value } = observableProps.fields[valuePath]
+    const onValueChange = useCallback((value: ValueTypeOfField<F[K]>) => {
+      observableProps.onFieldValueChange(valuePath, value)
+    }, [])
+    return (
+      <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 as any
+        }
+        onValueChange={onValueChange}
+        value={value}
+      />
+    )
+  }) as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>
+}

package/mantine/create_list.tsx

@@ -10,8 +10,9 @@ import {
 } from './types'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type SuppliedListProps<Value = any> = {
+export type SuppliedListProps<Value = any, ListPath extends string = string> = {
   values: readonly Value[],
+  listPath: ListPath,
 }
 
 export function createList<
@@ -19,6 +20,7 @@ export function createList<
   K extends keyof ListFieldsOfFields<F>,
   Props extends SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>> & {
     children: (
+      valuePath: `${K}.${number}`,
       value: ElementOfArray<ValueTypeOfField<F[K]>>,
       index: number,
     ) => React.ReactNode,
@@ -32,6 +34,7 @@ export function createList<
     const values = [...this.fields[valuePath].value]
     return {
       values,
+      listPath: valuePath,
     }
   }
   return createUnsafePartialObserverComponent(List, propSource)
@@ -39,16 +42,19 @@ export function createList<
 
 export function DefaultList<
   Value,
+  ListPath extends string,
 >({
   values,
+  listPath,
   children,
-}: SuppliedListProps<Value> & {
-  children: (value: Value, index: number) => React.ReactNode,
+}: SuppliedListProps<Value, ListPath> & {
+  children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode,
 }) {
   return (
     <>
       {values.map(function (value, index) {
-        return children(value, index)
+        const valuePath: `${ListPath}.${number}` = `${listPath}.${index}`
+        return children(valuePath, value, index)
       })}
     </>
   )