@strictly/react-form 0.0.1

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { fireEvent, render, } from '@testing-library/react';
+import { vi, } from 'vitest';
+import { RADIO_GROUP_LABEL, RADIO_LABELS, RADIO_VALUES, } from './radio_group_constants';
+import * as stories from './radio_group_hooks.stories';
+const composedStories = composeStories(stories);
+const { Empty, } = composedStories;
+describe('mantine radio group hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+    describe('events', function () {
+        let onFieldValueChange;
+        let onFieldFocus;
+        let onFieldBlur;
+        let wrapper;
+        let radioGroup;
+        beforeEach(async function () {
+            onFieldValueChange = vi.fn();
+            onFieldFocus = vi.fn();
+            onFieldBlur = vi.fn();
+            wrapper = render((_jsx(Empty, { onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldValueChange: onFieldValueChange })));
+            radioGroup = await wrapper.findByLabelText(RADIO_GROUP_LABEL);
+        });
+        describe.each(RADIO_VALUES)('selects %s', function (value) {
+            let radio;
+            beforeEach(async function () {
+                const label = RADIO_LABELS[value];
+                radio = await wrapper.findByLabelText(label);
+                fireEvent.click(radio);
+            });
+            it('fires onFieldValueChange', function () {
+                expect(onFieldValueChange).toHaveBeenCalledOnce();
+                expect(onFieldValueChange).toHaveBeenCalledWith('$', value);
+            });
+        });
+        describe('focus', function () {
+            beforeEach(function () {
+                fireEvent.focus(radioGroup);
+            });
+            it('fires focus event', function () {
+                expect(onFieldFocus).toHaveBeenCalledOnce();
+                expect(onFieldFocus).toHaveBeenCalledWith('$');
+            });
+            describe('blur', function () {
+                beforeEach(function () {
+                    fireEvent.blur(radioGroup);
+                });
+                it('fires blur event', function () {
+                    expect(onFieldBlur).toHaveBeenCalledOnce();
+                    expect(onFieldBlur).toHaveBeenCalledWith('$');
+                });
+                it('does not refire focus event', function () {
+                    expect(onFieldFocus).toHaveBeenCalledOnce();
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,12 @@
+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 | null, string>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const EmptySelect: Story;
+export declare const PopulatedSelect: Story;
+export declare const InvalidSelect: Story;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+import { SELECT_LABEL } from './select_hooks_constant';
+function Component(props) {
+    const form = useMantineForm(props);
+    const SelectComponent = form.select('$');
+    return (_jsx(SelectComponent, { data: [
+            'a',
+            'b',
+            'c',
+        ], label: SELECT_LABEL }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const EmptySelect = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: '',
+            },
+        },
+    },
+};
+export const PopulatedSelect = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: 'a',
+            },
+        },
+    },
+};
+export const InvalidSelect = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: 'd',
+                error: 'invalid option',
+            },
+        },
+    },
+};

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

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

package/.out/mantine/specs/select_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 './select_hooks.stories';
+const composedStories = composeStories(stories);
+describe('mantine select hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

package/.out/mantine/specs/select_hooks_constant.d.ts

@@ -0,0 +1 @@
+export declare const SELECT_LABEL = "Select";

package/.out/mantine/specs/select_hooks_constant.js

@@ -0,0 +1 @@
+export const SELECT_LABEL = 'Select';

package/.out/mantine/specs/text_input_constants.d.ts

@@ -0,0 +1 @@
+export declare const TEXT_INPUT_LABEL = "Text Input";

package/.out/mantine/specs/text_input_constants.js

@@ -0,0 +1 @@
+export const TEXT_INPUT_LABEL = 'Text Input';

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

@@ -0,0 +1,21 @@
+import { type TextInputProps } from '@mantine/core';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FormProps } from 'core/props';
+import { type SuppliedTextInputProps, type TextInputTarget } from 'mantine/create_text_input';
+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, ...props }: FormProps<{
+    $: Field<string, string>;
+}> & {
+    TextInput?: ComponentType<StoryTextInputProps<T>>;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story<T extends TextInputTarget = HTMLInputElement> = StoryObj<typeof Component<T>>;
+export declare const Empty: Story;
+export declare const Populated: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const OverriddenTextarea: Story<HTMLTextAreaElement>;
+export declare const OverriddenPillsInputField: Story;

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

@@ -0,0 +1,88 @@
+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 { TEXT_INPUT_LABEL } from './text_input_constants';
+function Component({ TextInput, ...props }) {
+    const form = useMantineForm(props);
+    const TextInputComponent = form.textInput('$', TextInput);
+    return _jsx(TextInputComponent, { label: TEXT_INPUT_LABEL });
+}
+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: {
+            $: {
+                disabled: false,
+                required: false,
+                value: '',
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 'Hello',
+            },
+        },
+    },
+};
+export const Required = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: 'xxx',
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        fields: {
+            $: {
+                disabled: true,
+                required: false,
+                value: 'xxx',
+            },
+        },
+    },
+};
+export const OverriddenTextarea = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 'Textarea',
+            },
+        },
+        TextInput: Textarea,
+    },
+};
+export const OverriddenPillsInputField = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 'PillsInputField',
+            },
+        },
+        TextInput: PillsInputField,
+    },
+};

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

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

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { fireEvent, render, } from '@testing-library/react';
+import { vi, } from 'vitest';
+import { TEXT_INPUT_LABEL } from './text_input_constants';
+import * as stories from './text_input_hooks.stories';
+const composedStories = composeStories(stories);
+const { Populated, } = composedStories;
+describe('mantine checkbox hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+    describe('events', function () {
+        let onFieldValueChange;
+        let onFieldFocus;
+        let onFieldBlur;
+        let onFieldSubmit;
+        let wrapper;
+        let textInput;
+        beforeEach(async function () {
+            onFieldValueChange = vi.fn();
+            onFieldFocus = vi.fn();
+            onFieldBlur = vi.fn();
+            onFieldSubmit = vi.fn();
+            wrapper = render((_jsx(Populated, { onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange })));
+            textInput = await wrapper.findByLabelText(TEXT_INPUT_LABEL);
+        });
+        it('fires change event', function () {
+            const value = 'new value';
+            fireEvent.change(textInput, {
+                target: {
+                    value,
+                },
+            });
+            expect(onFieldValueChange).toHaveBeenCalledOnce();
+            expect(onFieldValueChange).toHaveBeenCalledWith('$', value);
+        });
+        it('fires submit event on enter', function () {
+            fireEvent.keyUp(textInput, {
+                key: 'Enter',
+            });
+            expect(onFieldSubmit).toHaveBeenCalledOnce();
+            expect(onFieldSubmit).toHaveBeenLastCalledWith('$');
+        });
+        it.each([
+            'Tab',
+            'Space',
+            'x',
+        ])('does not fire submit event on %s', function (key) {
+            fireEvent.keyUp(textInput, {
+                key,
+            });
+            expect(onFieldSubmit).not.toHaveBeenCalled();
+        });
+        describe('focus', function () {
+            beforeEach(function () {
+                fireEvent.focus(textInput);
+            });
+            it('fires focus event', function () {
+                expect(onFieldFocus).toHaveBeenCalledOnce();
+                expect(onFieldFocus).toHaveBeenCalledWith('$');
+            });
+            describe('blur', function () {
+                beforeEach(function () {
+                    fireEvent.blur(textInput);
+                });
+                it('fires blur event', function () {
+                    expect(onFieldBlur).toHaveBeenCalledOnce();
+                    expect(onFieldBlur).toHaveBeenCalledWith('$');
+                });
+                it('does not refire focus event', function () {
+                    expect(onFieldFocus).toHaveBeenCalledOnce();
+                });
+            });
+        });
+    });
+});

package/.out/mantine/specs/value_input_constants.d.ts

@@ -0,0 +1,2 @@
+export declare const NUMBER_INPUT_LABEL = "Number Input";
+export declare const SLIDER_LABEL = "Slider";

package/.out/mantine/specs/value_input_constants.js

@@ -0,0 +1,2 @@
+export const NUMBER_INPUT_LABEL = 'Number Input';
+export const SLIDER_LABEL = 'Slider';

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

@@ -0,0 +1,23 @@
+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 SuppliedValueInputProps } from 'mantine/create_value_input';
+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, inputs, ...props }: FormProps<{
+    $: Field<V, string>;
+}> & {
+    ValueInput: ComponentType<P>;
+} & {
+    inputs: P;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story<V, P extends StoryValueInputProps<V>> = StoryObj<typeof Component<V, P>>;
+export declare const EmptyNumberInput: Story<number | string, NumberInputProps>;
+export declare const PopulatedNumberInput: Story<number | string, NumberInputProps>;
+export declare const DisabledNumberInput: Story<number | string, NumberInputProps>;
+export declare const AnSlider: Story<number, SliderProps>;
+export declare const AnRating: Story<number, RatingProps>;
+export declare const AnJsonInput: Story<string, JsonInputProps>;

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JsonInput, NumberInput, Rating, Slider, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+import { NUMBER_INPUT_LABEL, SLIDER_LABEL, } from './value_input_constants';
+function Component({ ValueInput, inputs, ...props }) {
+    const form = useMantineForm(props);
+    const ValueInputComponent = form.valueInput('$', ValueInput);
+    return (_jsx(ValueInputComponent, { ...inputs }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const EmptyNumberInput = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: '',
+            },
+        },
+        ValueInput: NumberInput,
+        inputs: {
+            label: NUMBER_INPUT_LABEL,
+        },
+    },
+};
+export const PopulatedNumberInput = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 3,
+            },
+        },
+        ValueInput: NumberInput,
+        inputs: {
+            label: NUMBER_INPUT_LABEL,
+        },
+    },
+};
+export const DisabledNumberInput = {
+    args: {
+        fields: {
+            $: {
+                disabled: true,
+                required: false,
+                value: 3,
+            },
+        },
+        ValueInput: NumberInput,
+        inputs: {
+            label: NUMBER_INPUT_LABEL,
+        },
+    },
+};
+export const AnSlider = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 3,
+            },
+        },
+        ValueInput: Slider,
+        inputs: {
+            label: SLIDER_LABEL,
+            min: 1,
+            max: 10,
+            marks: [
+                {
+                    value: 1,
+                    label: 'min',
+                },
+                {
+                    value: 5,
+                    label: 'mid',
+                },
+                {
+                    value: 10,
+                    label: 'max',
+                },
+            ],
+        },
+    },
+};
+export const AnRating = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: 2,
+            },
+        },
+        ValueInput: Rating,
+        inputs: {},
+    },
+};
+export const AnJsonInput = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: '{}',
+            },
+        },
+        ValueInput: JsonInput,
+        inputs: {
+            rows: 8,
+        },
+    },
+};

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

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

package/.out/mantine/specs/value_input_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 './value_input_hooks.stories';
+const composedStories = composeStories(stories);
+describe('mantine value input hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

package/.out/mantine/types.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType } from 'react';
+import { type Fields } from 'types/field';
+import { type UnsafePartialComponent } from 'util/partial';
+export type MantineForm<F extends Fields> = {
+    fields: F;
+    onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
+    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;
+};
+export type MantineFieldComponent<T, P = T> = UnsafePartialComponent<ComponentType<P>, T>;

package/.out/mantine/types.js

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

package/.out/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "outDir": "./.out"
+    },
+    "extends": "../../tsconfig.json",
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+        ".storybook/**/*.ts",
+        ".storybook/**/*.tsx",
+        ".vitest/**/*.ts",
+        "babel.config.cjs",
+        "tsconfig.json"
+    ],
+    "references": [
+        {
+            "path": "../../support/vite"
+        },
+        {
+            "path": "../define"
+        },
+        {
+            "path": "../base"
+        }
+    ]
+}