@nolwenture/formik-jsonschema-form 0.7.1 → 0.9.0

package/dist/fields/stories/BooleanField.stories.js

@@ -0,0 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { BooleanField } from "./../BooleanField";
+export default {
+    title: "Fields/BooleanField",
+    component: BooleanField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { acceptTerms: false }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "acceptTerms",
+        schema: { type: "boolean" },
+        uiSchema: {
+            "ui:label": "I accept the terms and conditions",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const checkbox = canvasElement.querySelector('input[type="checkbox"][name="acceptTerms"]');
+        yield userEvent.click(checkbox);
+        yield expect(checkbox).toBeChecked();
+        yield userEvent.click(checkbox);
+        yield expect(checkbox).not.toBeChecked();
+    }),
+};

package/dist/fields/stories/DateField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { DateField } from "./../DateField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof DateField>;

package/dist/fields/stories/DateField.stories.js

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { DateField } from "./../DateField";
+export default {
+    title: "Fields/DateField",
+    component: DateField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { birthDate: "" }, onSubmit: (values) => console.log(values), children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "birthDate",
+        schema: { type: "string", format: "date" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const dateInput = canvasElement.querySelector('input[name="birthDate"]');
+        expect(dateInput).toBeInTheDocument();
+        const dateToInput = "2023-02-01";
+        yield userEvent.type(dateInput, dateToInput);
+        yield expect(dateInput).toHaveValue(dateToInput);
+    }),
+};

package/dist/fields/stories/NullField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { NullField } from "./../NullField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof NullField>;

package/dist/fields/stories/NullField.stories.js

@@ -0,0 +1,38 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { within, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { NullField } from "./../NullField";
+export default {
+    title: "Fields/NullField",
+    component: NullField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { someField: null }, onSubmit: (values) => console.log(values), children: _jsxs(Form, { children: [Story(), _jsx("button", { type: "submit", children: "Submit" })] }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "nullField",
+        description: "Additional info",
+        schema: { type: "null", title: "Null Field" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvasElement.querySelector('label[for="nullField"]');
+        const submitButton = canvasElement.querySelector('button[type="submit"]');
+        const additionalInfo = yield canvas.findByText("Additional info");
+        expect(title).toBeInTheDocument();
+        expect(title.textContent).toBeTruthy();
+        expect(additionalInfo).toBeInTheDocument();
+        expect(submitButton).toBeInTheDocument();
+    }),
+};

package/dist/fields/stories/NumberField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { NumberField } from "./../NumberField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof NumberField>;

package/dist/fields/stories/NumberField.stories.js

@@ -0,0 +1,33 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { NumberField } from "./../NumberField";
+export default {
+    title: "Fields/NumberField",
+    component: NumberField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { numberInput: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "numberInput",
+        schema: { type: "number" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const numberInput = canvasElement.querySelector('input[name="numberInput"]');
+        yield userEvent.type(numberInput, "asd123");
+        yield expect(numberInput).toHaveValue(123);
+        // Add tests, such as validation adn incrementing/decrementing the value
+    }),
+};

package/dist/fields/stories/ObjectField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { ObjectField } from "./../ObjectField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof ObjectField>;

package/dist/fields/stories/ObjectField.stories.js

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { ObjectField } from "./../ObjectField";
+export default {
+    title: "Fields/ObjectField",
+    component: ObjectField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "object",
+        schema: {
+            type: "object",
+            title: "Object field test",
+            properties: {
+                string: {
+                    type: "string",
+                    title: "stringField",
+                    description: "String description",
+                },
+                number: {
+                    type: "number",
+                    title: "numberField",
+                    description: "Number description",
+                },
+                boolean: {
+                    type: "boolean",
+                    title: "booleanField",
+                    description: "Boolean description",
+                    default: false,
+                },
+                enum: {
+                    type: "array",
+                    title: "Array Enum",
+                    description: "Array Enum description",
+                    items: {
+                        type: "number",
+                        enum: [1, 2, 3, 4],
+                    },
+                },
+                null: {
+                    type: "null",
+                    title: "nullField",
+                    description: "Null description",
+                },
+            },
+        },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const stringField = canvasElement.querySelector('input[name="object.string"]');
+        const numberField = canvasElement.querySelector('input[name="object.number"]');
+        const booleanField = canvasElement.querySelector('input[name="object.boolean"]');
+        const enumField = canvasElement.querySelector('select[name="object.enum[0]"]');
+        yield userEvent.type(stringField, "string");
+        yield userEvent.type(numberField, "123");
+        yield userEvent.click(booleanField);
+        yield userEvent.selectOptions(enumField, "2");
+        expect(stringField).toHaveValue("string");
+        expect(numberField).toHaveValue(123);
+        expect(booleanField).toBeChecked();
+        expect(enumField).toHaveValue("2");
+    }),
+};

package/dist/fields/stories/RadioField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { RadioField } from "./../RadioField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof RadioField>;

package/dist/fields/stories/RadioField.stories.js

@@ -0,0 +1,42 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { RadioField } from "./../RadioField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Fields/RadioField",
+    component: RadioField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "RadioField",
+        title: "Radio field test",
+        schema: {
+            type: "boolean",
+        },
+        uiSchema: {
+            "ui:label": { true: "yes", false: "no" },
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const radioTrue = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="true"]');
+        const radioFalse = canvasElement.querySelector('input[type="radio"][name="RadioField"][value="false"]');
+        yield userEvent.click(radioTrue);
+        yield expect(radioTrue).toBeChecked();
+        yield expect(radioFalse).not.toBeChecked();
+        yield userEvent.click(radioFalse);
+        yield expect(radioFalse).toBeChecked();
+        yield expect(radioTrue).not.toBeChecked();
+    }),
+};