@strictly/react-form 0.0.2 → 0.0.4

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_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

@@ -13,7 +13,6 @@ import {
 } from '@mantine/core'
 import {
   Cache,
-  type ElementOfArray,
 } from '@strictly/base'
 import { type FormProps } from 'core/props'
 import {
@@ -35,6 +34,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 +57,7 @@ import {
   createRadioGroup,
   type SuppliedRadioGroupProps,
 } from './create_radio_group'
+import { createSubForm } from './create_sub_form'
 import {
   createTextInput,
   type SuppliedTextInputProps,
@@ -175,10 +176,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 +361,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<`${K}.${number}`>>
   > {
     // 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<`${K}.${number}`>>,
       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/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

@@ -1,17 +1,19 @@
 {
   "author": "Chris <chris.glover@gmail.com> (@madmaw)",
   "dependencies": {
+    "@mantine/core": "^7.13.4",
+    "@mantine/hooks": "^7.13.4",
     "@strictly/base": "*",
     "@strictly/define": "*",
     "mobx": "^6.13.5",
     "mobx-react": "^9.1.1",
-    "react": "^19.0.0"
+    "react": "^19.0.0 || ^18.3.1",
+    "react-dom": "^19.0.0 || ^18.3.1"
   },
   "description": "Types and utilities for creating React forms",
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-class-static-block": "^7.26.0",
-    "@mantine/core": "^7.13.4",
     "@storybook/addon-actions": "^8.4.5",
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
@@ -29,7 +31,6 @@
     "@vitejs/plugin-react": "^4.3.3",
     "concurrently": "^9.1.2",
     "jsdom": "^25.0.1",
-    "react-dom": "^19.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^8.4.5",
     "type-fest": "^4.26.1",
@@ -68,7 +69,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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[]>,
+    }>()
+  })
+})

package/types/specs/sub_form_fields.tests.ts

@@ -0,0 +1,22 @@
+import { type Simplify } from 'type-fest'
+import { type Field } from 'types/field'
+import { type SubFormFields } from 'types/sub_form_fields'
+
+describe('SubFormFields', () => {
+  it('works on single field', () => {
+    type T = Simplify<SubFormFields<{ $: Field }, '$'>>
+    expectTypeOf<T>().toEqualTypeOf<{ $: Field }>()
+  })
+
+  it('works on more two fields', () => {
+    type T = Simplify<SubFormFields<{ '$.a': Field<string>, '$.b': Field<boolean> }, '$.a'>>
+    expectTypeOf<T>().toEqualTypeOf<{ $: Field<string> }>()
+  })
+
+  it('works on subfields', () => {
+    type T = Simplify<
+      SubFormFields<{ $: Field<null>, '$.a': Field<string>, '$.a.b': Field<boolean>, '$.a.b.c': Field<number> }, '$.a'>
+    >
+    expectTypeOf<T>().toEqualTypeOf<{ $: Field<string>, '$.b': Field<boolean>, '$.b.c': Field<number> }>()
+  })
+})

package/types/sub_form_fields.ts

@@ -0,0 +1,7 @@
+import { type StringConcatOf } from '@strictly/base'
+import { type Fields } from './field'
+
+export type SubFormFields<F extends Fields, P extends keyof F> = P extends string ? {
+    [K in keyof F as K extends StringConcatOf<`${P}.`, infer S> ? `$.${S}` : never]: F[K]
+  } & { $: F[P] }
+  : never