@strictly/react-form 0.0.5 → 0.0.6

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/hooks.tsx

@@ -15,7 +15,10 @@ import {
   Cache,
   type ElementOfArray,
 } from '@strictly/base'
-import { type FormProps } from 'core/props'
+import {
+  type FieldsViewProps,
+  type FormProps,
+} from 'core/props'
 import {
   observable,
   runInAction,
@@ -41,6 +44,8 @@ import {
   createCheckbox,
   type SuppliedCheckboxProps,
 } from './create_checkbox'
+import { createFieldsView } from './create_fields_view'
+import { createForm } from './create_form'
 import {
   createList,
   DefaultList,
@@ -58,7 +63,6 @@ import {
   createRadioGroup,
   type SuppliedRadioGroupProps,
 } from './create_radio_group'
-import { createSubForm } from './create_sub_form'
 import {
   createTextInput,
   type SuppliedTextInputProps,
@@ -78,7 +82,7 @@ function SimpleSelect(props: SelectProps & {
   return <Select {...props} />
 }
 
-export function useMantineForm<
+export function useMantineFormFields<
   F extends Fields,
 >({
   onFieldValueChange,
@@ -86,7 +90,7 @@ export function useMantineForm<
   onFieldFocus,
   onFieldSubmit,
   fields,
-}: FormProps<F>): MantineFormImpl<F> {
+}: FieldsViewProps<F>): MantineFormImpl<F> {
   const form = useMemo(
     function () {
       return new MantineFormImpl(fields)
@@ -177,14 +181,20 @@ class MantineFormImpl<
   > = new Cache(
     createList.bind(this),
   )
-  private readonly subFormCache: Cache<
+  private readonly fieldsViewCache: 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>],
+    [keyof AllFieldsOfFields<F>, ComponentType<any>, FieldsViewProps<F>],
     ComponentType
   > = new Cache(
-    createSubForm.bind(this),
+    createFieldsView.bind(this),
   )
+  private readonly formCache: 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>, FieldsViewProps<F>],
+    ComponentType
+  > = new Cache(createForm.bind(this))
 
   @observable.ref
   accessor fields: F
@@ -376,17 +386,41 @@ class MantineFormImpl<
     >
   }
 
-  // TODO have the returned component take any non-overlapping props as props
-  subForm<
+  fieldsView<
     K extends keyof AllFieldsOfFields<F>,
-    S extends SubFormFields<F, K>,
-  >(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType {
-    return this.subFormCache.retrieveOrCreate(
+    P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,
+  >(valuePath: K, FieldsView: ComponentType<P>): MantineFieldComponent<
+    FieldsViewProps<P['fields']>,
+    P
+  > {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    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 as ComponentType,
+      this,
+    ) as unknown as MantineFieldComponent<
+      FieldsViewProps<P['fields']>,
+      P
+    >
+  }
+
+  form<
+    K extends keyof AllFieldsOfFields<F>,
+    P extends FormProps<ValueTypeOfField<F[K]>> = FormProps<ValueTypeOfField<F[K]>>,
+  >(
+    valuePath: K,
+    Form: ComponentType<P>,
+  ): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P> {
+    // strip props from component since we lose information in the cache
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    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 as ComponentType,
+      Form as ComponentType,
       this,
-    )
+    ) as unknown as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>
   }
 }