@strictly/react-form 0.0.4 → 0.0.6

package/.out/core/mobx/field_adapter_builder.d.ts

@@ -17,5 +17,5 @@ export declare function adapterFromTwoWayConverter<From, To, E, ValuePath extend
 export declare function adapterFromPrototype<From, To, ValuePath extends string, Context>(converter: AnnotatedFieldConverter<From, To, ValuePath, Context>, prototype: From): FieldAdapterBuilder<From, To, never, ValuePath, Context>;
 export declare function adapterFromPrototype<From, To, E, ValuePath extends string, Context>(converter: TwoWayFieldConverter<From, To, E, ValuePath, Context>, prototype: From): FieldAdapterBuilder<From, To, E, ValuePath, Context>;
 export declare function identityAdapter<V, ValuePath extends string, Context>(prototype: V, required?: boolean): FieldAdapterBuilder<V, V, never, ValuePath, Context>;
-export declare function listAdapter<E, K extends string, ValuePath extends string, Context>(): FieldAdapterBuilder<readonly E[], readonly K[], never, ValuePath, Context>;
+export declare function listAdapter<E, ValuePath extends string, Context>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
 export {};

package/.out/core/mobx/field_adapter_builder.js

@@ -1,6 +1,5 @@
 import { chainAnnotatedFieldConverter, chainUnreliableFieldConverter, } from 'field_converters/chain_field_converter';
 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';
 class FieldAdapterBuilder {
@@ -48,5 +47,5 @@ export function identityAdapter(prototype, required) {
     return new FieldAdapterBuilder(annotatedIdentityConverter(required), prototypingFieldValueFactory(prototype), unreliableIdentityConverter());
 }
 export function listAdapter() {
-    return new FieldAdapterBuilder(listConverter(), prototypingFieldValueFactory([]));
+    return new FieldAdapterBuilder(annotatedIdentityConverter(false), prototypingFieldValueFactory([]), unreliableIdentityConverter());
 }

package/.out/core/mobx/hooks.d.ts

@@ -0,0 +1,10 @@
+import { type ReadonlyTypeOfType, type ValueOfType } from '@strictly/define';
+import { type FieldsViewProps } from 'core/props';
+import { type FormPresenter } from './form_presenter';
+import { type ValuePathsOfPresenter } from './types';
+type ValueOfPresenter<P extends FormPresenter<any, any, any, any>> = P extends FormPresenter<infer T, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
+type ModelOfPresenter<P extends FormPresenter<any, any, any, any>> = ReturnType<P['createModel']>;
+export declare 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'>;
+export {};

package/.out/core/mobx/hooks.js

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
+    const model = useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return presenter.createModel(value);
+    }, [
+        presenter,
+        value,
+    ]);
+    const onFieldValueChange = useCallback(function (path, value) {
+        presenter.clearFieldError(model, path);
+        presenter.setFieldValue(model, path, value);
+    }, [
+        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) {
+        // 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/.out/core/props.d.ts

@@ -1,12 +1,12 @@
 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;
     onFieldFocus?(this: void, key: keyof F): void;
     onFieldBlur?(this: void, key: keyof F): void;
     onFieldSubmit?(this: void, key: keyof F): boolean | void;
 };
-export type EditorProps<O> = {
+export type FormProps<O> = {
     value: O;
     onValueChange: (value: O) => void;
 };

package/.out/index.d.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/.out/index.js

@@ -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/.out/mantine/create_fields_view.d.ts

@@ -0,0 +1,7 @@
+import type { FieldsViewProps } from 'core/props';
+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 { MantineFieldComponent } from './types';
+export declare function createFieldsView<F extends Fields, K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>, observableProps: FieldsViewProps<F>): MantineFieldComponent<FieldsViewProps<P['fields']>, P>;

package/.out/mantine/{create_sub_form.js → create_fields_view.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-export function createSubForm(valuePath, SubForm, observableProps) {
+export function createFieldsView(valuePath, FieldsView, observableProps) {
     function toKey(subKey) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return subKey.replace('$', valuePath);
@@ -22,7 +22,8 @@ export function createSubForm(valuePath, SubForm, observableProps) {
     function onFieldSubmit(subKey) {
         observableProps.onFieldSubmit?.(toKey(subKey));
     }
-    return observer(function () {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return observer(function (props) {
         // convert fields to sub-fields
         const subFields = Object.entries(observableProps.fields).reduce((acc, [fieldKey, fieldValue,]) => {
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -31,9 +32,7 @@ export function createSubForm(valuePath, SubForm, observableProps) {
             }
             return acc;
         }, {});
-        return (_jsx(SubForm
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        , { 
+        return (_jsx(FieldsView, { ...props, 
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
     });

package/.out/mantine/create_form.d.ts

@@ -0,0 +1,7 @@
+import { type FieldsViewProps, type FormProps } from 'core/props';
+import { type ComponentType } 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 declare 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>;

package/.out/mantine/create_form.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { useCallback, } from 'react';
+export function createForm(valuePath, Form, observableProps) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return observer((props) => {
+        const { value } = observableProps.fields[valuePath];
+        const onValueChange = useCallback((value) => {
+            observableProps.onFieldValueChange(valuePath, value);
+        }, []);
+        return (_jsx(Form, { ...props, onValueChange: onValueChange, value: value }));
+    });
+}

package/.out/mantine/create_list.d.ts

@@ -4,12 +4,13 @@ import { type Fields } from 'types/field';
 import { type ListFieldsOfFields } from 'types/list_fields_of_fields';
 import { type ValueTypeOfField } from 'types/value_type_of_field';
 import { type MantineFieldComponent, type MantineForm } from './types';
-export type SuppliedListProps<Value = any> = {
+export type SuppliedListProps<Value = any, ListPath extends string = string> = {
     values: readonly Value[];
+    listPath: ListPath;
 };
 export declare function createList<F extends Fields, K extends keyof ListFieldsOfFields<F>, Props extends SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>> & {
-    children: (value: ElementOfArray<ValueTypeOfField<F[K]>>, index: number) => React.ReactNode;
+    children: (valuePath: `${K}.${number}`, value: ElementOfArray<ValueTypeOfField<F[K]>>, index: number) => React.ReactNode;
 }>(this: MantineForm<F>, valuePath: K, List: ComponentType<Props>): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props>;
-export declare function DefaultList<Value>({ values, children, }: SuppliedListProps<Value> & {
-    children: (value: Value, index: number) => React.ReactNode;
+export declare function DefaultList<Value, ListPath extends string>({ values, listPath, children, }: SuppliedListProps<Value, ListPath> & {
+    children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/create_list.js

@@ -5,12 +5,14 @@ export function createList(valuePath, List) {
         const values = [...this.fields[valuePath].value];
         return {
             values,
+            listPath: valuePath,
         };
     };
     return createUnsafePartialObserverComponent(List, propSource);
 }
-export function DefaultList({ values, children, }) {
+export function DefaultList({ values, listPath, children, }) {
     return (_jsx(_Fragment, { children: values.map(function (value, index) {
-            return children(value, index);
+            const valuePath = `${listPath}.${index}`;
+            return children(valuePath, value, index);
         }) }));
 }

package/.out/mantine/hooks.d.ts

@@ -1,5 +1,6 @@
 import { type CheckboxProps, type PillProps, type RadioGroupProps, type RadioProps, type SelectProps, type TextInputProps } from '@mantine/core';
-import { type FormProps } from 'core/props';
+import { type ElementOfArray } from '@strictly/base';
+import { type FieldsViewProps, type FormProps } from 'core/props';
 import { type ComponentProps, type ComponentType } from 'react';
 import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
 import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields';
@@ -20,7 +21,7 @@ import { type MantineFieldComponent, type MantineForm } from './types';
 declare function SimpleSelect(props: SelectProps & {
     onChange?: (value: string | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useMantineForm<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FormProps<F>): MantineFormImpl<F>;
+export declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): MantineFormImpl<F>;
 declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly textInputCache;
     private readonly valueInputCache;
@@ -29,7 +30,8 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
-    private readonly subFormCache;
+    private readonly fieldsViewCache;
+    private readonly formCache;
     accessor fields: F;
     onFieldValueChange: <K extends keyof F>(this: void, key: K, value: F[K]['value']) => void;
     onFieldFocus: ((this: void, key: keyof F) => void) | undefined;
@@ -48,7 +50,8 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     radio<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioProps>(valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<P>): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>, P extends SuppliedPillProps>(valuePath: K, Pill: ComponentType<P>): MantineFieldComponent<SuppliedPillProps, P>;
-    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<`${K}.${number}`>>>;
-    subForm<K extends keyof AllFieldsOfFields<F>, S extends SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType;
+    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>>;
+    fieldsView<K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>): 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>;
 }
 export {};

package/.out/mantine/hooks.js

@@ -4,17 +4,18 @@ import { Cache, } from '@strictly/base';
 import { observable, runInAction, } from 'mobx';
 import { useEffect, useMemo, } from 'react';
 import { createCheckbox, } from './create_checkbox';
+import { createFieldsView } from './create_fields_view';
+import { createForm } from './create_form';
 import { createList, DefaultList, } from './create_list';
 import { createPill, } from './create_pill';
 import { createRadio, } from './create_radio';
 import { createRadioGroup, } from './create_radio_group';
-import { createSubForm } from './create_sub_form';
 import { createTextInput, } from './create_text_input';
 import { createValueInput, } from './create_value_input';
 function SimpleSelect(props) {
     return _jsx(Select, { ...props });
 }
-export function useMantineForm({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
+export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
     const form = useMemo(function () {
         return new MantineFormImpl(fields);
     }, 
@@ -63,7 +64,8 @@ class MantineFormImpl {
     radioCache = new Cache(createRadio.bind(this));
     pillCache = new Cache(createPill.bind(this));
     listCache = new Cache(createList.bind(this));
-    subFormCache = new Cache(createSubForm.bind(this));
+    fieldsViewCache = new Cache(createFieldsView.bind(this));
+    formCache = new Cache(createForm.bind(this));
     @observable.ref
     accessor fields;
     onFieldValueChange;
@@ -129,11 +131,19 @@ class MantineFormImpl {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return this.listCache.retrieveOrCreate(valuePath, DefaultList);
     }
-    // TODO have the returned component take any non-overlapping props as props
-    subForm(valuePath, SubForm) {
-        return this.subFormCache.retrieveOrCreate(valuePath, 
+    fieldsView(valuePath, FieldsView) {
+        // 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, this);
+    }
+    form(valuePath, Form) {
+        // 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, this);
+        Form, this);
     }
 }

package/.out/mantine/specs/checkbox_hooks.stories.d.ts

@@ -1,8 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
-declare function Component({ ErrorRenderer, ...props }: FormProps<{
+declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
     $: Field<boolean, string>;
 }> & {
     ErrorRenderer?: ErrorRenderer;

package/.out/mantine/specs/checkbox_hooks.stories.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 import { CHECKBOX_LABEL } from './checkbox_constants';
 function Component({ ErrorRenderer, ...props }) {
-    const inputProps = useMantineForm(props);
+    const inputProps = useMantineFormFields(props);
     const CheckboxComponent = inputProps.checkbox('$');
     return (_jsx(CheckboxComponent, { ErrorRenderer: ErrorRenderer, label: CHECKBOX_LABEL }));
 }

package/.out/mantine/specs/{sub_form_hooks.stories.d.ts → fields_view_hooks.stories.d.ts}

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type Field } from 'types/field';
-declare function Component(props: FormProps<{
+declare function Component(props: FieldsViewProps<{
     $: Field<string, string>;
     '$.a': Field<string, string>;
 }>): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/specs/{sub_form_hooks.stories.js → fields_view_hooks.stories.js}

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, } from '@mantine/core';
+import { Button, Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
-function SubFormImpl(props) {
-    const form = useMantineForm(props);
+import { useMantineFormFields } from 'mantine/hooks';
+const onClick = action('some button clicked');
+function SubFieldsView(props) {
+    const form = useMantineFormFields(props);
     const TextInput = form.textInput('$');
-    return _jsx(TextInput, { label: 'sub form' });
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'sub fields view' }), _jsx(Button, { onClick: props.onClick, children: "Bonus Button" })] }));
 }
 function Component(props) {
-    const form = useMantineForm(props);
-    const SubForm = form.subForm('$.a', SubFormImpl);
+    const form = useMantineFormFields(props);
+    const FieldsView = form.fieldsView('$.a', SubFieldsView);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'form' }), _jsx(SubForm, {})] }));
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'fields view' }), _jsx(FieldsView, { onClick: onClick })] }));
 }
 const meta = {
     component: Component,

package/.out/mantine/specs/fields_view_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/mantine/specs/fields_view_hooks.tests.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { render, } from '@testing-library/react';
+import * as stories from './fields_view_hooks.stories';
+const composedStories = composeStories(stories);
+describe('field view hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

package/.out/mantine/specs/form_hooks.stories.d.ts

@@ -0,0 +1,12 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FieldsViewProps } from 'core/props';
+import { type Field } from 'types/field';
+declare function Component(props: FieldsViewProps<{
+    $: Field<string>;
+    '$.a': Field<number>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Empty: Story;
+export declare const Populated: Story;

package/.out/mantine/specs/form_hooks.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, NumberInput, Stack, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineFormFields } from 'mantine/hooks';
+import { useCallback } from 'react';
+const onCancel = action('canceled');
+function SubForm({ value, onValueChange, onCancel, }) {
+    const onChange = useCallback((v) => {
+        onValueChange(Number.parseInt(`${v}`));
+    }, [onValueChange]);
+    return (_jsxs(Stack, { children: [_jsx(NumberInput, { allowDecimal: false, label: 'sub form', onChange: onChange, value: value }), _jsx(Button, { onClick: onCancel, children: "Cancel" })] }));
+}
+function Component(props) {
+    const form = useMantineFormFields(props);
+    const Form = form.form('$.a', SubForm);
+    const TextInput = form.textInput('$');
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'fields view' }), _jsx(Form, { onCancel: onCancel })] }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: '',
+            },
+            '$.a': {
+                readonly: false,
+                required: false,
+                value: 0,
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'Hello',
+            },
+            '$.a': {
+                readonly: false,
+                required: false,
+                value: 2,
+            },
+        },
+    },
+};

package/.out/mantine/specs/form_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/mantine/specs/form_hooks.tests.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { render, } from '@testing-library/react';
+import * as stories from './form_hooks.stories';
+const composedStories = composeStories(stories);
+describe('form hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

package/.out/mantine/specs/list_hooks.stories.d.ts

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type Field } from 'types/field';
-declare function Component(props: FormProps<{
+declare function Component(props: FieldsViewProps<{
     $: Field<string[], string>;
 }>): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;

package/.out/mantine/specs/list_hooks.stories.js

@@ -1,12 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Code, Paper, Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 function Component(props) {
-    const form = useMantineForm(props);
+    const form = useMantineFormFields(props);
     const List = form.list('$');
-    return (_jsx(Paper, { p: 'sm', withBorder: true, children: _jsx(Stack, { children: _jsx(List, { children: function (valuePath) {
-                    return (_jsxs(Code, { children: ["ValuePath: ", valuePath] }, valuePath));
+    return (_jsx(Paper, { p: 'sm', withBorder: true, children: _jsx(Stack, { children: _jsx(List, { children: function (valuePath, value, index) {
+                    return (_jsxs(Code, { children: [_jsxs("span", { children: ["ValuePath: ", valuePath] }), _jsx("br", {}), _jsxs("span", { children: ["Value: ", value] }), _jsx("br", {}), _jsxs("span", { children: ["Index: ", index] })] }, valuePath));
                 } }) }) }));
 }
 const meta = {
@@ -37,10 +37,10 @@ export const Populated = {
                 readonly: false,
                 required: false,
                 value: [
-                    '$.4',
-                    '$.6',
-                    '$.19',
-                    '$.0',
+                    'A',
+                    'B',
+                    'C',
+                    'D',
                 ],
             },
         },

package/.out/mantine/specs/radio_group_hooks.stories.d.ts

@@ -1,9 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
 import { type RadioValue } from './radio_group_constants';
-declare function Component({ ErrorRenderer, ...props }: FormProps<{
+declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
     $: Field<RadioValue | null, string>;
 }> & {
     ErrorRenderer?: ErrorRenderer;

package/.out/mantine/specs/radio_group_hooks.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 import { RADIO_GROUP_LABEL, RADIO_LABELS, RADIO_VALUES, } from './radio_group_constants';
 function Component({ ErrorRenderer, ...props }) {
-    const form = useMantineForm(props);
+    const form = useMantineFormFields(props);
     const RadioGroupComponent = form.radioGroup('$');
     return (_jsx(RadioGroupComponent, { ErrorRenderer: ErrorRenderer, label: RADIO_GROUP_LABEL, children: _jsx(Stack, { children: RADIO_VALUES.map(function (value) {
                 const label = RADIO_LABELS[value];

package/.out/mantine/specs/select_hooks.stories.d.ts

@@ -1,8 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
-declare function Component({ ErrorRenderer, ...props }: FormProps<{
+declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
     $: Field<string | null, string>;
 }> & {
     ErrorRenderer?: ErrorRenderer;

package/.out/mantine/specs/select_hooks.stories.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 import { SELECT_LABEL } from './select_hooks_constant';
 function Component({ ErrorRenderer, ...props }) {
-    const form = useMantineForm(props);
+    const form = useMantineFormFields(props);
     const SelectComponent = form.select('$');
     return (_jsx(SelectComponent, { ErrorRenderer: ErrorRenderer, data: [
             'a',

package/.out/mantine/specs/text_input_hooks.stories.d.ts

@@ -1,12 +1,12 @@
 import { type TextInputProps } from '@mantine/core';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type SuppliedTextInputProps, type TextInputTarget } from 'mantine/create_text_input';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type ComponentType } from 'react';
 import { type Field } from 'types/field';
 type StoryTextInputProps<T extends TextInputTarget> = SuppliedTextInputProps<T> & Pick<TextInputProps, 'label'>;
-declare function Component<T extends TextInputTarget>({ TextInput, ErrorRenderer, ...props }: FormProps<{
+declare function Component<T extends TextInputTarget>({ TextInput, ErrorRenderer, ...props }: FieldsViewProps<{
     $: Field<string, string>;
 }> & {
     TextInput?: ComponentType<StoryTextInputProps<T>>;

package/.out/mantine/specs/text_input_hooks.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PillsInputField, Textarea, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 import { TEXT_INPUT_LABEL } from './text_input_constants';
 function Component({ TextInput, ErrorRenderer, ...props }) {
-    const form = useMantineForm(props);
+    const form = useMantineFormFields(props);
     const TextInputComponent = form.textInput('$', TextInput);
     return (_jsx(TextInputComponent, { ErrorRenderer: ErrorRenderer, label: TEXT_INPUT_LABEL }));
 }

package/.out/mantine/specs/value_input_hooks.stories.d.ts

@@ -1,12 +1,12 @@
 import { type JsonInputProps, type NumberInputProps, type RatingProps, type SliderProps } from '@mantine/core';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type SuppliedValueInputProps } from 'mantine/create_value_input';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type ComponentType } from 'react';
 import { type Field } from 'types/field';
 type StoryValueInputProps<V> = SuppliedValueInputProps<V, any>;
-declare function Component<V, P extends StoryValueInputProps<V>>({ ValueInput, ErrorRenderer, inputProps, ...props }: FormProps<{
+declare function Component<V, P extends StoryValueInputProps<V>>({ ValueInput, ErrorRenderer, inputProps, ...props }: FieldsViewProps<{
     $: Field<V, string>;
 }> & {
     ValueInput: ComponentType<P>;