@strictly/react-form 0.0.5 → 0.0.7

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,9 +1,9 @@
 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, 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));

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>;

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

@@ -1,10 +1,10 @@
 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 { useMantineFormFields } from 'mantine/hooks';
 import { NUMBER_INPUT_LABEL, SLIDER_LABEL, } from './value_input_constants';
 function Component({ ValueInput, ErrorRenderer, inputProps, ...props }) {
-    const form = useMantineForm(props);
+    const form = useMantineFormFields(props);
     const ValueInputComponent = form.valueInput('$', ValueInput);
     return (_jsx(ValueInputComponent, { ...inputProps, ErrorRenderer: ErrorRenderer }));
 }