@wilshop/dashboard 3.5.6 → 3.5.7

package/src/lib/framework/dashboard-widget/widget-filters-context.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useLingui } from '@lingui/react/macro';
-import { createContext, PropsWithChildren, useContext } from 'react';
+import { createContext, PropsWithChildren } from 'react';
 
 export interface DefinedDateRange {
     from: Date;
@@ -12,25 +11,8 @@ export interface WidgetFilters {
     dateRange: DefinedDateRange;
 }
 
-const WidgetFiltersContext = createContext<WidgetFilters | undefined>(undefined);
+export const WidgetFiltersContext = createContext<WidgetFilters | undefined>(undefined);
 
 export function WidgetFiltersProvider({ children, filters }: PropsWithChildren<{ filters: WidgetFilters }>) {
     return <WidgetFiltersContext.Provider value={filters}>{children}</WidgetFiltersContext.Provider>;
 }
-
-/**
- * @description
- * Exposes a context object for use in building Insights page widgets.
- *
- * @docsCategory hooks
- * @docsPage useWidgetFilters
- * @since 3.5.0
- */
-export function useWidgetFilters() {
-    const { t } = useLingui();
-    const context = useContext(WidgetFiltersContext);
-    if (context === undefined) {
-        throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
-    }
-    return context;
-}

package/src/lib/framework/extension-api/input-component-extensions.tsx

@@ -4,11 +4,13 @@ import {
     CustomerGroupInput,
     FacetValueInput,
     MoneyInput,
+    NumberInput,
     ProductMultiInput,
     RichTextInput,
     SelectWithOptions,
 } from '@/vdb/components/data-input/index.js';
 import { PasswordFormInput } from '@/vdb/components/data-input/password-form-input.js';
+import { TextInput } from '@/vdb/components/data-input/text-input.js';
 import { TextareaInput } from '@/vdb/components/data-input/textarea-input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { globalRegistry } from '../registry/global-registry.js';
@@ -38,6 +40,8 @@ inputComponents.set('relation-form-input', DefaultRelationInput);
 inputComponents.set('select-form-input', SelectWithOptions);
 inputComponents.set('product-multi-form-input', ProductMultiInput);
 inputComponents.set('combination-mode-form-input', CombinationModeInput);
+inputComponents.set('number-form-input', NumberInput);
+inputComponents.set('text-form-input', TextInput);
 
 export function getInputComponent(id: string | undefined): DashboardFormComponent | undefined {
     if (!id) {

package/src/lib/framework/form-engine/custom-form-component.tsx

@@ -1,15 +1,25 @@
 import { getInputComponent } from '@/vdb/framework/extension-api/input-component-extensions.js';
-
+import { DefaultInputForType } from '@/vdb/framework/form-engine/default-input-for-type.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 
+const warnedComponents = new Set<string>();
+
 export function CustomFormComponent(props: DashboardFormComponentProps) {
     if (!props.fieldDef) {
         return null;
     }
-    const Component = getInputComponent(props.fieldDef.ui?.component);
+    const componentId = props.fieldDef.ui?.component;
+    const Component = getInputComponent(componentId);
 
     if (!Component) {
-        return null;
+        if (componentId && !warnedComponents.has(componentId)) {
+            warnedComponents.add(componentId);
+            console.warn(
+                `Custom form component "${componentId}" not found for field "${props.fieldDef.name}". ` +
+                    `Falling back to default input for type "${props.fieldDef.type}".`,
+            );
+        }
+        return <DefaultInputForType {...props} />;
     }
 
     return <Component {...props} />;

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

@@ -110,11 +110,9 @@ export type DashboardFormComponentProps<
  *   // implementation omitted
  * }
  *
- * // highlight-start
- * MyCustomInput.metadata = {
- *   isListInput: true
- * }
- * // highlight-end
+ * MyCustomInput.metadata = { // [!code highlight]
+ *   isListInput: true // [!code highlight]
+ * } // [!code highlight]
  * ```
  *
  * @docsCategory extensions-api

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

@@ -309,7 +309,10 @@ export function createFormSchemaFromFields(
                 customFieldConfigs && customFieldConfigs.length > 0
                     ? processCustomFieldsSchema(customFieldConfigs, isTranslationContext)
                     : {};
-            schemaConfig[field.name] = z.object(customFieldsSchema).optional();
+            // Use .passthrough() to preserve custom field values that aren't in the schema
+            // This is essential for nested entities (e.g., ProductVariantPrice) whose custom
+            // field configs aren't passed to the parent form schema builder
+            schemaConfig[field.name] = z.object(customFieldsSchema).passthrough().optional();
         } else if (field.typeInfo) {
             const isNestedTranslationContext = field.name === 'translations' || isTranslationContext;
             let nestedType: ZodType = createFormSchemaFromFields(

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

@@ -98,9 +98,13 @@ export function useGeneratedForm<
     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))
-        : defaultValues;
+        : processedDefaultValues;
 
     const form = useForm({
         resolver: async (values, context, options) => {
@@ -111,7 +115,7 @@ export function useGeneratedForm<
             return result;
         },
         mode: 'onChange',
-        defaultValues,
+        defaultValues: processedDefaultValues,
         values,
     });
     let submitHandler = (event: FormEvent): any => {

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

@@ -1,9 +1,9 @@
 import { graphql, VariablesOf } from 'gql.tada';
 import { describe, expect, it } from 'vitest';
 
-import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import { FieldInfo, getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
 
-import { removeEmptyIdFields } from './utils.js';
+import { removeEmptyIdFields, transformRelationFields } from './utils.js';
 
 const createProductDocument = graphql(`
     mutation CreateProduct($input: CreateProductInput!) {
@@ -35,3 +35,130 @@ describe('removeEmptyIdFields', () => {
         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' });
+    });
+});

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

@@ -58,12 +58,10 @@ export function transformRelationFields<E extends Record<string, any>>(fields: F
             const propertyAccessorKey = customField.name.replace(/Ids$/, '');
             const relationValue = entity.customFields[propertyAccessorKey];
 
-            if (relationValue) {
-                const relationIdValue = relationValue.map((v: { id: string }) => v.id);
-                if (relationIdValue && relationIdValue.length > 0) {
-                    processedEntity.customFields[relationField] = relationIdValue;
-                }
+            if (Array.isArray(relationValue)) {
+                processedEntity.customFields[relationField] = relationValue.map((v: { id: string }) => v.id);
             }
+            delete processedEntity.customFields[propertyAccessorKey];
         } else {
             // For single fields, the accessor is the field name without the "Id" suffix
             const propertyAccessorKey = customField.name.replace(/Id$/, '');
@@ -253,14 +251,43 @@ export function isStringStructField(input: StructField): input is StringStructFi
 }
 
 /**
- * String struct field that has options (select dropdown)
+ * String struct field that has options (select dropdown).
+ * Checks for options defined either directly or via ui.options.
  */
 export function isStringStructFieldWithOptions(
     input: StructField,
 ): input is StringStructField & { options: any[] } {
-    return (
-        input.type === 'string' && input.hasOwnProperty('options') && Array.isArray((input as any).options)
-    );
+    if (input.type !== 'string') {
+        return false;
+    }
+    // Check for direct options property
+    if (input.hasOwnProperty('options') && Array.isArray((input as any).options)) {
+        return true;
+    }
+    // Also check for ui.options (fallback pattern)
+    if (Array.isArray((input as any).ui?.options)) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Extracts options from a field definition, normalizing the different locations
+ * where options can be defined (direct property or ui.options).
+ * Works for both ConfigurableFieldDef and StructField types.
+ */
+export function extractFieldOptions(
+    field: ConfigurableFieldDef | StructField,
+): NonNullable<StringCustomFieldConfig['options']> {
+    // Check direct options property first
+    if ((field as any).options && Array.isArray((field as any).options)) {
+        return (field as any).options;
+    }
+    // Fall back to ui.options
+    if (field.ui?.options && Array.isArray(field.ui.options)) {
+        return field.ui.options;
+    }
+    return [];
 }
 
 /**

package/src/lib/framework/form-engine/value-transformers.ts

@@ -40,6 +40,12 @@ export const jsonStringValueTransformer: ValueTransformer = {
             return value;
         }
 
+        // For scalar string fields, return the raw value without JSON parsing.
+        // This prevents issues like "0" being parsed as number 0, or "-0" becoming -0 which is "0" in the input.
+        if (fieldDef.type === 'string' && !fieldDef.list) {
+            return value;
+        }
+
         try {
             // For JSON string mode, parse the string to get the native value
             const parsed = JSON.parse(value);

package/src/lib/framework/page/detail-page-route-loader.tsx

@@ -16,7 +16,7 @@ export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, an
      * the detail query document) get correctly applied at the route loader level.
      */
     pageId?: string;
-    queryDocument: T;
+    queryDocument: T | (() => T);
     breadcrumb: (
         isNew: boolean,
         entity: DetailEntity<T>,
@@ -38,12 +38,14 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
         params: any;
         location: ParsedLocation;
     }) => {
+        const resolvedQueryDocument = typeof queryDocument === 'function' ? queryDocument() : queryDocument;
+
         if (!params.id) {
             throw new Error('ID param is required');
         }
         const isNew = params.id === NEW_ENTITY_PATH;
         const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
-            addCustomFields(queryDocument),
+            addCustomFields(resolvedQueryDocument),
             pageId,
         );
         const result = isNew
@@ -53,8 +55,8 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
                   { id: params.id },
               );
 
-        const entityField = getQueryName(queryDocument);
-        const entityName = getQueryTypeFieldInfo(queryDocument)?.type;
+        const entityField = getQueryName(resolvedQueryDocument);
+        const entityName = getQueryTypeFieldInfo(resolvedQueryDocument)?.type;
 
         if (!isNew && !result[entityField]) {
             throw new Error(`${entityName} with the ID ${params.id} was not found`);

package/src/lib/framework/page/detail-page.tsx

@@ -1,25 +1,20 @@
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { DefaultInputForType } from '@/vdb/framework/form-engine/default-input-for-type.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Trans } from '@lingui/react/macro';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { toast } from 'sonner';
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import {
     FieldInfo,
     getEntityName,
     getOperationVariablesFields,
 } from '../document-introspection/get-document-structure.js';
-
-import { NumberInput } from '@/vdb/components/data-input/number-input.js';
-import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
-import { FormControl } from '@/vdb/components/ui/form.js';
-import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -97,6 +92,18 @@ export interface DetailPageFieldProps<
     field: ControllerRenderProps<TFieldValues, TName>;
 }
 
+/**
+ * Maps GraphQL schema types (PascalCase) to form engine types (lowercase)
+ */
+const graphqlTypeMap: Record<string, string> = {
+    Int: 'int',
+    Float: 'float',
+    Boolean: 'boolean',
+    DateTime: 'datetime',
+    String: 'string',
+    ID: 'string',
+};
+
 /**
  * Renders form input components based on field type
  */
@@ -104,33 +111,13 @@ function FieldInputRenderer<
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({ fieldInfo, field }: DetailPageFieldProps<TFieldValues, TName>) {
-    switch (fieldInfo.type) {
-        case 'Int':
-        case 'Float':
-            return (
-                <FormControl>
-                    <NumberInput {...field} />
-                </FormControl>
-            );
-        case 'DateTime':
-            return (
-                <FormControl>
-                    <DateTimeInput {...field} />
-                </FormControl>
-            );
-        case 'Boolean':
-            return (
-                <FormControl>
-                    <Checkbox value={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-            );
-        default:
-            return (
-                <FormControl>
-                    <Input {...field} />
-                </FormControl>
-            );
-    }
+    const type = graphqlTypeMap[fieldInfo.type] ?? 'string';
+    return (
+        <DefaultInputForType
+            {...field}
+            fieldDef={{ type, name: fieldInfo.name } as any}
+        />
+    );
 }
 
 /**
@@ -219,7 +206,6 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer fieldInfo={fieldInfo} field={field} />
                                         )}
@@ -237,7 +223,6 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer fieldInfo={fieldInfo} field={field} />
                                         )}

package/src/lib/framework/page/list-page.stories.tsx

@@ -5,6 +5,7 @@ import { ListPage, ListPageProps } from '@/vdb/framework/page/list-page.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import type { Meta, StoryObj } from '@storybook/react';
 import { PlusIcon } from 'lucide-react';
+import { expect } from 'storybook/test';
 
 import { DemoRouterProvider } from '../../../../.storybook/providers.js';
 
@@ -72,8 +73,9 @@ const meta = {
             description: 'GraphQL mutation document for deleting items',
         },
         customizeColumns: {
-            control: false,
-            description: 'Customize column rendering and behavior',
+            control: 'object',
+            description:
+                'Customize column rendering and behavior. Use `meta.disabled: true` to exclude columns from the table.',
         },
         defaultVisibility: {
             control: 'object',
@@ -99,6 +101,11 @@ export const BasicList: Story = {
             code: true,
             enabled: true,
         },
+        customizeColumns: {
+            updatedAt: {
+                meta: { disabled: true },
+            },
+        },
     },
 };
 
@@ -166,6 +173,38 @@ export const WithSearch: Story = {
     },
 };
 
+/**
+ * ListPage with disabled columns.
+ * Shows how to use `meta.disabled` to completely exclude columns from the table
+ * and the column visibility toggle. The disabled columns' data can still be
+ * accessed in other column renderers.
+ */
+export const WithDisabledColumns: Story = {
+    args: {
+        pageId: 'country-list-disabled',
+        listQuery: countriesListQuery,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+            // The createdAt and updatedAt columns are disabled and won't appear
+            // in the table or in the column visibility toggle
+            updatedAt: {
+                meta: { disabled: true },
+            },
+            createdAt: {
+                meta: { disabled: true },
+            },
+        },
+    },
+};
+
 /**
  * Complete example with action bar and all features.
  * Shows the full ListPage configuration including custom action buttons.

package/src/lib/framework/page/list-page.tsx

@@ -154,6 +154,7 @@ export interface ListPageProps<
      *      };
      *    }}
      *  />
+     * ```
      * @param searchTerm
      */
     onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];
@@ -208,6 +209,13 @@ export interface ListPageProps<
      *           );
      *       },
      *     },
+     *     // Use `meta.disabled` to completely exclude a column from the table,
+     *     // including the column visibility toggle. This is useful when you need
+     *     // to fetch certain fields for use in custom cell renderers, but don't
+     *     // want those fields to appear as their own columns.
+     *     productVariantCount: {
+     *       meta: { disabled: true },
+     *     },
      * ```
      */
     customizeColumns?: CustomizeColumnConfig<T>;