@nolwenture/formik-jsonschema-form 0.7.1 → 0.9.0

package/dist/sampleData/multipleChoiceSchema.js

@@ -0,0 +1,112 @@
+export const multipleChoiceSchema = {
+    title: "TITLE",
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
+    properties: {
+        weather: {
+            type: "string",
+            title: "What is the weather like today? (no style given)",
+            oneOf: [
+                { const: "sunny", title: "Sunny" },
+                { const: "cloudy", title: "Cloudy" },
+                { const: "rainy", title: "Rainy" },
+                { const: "windy", title: "Windy" },
+            ],
+        },
+        feeling: {
+            type: "string",
+            title: "How are you feeling today? (style: inline)",
+            oneOf: [
+                { const: "happy", title: "Happy" },
+                { const: "creative", title: "Creative" },
+                { const: "tired", title: "Tired" },
+                { const: "nope", title: "Please don't even ask..." },
+            ],
+        },
+        food: {
+            type: "string",
+            title: "What would you like to eat today? (style: oneColumn)",
+            anyOf: [
+                { const: "breakfast", title: "Breakfast" },
+                { const: "secondBreakfast", title: "What about second breakfast?" },
+                { const: "elevenses", title: "Elevenses" },
+                { const: "luncheon", title: "Luncheon" },
+                { const: "afternoonTea", title: "Afternoon tea" },
+                { const: "dinner", title: "Dinner" },
+                { const: "supper", title: "Supper" },
+            ],
+        },
+        drinks: {
+            type: "string",
+            title: "What would you like to drink today? (style: twoColumns)",
+            anyOf: [
+                { const: "water", title: "Water" },
+                { const: "coffee", title: "Coffee" },
+                { const: "tea", title: "Tea" },
+                { const: "milk", title: "Milk" },
+                { const: "nonMilk", title: "Non-dairy milk" },
+                { const: "juice", title: "Juice" },
+                { const: "beer", title: "Beer" },
+                { const: "wine", title: "Wine" },
+                { const: "cocktail", title: "Cocktail" },
+                { const: "mocktail", title: "Mocktail" },
+                { const: "somethingElse", title: "Something else" },
+            ],
+        },
+        flowers: {
+            type: "string",
+            title: "Pick some flowers (style: threeColumns)",
+            anyOf: [
+                { const: "lily", title: "Lily" },
+                { const: "rose", title: "Rose" },
+                { const: "iris", title: "Iris" },
+                { const: "tulip", title: "Tulip" },
+                { const: "dahlia", title: "Dahlia" },
+                { const: "daisy", title: "Daisy" },
+                { const: "sunflower", title: "Sunflower" },
+                { const: "orchid", title: "Orchid" },
+                { const: "carnation", title: "Carnation" },
+                { const: "poppy", title: "Poppy" },
+                { const: "gerbera", title: "Gerbera" },
+                { const: "camellia", title: "Camellia" },
+                { const: "aster", title: "Aster" },
+                { const: "marigold", title: "Marigold" },
+                { const: "calendula", title: "Calendula" },
+                { const: "lilac", title: "Lilac" },
+                { const: "primrose", title: "Primrose" },
+                { const: "daffodil", title: "Daffodil" },
+                { const: "oleander", title: "Oleander" },
+                { const: "buttercups", title: "Buttercups" },
+                { const: "lotus", title: "Lotus" },
+            ],
+        },
+    },
+};
+export const multipleChoiceUiSchema = {
+    weather: {
+        "ui:field": "MultipleChoiceField",
+    },
+    feeling: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "inline",
+        },
+    },
+    food: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "oneColumn",
+        },
+    },
+    drinks: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "twoColumns",
+        },
+    },
+    flowers: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "threeColumns",
+        },
+    },
+};

package/dist/sampleData/refDefSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const refDefSchema: Schema;
+export declare const refDefUiSchema: UiSchema;

package/dist/sampleData/refDefSchema.js

@@ -0,0 +1,219 @@
+import { ageFieldDefinition } from "./ageFieldDefinition";
+export const refDefSchema = {
+    title: "References and Definitions",
+    type: "object",
+    required: ["name", "field"],
+    properties: {
+        name: {
+            $ref: "#/definitions/name",
+        },
+        age: {
+            $ref: "#/definitions/age",
+        },
+        creditCard: {
+            type: "number",
+            title: "Credit card number",
+            description: "Giving input to this field will trigger its dependent field 'billing_address'",
+        },
+        fieldType: {
+            type: "string",
+            description: "Selecting an option in this field will render the correct dependent field from the provided oneOf-array",
+            enum: ["no type", "string", "object", "array", "object and string"],
+        },
+        boolean: {
+            type: "boolean",
+            title: "I already had coffee today",
+        },
+        animal: {
+            type: "string",
+            oneOf: [
+                { const: "cat", title: "Cat" },
+                { const: "fish", title: "Fish" },
+                { const: "dog", title: "Dog" },
+                { const: "horse", title: "Horse" },
+                { const: "hamster", title: "Hamster" },
+            ],
+        },
+    },
+    dependencies: {
+        creditCard: {
+            properties: {
+                billing_address: {
+                    type: "object",
+                    description: "This object depends on creditCard field input",
+                    properties: {
+                        street: { type: "string", title: "Street" },
+                        city: { type: "string", title: "City" },
+                        postalCode: { type: "number", title: "Postal code" },
+                    },
+                },
+            },
+            required: ["billing_address"],
+        },
+        fieldType: {
+            oneOf: [
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["no type"],
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["string"],
+                        },
+                        stringField: {
+                            type: "string",
+                            title: "StringField",
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["object"],
+                        },
+                        objectField: {
+                            type: "object",
+                            properties: {
+                                objectString: {
+                                    type: "string",
+                                    title: "StringField in Object",
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["array"],
+                        },
+                        arrayField: {
+                            type: "array",
+                            additionalItems: { type: "string" },
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        fieldType: {
+                            enum: ["object and string"],
+                        },
+                        stringField: {
+                            type: "string",
+                            title: "StringField",
+                        },
+                        objectField: {
+                            type: "object",
+                            properties: {
+                                objectString: {
+                                    type: "string",
+                                    title: "StringField in Object",
+                                },
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+        boolean: {
+            oneOf: [
+                {
+                    properties: { boolean: false },
+                },
+                {
+                    properties: {
+                        boolean: true,
+                        something: { type: "string" },
+                    },
+                },
+            ],
+        },
+    },
+    allOf: [
+        {
+            if: {
+                properties: {
+                    animal: {
+                        const: "cat",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    food: {
+                        type: "string",
+                        enum: ["meat", "grass", "fish"],
+                    },
+                },
+                required: ["food"],
+            },
+        },
+        {
+            if: {
+                properties: {
+                    animal: {
+                        const: "fish",
+                    },
+                },
+            },
+            then: {
+                properties: {
+                    food: {
+                        type: "string",
+                        enum: ["insect", "worms"],
+                    },
+                    water: {
+                        type: "string",
+                        enum: ["lake", "sea"],
+                    },
+                },
+                required: ["food", "water"],
+            },
+            // else: {
+            //   properties: {
+            //     likesWalkiesWhere: {
+            //       type: "string",
+            //       enum: ["park", "forest", "garden"],
+            //     },
+            //   },
+            // },
+        },
+        {
+            required: ["animal"],
+        },
+    ],
+    definitions: {
+        name: {
+            type: "string",
+            title: "Name",
+            description: "The schema for this field comes from the 'definitions' object inside the main schema",
+        },
+        age: ageFieldDefinition,
+    },
+};
+export const refDefUiSchema = {
+    "ui:order": [
+        "name",
+        "age",
+        "creditCard",
+        "billing_address",
+        "fieldType",
+        "stringField",
+        "objectField",
+        "arrayField",
+        "boolean",
+        "something",
+        "animal",
+        "food",
+        "water",
+    ],
+    fieldType: {
+        "ui:placeholderOptionOptions": {
+            props: { disabled: false, hidden: false },
+        },
+    },
+};

package/dist/sampleData/requiredInputSchema.js

@@ -4,7 +4,6 @@ export const requiredInputSchema = {
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
-        feeling: { type: "boolean", title: "Feeling happy today?" },
         vibes: { type: "boolean", title: "Turn on the good vibes" },
         arrayOfObject: {
             type: "array",
@@ -62,10 +61,6 @@ export const requiredInputSchema = {
     },
 };
 export const requiredInputUiSchema = {
-    feeling: {
-        "ui:field": "RadioField",
-        "ui:label": { true: "yes", false: "no" },
-    },
     vibes: {
         "ui:field": "ToggleField",
     },

package/dist/styledComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps } from "./types";
+import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps } from "./types";
 import React from "react";
 import * as formik from "formik";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
@@ -166,6 +166,7 @@ export declare const RadioButtonField: {
         }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>, keyof React.Component<any, {}, any>>;
     };
 };
+export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const MultiSelectInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;

package/dist/styledComponents.js

@@ -15,6 +15,7 @@ import styled from "styled-components";
 import * as formik from "formik";
 import { FormRegistry } from "./Form";
 import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose } from "./types";
+import { getStyle } from "./utils/getStyle";
 export const Form = styled(formik.Form) ``;
 export const FormButtonWrapper = styled.div ``;
 export const FormButton = styled.button ``;
@@ -289,6 +290,13 @@ export const RadioButtonField = ({ label, inputProps, name, className, }) => {
     var _a, _b;
     return (_jsxs(RadioButtonFieldContainer, { className: className, children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "true" })), _jsx(ButtonLabelTrue, { children: (_a = label === null || label === void 0 ? void 0 : label.true) !== null && _a !== void 0 ? _a : "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "false" })), _jsx(ButtonLabelFalse, { children: (_b = label === null || label === void 0 ? void 0 : label.false) !== null && _b !== void 0 ? _b : "false" })] })] }));
 };
+const MultipleChoiceFieldContainer = styled(RadioButtonFieldContainer) ``;
+const MultipleChoiceFieldElement = styled(RadioButtonFieldElement) ``;
+const MultipleChoiceFieldInput = styled(RadioButtonFieldInput) ``;
+const MultipleChoiceFieldLabel = styled(ButtonLabel) ``;
+export const MultipleChoiceField = ({ inputProps, name, className, enums, style, }) => {
+    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => (_jsxs(MultipleChoiceFieldElement, { children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, inputProps, { name: name, type: enums.type === "multiSelect" ? "checkbox" : "radio", value: typeof v === "string" || typeof v === "number" ? v : v.const })), _jsx(MultipleChoiceFieldLabel, { children: typeof v === "string" || typeof v === "number" ? v : v.title })] }, typeof v === "string" || typeof v === "number" ? v : v.const))) }));
+};
 RadioButtonField.styles = {
     RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
     RadioButtonFieldElementStyle: RadioButtonFieldElement,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { JSONSchema7 } from "json-schema";
+import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import React from "react";
 export type FormProps<T> = React.PropsWithChildren<{
     /** If true, disabled prop is passed down to each field on the form */
@@ -48,7 +48,9 @@ export type FormRegistryContextValue = {
     fields: Record<string, Field>;
     templates: TemplatesType;
     components: ComponentsType;
-    definitions: Record<string, any>;
+    definitions: {
+        [key: string]: JSONSchema7Definition;
+    } | undefined;
     formContext: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
@@ -127,6 +129,7 @@ export type ComponentsType = {
     FieldInput: React.FunctionComponent<any>;
     RequiredIndicator: React.FunctionComponent<any>;
     RadioButtonField: React.FunctionComponent<any>;
+    MultipleChoiceField: React.FunctionComponent<any>;
     ToggleSwitchField: React.FunctionComponent<any>;
     SearchableMultiTagSelectField: React.FunctionComponent<any>;
 };
@@ -169,6 +172,20 @@ export type RadioButtonFieldProps = {
     name?: React.ReactNode;
     className?: string;
 };
+type Enum = {
+    type: string;
+    values: {
+        const: number | string;
+        title: string;
+    }[] | number[] | string[];
+};
+export type MultipleChoiceFieldProps = {
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+    enums: Enum;
+    style?: string;
+};
 export type ToggleSwitchFieldProps = {
     inputProps: any;
     name: React.ReactNode;

package/dist/utils/__tests/createInitialValues.test.d.ts

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

package/dist/utils/__tests/createInitialValues.test.js

@@ -0,0 +1,72 @@
+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 { createInitialValues } from "../createInitialValues";
+const exampleSchema = {
+    title: "TITLE",
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
+    properties: {
+        name: { type: "string", title: "Full name" },
+        number: { type: "number", title: "Phone number" },
+        feeling: { type: "boolean", title: "Feeling happy today?" },
+        arrayOfObject: {
+            type: "array",
+            title: "Array of objects",
+            items: {
+                type: "object",
+                title: "Favourites",
+                required: ["favouriteFood"],
+                properties: {
+                    favouriteFood: { type: "string", title: "Favourite food" },
+                    favouriteSong: { type: "string", title: "Favourite song" },
+                },
+            },
+            additionalItems: {
+                type: "object",
+                title: "Second favourites",
+                required: ["secondFavouriteSong"],
+                properties: {
+                    anotherFavouriteFood: {
+                        type: "string",
+                        title: "Another favourite food",
+                    },
+                    anotherFavouriteSong: {
+                        type: "string",
+                        title: "Another favourite song",
+                    },
+                },
+            },
+        },
+        nestedObject: {
+            type: "object",
+            title: "Nested Object",
+            required: ["tasks"],
+            properties: {
+                hobbies: { type: "string", title: "Hobbies" },
+                tasks: { type: "string", title: "Tasks" },
+            },
+        },
+    },
+};
+describe("Create Initial Values", () => {
+    it("creates for an object type", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = createInitialValues(exampleSchema);
+        const expected = {
+            name: "",
+            number: 0,
+            feeling: false,
+            arrayOfObject: [],
+            nestedObject: {
+                hobbies: "",
+                tasks: "",
+            },
+        };
+        expect(result).toEqual(expected);
+    }));
+});

package/dist/utils/__tests/deepOverlap.test.d.ts

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

package/dist/utils/__tests/deepOverlap.test.js

@@ -0,0 +1,41 @@
+import { deepOverlap } from "../deepOverlap";
+describe("deepOverlap", () => {
+    test("returns true for both empty objects", () => {
+        expect(deepOverlap({}, {})).toBe(true);
+    });
+    test("returns true for identical objects", () => {
+        const obj1 = { a: 1, b: 2 };
+        const obj2 = { a: 1, b: 2 };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns true for nested objects that are identical", () => {
+        const obj1 = { a: { b: 2 } };
+        const obj2 = { a: { b: 2 } };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("handles arrays and non-object types correctly", () => {
+        const obj1 = { a: [1, 2, 3], b: "string", c: true };
+        const obj2 = { a: [1, 2, 3], b: "string", c: true };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns true for objects with keys in different orders", () => {
+        const obj1 = { a: 1, b: { c: 2 } };
+        const obj2 = { b: { c: 2 }, a: 1 };
+        expect(deepOverlap(obj1, obj2)).toBe(true);
+    });
+    test("returns false for objects with different values", () => {
+        const obj1 = { a: 1 };
+        const obj2 = { a: 2 };
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+    test("returns false for nested objects that do not overlap", () => {
+        const obj1 = { a: { b: 1 } };
+        const obj2 = { a: { b: 2 } };
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+    test("returns false when one object is empty", () => {
+        const obj1 = { a: 1 };
+        const obj2 = {};
+        expect(deepOverlap(obj1, obj2)).toBe(false);
+    });
+});

package/dist/utils/__tests/getEnums.test.js

@@ -1,5 +1,12 @@
 import { getEnums } from "../getEnums";
 describe("getEnums", () => {
+    test("returns undefined when no enum types are defined", () => {
+        const result = getEnums({ schema: {} });
+        expect(result).toBeUndefined();
+    });
+    test("throws error when more than one enum type is defined", () => {
+        expect(() => getEnums({ schema: { enum: [], oneOf: [], anyOf: [] } })).toThrow('Only one of "enum", "oneOf" or "anyOf" can be defined!');
+    });
     test("enum works", () => {
         const result = getEnums({ schema: { enum: ["one", "two", "three"] } });
         expect(result).toEqual({
@@ -15,10 +22,7 @@ describe("getEnums", () => {
         const result = getEnums({
             schema: {
                 oneOf: [
-                    {
-                        const: "horse",
-                        title: "Horse",
-                    },
+                    { const: "horse", title: "Horse" },
                     { const: "frog", title: "Frog" },
                     { const: "bird", title: "Bird" },
                 ],
@@ -27,10 +31,7 @@ describe("getEnums", () => {
         expect(result).toEqual({
             type: "select",
             values: [
-                {
-                    const: "horse",
-                    title: "Horse",
-                },
+                { const: "horse", title: "Horse" },
                 { const: "frog", title: "Frog" },
                 { const: "bird", title: "Bird" },
             ],
@@ -40,10 +41,7 @@ describe("getEnums", () => {
         const result = getEnums({
             schema: {
                 anyOf: [
-                    {
-                        const: "tangerine",
-                        title: "Tangerine",
-                    },
+                    { const: "tangerine", title: "Tangerine" },
                     { const: "mandarin", title: "Mandarin" },
                     { const: "bruno", title: "Bruno" },
                 ],
@@ -52,10 +50,7 @@ describe("getEnums", () => {
         expect(result).toEqual({
             type: "multiSelect",
             values: [
-                {
-                    const: "tangerine",
-                    title: "Tangerine",
-                },
+                { const: "tangerine", title: "Tangerine" },
                 { const: "mandarin", title: "Mandarin" },
                 { const: "bruno", title: "Bruno" },
             ],

package/dist/utils/__tests/getTitleAndDescription.test.d.ts

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