@nolwenture/formik-jsonschema-form 1.4.3 → 2.0.0

package/README.md

@@ -166,7 +166,7 @@ export function MyFormComponent() {
   return (
     <Formik
       initialValues={createInitialValues(schema)}
-      validationSchema={createValidationSchema(schema)}
+      validationSchema={createValidationSchema({schema})}
       onSubmit={handleSubmit}
     >
       <Form schema={schema} uiSchema={uiSchema}></Form>
@@ -175,6 +175,169 @@ export function MyFormComponent() {
 }
 ```
 
+### Validation
+
+The `createValidationSchema` function generates a Yup validation schema from your JSON Schema. It supports:
+
+#### Supported JSON Schema Keywords
+
+**String validation:**
+- `minLength` - Minimum string length
+- `maxLength` - Maximum string length
+- `pattern` - Regular expression pattern
+
+**Number validation:**
+- `minimum` - Minimum value (inclusive)
+- `maximum` - Maximum value (inclusive)
+- `exclusiveMinimum` - Minimum value (exclusive)
+- `exclusiveMaximum` - Maximum value (exclusive)
+- `multipleOf` - Value must be a multiple of this number
+
+**Array validation:**
+- `minItems` - Minimum number of items
+- `maxItems` - Maximum number of items
+- `uniqueItems` - All items must be unique
+
+**Equality validation:**
+- `const` - Value must equal the specified constant
+- `enum` - Value must be one of the specified values
+- `not: { const: ... }` - Value must NOT equal the specified constant
+
+**Required fields:**
+- Fields listed in the `required` array are validated as required
+
+#### Function Signature
+
+```tsx
+createValidationSchema(
+  { schema, uiSchema },  // Schema and optional UI schema
+  definitions,           // Optional external definitions
+  { localize }           // Optional localization function
+)
+```
+
+#### Custom Error Messages
+
+You can customize error messages using `ui:validation` in the uiSchema:
+
+```tsx
+const uiSchema = {
+  username: {
+    "ui:validation": {
+      error: {
+        minLength: "Username must be at least 3 characters",
+        pattern: "Username can only contain letters and numbers",
+        required: "Please enter a username",
+      },
+    },
+  },
+};
+```
+
+#### Localization
+
+Pass a `localize` function compatible with i18next to get localized error messages:
+
+```tsx
+import { useTranslation } from 'react-i18next';
+
+const { t } = useTranslation();
+const validationSchema = createValidationSchema(
+  { schema, uiSchema },
+  {},
+  { localize: t }
+);
+```
+
+The function will be called with keys like `validation.error.minLength`, `validation.error.required`, etc.
+
+#### Error Message Priority
+
+1. **Custom UI message** - `uiSchema["ui:validation"].error[keyword]`
+2. **Localized message** - Result from `localize("validation.error.{keyword}", params)`
+3. **Default message** - Built-in English messages
+
+#### Example
+
+```tsx
+const schema = {
+  type: "object",
+  required: ["email", "age"],
+  properties: {
+    email: {
+      type: "string",
+      pattern: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$",
+    },
+    age: {
+      type: "number",
+      minimum: 18,
+      maximum: 120,
+    },
+    tags: {
+      type: "array",
+      minItems: 1,
+      maxItems: 5,
+      uniqueItems: true,
+      items: { type: "string" },
+    },
+    status: {
+      type: "string",
+      const: "active",
+    },
+  },
+};
+
+const uiSchema = {
+  email: {
+    "ui:validation": {
+      error: {
+        pattern: "Please enter a valid email address",
+      },
+    },
+  },
+};
+
+const validationSchema = createValidationSchema({ schema, uiSchema });
+```
+
+#### Password Confirmation (Cross-Field Validation)
+
+Use `const: { $data: "1/fieldName" }` to validate that one field equals another. The `1/` prefix uses JSON Pointer syntax to reference a sibling field (go up 1 level):
+
+```tsx
+const schema = {
+  type: "object",
+  required: ["password", "confirmPassword"],
+  properties: {
+    password: {
+      type: "string",
+      title: "Password",
+      minLength: 8,
+    },
+    confirmPassword: {
+      type: "string",
+      title: "Confirm password",
+      const: { $data: "1/password" },  // Must match password field
+    },
+  },
+};
+
+const uiSchema = {
+  confirmPassword: {
+    "ui:validation": {
+      error: {
+        const: "Passwords must match",
+      },
+    },
+  },
+};
+
+const validationSchema = createValidationSchema({ schema, uiSchema });
+```
+
+The `$data` reference syntax follows the AJV validation library pattern with JSON Pointer paths. This is only supported for `const` keyword at the moment, but it can be extended to support other keywords in the future (e.g. minimum to compare endDate is after startDate).
+
+
 ### Using custom components
 
 Form components (such as wrappers) can be overridden with custom ones
@@ -1061,3 +1224,27 @@ const uiSchema: UiSchema = {
   hideSubmit={true} // hides submit-button of the form
 />
 ```
+
+### Special handling of conflicting keys in uiSchema
+
+In case one of your property names matches a reserved key in `uiSchema` (e.g. `ui:description`), you can use the syntax `> propertyName` to target the property.
+
+```tsx
+const schema = {
+  type: "object",
+  properties: {
+    "ui:description": { type: "string", title: "Description" },
+  },
+};
+
+const uiSchema = {
+  // This would be interpreted as the description for the parent object
+  "ui:description": "Form description",
+  
+  // This targets the property named "ui:description"
+  "> ui:description": {
+    "ui:placeholder": "Enter description...",
+  },
+};
+```
+

package/dist/cjs/Form/fields/ObjectField/ObjectField.js

@@ -12,7 +12,7 @@ const types_1 = require("./types");
 const DEFAULT_FIELD = {
     type: "string",
     _fieldType: "string",
-    "ui:title": "New Field",
+    "ui:title": "",
 };
 const useObjectField = (name) => {
     if (!name) {
@@ -73,7 +73,11 @@ const ObjectField = (props) => {
                         const childSchema = properties?.[child];
                         if (!childSchema)
                             return undefined;
-                        return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
+                        const childUiSchema = {
+                            ...(uiSchema?.properties ?? {}),
+                            ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
+                        };
+                        return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child));
                     }
                     else {
                         const { title, fields, collapsible } = child;
@@ -81,7 +85,13 @@ const ObjectField = (props) => {
                                 const childSchema = properties?.[child2];
                                 if (!childSchema)
                                     return undefined;
-                                return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
+                                const childUiSchema = {
+                                    ...(uiSchema?.properties ?? {}),
+                                    ...(uiSchema?.[`> ${child2}`] ??
+                                        uiSchema?.[child2] ??
+                                        {}),
+                                };
+                                return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child2));
                             }) }, fields.join("_")));
                     }
                 })
@@ -89,7 +99,10 @@ const ObjectField = (props) => {
                     const childSchema = properties?.[child];
                     if (!childSchema)
                         return undefined;
-                    const childUiSchema = uiSchema?.[child];
+                    const childUiSchema = {
+                        ...(uiSchema?.properties ?? {}),
+                        ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
+                    };
                     return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
                             ...childUiSchema,
                             props: {
@@ -105,12 +118,12 @@ const ObjectField = (props) => {
                         }, style: { display: "none" } }, child));
                 }), showAdditionalProperties &&
                     orderedAdditionalProperties.map((childName, index) => {
-                        let correctUiSchema = {
+                        const childUiSchema = {
                             ...(uiSchema?.additionalProperties ?? {}),
                             ...(uiSchema?.properties ?? {}),
-                            ...(uiSchema?.[childName] ?? {}),
+                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
                         };
-                        return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), (0, jsx_runtime_1.jsxs)(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
+                        return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName), (0, jsx_runtime_1.jsxs)(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
                                             index > 0 &&
                                             getObjectFieldButton({
                                                 purpose: types_1.ObjectFieldButtonPurpose.MOVE_UP,
@@ -140,15 +153,12 @@ const ObjectField = (props) => {
                                         })] })] }, childName));
                     }), showAdditionalProperties &&
                     hiddenAdditionalProperties.map((childName) => {
-                        let correctUiSchema = uiSchema?.[childName];
-                        if (uiSchema.properties?.["ui:order"] !== undefined &&
-                            uiSchema?.[childName]?.["ui:order"] === undefined) {
-                            correctUiSchema = {
-                                ...correctUiSchema,
-                                "ui:order": uiSchema.properties?.["ui:order"],
-                            };
-                        }
-                        return ((0, jsx_runtime_1.jsx)(ObjectFieldItem, { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
+                        const childUiSchema = {
+                            ...(uiSchema?.additionalProperties ?? {}),
+                            ...(uiSchema?.properties ?? {}),
+                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
+                        };
+                        return ((0, jsx_runtime_1.jsx)(ObjectFieldItem, { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName) }, childName));
                     }), additionalProperties &&
                     getObjectFieldButton({
                         purpose: types_1.ObjectFieldButtonPurpose.ADD,

package/dist/cjs/utils/createValidationSchema.js

@@ -37,6 +37,23 @@ exports.createValidationSchema = createValidationSchema;
 const Yup = __importStar(require("yup"));
 const resolveSchema_1 = require("./resolveSchema");
 const solveReferences_1 = require("./solveReferences");
+const DEFAULT_ERROR_MESSAGES = {
+    required: "Required",
+    minLength: (params) => `Must be at least ${params.limit} characters`,
+    maxLength: (params) => `Must be at most ${params.limit} characters`,
+    pattern: "Invalid format",
+    minimum: (params) => `Must be at least ${params.min}`,
+    maximum: (params) => `Must be at most ${params.max}`,
+    exclusiveMinimum: (params) => `Must be more than ${params.min}`,
+    exclusiveMaximum: (params) => `Must be less than ${params.max}`,
+    multipleOf: (params) => `Must be a multiple of ${params.multipleOf}`,
+    minItems: (params) => `Must have at least ${params.min} items`,
+    maxItems: (params) => `Must have at most ${params.max} items`,
+    uniqueItems: "Items must be unique",
+    enum: "Invalid value",
+    const: "Invalid value",
+    notConst: "Invalid value",
+};
 // Difficult to solve
 // @ts-expect-error
 Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchema }) {
@@ -48,7 +65,7 @@ Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchem
         const numOfAdditionalItems = itemSchemas.length > valueLength ? 0 : valueLength - itemSchemas.length;
         const additionalSchemas = additionalItemSchema
             ? Array(numOfAdditionalItems).fill(additionalItemSchema)
-            : [];
+            : Array(numOfAdditionalItems).fill(Yup.mixed());
         return Yup.tuple([...itemSchemas, ...additionalSchemas]).typeError("Required");
     });
 });
@@ -156,10 +173,22 @@ function getYupType(schema) {
             throw new Error(`createValidationSchema: Unsupported schema type: ${type}`);
     }
 }
-function createValidationSchema(schema, definitions = {}, conditionsContext = {}, condition) {
+function createValidationSchema(schemas, definitions = {}, options) {
+    const { schema, uiSchema = {} } = schemas;
+    const { localize, conditionsContext = {}, condition } = options ?? {};
     if (!schema?.properties) {
         return Yup.object().shape({});
     }
+    const getErrorMessage = (key, fieldUiSchema, params) => {
+        const uiError = fieldUiSchema?.["ui:validation"]?.error?.[key];
+        if (uiError)
+            return uiError;
+        if (localize) {
+            return localize(`validation.error.${key}`, params);
+        }
+        const defaultMsg = DEFAULT_ERROR_MESSAGES[key];
+        return typeof defaultMsg === "function" ? defaultMsg(params) : defaultMsg;
+    };
     const schemaDefinitions = {
         ...definitions,
         ...(schema.definitions ?? {}),
@@ -170,8 +199,15 @@ function createValidationSchema(schema, definitions = {}, conditionsContext = {}
         const isRequired = requiredFields?.includes(key) || required === true;
         let type = schema.type;
         let yupSchema;
+        const fieldUiSchema = uiSchema?.[key];
         if (schema.properties) {
-            yupSchema = createValidationSchema(schema, schemaDefinitions, conditionsContext);
+            yupSchema = createValidationSchema({
+                schema,
+                uiSchema: fieldUiSchema
+            }, schemaDefinitions, {
+                localize,
+                conditionsContext,
+            });
             type = type ?? "object";
         }
         else if (type === "array" && schema.anyOf) {
@@ -186,7 +222,9 @@ function createValidationSchema(schema, definitions = {}, conditionsContext = {}
                     return Yup.mixed().oneOf(anyOf.map((item) => item.const));
                 }));
                 // In case the property is required, there should be at least one item in the array
-                yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+                yupSchema = isRequired
+                    ? anyOfSchema.min(1, getErrorMessage("required", fieldUiSchema))
+                    : anyOfSchema;
             }
         }
         else if (type === "array") {
@@ -218,8 +256,99 @@ function createValidationSchema(schema, definitions = {}, conditionsContext = {}
         }
         if (type === "null")
             yupSchema.nullable();
+        // Apply JSON Schema validation keywords based on type
+        if (type === "string") {
+            let stringSchema = yupSchema;
+            if (schema.minLength !== undefined) {
+                stringSchema = stringSchema.min(schema.minLength, getErrorMessage("minLength", fieldUiSchema, { limit: schema.minLength }));
+            }
+            if (schema.maxLength !== undefined) {
+                stringSchema = stringSchema.max(schema.maxLength, getErrorMessage("maxLength", fieldUiSchema, { limit: schema.maxLength }));
+            }
+            if (schema.pattern !== undefined) {
+                stringSchema = stringSchema.matches(new RegExp(schema.pattern), getErrorMessage("pattern", fieldUiSchema));
+            }
+            yupSchema = stringSchema;
+        }
+        if (type === "number" || type === "integer") {
+            let numberSchema = yupSchema;
+            if (schema.minimum !== undefined) {
+                numberSchema = numberSchema.min(schema.minimum, getErrorMessage("minimum", fieldUiSchema, { min: schema.minimum }));
+            }
+            if (schema.maximum !== undefined) {
+                numberSchema = numberSchema.max(schema.maximum, getErrorMessage("maximum", fieldUiSchema, { max: schema.maximum }));
+            }
+            if (schema.exclusiveMinimum !== undefined) {
+                numberSchema = numberSchema.moreThan(schema.exclusiveMinimum, getErrorMessage("exclusiveMinimum", fieldUiSchema, { min: schema.exclusiveMinimum }));
+            }
+            if (schema.exclusiveMaximum !== undefined) {
+                numberSchema = numberSchema.lessThan(schema.exclusiveMaximum, getErrorMessage("exclusiveMaximum", fieldUiSchema, { max: schema.exclusiveMaximum }));
+            }
+            if (schema.multipleOf !== undefined) {
+                numberSchema = numberSchema.test("multipleOf", getErrorMessage("multipleOf", fieldUiSchema, { multipleOf: schema.multipleOf }), (value) => value === undefined ||
+                    value === null ||
+                    value % schema.multipleOf === 0);
+            }
+            yupSchema = numberSchema;
+        }
+        if (type === "array") {
+            const applyArrayTests = (s) => {
+                let result = s;
+                if (schema.minItems !== undefined) {
+                    result = result.test("minItems", getErrorMessage("minItems", fieldUiSchema, { min: schema.minItems }), (value) => !value || value.length >= schema.minItems);
+                }
+                if (schema.maxItems !== undefined) {
+                    result = result.test("maxItems", getErrorMessage("maxItems", fieldUiSchema, { max: schema.maxItems }), (value) => !value || value.length <= schema.maxItems);
+                }
+                if (schema.uniqueItems === true) {
+                    result = result.test("uniqueItems", getErrorMessage("uniqueItems", fieldUiSchema), (value) => {
+                        if (!value)
+                            return true;
+                        return new Set(value).size === value.length;
+                    });
+                }
+                return result;
+            };
+            if (yupSchema.test) {
+                yupSchema = applyArrayTests(yupSchema);
+            }
+            else {
+                // It's likely a Lazy schema (from mixedOf). Wrap it to apply tests.
+                const originalLazy = yupSchema;
+                yupSchema = Yup.lazy((value, options) => {
+                    return applyArrayTests(originalLazy.resolve(options));
+                });
+            }
+        }
+        const isOptionEnum = schema.enum !== undefined;
+        const isOptionConst = schema.const !== undefined;
+        if (isOptionEnum || isOptionConst) {
+            // Check for $data reference (cross-field validation)
+            const constValue = schema.const;
+            const isDataRef = typeof constValue === "object" && constValue?.$data;
+            if (isDataRef) {
+                // Cross-field reference: const: { $data: "1/otherFieldName" }
+                // JSON Pointer format: "1/fieldName" means go up 1 level and reference fieldName
+                const dataPath = constValue.$data;
+                const pathParts = dataPath.split("/");
+                const refFieldName = pathParts[pathParts.length - 1]; // Get the field name (last part)
+                yupSchema = yupSchema.oneOf([Yup.ref(refFieldName)], getErrorMessage("const", fieldUiSchema));
+            }
+            else {
+                // Standard const or enum validation
+                const allowedValues = isOptionConst ? [schema.const] : schema.enum;
+                const errorKey = isOptionConst ? "const" : "enum";
+                yupSchema = yupSchema.oneOf(allowedValues, getErrorMessage(errorKey, fieldUiSchema));
+            }
+        }
+        if (schema.not &&
+            typeof schema.not !== "boolean" &&
+            schema.not.const !== undefined) {
+            yupSchema = yupSchema.notOneOf([schema.not.const], getErrorMessage("notConst", fieldUiSchema));
+        }
+        // JSON Schema validation keywords
         if (isRequired && type !== "array") {
-            yupSchema = yupSchema.required("Required");
+            yupSchema = yupSchema.required(getErrorMessage("required", fieldUiSchema));
         }
         if (!condition) {
             return yupSchema;
@@ -257,6 +386,13 @@ function createValidationSchema(schema, definitions = {}, conditionsContext = {}
         override ones in the base, including type, presence and nullability."
         Source: https://github.com/jquense/yup?tab=readme-ov-file#schemaconcatschema-schema-schema
         */
-        return validationSchema.concat(createValidationSchema(solvedSchemas.schema, schemaDefinitions, conditionsContext, conditionalValidation.condition));
+        return validationSchema.concat(createValidationSchema({
+            schema: solvedSchemas.schema,
+            uiSchema
+        }, schemaDefinitions, {
+            localize,
+            conditionsContext,
+            condition: conditionalValidation.condition
+        }));
     }, baseValidationSchema);
 }

package/dist/esm/Form/fields/ObjectField/ObjectField.js

@@ -9,7 +9,7 @@ import { ObjectFieldButtonPurpose } from "./types";
 const DEFAULT_FIELD = {
     type: "string",
     _fieldType: "string",
-    "ui:title": "New Field",
+    "ui:title": "",
 };
 const useObjectField = (name) => {
     if (!name) {
@@ -70,7 +70,11 @@ export const ObjectField = (props) => {
                         const childSchema = properties?.[child];
                         if (!childSchema)
                             return undefined;
-                        return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
+                        const childUiSchema = {
+                            ...(uiSchema?.properties ?? {}),
+                            ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
+                        };
+                        return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child));
                     }
                     else {
                         const { title, fields, collapsible } = child;
@@ -78,7 +82,13 @@ export const ObjectField = (props) => {
                                 const childSchema = properties?.[child2];
                                 if (!childSchema)
                                     return undefined;
-                                return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
+                                const childUiSchema = {
+                                    ...(uiSchema?.properties ?? {}),
+                                    ...(uiSchema?.[`> ${child2}`] ??
+                                        uiSchema?.[child2] ??
+                                        {}),
+                                };
+                                return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: childUiSchema }, child2));
                             }) }, fields.join("_")));
                     }
                 })
@@ -86,7 +96,10 @@ export const ObjectField = (props) => {
                     const childSchema = properties?.[child];
                     if (!childSchema)
                         return undefined;
-                    const childUiSchema = uiSchema?.[child];
+                    const childUiSchema = {
+                        ...(uiSchema?.properties ?? {}),
+                        ...(uiSchema?.[`> ${child}`] ?? uiSchema?.[child] ?? {}),
+                    };
                     return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
                             ...childUiSchema,
                             props: {
@@ -102,12 +115,12 @@ export const ObjectField = (props) => {
                         }, style: { display: "none" } }, child));
                 }), showAdditionalProperties &&
                     orderedAdditionalProperties.map((childName, index) => {
-                        let correctUiSchema = {
+                        const childUiSchema = {
                             ...(uiSchema?.additionalProperties ?? {}),
                             ...(uiSchema?.properties ?? {}),
-                            ...(uiSchema?.[childName] ?? {}),
+                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
                         };
-                        return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), _jsxs(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
+                        return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName), _jsxs(ObjectFieldItemButtons, { children: [onAdditionalPropertyOrderChange &&
                                             index > 0 &&
                                             getObjectFieldButton({
                                                 purpose: ObjectFieldButtonPurpose.MOVE_UP,
@@ -137,15 +150,12 @@ export const ObjectField = (props) => {
                                         })] })] }, childName));
                     }), showAdditionalProperties &&
                     hiddenAdditionalProperties.map((childName) => {
-                        let correctUiSchema = uiSchema?.[childName];
-                        if (uiSchema.properties?.["ui:order"] !== undefined &&
-                            uiSchema?.[childName]?.["ui:order"] === undefined) {
-                            correctUiSchema = {
-                                ...correctUiSchema,
-                                "ui:order": uiSchema.properties?.["ui:order"],
-                            };
-                        }
-                        return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
+                        const childUiSchema = {
+                            ...(uiSchema?.additionalProperties ?? {}),
+                            ...(uiSchema?.properties ?? {}),
+                            ...(uiSchema?.[`> ${childName}`] ?? uiSchema?.[childName] ?? {}),
+                        };
+                        return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: childUiSchema }, childName) }, childName));
                     }), additionalProperties &&
                     getObjectFieldButton({
                         purpose: ObjectFieldButtonPurpose.ADD,

package/dist/esm/utils/createValidationSchema.js

@@ -1,6 +1,23 @@
 import * as Yup from "yup";
 import { resolveOneOfValue } from "./resolveSchema";
 import { solveReferences } from "./solveReferences";
+const DEFAULT_ERROR_MESSAGES = {
+    required: "Required",
+    minLength: (params) => `Must be at least ${params.limit} characters`,
+    maxLength: (params) => `Must be at most ${params.limit} characters`,
+    pattern: "Invalid format",
+    minimum: (params) => `Must be at least ${params.min}`,
+    maximum: (params) => `Must be at most ${params.max}`,
+    exclusiveMinimum: (params) => `Must be more than ${params.min}`,
+    exclusiveMaximum: (params) => `Must be less than ${params.max}`,
+    multipleOf: (params) => `Must be a multiple of ${params.multipleOf}`,
+    minItems: (params) => `Must have at least ${params.min} items`,
+    maxItems: (params) => `Must have at most ${params.max} items`,
+    uniqueItems: "Items must be unique",
+    enum: "Invalid value",
+    const: "Invalid value",
+    notConst: "Invalid value",
+};
 // Difficult to solve
 // @ts-expect-error
 Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchema }) {
@@ -12,7 +29,7 @@ Yup.addMethod(Yup.array, "mixedOf", function ({ itemSchemas, additionalItemSchem
         const numOfAdditionalItems = itemSchemas.length > valueLength ? 0 : valueLength - itemSchemas.length;
         const additionalSchemas = additionalItemSchema
             ? Array(numOfAdditionalItems).fill(additionalItemSchema)
-            : [];
+            : Array(numOfAdditionalItems).fill(Yup.mixed());
         return Yup.tuple([...itemSchemas, ...additionalSchemas]).typeError("Required");
     });
 });
@@ -120,10 +137,22 @@ function getYupType(schema) {
             throw new Error(`createValidationSchema: Unsupported schema type: ${type}`);
     }
 }
-export function createValidationSchema(schema, definitions = {}, conditionsContext = {}, condition) {
+export function createValidationSchema(schemas, definitions = {}, options) {
+    const { schema, uiSchema = {} } = schemas;
+    const { localize, conditionsContext = {}, condition } = options ?? {};
     if (!schema?.properties) {
         return Yup.object().shape({});
     }
+    const getErrorMessage = (key, fieldUiSchema, params) => {
+        const uiError = fieldUiSchema?.["ui:validation"]?.error?.[key];
+        if (uiError)
+            return uiError;
+        if (localize) {
+            return localize(`validation.error.${key}`, params);
+        }
+        const defaultMsg = DEFAULT_ERROR_MESSAGES[key];
+        return typeof defaultMsg === "function" ? defaultMsg(params) : defaultMsg;
+    };
     const schemaDefinitions = {
         ...definitions,
         ...(schema.definitions ?? {}),
@@ -134,8 +163,15 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
         const isRequired = requiredFields?.includes(key) || required === true;
         let type = schema.type;
         let yupSchema;
+        const fieldUiSchema = uiSchema?.[key];
         if (schema.properties) {
-            yupSchema = createValidationSchema(schema, schemaDefinitions, conditionsContext);
+            yupSchema = createValidationSchema({
+                schema,
+                uiSchema: fieldUiSchema
+            }, schemaDefinitions, {
+                localize,
+                conditionsContext,
+            });
             type = type ?? "object";
         }
         else if (type === "array" && schema.anyOf) {
@@ -150,7 +186,9 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
                     return Yup.mixed().oneOf(anyOf.map((item) => item.const));
                 }));
                 // In case the property is required, there should be at least one item in the array
-                yupSchema = isRequired ? anyOfSchema.min(1, "Required") : anyOfSchema;
+                yupSchema = isRequired
+                    ? anyOfSchema.min(1, getErrorMessage("required", fieldUiSchema))
+                    : anyOfSchema;
             }
         }
         else if (type === "array") {
@@ -182,8 +220,99 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
         }
         if (type === "null")
             yupSchema.nullable();
+        // Apply JSON Schema validation keywords based on type
+        if (type === "string") {
+            let stringSchema = yupSchema;
+            if (schema.minLength !== undefined) {
+                stringSchema = stringSchema.min(schema.minLength, getErrorMessage("minLength", fieldUiSchema, { limit: schema.minLength }));
+            }
+            if (schema.maxLength !== undefined) {
+                stringSchema = stringSchema.max(schema.maxLength, getErrorMessage("maxLength", fieldUiSchema, { limit: schema.maxLength }));
+            }
+            if (schema.pattern !== undefined) {
+                stringSchema = stringSchema.matches(new RegExp(schema.pattern), getErrorMessage("pattern", fieldUiSchema));
+            }
+            yupSchema = stringSchema;
+        }
+        if (type === "number" || type === "integer") {
+            let numberSchema = yupSchema;
+            if (schema.minimum !== undefined) {
+                numberSchema = numberSchema.min(schema.minimum, getErrorMessage("minimum", fieldUiSchema, { min: schema.minimum }));
+            }
+            if (schema.maximum !== undefined) {
+                numberSchema = numberSchema.max(schema.maximum, getErrorMessage("maximum", fieldUiSchema, { max: schema.maximum }));
+            }
+            if (schema.exclusiveMinimum !== undefined) {
+                numberSchema = numberSchema.moreThan(schema.exclusiveMinimum, getErrorMessage("exclusiveMinimum", fieldUiSchema, { min: schema.exclusiveMinimum }));
+            }
+            if (schema.exclusiveMaximum !== undefined) {
+                numberSchema = numberSchema.lessThan(schema.exclusiveMaximum, getErrorMessage("exclusiveMaximum", fieldUiSchema, { max: schema.exclusiveMaximum }));
+            }
+            if (schema.multipleOf !== undefined) {
+                numberSchema = numberSchema.test("multipleOf", getErrorMessage("multipleOf", fieldUiSchema, { multipleOf: schema.multipleOf }), (value) => value === undefined ||
+                    value === null ||
+                    value % schema.multipleOf === 0);
+            }
+            yupSchema = numberSchema;
+        }
+        if (type === "array") {
+            const applyArrayTests = (s) => {
+                let result = s;
+                if (schema.minItems !== undefined) {
+                    result = result.test("minItems", getErrorMessage("minItems", fieldUiSchema, { min: schema.minItems }), (value) => !value || value.length >= schema.minItems);
+                }
+                if (schema.maxItems !== undefined) {
+                    result = result.test("maxItems", getErrorMessage("maxItems", fieldUiSchema, { max: schema.maxItems }), (value) => !value || value.length <= schema.maxItems);
+                }
+                if (schema.uniqueItems === true) {
+                    result = result.test("uniqueItems", getErrorMessage("uniqueItems", fieldUiSchema), (value) => {
+                        if (!value)
+                            return true;
+                        return new Set(value).size === value.length;
+                    });
+                }
+                return result;
+            };
+            if (yupSchema.test) {
+                yupSchema = applyArrayTests(yupSchema);
+            }
+            else {
+                // It's likely a Lazy schema (from mixedOf). Wrap it to apply tests.
+                const originalLazy = yupSchema;
+                yupSchema = Yup.lazy((value, options) => {
+                    return applyArrayTests(originalLazy.resolve(options));
+                });
+            }
+        }
+        const isOptionEnum = schema.enum !== undefined;
+        const isOptionConst = schema.const !== undefined;
+        if (isOptionEnum || isOptionConst) {
+            // Check for $data reference (cross-field validation)
+            const constValue = schema.const;
+            const isDataRef = typeof constValue === "object" && constValue?.$data;
+            if (isDataRef) {
+                // Cross-field reference: const: { $data: "1/otherFieldName" }
+                // JSON Pointer format: "1/fieldName" means go up 1 level and reference fieldName
+                const dataPath = constValue.$data;
+                const pathParts = dataPath.split("/");
+                const refFieldName = pathParts[pathParts.length - 1]; // Get the field name (last part)
+                yupSchema = yupSchema.oneOf([Yup.ref(refFieldName)], getErrorMessage("const", fieldUiSchema));
+            }
+            else {
+                // Standard const or enum validation
+                const allowedValues = isOptionConst ? [schema.const] : schema.enum;
+                const errorKey = isOptionConst ? "const" : "enum";
+                yupSchema = yupSchema.oneOf(allowedValues, getErrorMessage(errorKey, fieldUiSchema));
+            }
+        }
+        if (schema.not &&
+            typeof schema.not !== "boolean" &&
+            schema.not.const !== undefined) {
+            yupSchema = yupSchema.notOneOf([schema.not.const], getErrorMessage("notConst", fieldUiSchema));
+        }
+        // JSON Schema validation keywords
         if (isRequired && type !== "array") {
-            yupSchema = yupSchema.required("Required");
+            yupSchema = yupSchema.required(getErrorMessage("required", fieldUiSchema));
         }
         if (!condition) {
             return yupSchema;
@@ -221,6 +350,13 @@ export function createValidationSchema(schema, definitions = {}, conditionsConte
         override ones in the base, including type, presence and nullability."
         Source: https://github.com/jquense/yup?tab=readme-ov-file#schemaconcatschema-schema-schema
         */
-        return validationSchema.concat(createValidationSchema(solvedSchemas.schema, schemaDefinitions, conditionsContext, conditionalValidation.condition));
+        return validationSchema.concat(createValidationSchema({
+            schema: solvedSchemas.schema,
+            uiSchema
+        }, schemaDefinitions, {
+            localize,
+            conditionsContext,
+            condition: conditionalValidation.condition
+        }));
     }, baseValidationSchema);
 }

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

@@ -1,5 +1,7 @@
 import * as Yup from "yup";
 import { Schema } from "../common/types";
+import { UiSchema } from "../common/types";
+export type LocalizeType = (key: string, params?: Record<string, any>) => string;
 type Condition = {
     dependentKeys: string[];
     conditionFn: (...value: any[]) => boolean;
@@ -17,5 +19,12 @@ 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 declare function createValidationSchema(schemas: {
+    schema: Schema;
+    uiSchema?: UiSchema;
+}, definitions?: Schema, options?: {
+    localize?: LocalizeType;
+    conditionsContext?: Record<string, ConditionsContext[]>;
+    condition?: Condition;
+}): Yup.ObjectSchema<{}, Yup.AnyObject, {}, "">;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [