@strictly/react-form 0.0.15 → 0.0.17

package/.out/mantine/create_field_view.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Observer } from 'mobx-react';
+import { useCallback, } from 'react';
+import { Empty } from 'util/empty';
+/**
+ * Displays current value and error of a field
+ */
+function FieldView({ valuePath, form, children, }) {
+    const onFocus = useCallback(() => {
+        var _a;
+        (_a = form.onFieldFocus) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onBlur = useCallback(() => {
+        var _a;
+        (_a = form.onFieldBlur) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onValueChange = useCallback((value) => {
+        var _a;
+        (_a = form.onFieldValueChange) === null || _a === void 0 ? void 0 : _a.call(form, valuePath, value);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onSubmit = useCallback(() => {
+        var _a;
+        (_a = form.onFieldSubmit) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    return (_jsx(Observer, { children: () => {
+            const { value, error, } = form.fields[valuePath];
+            return children({
+                value,
+                error,
+                ErrorSink: Empty,
+                onFocus,
+                onBlur,
+                onValueChange,
+                onSubmit,
+            });
+        } }));
+}
+export function createFieldView(valuePath) {
+    return (props) => {
+        return (_jsx(FieldView, Object.assign({ form: this, valuePath: valuePath }, props)));
+    };
+}

package/.out/mantine/create_list.js

@@ -1,4 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, } from 'react';
 import { createUnsafePartialObserverComponent } from 'util/partial';
 export function createList(valuePath, List) {
     const propSource = () => {
@@ -13,6 +14,6 @@ export function createList(valuePath, List) {
 export function DefaultList({ values, listPath, children, }) {
     return (_jsx(_Fragment, { children: values.map(function (value, index) {
             const valuePath = `${listPath}.${index}`;
-            return children(valuePath, value, index);
+            return (_jsx(Fragment, { children: children(valuePath, value, index) }, valuePath));
         }) }));
 }

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

@@ -11,6 +11,7 @@ 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 { type FieldViewProps } from './create_field_view';
 import { type FieldsView } from './create_fields_view';
 import { DefaultList, type SuppliedListProps } from './create_list';
 import { type SuppliedPillProps } from './create_pill';
@@ -22,7 +23,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 useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): MantineFormImpl<F>;
+export declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): Omit<MantineFormImpl<F>, 'fields'>;
 declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly textInputCache;
     private readonly valueInputCache;
@@ -31,6 +32,7 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
+    private readonly fieldViewCache;
     private readonly fieldsViewCache;
     private readonly formCache;
     accessor fields: F;
@@ -52,6 +54,7 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     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, ErrorOfField<F[K]>>;
     list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>, never>;
+    fieldView<K extends keyof AllFieldsOfFields<F>>(valuePath: K): ComponentType<FieldViewProps<F, K>>;
     fieldsView<K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>): FieldsView<K, MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>;
     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, never>;
 }

package/.out/mantine/hooks.js

@@ -49,6 +49,7 @@ import { Cache, } from '@strictly/base';
 import { observable, runInAction, } from 'mobx';
 import { useEffect, useMemo, } from 'react';
 import { createCheckbox, } from './create_checkbox';
+import { createFieldView, } from './create_field_view';
 import { createFieldsView, } from './create_fields_view';
 import { createForm } from './create_form';
 import { createList, DefaultList, } from './create_list';
@@ -60,11 +61,13 @@ import { createValueInput, } from './create_value_input';
 function SimpleSelect(props) {
     return _jsx(Select, Object.assign({}, props));
 }
-export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
+export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields,
+// should use FieldView rather than observing fields directly from here
+ }) {
     const form = useMemo(function () {
         return new MantineFormImpl(fields);
     }, 
-    // handled separately below
+    // fields handled separately below
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(function () {
@@ -153,6 +156,12 @@ let MantineFormImpl = (() => {
                     writable: true,
                     value: new Cache(createList.bind(this))
                 });
+                Object.defineProperty(this, "fieldViewCache", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: new Cache(createFieldView.bind(this))
+                });
                 Object.defineProperty(this, "fieldsViewCache", {
                     enumerable: true,
                     configurable: true,
@@ -248,6 +257,9 @@ let MantineFormImpl = (() => {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return this.listCache.retrieveOrCreate(valuePath, DefaultList);
             }
+            fieldView(valuePath) {
+                return this.fieldViewCache.retrieveOrCreate(valuePath);
+            }
             fieldsView(valuePath, FieldsView) {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return this.fieldsViewCache.retrieveOrCreate(valuePath, 

package/.out/mantine/specs/field_view_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, 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 Error: Story;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Group, TextInput, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineFormFields } from 'mantine/hooks';
+import { useCallback, } from 'react';
+function Component(props) {
+    const form = useMantineFormFields(props);
+    const FieldView = form.fieldView('$');
+    return (_jsx(FieldView, { children: ({ error, value, onBlur, onFocus, onSubmit, onValueChange, }) => {
+            // this *is* a component eslint
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const onChange = useCallback(({ target: { value } }) => {
+                onValueChange(value);
+            }, [onValueChange]);
+            return (_jsxs(Group, { align: 'start', flex: 1, children: [_jsx(TextInput, { error: error, flex: 1, onBlur: onBlur, onChange: onChange, onFocus: onFocus, value: value }), _jsx(Button, { onClick: onSubmit, children: "Submit Field" })] }));
+        } }));
+}
+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: '',
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'hello',
+            },
+        },
+    },
+};
+export const Error = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'hello',
+                error: 'no hellos allowed',
+            },
+        },
+    },
+};

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

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

package/.out/mantine/specs/field_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 './field_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();
+    });
+});