@strictly/react-form 0.0.3 → 0.0.5

package/.out/.storybook/main.js

@@ -1,4 +1,6 @@
-import { dirname, join, } from 'path';
+import { createRequire } from 'module';
+import { dirname, join, } from 'node:path';
+const require = createRequire(import.meta.url);
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.

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/specs/sub_form_field_adapters.tests.d.ts

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

package/.out/core/mobx/specs/sub_form_field_adapters.tests.js

@@ -0,0 +1,41 @@
+import { subFormFieldAdapters, } from 'core/mobx/sub_form_field_adapters';
+import { mockDeep } from 'vitest-mock-extended';
+describe('subFormFieldAdapters', () => {
+    const fieldAdapter1 = mockDeep();
+    const fieldAdapter2 = mockDeep();
+    describe('empty value', () => {
+        const adapters = subFormFieldAdapters({}, '$.a');
+        it('equals expected type', () => {
+            expectTypeOf(adapters).toEqualTypeOf();
+        });
+        it('equals expected value', () => {
+            expect(adapters).toEqual({});
+        });
+    });
+    describe('single adapter', () => {
+        const adapters = subFormFieldAdapters({
+            $: fieldAdapter1,
+        }, '$.a');
+        it('equals expected type', () => {
+            expectTypeOf(adapters).toEqualTypeOf();
+        });
+        it('equals expected value', () => {
+            expect(adapters).toEqual({ '$.a': fieldAdapter1 });
+        });
+    });
+    describe('multiple adapters', () => {
+        const adapters = subFormFieldAdapters({
+            '$.x': fieldAdapter1,
+            '$.y': fieldAdapter2,
+        }, '$.a');
+        it('equals expected type', () => {
+            expectTypeOf(adapters).toEqualTypeOf();
+        });
+        it('equals expected value', () => {
+            expect(adapters).toEqual({
+                '$.a.x': fieldAdapter1,
+                '$.a.y': fieldAdapter2,
+            });
+        });
+    });
+});

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

@@ -0,0 +1,7 @@
+import { type StringConcatOf } from '@strictly/base';
+import { type FieldAdapter } from './field_adapter';
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
+    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K];
+};
+export declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(subAdapters: SubAdapters, prefix: P): SubFormFieldAdapters<SubAdapters, P>;
+export {};

package/.out/core/mobx/sub_form_field_adapters.js

@@ -0,0 +1,8 @@
+export function subFormFieldAdapters(subAdapters, prefix) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return Object.entries(subAdapters).reduce((acc, [subKey, subValue,]) => {
+        const key = subKey.replace('$', prefix);
+        acc[key] = subValue;
+        return acc;
+    }, {});
+}

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

@@ -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/.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/create_sub_form.d.ts

@@ -0,0 +1,6 @@
+import 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 { SubFormFields } from 'types/sub_form_fields';
+export declare 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>): () => import("react/jsx-runtime").JSX.Element;

package/.out/mantine/create_sub_form.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+export function createSubForm(valuePath, SubForm, observableProps) {
+    function toKey(subKey) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return subKey.replace('$', valuePath);
+    }
+    function toSubKey(key) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return key.replace(valuePath, '$');
+    }
+    function onFieldValueChange(subKey, value) {
+        // convert from subKey to key
+        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 observer(function () {
+        // convert fields to sub-fields
+        const subFields = Object.entries(observableProps.fields).reduce((acc, [fieldKey, fieldValue,]) => {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            if (fieldKey.startsWith(valuePath)) {
+                acc[toSubKey(fieldKey)] = fieldValue;
+            }
+            return acc;
+        }, {});
+        return (_jsx(SubForm
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        , { 
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
+    });
+}

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

@@ -8,6 +8,7 @@ import { type ErrorOfField } from 'types/error_of_field';
 import { type Fields } 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 { type SuppliedCheckboxProps } from './create_checkbox';
 import { DefaultList, type SuppliedListProps } from './create_list';
@@ -29,8 +30,9 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
+    private readonly subFormCache;
     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;
@@ -47,6 +49,7 @@ 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<ElementOfArray<F[K]>>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>>;
+    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>>;
+    subForm<K extends keyof AllFieldsOfFields<F>, S extends SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType;
 }
 export {};

package/.out/mantine/hooks.js

@@ -8,6 +8,7 @@ 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) {
@@ -62,6 +63,7 @@ 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));
     @observable.ref
     accessor fields;
     onFieldValueChange;
@@ -127,4 +129,11 @@ 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, 
+        // strip props from component since we lose information in the cache
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        SubForm, this);
+    }
 }

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

@@ -5,8 +5,8 @@ import { useMantineForm } from 'mantine/hooks';
 function Component(props) {
     const form = useMantineForm(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/sub_form_hooks.stories.d.ts

@@ -0,0 +1,15 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FormProps } from 'core/props';
+import { type Field } from 'types/field';
+declare function Component(props: FormProps<{
+    $: Field<string, string>;
+    '$.a': Field<string, string>;
+}>): 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;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const CustomError: Story;

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+function SubFormImpl(props) {
+    const form = useMantineForm(props);
+    const TextInput = form.textInput('$');
+    return _jsx(TextInput, { label: 'sub form' });
+}
+function Component(props) {
+    const form = useMantineForm(props);
+    const SubForm = form.subForm('$.a', SubFormImpl);
+    const TextInput = form.textInput('$');
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'form' }), _jsx(SubForm, {})] }));
+}
+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: '',
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'Hello',
+            },
+            '$.a': {
+                readonly: false,
+                required: false,
+                value: 'World',
+            },
+        },
+    },
+};
+export const Required = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: true,
+                value: 'xxx',
+            },
+            '$.a': {
+                readonly: false,
+                required: true,
+                value: 'yyy',
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        fields: {
+            $: {
+                readonly: true,
+                required: false,
+                value: 'xxx',
+            },
+            '$.a': {
+                readonly: true,
+                required: false,
+                value: 'yyy',
+            },
+        },
+    },
+};
+export const CustomError = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'xxx',
+                error: 'form error',
+            },
+            '$.a': {
+                readonly: false,
+                required: false,
+                value: 'xxx',
+                error: 'sub form error',
+            },
+        },
+    },
+};