@leandrosk/dashboard 3.5.5-fork.2

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

@@ -0,0 +1,242 @@
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { VariablesOf } from 'gql.tada';
+import { FormEvent } from 'react';
+import { useForm } from 'react-hook-form';
+import { useChannel } from '../../hooks/use-channel.js';
+import { useServerConfig } from '../../hooks/use-server-config.js';
+import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import { createFormSchemaFromFields, getDefaultValuesFromFields } from './form-schema-tools.js';
+import {
+    convertEmptyStringsToNull,
+    removeEmptyIdFields,
+    stripNullNullableFields,
+    transformRelationFields,
+} from './utils.js';
+
+export type WithLooseCustomFields<T> = T extends { customFields?: any }
+    ? Omit<T, 'customFields'> & { customFields?: T['customFields'] | unknown }
+    : T;
+
+/**
+ * @description
+ * Options for the useGeneratedForm hook.
+ *
+ * @docsCategory detail-views
+ * @docsPage useGeneratedForm
+ * @since 3.3.0
+ */
+export interface GeneratedFormOptions<
+    T extends TypedDocumentNode<any, any>,
+    VarName extends keyof VariablesOf<T> | undefined = 'input',
+    E extends Record<string, any> = Record<string, any>,
+> {
+    /**
+     * @description
+     * The document to use to generate the form.
+     */
+    document?: T;
+    /**
+     * @description
+     * The name of the variable to use in the document.
+     */
+    varName?: VarName;
+    /**
+     * @description
+     * The entity to use to generate the form.
+     */
+    entity: E | null | undefined;
+    customFieldConfig?: any[]; // Add custom field config for validation
+    setValues: (
+        entity: NonNullable<E>,
+    ) => WithLooseCustomFields<
+        VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>
+    >;
+    onSubmit?: (
+        values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>,
+    ) => void;
+}
+
+/**
+ * @description
+ * This hook is used to create a form from a document and an entity.
+ * It will create a form with the fields defined in the document's input type.
+ * It will also create a submit handler that will submit the form to the server.
+ *
+ * This hook is mostly used internally by the higher-level {@link useDetailPage} hook,
+ * but can in some cases be useful to use directly.
+ *
+ * @example
+ * ```tsx
+ * const { form, submitHandler } = useGeneratedForm({
+ *  document: setDraftOrderCustomFieldsDocument,
+ *  varName: undefined,
+ *  entity: entity,
+ *  setValues: entity => {
+ *    return {
+ *      orderId: entity.id,
+ *      input: {
+ *        customFields: entity.customFields,
+ *      },
+ *    };
+ *  },
+ * });
+ * ```
+ *
+ * @docsCategory detail-views
+ * @docsPage useGeneratedForm
+ * @since 3.3.0
+ * @docsWeight 0
+ */
+export function useGeneratedForm<
+    T extends TypedDocumentNode<any, any>,
+    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, customFieldConfig } = options;
+    const { activeChannel } = useChannel();
+    const serverConfig = useServerConfig();
+    const availableLanguages = serverConfig?.availableLanguages || [];
+    const updateFields = document ? getOperationVariablesFields(document, varName) : [];
+
+    const schema = createFormSchemaFromFields(updateFields, customFieldConfig);
+    const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
+    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues);
+
+    // Also ensure defaultValues has translations for all languages (for creation case)
+    const processedDefaultValues =
+        ensureTranslationsForAllLanguages(defaultValues, availableLanguages, defaultValues) ?? defaultValues;
+
+    const values = processedEntity
+        ? transformRelationFields(updateFields, setValues(processedEntity))
+        : processedDefaultValues;
+
+    const form = useForm({
+        resolver: async (values, context, options) => {
+            const result = await zodResolver(schema)(values, context, options);
+            if (Object.keys(result.errors).length > 0) {
+                console.log('Zod form validation errors:', result.errors);
+            }
+            return result;
+        },
+        mode: 'onChange',
+        defaultValues: processedDefaultValues,
+        values,
+    });
+    let submitHandler = (event: FormEvent): any => {
+        event.preventDefault();
+    };
+    if (onSubmit) {
+        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) => {
+                let processed = convertEmptyStringsToNull(
+                    removeEmptyIdFields(values, updateFields),
+                    updateFields,
+                );
+                if (!entity) {
+                    processed = stripNullNullableFields(processed, updateFields);
+                }
+                onSubmit(processed);
+            };
+            form.handleSubmit(onSubmitWrapper)(event);
+        };
+    }
+
+    return { form, submitHandler };
+}
+
+/**
+ * Ensures that an entity with translations has entries for all available languages.
+ * If a language is missing, it creates an empty translation based on the structure of existing translations
+ * and the expected form structure from defaultValues.
+ */
+function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
+    entity: E | null | undefined,
+    availableLanguages: string[] = [],
+    expectedStructure?: Record<string, any>,
+): E | null | undefined {
+    if (
+        !entity ||
+        !('translations' in entity) ||
+        !Array.isArray((entity as any).translations) ||
+        !availableLanguages.length
+    ) {
+        return entity;
+    }
+
+    // Create a deep copy of the entity to avoid mutation
+    const processedEntity = { ...entity } as any;
+    const translations = [...(processedEntity.translations || [])];
+
+    // Get existing language codes
+    const existingLanguageCodes = new Set(translations.map((t: any) => t.languageCode));
+
+    // Get the expected translation structure from defaultValues or existing translations
+    const existingTemplate = translations[0] || {};
+    const expectedTranslationStructure = expectedStructure?.translations?.[0] || {};
+
+    // Merge the structures to ensure we have all expected fields
+    const templateStructure = {
+        ...expectedTranslationStructure,
+        ...existingTemplate,
+    };
+
+    // Add missing language translations
+    for (const langCode of availableLanguages) {
+        if (!existingLanguageCodes.has(langCode)) {
+            const emptyTranslation: Record<string, any> = {
+                languageCode: langCode,
+            };
+
+            // Add empty fields based on merged template structure (excluding languageCode)
+            Object.keys(templateStructure).forEach(key => {
+                if (key !== 'languageCode') {
+                    if (typeof templateStructure[key] === 'object' && templateStructure[key] !== null) {
+                        // For nested objects like customFields, create an empty object
+                        emptyTranslation[key] = Array.isArray(templateStructure[key]) ? [] : {};
+                    } else {
+                        // For primitive values, use empty string as default
+                        emptyTranslation[key] = '';
+                    }
+                }
+            });
+
+            translations.push(emptyTranslation);
+        } else {
+            // For existing translations, ensure they have all expected fields
+            const existingTranslation = translations.find((t: any) => t.languageCode === langCode);
+            if (existingTranslation) {
+                Object.keys(expectedTranslationStructure).forEach(key => {
+                    if (key !== 'languageCode' && !(key in existingTranslation)) {
+                        if (
+                            typeof expectedTranslationStructure[key] === 'object' &&
+                            expectedTranslationStructure[key] !== null
+                        ) {
+                            existingTranslation[key] = Array.isArray(expectedTranslationStructure[key])
+                                ? []
+                                : {};
+                        } else {
+                            existingTranslation[key] = '';
+                        }
+                    }
+                });
+            }
+        }
+    }
+
+    // Update the processed entity with complete translations
+    processedEntity.translations = translations;
+
+    return processedEntity as E;
+}

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

@@ -0,0 +1,419 @@
+import { graphql, VariablesOf } from 'gql.tada';
+import { describe, expect, it } from 'vitest';
+
+import { FieldInfo, getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+
+import {
+    convertEmptyStringsToNull,
+    removeEmptyIdFields,
+    stripNullNullableFields,
+    transformRelationFields,
+} from './utils.js';
+
+const createProductDocument = graphql(`
+    mutation CreateProduct($input: CreateProductInput!) {
+        createProduct(input: $input) {
+            id
+        }
+    }
+`);
+
+type CreateProductInput = VariablesOf<typeof createProductDocument>;
+
+describe('removeEmptyIdFields', () => {
+    it('should remove empty translation id field', () => {
+        const values: CreateProductInput = {
+            input: { translations: [{ id: '', languageCode: 'en' }] },
+        };
+        const fields = getOperationVariablesFields(createProductDocument);
+        const result = removeEmptyIdFields(values, fields);
+
+        expect(result).toEqual({ input: { translations: [{ languageCode: 'en' }] } });
+    });
+
+    it('should remove empty featuredAsset id field', () => {
+        const values: CreateProductInput = {
+            input: { featuredAssetId: '', translations: [] },
+        };
+        const fields = getOperationVariablesFields(createProductDocument);
+        const result = removeEmptyIdFields(values, fields);
+        expect(result).toEqual({ input: { translations: [] } });
+    });
+});
+
+describe('transformRelationFields', () => {
+    const createFieldsWithListRelation = (): FieldInfo[] => [
+        {
+            name: 'customFields',
+            type: 'CustomFields',
+            nullable: true,
+            list: false,
+            isPaginatedList: false,
+            isScalar: false,
+            typeInfo: [
+                {
+                    name: 'featuredProductsIds',
+                    type: 'ID',
+                    nullable: true,
+                    list: true,
+                    isPaginatedList: false,
+                    isScalar: true,
+                },
+            ],
+        },
+    ];
+
+    const createFieldsWithSingleRelation = (): FieldInfo[] => [
+        {
+            name: 'customFields',
+            type: 'CustomFields',
+            nullable: true,
+            list: false,
+            isPaginatedList: false,
+            isScalar: false,
+            typeInfo: [
+                {
+                    name: 'featuredProductId',
+                    type: 'ID',
+                    nullable: true,
+                    list: false,
+                    isPaginatedList: false,
+                    isScalar: true,
+                },
+            ],
+        },
+    ];
+
+    it('should extract IDs from list relation and delete original field', () => {
+        const entity = {
+            customFields: {
+                featuredProducts: [
+                    { id: '1', name: 'Product 1' },
+                    { id: '2', name: 'Product 2' },
+                ],
+            },
+        };
+        const result = transformRelationFields(createFieldsWithListRelation(), entity);
+
+        expect(result.customFields).toEqual({ featuredProductsIds: ['1', '2'] });
+        expect(result.customFields).not.toHaveProperty('featuredProducts');
+    });
+
+    it('should handle empty array for clearing list relations', () => {
+        const entity = { customFields: { featuredProducts: [] } };
+        const result = transformRelationFields(createFieldsWithListRelation(), entity);
+
+        expect(result.customFields).toEqual({ featuredProductsIds: [] });
+    });
+
+    it('should handle undefined/null list relation by deleting field', () => {
+        const undefinedResult = transformRelationFields(createFieldsWithListRelation(), { customFields: {} });
+        const nullResult = transformRelationFields(createFieldsWithListRelation(), {
+            customFields: { featuredProducts: null },
+        });
+
+        expect(undefinedResult.customFields).not.toHaveProperty('featuredProductsIds');
+        expect(nullResult.customFields).not.toHaveProperty('featuredProducts');
+    });
+
+    it('should extract ID from single relation and delete original field', () => {
+        const entity = { customFields: { featuredProduct: { id: '1', name: 'Product 1' } } };
+        const result = transformRelationFields(createFieldsWithSingleRelation(), entity);
+
+        expect(result.customFields).toEqual({ featuredProductId: '1' });
+        expect(result.customFields).not.toHaveProperty('featuredProduct');
+    });
+
+    it('should not mutate the original entity', () => {
+        const entity = { customFields: { featuredProducts: [{ id: '1' }] } };
+        const result = transformRelationFields(createFieldsWithListRelation(), entity);
+
+        expect(entity.customFields.featuredProducts).toEqual([{ id: '1' }]);
+        expect(result).not.toBe(entity);
+    });
+
+    it('should preserve other custom fields while transforming relations', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'customFields',
+                type: 'CustomFields',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: false,
+                typeInfo: [
+                    {
+                        name: 'featuredProductsIds',
+                        type: 'ID',
+                        nullable: true,
+                        list: true,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                    {
+                        name: 'notes',
+                        type: 'String',
+                        nullable: true,
+                        list: false,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                ],
+            },
+        ];
+        const entity = { customFields: { featuredProducts: [{ id: '1' }], notes: 'Some notes' } };
+        const result = transformRelationFields(fields, entity);
+
+        expect(result.customFields).toEqual({ featuredProductsIds: ['1'], notes: 'Some notes' });
+    });
+});
+
+describe('convertEmptyStringsToNull', () => {
+    it('should not throw when called with null values', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'customFields',
+                type: 'CustomFieldsInput',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: false,
+            },
+        ];
+        expect(() => convertEmptyStringsToNull(null as any, fields)).not.toThrow();
+        expect(convertEmptyStringsToNull(null as any, fields)).toBeNull();
+    });
+
+    it('should preserve empty object for nullable non-scalar fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'customFields',
+                type: 'CustomFieldsInput',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: false,
+            },
+        ];
+        const values = { customFields: {} };
+        const result = convertEmptyStringsToNull(values, fields);
+        expect(result.customFields).toEqual({});
+    });
+
+    it('should convert empty string to null for nullable DateTime fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'releaseDate',
+                type: 'DateTime',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { releaseDate: '' };
+        const result = convertEmptyStringsToNull(values, fields);
+        expect(result.releaseDate).toBeNull();
+    });
+
+    it('should NOT convert empty string to null for nullable String fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'description',
+                type: 'String',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { description: '' };
+        const result = convertEmptyStringsToNull(values, fields);
+        expect(result.description).toBe('');
+    });
+
+    it('should convert empty strings to null in nested array objects', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'translations',
+                type: 'TranslationInput',
+                nullable: false,
+                list: true,
+                isPaginatedList: false,
+                isScalar: false,
+                typeInfo: [
+                    {
+                        name: 'releaseDate',
+                        type: 'DateTime',
+                        nullable: true,
+                        list: false,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                    {
+                        name: 'name',
+                        type: 'String',
+                        nullable: true,
+                        list: false,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                ],
+            },
+        ];
+        const values = {
+            translations: [{ releaseDate: '', name: '' }],
+        };
+        const result = convertEmptyStringsToNull(values, fields);
+        expect(result.translations[0].releaseDate).toBeNull();
+        expect(result.translations[0].name).toBe('');
+    });
+
+    it('should not mutate the original values', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'releaseDate',
+                type: 'DateTime',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { releaseDate: '' };
+        convertEmptyStringsToNull(values, fields);
+        expect(values.releaseDate).toBe('');
+    });
+});
+
+describe('stripNullNullableFields', () => {
+    it('should strip null from nullable scalar fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'outOfStockThreshold',
+                type: 'Int',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+            {
+                name: 'weight',
+                type: 'Float',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+            {
+                name: 'releaseDate',
+                type: 'DateTime',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { outOfStockThreshold: null, weight: null, releaseDate: null };
+        const result = stripNullNullableFields(values, fields);
+        expect(result).toEqual({});
+    });
+
+    it('should preserve non-null values for nullable fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'outOfStockThreshold',
+                type: 'Int',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+            {
+                name: 'weight',
+                type: 'Float',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { outOfStockThreshold: 5, weight: null };
+        const result = stripNullNullableFields(values, fields);
+        expect(result).toEqual({ outOfStockThreshold: 5 });
+    });
+
+    it('should preserve null for non-nullable fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'code',
+                type: 'String',
+                nullable: false,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { code: null };
+        const result = stripNullNullableFields(values, fields);
+        expect(result).toEqual({ code: null });
+    });
+
+    it('should handle nested objects with nullable fields', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'translations',
+                type: 'TranslationInput',
+                nullable: false,
+                list: true,
+                isPaginatedList: false,
+                isScalar: false,
+                typeInfo: [
+                    {
+                        name: 'name',
+                        type: 'String',
+                        nullable: false,
+                        list: false,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                    {
+                        name: 'description',
+                        type: 'String',
+                        nullable: true,
+                        list: false,
+                        isPaginatedList: false,
+                        isScalar: true,
+                    },
+                ],
+            },
+        ];
+        const values = {
+            translations: [{ name: 'Test', description: null }],
+        };
+        const result = stripNullNullableFields(values, fields);
+        expect(result).toEqual({ translations: [{ name: 'Test' }] });
+    });
+
+    it('should handle null input gracefully', () => {
+        const fields: FieldInfo[] = [];
+        expect(stripNullNullableFields(null as any, fields)).toBeNull();
+    });
+
+    it('should not mutate the original values', () => {
+        const fields: FieldInfo[] = [
+            {
+                name: 'threshold',
+                type: 'Int',
+                nullable: true,
+                list: false,
+                isPaginatedList: false,
+                isScalar: true,
+            },
+        ];
+        const values = { threshold: null };
+        const result = stripNullNullableFields(values, fields);
+        expect(values.threshold).toBeNull();
+        expect(result).toEqual({});
+    });
+});