@vendure/dashboard 3.3.8-master-202507260236 → 3.3.8-master-202507300243

package/src/lib/framework/form-engine/form-schema-tools.ts

@@ -3,26 +3,348 @@ import {
     isEnumType,
     isScalarType,
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { StructCustomFieldConfig } from '@vendure/common/lib/generated-types';
+import { ResultOf } from 'gql.tada';
 import { z, ZodRawShape, ZodType, ZodTypeAny } from 'zod';
 
-export function createFormSchemaFromFields(fields: FieldInfo[]) {
+import { structCustomFieldFragment } from '../../providers/server-config.js';
+
+type CustomFieldConfig = {
+    name: string;
+    type: string;
+    pattern?: string;
+    intMin?: number;
+    intMax?: number;
+    floatMin?: number;
+    floatMax?: number;
+    datetimeMin?: string;
+    datetimeMax?: string;
+    list?: boolean;
+    nullable?: boolean;
+};
+
+type StructFieldConfig = ResultOf<typeof structCustomFieldFragment>['fields'][number];
+
+function mapGraphQLCustomFieldToConfig(field: StructFieldConfig): CustomFieldConfig {
+    const baseConfig = {
+        name: field.name,
+        type: field.type,
+        list: field.list ?? false,
+        nullable: true, // Default to true since GraphQL fields are nullable by default
+    };
+
+    switch (field.__typename) {
+        case 'StringStructFieldConfig':
+            return {
+                ...baseConfig,
+                pattern: field.pattern ?? undefined,
+            };
+        case 'IntStructFieldConfig':
+            return {
+                ...baseConfig,
+                intMin: field.intMin ?? undefined,
+                intMax: field.intMax ?? undefined,
+            };
+        case 'FloatStructFieldConfig':
+            return {
+                ...baseConfig,
+                floatMin: field.floatMin ?? undefined,
+                floatMax: field.floatMax ?? undefined,
+            };
+        case 'DateTimeStructFieldConfig':
+            return {
+                ...baseConfig,
+                datetimeMin: field.datetimeMin ?? undefined,
+                datetimeMax: field.datetimeMax ?? undefined,
+            };
+        default:
+            return baseConfig;
+    }
+}
+
+/**
+ * Safely parses a date string into a Date object.
+ * Used for parsing datetime constraints in custom field validation.
+ *
+ * @param dateStr - The date string to parse
+ * @returns Parsed Date object or undefined if invalid
+ */
+function parseDate(dateStr: string | undefined | null): Date | undefined {
+    if (!dateStr) return undefined;
+    const date = new Date(dateStr);
+    return isNaN(date.getTime()) ? undefined : date;
+}
+
+/**
+ * Creates a Zod validation schema for datetime fields with optional min/max constraints.
+ * Supports both string and Date inputs, which is common in form handling.
+ *
+ * @param minDate - Optional minimum date constraint
+ * @param maxDate - Optional maximum date constraint
+ * @returns Zod schema that validates date ranges
+ */
+function createDateValidationSchema(minDate: Date | undefined, maxDate: Date | undefined): ZodType {
+    const baseSchema = z.union([z.string(), z.date()]);
+    if (!minDate && !maxDate) return baseSchema;
+
+    const dateMinString = minDate?.toLocaleDateString() ?? '';
+    const dateMaxString = maxDate?.toLocaleDateString() ?? '';
+    const dateMinMessage = minDate ? `Date must be after ${dateMinString}` : '';
+    const dateMaxMessage = maxDate ? `Date must be before ${dateMaxString}` : '';
+
+    return baseSchema.refine(
+        val => {
+            if (!val) return true;
+            const date = val instanceof Date ? val : new Date(val);
+            if (minDate && date < minDate) return false;
+            if (maxDate && date > maxDate) return false;
+            return true;
+        },
+        val => {
+            const date = val instanceof Date ? val : new Date(val);
+            if (minDate && date < minDate) return { message: dateMinMessage };
+            if (maxDate && date > maxDate) return { message: dateMaxMessage };
+            return { message: '' };
+        },
+    );
+}
+
+/**
+ * Creates a Zod validation schema for string fields with optional regex pattern validation.
+ * Used for string-type custom fields that may have pattern constraints.
+ *
+ * @param pattern - Optional regex pattern string for validation
+ * @returns Zod string schema with optional pattern validation
+ */
+function createStringValidationSchema(pattern?: string): ZodType {
+    let schema = z.string();
+    if (pattern) {
+        schema = schema.regex(new RegExp(pattern), {
+            message: `Value must match pattern: ${pattern}`,
+        });
+    }
+    return schema;
+}
+
+/**
+ * Creates a Zod validation schema for integer fields with optional min/max constraints.
+ * Used for int-type custom fields that may have numeric range limits.
+ *
+ * @param min - Optional minimum value constraint
+ * @param max - Optional maximum value constraint
+ * @returns Zod number schema with optional range validation
+ */
+function createIntValidationSchema(min?: number, max?: number): ZodType {
+    let schema = z.number();
+    if (min !== undefined) {
+        schema = schema.min(min, {
+            message: `Value must be at least ${min}`,
+        });
+    }
+    if (max !== undefined) {
+        schema = schema.max(max, {
+            message: `Value must be at most ${max}`,
+        });
+    }
+    return schema;
+}
+
+/**
+ * Creates a Zod validation schema for float fields with optional min/max constraints.
+ * Used for float-type custom fields that may have numeric range limits.
+ *
+ * @param min - Optional minimum value constraint
+ * @param max - Optional maximum value constraint
+ * @returns Zod number schema with optional range validation
+ */
+function createFloatValidationSchema(min?: number, max?: number): ZodType {
+    let schema = z.number();
+    if (min !== undefined) {
+        schema = schema.min(min, {
+            message: `Value must be at least ${min}`,
+        });
+    }
+    if (max !== undefined) {
+        schema = schema.max(max, {
+            message: `Value must be at most ${max}`,
+        });
+    }
+    return schema;
+}
+
+/**
+ * Creates a Zod validation schema for a single custom field based on its type and constraints.
+ * This is the main dispatcher that routes different custom field types to their specific
+ * validation schema creators. Handles all standard custom field types in Vendure.
+ *
+ * @param customField - The custom field configuration object
+ * @returns Zod schema appropriate for the custom field type
+ */
+function createCustomFieldValidationSchema(customField: CustomFieldConfig): ZodType {
+    let zodType: ZodType;
+
+    switch (customField.type) {
+        case 'localeString':
+        case 'localeText':
+        case 'string':
+            zodType = createStringValidationSchema(customField.pattern);
+            break;
+        case 'int':
+            zodType = createIntValidationSchema(customField.intMin, customField.intMax);
+            break;
+        case 'float':
+            zodType = createFloatValidationSchema(customField.floatMin, customField.floatMax);
+            break;
+        case 'datetime': {
+            const minDate = parseDate(customField.datetimeMin);
+            const maxDate = parseDate(customField.datetimeMax);
+            zodType = createDateValidationSchema(minDate, maxDate);
+            break;
+        }
+        case 'boolean':
+            zodType = z.boolean();
+            break;
+        default:
+            zodType = z.any();
+            break;
+    }
+
+    return zodType;
+}
+
+/**
+ * Creates a Zod validation schema for struct-type custom fields.
+ * Struct fields contain nested sub-fields, each with their own validation rules.
+ * This recursively processes each sub-field to create a nested object schema.
+ *
+ * @param structFieldConfig - The struct custom field configuration with nested fields
+ * @returns Zod object schema representing the struct with all sub-field validations
+ */
+function createStructFieldSchema(structFieldConfig: StructCustomFieldConfig): ZodType {
+    if (!structFieldConfig.fields || !Array.isArray(structFieldConfig.fields)) {
+        return z.object({}).passthrough();
+    }
+
+    const nestedSchema: ZodRawShape = {};
+    for (const structSubField of structFieldConfig.fields) {
+        const config = mapGraphQLCustomFieldToConfig(structSubField as StructFieldConfig);
+        let subFieldType = createCustomFieldValidationSchema(config);
+
+        // Handle list and nullable for struct sub-fields
+        if (config.list) {
+            subFieldType = z.array(subFieldType);
+        }
+        if (config.nullable) {
+            subFieldType = subFieldType.optional().nullable();
+        }
+
+        nestedSchema[config.name] = subFieldType;
+    }
+
+    return z.object(nestedSchema);
+}
+
+/**
+ * Applies common list and nullable modifiers to a Zod schema based on custom field configuration.
+ * Many custom fields can be configured as lists (arrays) and/or nullable, so this helper
+ * centralizes that logic to avoid duplication.
+ *
+ * @param zodType - The base Zod schema to modify
+ * @param customField - Custom field config containing list/nullable flags
+ * @returns Modified Zod schema with list/nullable modifiers applied
+ */
+function applyListAndNullableModifiers(zodType: ZodType, customField: CustomFieldConfig): ZodType {
+    let modifiedType = zodType;
+
+    if (customField.list) {
+        modifiedType = z.array(modifiedType);
+    }
+    if (customField.nullable !== false) {
+        modifiedType = modifiedType.optional().nullable();
+    }
+
+    return modifiedType;
+}
+
+/**
+ * Processes all custom fields and creates a complete validation schema for the customFields object.
+ * Handles context-aware filtering (translation vs root context) and orchestrates the creation
+ * of validation schemas for all custom field types including complex struct fields.
+ *
+ * @param customFieldConfigs - Array of all custom field configurations
+ * @param isTranslationContext - Whether we're processing fields for translation forms
+ * @returns Zod schema shape for the entire customFields object
+ */
+function processCustomFieldsSchema(
+    customFieldConfigs: CustomFieldConfig[],
+    isTranslationContext: boolean,
+): ZodRawShape {
+    const customFieldsSchema: ZodRawShape = {};
+    const translatableTypes = ['localeString', 'localeText'];
+
+    const filteredCustomFields = customFieldConfigs.filter(cf => {
+        if (isTranslationContext) {
+            return translatableTypes.includes(cf.type);
+        } else {
+            return !translatableTypes.includes(cf.type);
+        }
+    });
+
+    for (const customField of filteredCustomFields) {
+        let zodType: ZodType;
+
+        if (customField.type === 'struct') {
+            zodType = createStructFieldSchema(customField as StructCustomFieldConfig);
+        } else {
+            zodType = createCustomFieldValidationSchema(customField);
+        }
+
+        zodType = applyListAndNullableModifiers(zodType, customField);
+        const schemaPropertyName = getGraphQlInputName(customField);
+        customFieldsSchema[schemaPropertyName] = zodType;
+    }
+
+    return customFieldsSchema;
+}
+
+export function createFormSchemaFromFields(
+    fields: FieldInfo[],
+    customFieldConfigs?: CustomFieldConfig[],
+    isTranslationContext = false,
+) {
     const schemaConfig: ZodRawShape = {};
+
     for (const field of fields) {
         const isScalar = isScalarType(field.type);
         const isEnum = isEnumType(field.type);
-        if (isScalar || isEnum) {
-            schemaConfig[field.name] = getZodTypeFromField(field);
+
+        if ((isScalar || isEnum) && field.name !== 'customFields') {
+            schemaConfig[field.name] = getZodTypeFromField(field, customFieldConfigs);
+        } else if (field.name === 'customFields') {
+            const customFieldsSchema =
+                customFieldConfigs && customFieldConfigs.length > 0
+                    ? processCustomFieldsSchema(customFieldConfigs, isTranslationContext)
+                    : {};
+            schemaConfig[field.name] = z.object(customFieldsSchema).optional();
         } else if (field.typeInfo) {
-            let nestedType: ZodType = createFormSchemaFromFields(field.typeInfo);
+            const isNestedTranslationContext = field.name === 'translations' || isTranslationContext;
+            let nestedType: ZodType = createFormSchemaFromFields(
+                field.typeInfo,
+                customFieldConfigs,
+                isNestedTranslationContext,
+            );
+
             if (field.nullable) {
                 nestedType = nestedType.optional().nullable();
             }
             if (field.list) {
                 nestedType = z.array(nestedType);
             }
+
             schemaConfig[field.name] = nestedType;
         }
     }
+
     return z.object(schemaConfig);
 }
 
@@ -69,8 +391,12 @@ export function getDefaultValueFromField(field: FieldInfo, defaultLanguageCode?:
     }
 }
 
-export function getZodTypeFromField(field: FieldInfo): ZodTypeAny {
+export function getZodTypeFromField(field: FieldInfo, customFieldConfigs?: CustomFieldConfig[]): ZodTypeAny {
     let zodType: ZodType;
+
+    // This function is only used for non-custom fields, so we don't need custom field logic here
+    // Custom fields are handled separately in createFormSchemaFromFields
+
     switch (field.type) {
         case 'String':
         case 'ID':
@@ -88,6 +414,7 @@ export function getZodTypeFromField(field: FieldInfo): ZodTypeAny {
         default:
             zodType = z.any();
     }
+
     if (field.list) {
         zodType = z.array(zodType);
     }
@@ -96,3 +423,11 @@ export function getZodTypeFromField(field: FieldInfo): ZodTypeAny {
     }
     return zodType;
 }
+
+export function getGraphQlInputName(config: { name: string; type: string; list?: boolean }): string {
+    if (config.type === 'relation') {
+        return config.list === true ? `${config.name}Ids` : `${config.name}Id`;
+    } else {
+        return config.name;
+    }
+}

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -17,6 +17,7 @@ export interface GeneratedFormOptions<
     document?: T;
     varName?: VarName;
     entity: E | null | undefined;
+    customFieldConfig?: any[]; // Add custom field config for validation
     setValues: (
         entity: NonNullable<E>,
     ) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
@@ -37,14 +38,20 @@ export function useGeneratedForm<
     VarName extends keyof VariablesOf<T> | undefined,
     E extends Record<string, any> = Record<string, any>,
 >(options: GeneratedFormOptions<T, VarName, E>) {
-    const { document, entity, setValues, onSubmit, varName } = options;
+    const { document, entity, setValues, onSubmit, varName, customFieldConfig } = options;
     const { activeChannel } = useChannel();
-    const availableLanguages = useServerConfig()?.availableLanguages || [];
+    const serverConfig = useServerConfig();
+    const availableLanguages = serverConfig?.availableLanguages || [];
     const updateFields = document ? getOperationVariablesFields(document, varName) : [];
-    const schema = createFormSchemaFromFields(updateFields);
+
+    const schema = createFormSchemaFromFields(updateFields, customFieldConfig);
     const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
     const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues);
 
+    const values = processedEntity
+        ? transformRelationFields(updateFields, setValues(processedEntity))
+        : defaultValues;
+
     const form = useForm({
         resolver: async (values, context, options) => {
             const result = await zodResolver(schema)(values, context, options);
@@ -55,15 +62,24 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity
-            ? transformRelationFields(updateFields, setValues(processedEntity))
-            : defaultValues,
+        values,
     });
-    let submitHandler = (event: FormEvent) => {
+    let submitHandler = (event: FormEvent): any => {
         event.preventDefault();
     };
     if (onSubmit) {
-        submitHandler = (event: FormEvent) => {
+        submitHandler = async (event: FormEvent) => {
+            event.preventDefault();
+
+            // Trigger validation on ALL fields, not just dirty ones
+            const isValid = await form.trigger();
+
+            if (!isValid) {
+                console.log(`Form invalid!`);
+                event.stopPropagation();
+                return;
+            }
+
             const onSubmitWrapper = (values: any) => {
                 onSubmit(removeEmptyIdFields(values, updateFields));
             };

package/src/lib/framework/form-engine/utils.ts

@@ -10,7 +10,7 @@ import { FieldInfo } from '../document-introspection/get-document-structure.js';
  */
 export function transformRelationFields<E extends Record<string, any>>(fields: FieldInfo[], entity: E): E {
     // Create a shallow copy to avoid mutating the original entity
-    const processedEntity = { ...entity };
+    const processedEntity = { ...entity, customFields: { ...(entity.customFields ?? {}) } };
 
     // Skip processing if there are no custom fields
     if (!entity.customFields || !processedEntity.customFields) {
@@ -44,16 +44,10 @@ export function transformRelationFields<E extends Record<string, any>>(fields: F
             // For single fields, the accessor is the field name without the "Id" suffix
             const propertyAccessorKey = customField.name.replace(/Id$/, '');
             const relationValue = entity.customFields[propertyAccessorKey];
-
-            if (relationValue) {
-                const relationIdValue = relationValue.id;
-                if (relationIdValue) {
-                    processedEntity.customFields[relationField] = relationIdValue;
-                }
-            }
+            processedEntity.customFields[relationField] = relationValue?.id;
+            delete processedEntity.customFields[propertyAccessorKey];
         }
     }
-
     return processedEntity;
 }
 

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -242,7 +242,7 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
 }
 
 export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNode }>) {
-    return <div className="md:grid md:grid-cols-2 gap-4 items-start mb-4">{children}</div>;
+    return <div className="grid @md:grid-cols-2 gap-6 items-start mb-6">{children}</div>;
 }
 
 /**
@@ -412,11 +412,19 @@ export function PageBlock({
     blockId,
     column,
 }: Readonly<PageBlockProps>) {
-    const contextValue = useMemo(() => ({ blockId, title, description, column }), [blockId, title, description, column]);
+    const contextValue = useMemo(
+        () => ({
+            blockId,
+            title,
+            description,
+            column,
+        }),
+        [blockId, title, description, column],
+    );
     return (
         <PageBlockContext.Provider value={contextValue}>
             <LocationWrapper>
-                <Card className={cn('w-full', className)}>
+                <Card className={cn('@container  w-full', className)}>
                     {title || description ? (
                         <CardHeader>
                             {title && <CardTitle>{title}</CardTitle>}

package/src/lib/framework/page/use-detail-page.ts

@@ -1,4 +1,4 @@
-import { removeReadonlyCustomFields } from '@/vdb/lib/utils.js';
+import { removeReadonlyAndLocalizedCustomFields } from '@/vdb/lib/utils.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     DefinedInitialDataOptions,
@@ -307,10 +307,10 @@ export function useDetailPage<
         document,
         varName: 'input',
         entity,
+        customFieldConfig,
         setValues: setValuesForUpdate,
         onSubmit(values: any) {
-            // Filter out readonly custom fields before submitting
-            const filteredValues = removeReadonlyCustomFields(values, customFieldConfig || []);
+            const filteredValues = removeReadonlyAndLocalizedCustomFields(values, customFieldConfig || []);
 
             if (isNew) {
                 const finalInput = transformCreateInput?.(filteredValues) ?? filteredValues;

package/src/lib/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
@@ -61,49 +61,51 @@ export function normalizeString(input: string, spaceReplacer = ' '): string {
 
 /**
  * Removes any readonly custom fields from form values before submission.
+ * Also removes localeString and localeText fields from the root customFields object
+ * since they should only exist in the translations array.
  * This prevents errors when submitting readonly custom field values to mutations.
  *
  * @param values - The form values that may contain custom fields
  * @param customFieldConfigs - Array of custom field configurations for the entity
- * @returns The values with readonly custom fields removed
+ * @returns The values with readonly custom fields removed and locale fields properly placed
  */
-export function removeReadonlyCustomFields<T extends Record<string, any>>(
+export function removeReadonlyAndLocalizedCustomFields<T extends Record<string, any>>(
     values: T,
-    customFieldConfigs: Array<{ name: string; readonly?: boolean | null }> = [],
+    customFieldConfigs: Array<{ name: string; readonly?: boolean | null; type?: string }> = [],
 ): T {
     if (!values || !customFieldConfigs?.length) {
         return values;
     }
 
-    // Create a deep copy to avoid mutating the original values
     const result = structuredClone(values);
-
-    // Get readonly field names
     const readonlyFieldNames = customFieldConfigs
         .filter(config => config.readonly === true)
         .map(config => config.name);
+    const localeFieldNames = customFieldConfigs
+        .filter(config => config.type === 'localeString' || config.type === 'localeText')
+        .map(config => config.name);
+    const fieldsToRemoveFromRoot = [...readonlyFieldNames, ...localeFieldNames];
 
-    if (readonlyFieldNames.length === 0) {
-        return result;
-    }
-
-    // Remove readonly fields from main customFields
     if (result.customFields && typeof result.customFields === 'object') {
-        for (const fieldName of readonlyFieldNames) {
+        fieldsToRemoveFromRoot.forEach(fieldName => {
             delete result.customFields[fieldName];
-        }
+        });
     }
 
-    // Remove readonly fields from translations customFields
-    if (Array.isArray(result.translations)) {
-        for (const translation of result.translations) {
-            if (translation?.customFields && typeof translation.customFields === 'object') {
-                for (const fieldName of readonlyFieldNames) {
-                    delete translation.customFields[fieldName];
-                }
-            }
-        }
+    removeReadonlyFromTranslations(result, readonlyFieldNames);
+    return result;
+}
+
+function removeReadonlyFromTranslations(entity: Record<string, any>, readonlyFieldNames: string[]): void {
+    if (!Array.isArray(entity.translations)) {
+        return;
     }
 
-    return result;
+    entity.translations.forEach(translation => {
+        if (translation?.customFields && typeof translation.customFields === 'object') {
+            readonlyFieldNames.forEach(fieldName => {
+                delete translation.customFields[fieldName];
+            });
+        }
+    });
 }