@strictly/react-form 0.0.3 → 0.0.5

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()
   );
 }
 
@@ -746,6 +733,18 @@ function mergeAdaptersWithValidators(adapters, validators) {
   );
 }
 
+// core/mobx/sub_form_field_adapters.ts
+function subFormFieldAdapters(subAdapters, prefix) {
+  return Object.entries(subAdapters).reduce((acc, [
+    subKey,
+    subValue
+  ]) => {
+    const key = subKey.replace("$", prefix);
+    acc[key] = subValue;
+    return acc;
+  }, {});
+}
+
 // field_converters/integer_to_string_converter.ts
 var IntegerToStringConverter = class {
   constructor(isNanError, base = 10) {
@@ -1194,17 +1193,20 @@ 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);
+    const valuePath = `${listPath}.${index}`;
+    return children(valuePath, value, index);
   }) });
 }
 
@@ -1279,8 +1281,53 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_text_input.tsx
+// 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";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1314,7 +1361,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx5(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1329,7 +1376,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1363,7 +1410,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1378,9 +1425,9 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx7(Select, { ...props });
+  return /* @__PURE__ */ jsx8(Select, { ...props });
 }
 function useMantineForm({
   onFieldValueChange,
@@ -1453,6 +1500,9 @@ var MantineFormImpl = class {
   listCache = new Cache(
     createList.bind(this)
   );
+  subFormCache = new Cache(
+    createSubForm.bind(this)
+  );
   @observable2.ref
   accessor fields;
   onFieldValueChange;
@@ -1518,6 +1568,16 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  // TODO have the returned component take any non-overlapping props as props
+  subForm(valuePath, SubForm) {
+    return this.subFormCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      SubForm,
+      this
+    );
+  }
 };
 
 // types/merge_validators.ts
@@ -1586,6 +1646,7 @@ export {
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
   prototypingFieldValueFactory,
+  subFormFieldAdapters,
   useMantineForm,
   usePartialComponent,
   usePartialObserverComponent,

package/index.ts

@@ -6,6 +6,7 @@ export * from './core/mobx/form_fields_of_field_adapters'
 export * from './core/mobx/form_presenter'
 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'
 export * from './core/mobx/types'
 export * from './core/props'
 export * from './field_converters/integer_to_string_converter'

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)
       })}
     </>
   )

package/mantine/create_sub_form.tsx

@@ -0,0 +1,70 @@
+import type { FormProps } from 'core/props'
+import { observer } from 'mobx-react'
+import type { 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'
+
+export function createSubForm<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+  S extends Fields = SubFormFields<F, K>,
+>(
+  valuePath: K,
+  SubForm: ComponentType<FormProps<S>>,
+  observableProps: FormProps<F>,
+) {
+  function toKey(subKey: string | number | symbol): string {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return (subKey as string).replace('$', valuePath as string)
+  }
+
+  function toSubKey(key: string | number | symbol): string {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return (key as string).replace(valuePath as string, '$')
+  }
+
+  function onFieldValueChange<SubK extends keyof S>(
+    subKey: SubK,
+    value: ValueTypeOfField<S[SubK]>,
+  ) {
+    // convert from subKey to key
+    observableProps.onFieldValueChange(toKey(subKey), value)
+  }
+  function onFieldBlur(subKey: keyof S) {
+    observableProps.onFieldBlur?.(toKey(subKey))
+  }
+
+  function onFieldFocus(subKey: keyof S) {
+    observableProps.onFieldFocus?.(toKey(subKey))
+  }
+
+  function onFieldSubmit(subKey: keyof S) {
+    observableProps.onFieldSubmit?.(toKey(subKey))
+  }
+  return observer(function () {
+    // convert fields to sub-fields
+    const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>((acc, [
+      fieldKey,
+      fieldValue,
+    ]) => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      if (fieldKey.startsWith(valuePath as string)) {
+        acc[toSubKey(fieldKey)] = fieldValue
+      }
+      return acc
+    }, {})
+
+    return (
+      <SubForm
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        fields={subFields as S}
+        onFieldBlur={onFieldBlur}
+        onFieldFocus={onFieldFocus}
+        onFieldSubmit={onFieldSubmit}
+        onFieldValueChange={onFieldValueChange}
+      />
+    )
+  })
+}

package/mantine/hooks.tsx

@@ -35,6 +35,7 @@ import {
 } from 'types/field'
 import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
 import { type StringFieldsOfFields } from 'types/string_fields_of_fields'
+import { type SubFormFields } from 'types/sub_form_fields'
 import { type ValueTypeOfField } from 'types/value_type_of_field'
 import {
   createCheckbox,
@@ -57,6 +58,7 @@ import {
   createRadioGroup,
   type SuppliedRadioGroupProps,
 } from './create_radio_group'
+import { createSubForm } from './create_sub_form'
 import {
   createTextInput,
   type SuppliedTextInputProps,
@@ -175,10 +177,18 @@ class MantineFormImpl<
   > = new Cache(
     createList.bind(this),
   )
+  private readonly subFormCache: Cache<
+    // the cache cannot reference keys, so we just use any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [keyof AllFieldsOfFields<F>, ComponentType<any>, FormProps<F>],
+    ComponentType
+  > = new Cache(
+    createSubForm.bind(this),
+  )
 
   @observable.ref
   accessor fields: F
-  onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined
+  onFieldValueChange!: <K extends keyof F>(this: void, key: K, value: F[K]['value']) => void
   onFieldFocus: ((this: void, key: keyof F) => void) | undefined
   onFieldBlur: ((this: void, key: keyof F) => void) | undefined
   onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined
@@ -352,17 +362,31 @@ class MantineFormImpl<
   list<
     K extends keyof ListFieldsOfFields<F>,
   >(valuePath: K): MantineFieldComponent<
-    SuppliedListProps<ElementOfArray<F[K]>>,
-    ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>
+    SuppliedListProps<`${K}.${number}`>,
+    ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>
   > {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.listCache.retrieveOrCreate(
       valuePath,
       DefaultList,
     ) as MantineFieldComponent<
-      SuppliedListProps<ElementOfArray<F[K]>>,
-      ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>,
+      SuppliedListProps<`${K}.${number}`>,
+      ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>,
       ErrorOfField<F[K]>
     >
   }
+
+  // TODO have the returned component take any non-overlapping props as props
+  subForm<
+    K extends keyof AllFieldsOfFields<F>,
+    S extends SubFormFields<F, K>,
+  >(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType {
+    return this.subFormCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      SubForm as ComponentType,
+      this,
+    )
+  }
 }

package/mantine/specs/__snapshots__/list_hooks.tests.tsx.snap

@@ -38,29 +38,77 @@ exports[`mantine list hooks > renders Populated 1`] = `
         class="m_b183c0a2 mantine-Code-root"
         dir="ltr"
       >
-        ValuePath: 
-        $.4
+        <span>
+          ValuePath: 
+          $.0
+        </span>
+        <br />
+        <span>
+          Value: 
+          A
+        </span>
+        <br />
+        <span>
+          Index: 
+          0
+        </span>
       </code>
       <code
         class="m_b183c0a2 mantine-Code-root"
         dir="ltr"
       >
-        ValuePath: 
-        $.6
+        <span>
+          ValuePath: 
+          $.1
+        </span>
+        <br />
+        <span>
+          Value: 
+          B
+        </span>
+        <br />
+        <span>
+          Index: 
+          1
+        </span>
       </code>
       <code
         class="m_b183c0a2 mantine-Code-root"
         dir="ltr"
       >
-        ValuePath: 
-        $.19
+        <span>
+          ValuePath: 
+          $.2
+        </span>
+        <br />
+        <span>
+          Value: 
+          C
+        </span>
+        <br />
+        <span>
+          Index: 
+          2
+        </span>
       </code>
       <code
         class="m_b183c0a2 mantine-Code-root"
         dir="ltr"
       >
-        ValuePath: 
-        $.0
+        <span>
+          ValuePath: 
+          $.3
+        </span>
+        <br />
+        <span>
+          Value: 
+          D
+        </span>
+        <br />
+        <span>
+          Index: 
+          3
+        </span>
       </code>
     </div>
   </div>

package/mantine/specs/list_hooks.stories.tsx

@@ -26,10 +26,20 @@ function Component(props: FormProps<{
     >
       <Stack>
         <List>
-          {function (valuePath: ListPath) {
+          {function (valuePath: ListPath, value: string, index: number) {
             return (
               <Code key={valuePath}>
-                ValuePath: {valuePath}
+                <span>
+                  ValuePath: {valuePath}
+                </span>
+                <br />
+                <span>
+                  Value: {value}
+                </span>
+                <br />
+                <span>
+                  Index: {index}
+                </span>
               </Code>
             )
           }}
@@ -72,10 +82,10 @@ export const Populated: Story = {
         readonly: false,
         required: false,
         value: [
-          '$.4',
-          '$.6',
-          '$.19',
-          '$.0',
+          'A',
+          'B',
+          'C',
+          'D',
         ],
       },
     },

package/mantine/specs/sub_form_hooks.stories.tsx

@@ -0,0 +1,135 @@
+import {
+  Stack,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { useMantineForm } from 'mantine/hooks'
+import { type Field } from 'types/field'
+
+function SubFormImpl(props: FormProps<{
+  $: Field<string, string>,
+}>) {
+  const form = useMantineForm(props)
+  const TextInput = form.textInput('$')
+  return <TextInput label='sub form' />
+}
+
+function Component(props: FormProps<{
+  $: Field<string, string>,
+  '$.a': Field<string, string>,
+}>) {
+  const form = useMantineForm(props)
+  const SubForm = form.subForm('$.a', SubFormImpl)
+  const TextInput = form.textInput('$')
+  return (
+    <Stack>
+      <TextInput label='form' />
+      <SubForm />
+    </Stack>
+  )
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Component>
+
+export const Empty: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: '',
+      },
+      '$.a': {
+        readonly: false,
+        required: false,
+        value: '',
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'Hello',
+      },
+      '$.a': {
+        readonly: false,
+        required: false,
+        value: 'World',
+      },
+    },
+  },
+}
+
+export const Required: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: true,
+        value: 'xxx',
+      },
+      '$.a': {
+        readonly: false,
+        required: true,
+        value: 'yyy',
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: true,
+        required: false,
+        value: 'xxx',
+      },
+      '$.a': {
+        readonly: true,
+        required: false,
+        value: 'yyy',
+      },
+    },
+  },
+}
+
+export const CustomError: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'xxx',
+        error: 'form error',
+      },
+      '$.a': {
+        readonly: false,
+        required: false,
+        value: 'xxx',
+        error: 'sub form error',
+      },
+    },
+  },
+}

package/package.json

@@ -69,7 +69,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "exports": {
     ".": {
       "import": {

package/types/specs/list_fields_of_fields.tests.ts

@@ -0,0 +1,29 @@
+import { type Field } from 'types/field'
+import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
+
+describe('ListFieldsOfFields', () => {
+  it('matches the expected type of an empty set of fields', () => {
+    type T = ListFieldsOfFields<{}>
+    expectTypeOf<T>().toEqualTypeOf<{}>()
+  })
+
+  it('matches the expected type of a set of fields containing a single list', () => {
+    type X = {
+      l: Field<number[]>,
+    }
+    type T = ListFieldsOfFields<X>
+    expectTypeOf<T>().toEqualTypeOf<X>()
+  })
+
+  it('matches the expected type of a set of fields containing a multiple fields, including a list', () => {
+    type X = {
+      readonly a: Field<number>,
+      readonly b: Field<string>,
+      readonly l: Field<readonly number[]>,
+    }
+    type T = ListFieldsOfFields<X>
+    expectTypeOf<T>().toEqualTypeOf<{
+      readonly l: Field<readonly number[]>,
+    }>()
+  })
+})