@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

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

@@ -1,26 +1,17 @@
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.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 { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans } from '@/lib/trans.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { toast } from 'sonner';
-import {
-    FieldInfo,
-    getEntityName,
-    getOperationVariablesFields,
-} from '../document-introspection/get-document-structure.js';
+import { getOperationVariablesFields } from '../document-introspection/get-document-structure.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 { useComponentRegistry } from '../component-registry/component-registry.js';
-import { generateInputComponentKey } from '../extension-api/input-component-extensions.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -50,7 +41,6 @@ export interface DetailPageProps<
     /**
      * @description
      * The name of the entity.
-     * If not provided, it will be inferred from the query document.
      */
     entityName?: string;
     /**
@@ -90,70 +80,6 @@ export interface DetailPageProps<
     setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
 }
 
-export interface DetailPageFieldProps<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-    fieldInfo: FieldInfo;
-    field: ControllerRenderProps<TFieldValues, TName>;
-    blockId: string;
-    pageId: string;
-}
-
-/**
- * Renders form input components based on field type
- */
-function FieldInputRenderer<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({ fieldInfo, field, blockId, pageId }: DetailPageFieldProps<TFieldValues, TName>) {
-    const componentRegistry = useComponentRegistry();
-    const customInputComponentKey = generateInputComponentKey(pageId, blockId, fieldInfo.name);
-
-    const DisplayComponent = componentRegistry.getDisplayComponent(customInputComponentKey);
-    const InputComponent = componentRegistry.getInputComponent(customInputComponentKey);
-
-    if (DisplayComponent) {
-        return <DisplayComponent {...field} />;
-    }
-
-    if (InputComponent) {
-        return <InputComponent {...field} />;
-    }
-
-    switch (fieldInfo.type) {
-        case 'Int':
-        case 'Float':
-            return (
-                <FormControl>
-                    <Input
-                        type="number"
-                        value={field.value}
-                        onChange={e => field.onChange(e.target.valueAsNumber)}
-                    />
-                </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>
-            );
-    }
-}
-
 /**
  * @description
  * **Status: Developer Preview**
@@ -174,7 +100,7 @@ export function DetailPage<
 >({
     pageId,
     route,
-    entityName: passedEntityName,
+    entityName,
     queryDocument,
     createDocument,
     updateDocument,
@@ -184,15 +110,11 @@ export function DetailPage<
     const params = route.useParams();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const navigate = useNavigate();
-    const inferredEntityName = getEntityName(queryDocument);
-
-    const entityName = passedEntityName ?? inferredEntityName;
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage<any, any, any>({
         queryDocument,
         updateDocument,
         createDocument,
-        entityName,
         params: { id: params.id },
         setValuesForUpdate,
         onSuccess: async data => {
@@ -211,7 +133,6 @@ export function DetailPage<
     });
 
     const updateFields = getOperationVariablesFields(updateDocument, 'input');
-    const translations = updateFields.find(fieldInfo => fieldInfo.name === 'translations');
 
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler}>
@@ -231,7 +152,6 @@ export function DetailPage<
                     <DetailFormGrid>
                         {updateFields
                             .filter(fieldInfo => fieldInfo.name !== 'customFields')
-                            .filter(fieldInfo => fieldInfo.name !== 'translations')
                             .map(fieldInfo => {
                                 if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
                                     return null;
@@ -242,38 +162,33 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        renderFormControl={false}
-                                        render={({ field }) => (
-                                            <FieldInputRenderer
-                                                fieldInfo={fieldInfo}
-                                                field={field}
-                                                blockId="main-form"
-                                                pageId={pageId}
-                                            />
-                                        )}
-                                    />
-                                );
-                            })}
-                        {translations?.typeInfo
-                            ?.filter(
-                                fieldInfo => !['customFields', 'id', 'languageCode'].includes(fieldInfo.name),
-                            )
-                            .map(fieldInfo => {
-                                return (
-                                    <TranslatableFormFieldWrapper
-                                        key={fieldInfo.name}
-                                        control={form.control}
-                                        name={fieldInfo.name as never}
-                                        label={fieldInfo.name}
-                                        renderFormControl={false}
-                                        render={({ field }) => (
-                                            <FieldInputRenderer
-                                                fieldInfo={fieldInfo}
-                                                field={field}
-                                                blockId="main-form"
-                                                pageId={pageId}
-                                            />
-                                        )}
+                                        render={({ field }) => {
+                                            switch (fieldInfo.type) {
+                                                case 'Int':
+                                                case 'Float':
+                                                    return (
+                                                        <Input
+                                                            type="number"
+                                                            value={field.value}
+                                                            onChange={e =>
+                                                                field.onChange(e.target.valueAsNumber)
+                                                            }
+                                                        />
+                                                    );
+                                                case 'DateTime':
+                                                    return <DateTimeInput {...field} />;
+                                                case 'Boolean':
+                                                    return (
+                                                        <Checkbox
+                                                            value={field.value}
+                                                            onCheckedChange={field.onChange}
+                                                        />
+                                                    );
+                                                case 'String':
+                                                default:
+                                                    return <Input {...field} />;
+                                            }
+                                        }}
                                     />
                                 );
                             })}

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

@@ -3,21 +3,26 @@ import {
     CustomFieldKeysOfItem,
     CustomizeColumnConfig,
     FacetedFilterConfig,
-    ListQueryFields,
     ListQueryOptionsShape,
     ListQueryShape,
+    ListQueryFields,
     PaginatedListDataTable,
     RowAction,
-} from '@/vdb/components/shared/paginated-list-data-table.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+} from '@/components/shared/paginated-list-data-table.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
-import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
 
 /**
  * @description
@@ -52,7 +57,6 @@ export interface ListPageProps<
     rowActions?: RowAction<ListQueryFields<T>>[];
     transformData?: (data: any[]) => any[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
-    bulkActions?: BulkAction[];
 }
 
 /**
@@ -89,8 +93,7 @@ export function ListPage<
     rowActions,
     transformData,
     setTableOptions,
-    bulkActions,
-}: Readonly<ListPageProps<T, U, V, AC>>) {
+}: ListPageProps<T, U, V, AC>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
     const navigate = useNavigate<AnyRouter>({ from: route.fullPath });
@@ -188,7 +191,6 @@ export function ListPage<
                         }}
                         facetedFilters={facetedFilters}
                         rowActions={rowActions}
-                        bulkActions={bulkActions}
                         setTableOptions={setTableOptions}
                         transformData={transformData}
                     />

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

@@ -1,4 +1,5 @@
-import { removeReadonlyCustomFields } from '@/vdb/lib/utils.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import { api, Variables } from '@/graphql/api.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     DefinedInitialDataOptions,
@@ -12,16 +13,8 @@ import { DocumentNode } from 'graphql';
 import { FormEvent } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
-import { NEW_ENTITY_PATH } from '../../constants.js';
-import { api, Variables } from '../../graphql/api.js';
-import { useCustomFieldConfig } from '../../hooks/use-custom-field-config.js';
-import { useExtendedDetailQuery } from '../../hooks/use-extended-detail-query.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-import {
-    getEntityName,
-    getMutationName,
-    getQueryName,
-} from '../document-introspection/get-document-structure.js';
+import { getMutationName, getQueryName } from '../document-introspection/get-document-structure.js';
 import { useGeneratedForm } from '../form-engine/use-generated-form.js';
 
 import { DetailEntityPath } from './page-types.js';
@@ -49,12 +42,6 @@ export interface DetailPageOptions<
     VarNameCreate extends keyof VariablesOf<C> = 'input',
     VarNameUpdate extends keyof VariablesOf<U> = 'input',
 > {
-    /**
-     * @description
-     * The page id. This is optional, but if provided, it will be used to
-     * identify the page when extending the detail page query
-     */
-    pageId?: string;
     /**
      * @description
      * The query document to fetch the entity.
@@ -72,13 +59,6 @@ export interface DetailPageOptions<
     params: {
         id: string;
     };
-    /**
-     * @description
-     * The entity type name for custom field configuration lookup.
-     * Required to filter out readonly custom fields before mutations.
-     * If not provided, the function will try to infer it from the query document.
-     */
-    entityName?: string;
     /**
      * @description
      * The document to create the entity.
@@ -244,7 +224,6 @@ export function useDetailPage<
     options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>,
 ): UseDetailPageResult<T, C, U, EntityField> {
     const {
-        pageId,
         queryDocument,
         createDocument,
         updateDocument,
@@ -253,21 +232,16 @@ export function useDetailPage<
         transformUpdateInput,
         params,
         entityField,
-        entityName,
         onSuccess,
         onError,
     } = options;
     const isNew = params.id === NEW_ENTITY_PATH;
     const queryClient = useQueryClient();
-    const returnEntityName = entityName ?? getEntityName(queryDocument);
-    const customFieldConfig = useCustomFieldConfig(returnEntityName);
-    const extendedDetailQuery = useExtendedDetailQuery(addCustomFields(queryDocument), pageId);
-    const detailQueryOptions = getDetailQueryOptions(extendedDetailQuery, {
+    const detailQueryOptions = getDetailQueryOptions(addCustomFields(queryDocument), {
         id: isNew ? '__NEW__' : params.id,
     });
     const detailQuery = useSuspenseQuery(detailQueryOptions);
-    const entityQueryField = entityField ?? getQueryName(extendedDetailQuery);
-
+    const entityQueryField = entityField ?? getQueryName(queryDocument);
     const entity = (detailQuery?.data as any)[entityQueryField] as
         | DetailPageEntity<T, EntityField>
         | undefined;
@@ -306,15 +280,10 @@ export function useDetailPage<
         entity,
         setValues: setValuesForUpdate,
         onSubmit(values: any) {
-            // Filter out readonly custom fields before submitting
-            const filteredValues = removeReadonlyCustomFields(values, customFieldConfig || []);
-
             if (isNew) {
-                const finalInput = transformCreateInput?.(filteredValues) ?? filteredValues;
-                createMutation.mutate({ input: finalInput });
+                createMutation.mutate({ input: transformCreateInput?.(values) ?? values });
             } else {
-                const finalInput = transformUpdateInput?.(filteredValues) ?? filteredValues;
-                updateMutation.mutate({ input: finalInput });
+                updateMutation.mutate({ input: transformUpdateInput?.(values) ?? values });
             }
         },
     });

package/src/lib/framework/page/use-extended-router.tsx

@@ -1,9 +1,10 @@
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { extensionRoutes } from '@/framework/page/page-api.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
 import { AnyRoute, createRoute, Router } from '@tanstack/react-router';
 import { useMemo } from 'react';
-import { ErrorPage } from '../../components/shared/error-page.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '../../constants.js';
-import { useDashboardExtensions } from '../extension-api/use-dashboard-extensions.js';
-import { extensionRoutes } from './page-api.js';
 
 /**
  * Extends the TanStack Router with additional routes for each dashboard

package/src/lib/framework/registry/registry-types.ts

@@ -1,15 +1,9 @@
+import { DashboardAlertDefinition } from '../alert/types.js';
+import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
 import {
-    BulkAction,
     DashboardActionBarItem,
     DashboardPageBlockDefinition,
-    DashboardWidgetDefinition,
-} from '@/vdb/framework/extension-api/types/index.js';
-import { DocumentNode } from 'graphql';
-import React from 'react';
-
-import { DataDisplayComponent, DataInputComponent } from '../component-registry/component-registry.js';
-import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
-import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
+} from '../extension-api/extension-api-types.js';
 import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';
 
 export interface GlobalRegistryContents {
@@ -20,10 +14,6 @@ export interface GlobalRegistryContents {
     dashboardPageBlockRegistry: Map<string, DashboardPageBlockDefinition[]>;
     dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
-    customFormComponents: Map<string, React.FunctionComponent<CustomFormComponentInputProps>>;
-    inputComponents: Map<string, DataInputComponent>;
-    displayComponents: Map<string, DataDisplayComponent>;
-    bulkActionsRegistry: Map<string, BulkAction[]>;
-    listQueryDocumentRegistry: Map<string, DocumentNode[]>;
-    detailQueryDocumentRegistry: Map<string, DocumentNode[]>;
 }
+
+export type GlobalRegistryKey = keyof GlobalRegistryContents;

package/src/lib/graphql/{fragments.ts → fragments.tsx}

@@ -1,4 +1,4 @@
-import { graphql, ResultOf } from './graphql.js';
+import { graphql, ResultOf } from "./graphql.js";
 
 export const assetFragment = graphql(`
     fragment Asset on Asset {
@@ -58,4 +58,5 @@ export const errorResultFragment = graphql(`
     }
 `);
 
+
 export type ConfigurableOperationDefFragment = ResultOf<typeof configurableOperationDefFragment>;