@nolwenture/formik-jsonschema-form 0.26.2 → 0.26.4

package/dist/esm/types.d.ts

@@ -0,0 +1,337 @@
+import { FormikContextType, FormikErrors } from "formik";
+import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import React, { MouseEventHandler } from "react";
+import Yup from "yup";
+export type FormProps<T> = React.PropsWithChildren<{
+    /** If true, disabled prop is passed down to each field on the form */
+    disabled?: boolean | undefined;
+    /** If true, array field schemas missing 'additionalItems' will replace it with 'items'  */
+    useItemsAsAdditionalItems?: boolean | undefined;
+    /** If true, properties in object fields' data that aren't in the schema will only be displayed if `additionalProperties` is enabled in the schema */
+    hideUnmarkedAdditionalProperties?: boolean;
+    className?: string | undefined;
+    /** Form schema */
+    schema: Schema;
+    /** Form uiSchema */
+    uiSchema?: UiSchema | undefined;
+    /** Data that is passed down to all fields. Used for implementing context aware fields */
+    formContext?: Record<string, any>;
+    /** Dictionary of registered fields */
+    fields?: {
+        [name: string]: Field;
+    } | undefined;
+    templates?: Partial<TemplatesType>;
+    components?: Partial<ComponentsType>;
+    /**
+     * If set to true, turns off HTML5 validation
+     * @default false
+     */
+    noHtml5Validate?: boolean | undefined;
+    hideSubmit?: boolean | undefined;
+}>;
+export type Schema = JSONSchema7;
+export type UiSchema = {
+    "ui:field"?: Field | string;
+    "ui:options"?: {
+        [key: string]: boolean | number | string | object | any[] | null;
+    };
+    "ui:props"?: {
+        [key: string]: any;
+    };
+    "ui:help"?: React.ReactNode | React.ReactNode[];
+    "ui:info"?: InfoFieldButtonProps;
+    "ui:placeholderOptionOptions"?: {
+        props: {
+            [key: string]: any;
+        };
+    };
+    [name: string]: any;
+};
+export type FormRegistryContextValue = {
+    fields: Record<string, Field>;
+    templates: TemplatesType;
+    components: ComponentsType;
+    definitions: {
+        [key: string]: JSONSchema7Definition;
+    } | undefined;
+    uiSchemaDefinitions: {
+        [key: string]: JSONSchema7Definition;
+    } | undefined;
+    formContext: Record<string, any>;
+    useItemsAsAdditionalItems: boolean;
+    hideUnmarkedAdditionalProperties: boolean;
+};
+export interface FieldProps extends Pick<React.HTMLAttributes<HTMLElement>, Exclude<keyof React.HTMLAttributes<HTMLElement>, "onBlur">> {
+    name: string;
+    schema: Schema;
+    uiSchema: UiSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    [prop: string]: any;
+}
+export type Field = React.FunctionComponent<FieldProps>;
+/*** TEMPLATES ***/
+export type FieldTemplateProps = React.PropsWithChildren<{
+    name: string;
+    schema: Schema;
+    [key: string]: any;
+    uiSchema?: UiSchema;
+    hidden?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+}>;
+export type ArrayFieldTemplateProps = React.PropsWithChildren<{
+    name: string;
+    schema: Schema;
+    [key: string]: any;
+    uiSchema?: UiSchema;
+    hidden?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+}>;
+export type ObjectFieldTemplateProps = {
+    schema: Schema;
+    uiSchema?: UiSchema;
+    required?: boolean;
+    children: React.ReactNode;
+    [key: string]: any;
+};
+export type CollapsibleObjectFieldTemplateProps = {
+    schema: Schema;
+    [key: string]: any;
+    uiSchema?: UiSchema;
+    required?: boolean;
+    children: React.ReactNode;
+    name?: string;
+};
+export type TemplatesType = {
+    FieldTemplate: React.FunctionComponent<FieldTemplateProps>;
+    ObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
+    ArrayFieldTemplate: React.FunctionComponent<ArrayFieldTemplateProps>;
+    CollapsibleObjectFieldTemplate: React.FunctionComponent<ObjectFieldTemplateProps>;
+};
+/*** COMPONENTS ***/
+export type ComponentsType = {
+    Form: React.FunctionComponent<any>;
+    FormButtonWrapper: React.FunctionComponent<any>;
+    FormButton: React.FunctionComponent<any>;
+    ObjectFieldWrapper: React.FunctionComponent<any>;
+    ObjectFieldTitle: React.FunctionComponent<any>;
+    ObjectFieldItem: React.FunctionComponent<any>;
+    ObjectFieldItemButtons: React.FunctionComponent<any>;
+    ObjectFieldList: React.FunctionComponent<any>;
+    ObjectFieldButton: React.FunctionComponent<any>;
+    ObjectFieldAddButton: React.FunctionComponent<any>;
+    ObjectFieldRemoveButton: React.FunctionComponent<any>;
+    ObjectFieldUpButton: React.FunctionComponent<any>;
+    ObjectFieldDownButton: React.FunctionComponent<any>;
+    ArrayFieldWrapper: React.FunctionComponent<any>;
+    ArrayFieldTitle: React.FunctionComponent<any>;
+    ArrayFieldItem: React.FunctionComponent<any>;
+    ArrayFieldItemButtons: React.FunctionComponent<any>;
+    ArrayFieldList: React.FunctionComponent<any>;
+    ArrayFieldButton: React.FunctionComponent<any>;
+    ArrayFieldAddButton: React.FunctionComponent<any>;
+    ArrayFieldRemoveButton: React.FunctionComponent<any>;
+    ArrayFieldUpButton: React.FunctionComponent<any>;
+    ArrayFieldDownButton: React.FunctionComponent<any>;
+    FieldWrapper: React.FunctionComponent<any>;
+    FieldTitle: React.FunctionComponent<any>;
+    FieldDescription: React.FunctionComponent<any>;
+    FieldHelp: React.FunctionComponent<any>;
+    InfoFieldButton: React.FunctionComponent<any>;
+    ErrorMessage: React.FunctionComponent<any>;
+    FieldInput: React.FunctionComponent<any>;
+    RequiredIndicator: React.FunctionComponent<any>;
+    RadioButtonField: React.FunctionComponent<any>;
+    MultipleChoiceField: React.FunctionComponent<any>;
+    ToggleSwitchField: React.FunctionComponent<any>;
+    SearchableMultiTagSelectField: React.FunctionComponent<any>;
+    TextAreaInputField: React.FunctionComponent<any>;
+    BooleanFieldWrapper: React.FunctionComponent<any>;
+    CollapsibleObjectFieldWrapper: React.FunctionComponent<any>;
+    CollapsibleObjectFieldTitle: React.FunctionComponent<any>;
+    SearchableSelectContainer: React.FunctionComponent<any>;
+    SearchDropdownContainer: React.FunctionComponent<any>;
+    SearchListOption: React.FunctionComponent<any>;
+    SearchListExpand: React.FunctionComponent<any>;
+    SearchNotFound: React.FunctionComponent<any>;
+    SearchInput: React.FunctionComponent<any>;
+    SearchClearButton: React.FunctionComponent<any>;
+    SearchInputContainer: React.FunctionComponent<any>;
+    FileUploadField: React.FunctionComponent<any>;
+    StringFieldPdf: React.FunctionComponent<any>;
+    TextAreaPdf: React.FunctionComponent<any>;
+    EJSField: React.FunctionComponent<any>;
+    BooleanFieldPdf: React.FunctionComponent<any>;
+    MultipleChoiceFieldPdf: React.FunctionComponent<any>;
+};
+export declare enum ObjectFieldButtonPurpose {
+    ADD = 0,
+    REMOVE = 1,
+    MOVE_UP = 2,
+    MOVE_DOWN = 3
+}
+export type ObjectFieldButtonProps = {
+    purpose: ObjectFieldButtonPurpose;
+    onClick: () => void;
+    uiSchema: UiSchema;
+};
+export type InfoFieldButtonProps = {
+    label?: React.ReactNode;
+    content: React.ReactNode;
+    position?: "top" | "right" | "bottom" | "left";
+    className?: string;
+    props: any;
+};
+type RadioButtonLabelObject = {
+    true?: string;
+    false?: string;
+};
+export type RadioButtonFieldProps = {
+    label?: RadioButtonLabelObject;
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+};
+export type TextAreaInputFieldProps = {
+    inputProps?: any;
+    name: string;
+    className?: string;
+};
+export type MultipleChoiceFieldProps = {
+    name: string;
+    inputProps?: any;
+    className?: string;
+    enums: {
+        type: string;
+        values: {
+            const: string | number;
+            title: string;
+        }[];
+    };
+    style?: string;
+    value?: string | number;
+    form?: FormikContextType<unknown>;
+};
+export type MultipleChoiceFieldPdfProps = {
+    selected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    notSelected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+    style?: string;
+    value?: string | number;
+    form?: FormikContextType<unknown>;
+};
+export type ToggleSwitchFieldProps = {
+    inputProps: any;
+    name: React.ReactNode;
+    className?: string;
+};
+export type SelectFieldProps = {
+    name: string;
+    enums: any;
+    emptySearchMessage?: string;
+    placeholder?: string;
+    closeElement?: React.ReactNode;
+    className?: string;
+};
+export type ClickableProps = {
+    children: React.ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
+    onMouseUp?: MouseEventHandler<HTMLButtonElement>;
+    innerRef?: (r: HTMLButtonElement | null) => void;
+    className?: string;
+    ariaLabel?: string;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+    id?: string;
+};
+/*** ***/
+export type AjvError = {
+    message: string;
+    name: string;
+    params: any;
+    property: string;
+    stack: string;
+};
+export type ErrorListProps = {
+    errorSchema: FormValidation;
+    errors: AjvError[];
+    schema: Schema;
+    uiSchema: UiSchema;
+};
+export type IChangeEvent<T = any> = {
+    edit: boolean;
+    formData: T;
+    errors: AjvError[];
+    errorSchema: FormValidation;
+    schema: Schema;
+    uiSchema: UiSchema;
+    status?: string | undefined;
+};
+export type ISubmitEvent<T> = IChangeEvent<T>;
+export type FieldError = string;
+type FieldValidation = {
+    __errors: FieldError[];
+    addError: (message: string) => void;
+};
+type FormValidation = FieldValidation & {
+    [fieldName: string]: FieldValidation;
+};
+export type AddButtonProps = {
+    className: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    disabled: boolean;
+};
+export type FileUploadFieldProps = {
+    className: string;
+    name: string;
+    uploadedFile: {
+        name: string;
+    } | null;
+    handleFileUpload: (file: File, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors<any>>) => Promise<void>;
+    value: any;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors<any>>;
+    uploadProgress: number;
+    handleRemoveFile: (setFieldValue: any) => void;
+    removeButton?: {
+        content: React.ReactNode;
+        props: {
+            style?: React.CSSProperties;
+            [key: string]: any;
+        };
+    };
+    uploadButtonText?: string;
+    infoText?: string;
+    hideRemoveButton: boolean;
+};
+export type FormValues = {
+    [key: string]: string | number | boolean | number[] | string[] | FormValues | FormValues[];
+};
+export type MixedOfProps = {
+    itemSchemas: Yup.ISchema<unknown, any, any, any>[];
+    additionalItemSchema?: Yup.ISchema<unknown, any, any, any>;
+};
+declare module "yup" {
+    interface ArraySchema<TIn extends any[] | null | undefined, TContext, TDefault = undefined, TFlags extends Yup.Flags = ""> extends Yup.Schema<TIn, TContext, TDefault, TFlags> {
+        mixedOf(schemas: MixedOfProps): this;
+    }
+}
+export type StringFieldPdfProps = {
+    className: string;
+    name: string;
+    value: string | undefined;
+};
+export {};

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

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

package/dist/esm/utils/__tests/createValidationSchema.test.d.ts

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

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

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

package/dist/esm/utils/__tests/getEnums.test.d.ts

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

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

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

package/dist/esm/utils/__tests/getTypes.test.d.ts

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

package/dist/esm/utils/__tests/hasReferences.test.d.ts

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

package/dist/esm/utils/__tests/mergeSchemas.test.d.ts

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

package/dist/esm/utils/__tests/orderByUiSchema.test.d.ts

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

package/dist/esm/utils/__tests/resolveSchema.test.d.ts

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

package/dist/esm/utils/__tests/solveReferences.test.d.ts

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

package/dist/esm/utils/__tests/testSchemas.d.ts

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

package/dist/esm/utils/createInitialValues.d.ts

@@ -0,0 +1,7 @@
+import { JSONSchema7 } from "json-schema";
+type PropertyValue = 0 | "" | never[] | InitialValuesType;
+export interface InitialValuesType {
+    [key: string]: PropertyValue;
+}
+export declare function createInitialValues(schema: JSONSchema7, definitions?: JSONSchema7): InitialValuesType;
+export {};

package/dist/esm/utils/createValidationSchema.d.ts

@@ -0,0 +1,12 @@
+import * as Yup from "yup";
+import { Schema } from "../types";
+type Condition = {
+    dependentKeys: string[];
+    conditionFn: (...value: any[]) => boolean;
+};
+type ConditionsContext = {
+    condition: Condition;
+    yupSchema: Yup.Schema<any, any, any, "">;
+};
+export declare function createValidationSchema(schema: Schema, definitions?: Schema, conditionsContext?: Record<string, ConditionsContext[]>, condition?: Condition): Yup.ObjectSchema<{}, Yup.AnyObject, {}, "">;
+export {};

package/dist/esm/utils/deepOverlap.d.ts

@@ -0,0 +1 @@
+export declare const deepOverlap: (object1: any, object2: any) => boolean;

package/dist/esm/utils/getEnums.d.ts

@@ -0,0 +1,26 @@
+import type { FieldProps } from "../types";
+export declare const getEnums: ({ schema }: {
+    schema: FieldProps["schema"];
+}) => {
+    values: never[];
+    type?: undefined;
+} | {
+    type: string;
+    values: {
+        const: any;
+        title: string;
+    }[];
+} | undefined;
+export declare const getSelectedEnum: (selected: string | number | string[] | number[] | undefined, enums: {
+    values: never[];
+    type?: undefined;
+} | {
+    type: string;
+    values: {
+        const: any;
+        title: string;
+    }[];
+} | undefined) => undefined | {
+    const: string | number;
+    title: string;
+}[];

package/dist/esm/utils/getStyle.d.ts

@@ -0,0 +1,5 @@
+interface StyleObject {
+    [key: string]: any;
+}
+export declare function getStyle(key: string): StyleObject;
+export {};

package/dist/esm/utils/getTitleAndDescription.d.ts

@@ -0,0 +1,12 @@
+import type { Schema, UiSchema } from "../types";
+export declare const getTitle: ({ title, uiSchema, schema, name, }: {
+    title?: string;
+    uiSchema?: UiSchema;
+    schema?: Schema;
+    name?: string;
+}) => any;
+export declare const getDescription: ({ description, uiSchema, schema, }: {
+    description?: string;
+    uiSchema?: UiSchema;
+    schema?: Schema;
+}) => any;

package/dist/esm/utils/getTypes.d.ts

@@ -0,0 +1,5 @@
+import type { Schema } from "../types";
+export declare const isObject: (object: any) => boolean;
+export declare const getDefaultValueForType: (type: Schema["type"]) => {} | null;
+export declare const guessType: (value: any) => "object" | "number" | "string" | "boolean" | "array" | "null";
+export declare const getSchemaType: (schema: Schema) => import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;

package/dist/esm/utils/hasReferences.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from "../types";
+export declare function hasReferences(schema: Schema): boolean;

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./deepOverlap";
+export * from "./getEnums";
+export * from "./getTitleAndDescription";
+export * from "./getTypes";
+export * from "./mergeSchemas";
+export * from "./resolveSchema";
+export * from "./solveReferences";
+export * from "./createInitialValues";
+export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
+export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;

package/dist/esm/utils/mergeSchemas.d.ts

@@ -0,0 +1 @@
+export declare const mergeSchemas: (obj1: any, obj2: any) => any;

package/dist/esm/utils/orderByUiSchema.d.ts

@@ -0,0 +1 @@
+export declare function orderByUiSchema(order: string[] | undefined, allProperties: string[]): string[] | undefined;

package/dist/esm/utils/resolveSchema.d.ts

@@ -0,0 +1,4 @@
+import { JSONSchema7Definition } from "json-schema";
+import type { Schema } from "../types";
+export declare function resolveOneOfValue(value: JSONSchema7Definition): import("json-schema").JSONSchema7Type | undefined;
+export declare const resolveSchema: ({ allOf, dependencies, ...schema }: Schema, value: Record<string, any>) => [Schema, string[]];

package/dist/esm/utils/solveReferences.d.ts

@@ -0,0 +1,10 @@
+import { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import { Schema, UiSchema } from "../types";
+export declare function solveReferences(schema: Schema, definitions: {
+    [key: string]: JSONSchema7Definition;
+} | undefined, uiSchema: UiSchema, uiSchemaDefinitions: {
+    [key: string]: JSONSchema7Definition;
+} | undefined): {
+    schema: JSONSchema7;
+    uiSchema: UiSchema;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -9,8 +9,16 @@
   ],
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "files": [
     "dist",
     "package.json",
@@ -29,8 +37,13 @@
     "jsonschema"
   ],
   "scripts": {
-    "build": "tsc --build",
-    "clean": "tsc --build --clean",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build": "npm run clean  && npm run build:cjs && npm run build:esm",
+    "watch:cjs": "tsc -p tsconfig.cjs.json --watch",
+    "watch:esm": "tsc -p tsconfig.esm.json --watch",
+    "watch": "npm-run-all --parallel watch:cjs watch:esm",
+    "clean": "rimraf dist",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
     "test-storybook": "test-storybook"
@@ -69,6 +82,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "rimraf": "^6.0.1",
     "storybook": "^8.0.5",
     "ts-jest": "^29.1.2",
     "webpack": "^5.91.0"