@vendure/dashboard 3.3.6-master-202507020234 → 3.3.6-master-202507020959

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507020234",
+  "version": "3.3.6-master-202507020959",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507020234",
-    "@vendure/core": "^3.3.6-master-202507020234",
+    "@vendure/common": "^3.3.6-master-202507020959",
+    "@vendure/core": "^3.3.6-master-202507020959",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "1ebfbfe0c8cc2a8f545987f52fd06b7f9a1f3089"
+  "gitHead": "5ee07181c993fe6edee6c000fe4cd90ffcba852f"
 }

package/src/lib/framework/component-registry/component-registry.tsx

@@ -1,70 +1,54 @@
-import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
-import { DateTime } from '@/components/data-display/date-time.js';
-import { Money } from '@/components/data-display/money.js';
-import { DateTimeInput } from '@/components/data-input/datetime-input.js';
-import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Input } from '@/components/ui/input.js';
 import * as React from 'react';
+import { addDisplayComponent, getDisplayComponent } from '../extension-api/display-component-extensions.js';
+import { addInputComponent, getInputComponent } from '../extension-api/input-component-extensions.js';
 
 export interface ComponentRegistryEntry<Props extends Record<string, any>> {
     component: React.ComponentType<Props>;
 }
 
 // Basic component types
-export type DataDisplayComponent = React.ComponentType<{ value: any; [key: string]: any }>;
-export type DataInputComponent = React.ComponentType<{ value: any; onChange: (value: any) => void; [key: string]: any }>;
 
-// Simple component registry
-interface ComponentRegistry {
-    dataDisplay: Record<string, DataDisplayComponent>;
-    dataInput: Record<string, DataInputComponent>;
+export interface DataDisplayComponentProps {
+    value: any;
+    [key: string]: any;
 }
 
-export const COMPONENT_REGISTRY: ComponentRegistry = {
-    dataDisplay: {
-        'vendure:booleanCheckbox': BooleanDisplayCheckbox,
-        'vendure:booleanBadge': BooleanDisplayBadge,
-        'vendure:dateTime': DateTime,
-        'vendure:asset': ({value}) => <VendureImage asset={value} preset="tiny" />,
-        'vendure:money': Money,
-    },
-    dataInput: {
-        'vendure:moneyInput': MoneyInput,
-        'vendure:textInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} />,
-        'vendure:numberInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} type="number" />,
-        'vendure:dateTimeInput': DateTimeInput,
-        'vendure:checkboxInput': (props) => <Checkbox {...props} checked={props.value === 'true' || props.value === true}  onCheckedChange={value => props.onChange(value)} />,
-        'vendure:facetValueInput': FacetValueInput,
-    }
-};
+export interface DataInputComponentProps {
+    value: any;
+    onChange: (value: any) => void;
+    [key: string]: any;
+}
+
+export type DataDisplayComponent = React.ComponentType<DataDisplayComponentProps>;
+export type DataInputComponent = React.ComponentType<DataInputComponentProps>;
 
-// Simplified implementation - replace with actual implementation
+// Component registry hook that uses the global registry
 export function useComponentRegistry() {
     return {
         getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataDisplay[id];
+            return getDisplayComponent(id);
         },
         getInputComponent: (id: string): DataInputComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataInput[id];
+            return getInputComponent(id);
         },
     };
 }
 
-export function registerInputComponent(id: string,  component: DataInputComponent) {
-    if (COMPONENT_REGISTRY.dataInput[id]) {
-        throw new Error(`Input component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataInput[id] = component;
+// Legacy registration functions - these now delegate to the global registry
+export function registerInputComponent(
+    pageId: string,
+    blockId: string,
+    field: string,
+    component: DataInputComponent,
+) {
+    addInputComponent({ pageId, blockId, field, component });
 }
 
-export function registerDisplayComponent(id: string, component: DataDisplayComponent) {
-    if (COMPONENT_REGISTRY.dataDisplay[id]) {
-        throw new Error(`Display component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataDisplay[id] = component;
+export function registerDisplayComponent(
+    pageId: string,
+    blockId: string,
+    field: string,
+    component: DataDisplayComponent,
+) {
+    addDisplayComponent({ pageId, blockId, field, component });
 }

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,20 +1,15 @@
-import { addBulkAction, addListQueryDocument } from '@/framework/data-table/data-table-extensions.js';
-import { parse } from 'graphql';
-
-import { registerDashboardWidget } from '../dashboard-widget/widget-extensions.js';
-import {
-    addCustomFormComponent,
-    addDetailQueryDocument,
-} from '../form-engine/custom-form-component-extensions.js';
-import {
-    registerDashboardActionBarItem,
-    registerDashboardPageBlock,
-} from '../layout-engine/layout-extensions.js';
-import { addNavMenuItem, addNavMenuSection, NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
-import { registerRoute } from '../page/page-api.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
 import { DashboardExtension } from './extension-api-types.js';
+import {
+    registerAlertExtensions,
+    registerDataTableExtensions,
+    registerDetailFormExtensions,
+    registerFormComponentExtensions,
+    registerLayoutExtensions,
+    registerNavigationExtensions,
+    registerWidgetExtensions,
+} from './logic/index.js';
 
 globalRegistry.register('extensionSourceChangeCallbacks', new Set<() => void>());
 globalRegistry.register('registerDashboardExtensionCallbacks', new Set<() => void>());
@@ -41,89 +36,28 @@ export function executeDashboardExtensionCallbacks() {
  */
 export function defineDashboardExtension(extension: DashboardExtension) {
     globalRegistry.get('registerDashboardExtensionCallbacks').add(() => {
-        if (extension.navSections) {
-            for (const section of extension.navSections) {
-                addNavMenuSection({
-                    ...section,
-                    placement: 'top',
-                    order: section.order ?? 999,
-                    items: [],
-                });
-            }
-        }
-        if (extension.routes) {
-            for (const route of extension.routes) {
-                if (route.navMenuItem) {
-                    // Add the nav menu item
-                    const item: NavMenuItem = {
-                        url: route.navMenuItem.url ?? route.path,
-                        id: route.navMenuItem.id ?? route.path,
-                        title: route.navMenuItem.title ?? route.path,
-                    };
-                    addNavMenuItem(item, route.navMenuItem.sectionId);
-                }
-                if (route.path) {
-                    // Configure a list page
-                    registerRoute(route);
-                }
-            }
-        }
-        if (extension.actionBarItems) {
-            for (const item of extension.actionBarItems) {
-                registerDashboardActionBarItem(item);
-            }
-        }
-        if (extension.pageBlocks) {
-            for (const block of extension.pageBlocks) {
-                registerDashboardPageBlock(block);
-            }
-        }
-        if (extension.widgets) {
-            for (const widget of extension.widgets) {
-                registerDashboardWidget(widget);
-            }
-        }
-        if (extension.customFormComponents) {
-            for (const component of extension.customFormComponents) {
-                addCustomFormComponent(component);
-            }
-        }
-        if (extension.dataTables) {
-            for (const dataTable of extension.dataTables) {
-                if (dataTable.bulkActions?.length) {
-                    for (const action of dataTable.bulkActions) {
-                        addBulkAction(dataTable.pageId, dataTable.blockId, action);
-                    }
-                }
-                if (dataTable.extendListDocument) {
-                    const document =
-                        typeof dataTable.extendListDocument === 'function'
-                            ? dataTable.extendListDocument()
-                            : dataTable.extendListDocument;
+        // Register navigation extensions (nav sections and routes)
+        registerNavigationExtensions(extension.navSections, extension.routes);
 
-                    addListQueryDocument(
-                        dataTable.pageId,
-                        dataTable.blockId,
-                        typeof document === 'string' ? parse(document) : document,
-                    );
-                }
-            }
-        }
-        if (extension.detailForms) {
-            for (const detailForm of extension.detailForms) {
-                if (detailForm.extendDetailDocument) {
-                    const document =
-                        typeof detailForm.extendDetailDocument === 'function'
-                            ? detailForm.extendDetailDocument()
-                            : detailForm.extendDetailDocument;
+        // Register layout extensions (action bar items and page blocks)
+        registerLayoutExtensions(extension.actionBarItems, extension.pageBlocks);
 
-                    addDetailQueryDocument(
-                        detailForm.pageId,
-                        typeof document === 'string' ? parse(document) : document,
-                    );
-                }
-            }
-        }
+        // Register widget extensions
+        registerWidgetExtensions(extension.widgets);
+
+        // Register form component extensions (custom form components, input components, and display components)
+        registerFormComponentExtensions(extension.customFormComponents);
+
+        // Register data table extensions
+        registerDataTableExtensions(extension.dataTables);
+
+        // Register detail form extensions
+        registerDetailFormExtensions(extension.detailForms);
+
+        // Register alert extensions
+        registerAlertExtensions(extension.alerts);
+
+        // Execute extension source change callbacks
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
         if (callbacks.size) {
             for (const callback of callbacks) {

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

@@ -0,0 +1,69 @@
+import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
+import { DateTime } from '@/components/data-display/date-time.js';
+import { Money } from '@/components/data-display/money.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { DataDisplayComponent } from '../component-registry/component-registry.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('displayComponents', new Map<string, DataDisplayComponent>());
+
+// Create component function for asset display
+const AssetDisplay: DataDisplayComponent = ({ value }) => <VendureImage asset={value} preset="tiny" />;
+
+// Register built-in display components
+const displayComponents = globalRegistry.get('displayComponents');
+displayComponents.set('vendure:booleanCheckbox', BooleanDisplayCheckbox);
+displayComponents.set('vendure:booleanBadge', BooleanDisplayBadge);
+displayComponents.set('vendure:dateTime', DateTime);
+displayComponents.set('vendure:asset', AssetDisplay);
+displayComponents.set('vendure:money', Money);
+
+export function getDisplayComponent(id: string): DataDisplayComponent | undefined {
+    return globalRegistry.get('displayComponents').get(id);
+}
+
+/**
+ * @description
+ * Gets a display component using the targeting properties.
+ * Uses the same key pattern as registration: pageId_blockId_fieldName
+ */
+export function getTargetedDisplayComponent(
+    pageId: string,
+    blockId: string,
+    field: string,
+): DataDisplayComponent | undefined {
+    const key = generateDisplayComponentKey(pageId, blockId, field);
+    return globalRegistry.get('displayComponents').get(key);
+}
+
+/**
+ * @description
+ * Generates a display component key based on the targeting properties.
+ * Follows the existing pattern: pageId_blockId_fieldName
+ */
+export function generateDisplayComponentKey(pageId: string, blockId: string, field: string): string {
+    return `${pageId}_${blockId}_${field}`;
+}
+
+export function addDisplayComponent({
+    pageId,
+    blockId,
+    field,
+    component,
+}: {
+    pageId: string;
+    blockId: string;
+    field: string;
+    component: React.ComponentType<{ value: any; [key: string]: any }>;
+}) {
+    const displayComponents = globalRegistry.get('displayComponents');
+
+    // Generate the key using the helper function
+    const key = generateDisplayComponentKey(pageId, blockId, field);
+
+    if (displayComponents.has(key)) {
+        // eslint-disable-next-line no-console
+        console.warn(`Display component with key "${key}" is already registered and will be overwritten.`);
+    }
+    displayComponents.set(key, component);
+}

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -1,161 +1,18 @@
-import { PageContextValue } from '@/framework/layout-engine/page-provider.js';
-import { AnyRoute, RouteOptions } from '@tanstack/react-router';
-import { DocumentNode } from 'graphql';
-import { LucideIcon } from 'lucide-react';
-import type React from 'react';
+// Import all domain-specific types
+export * from './types/index.js';
 
-import { DashboardAlertDefinition } from '../alert/types.js';
-import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
-import { BulkAction } from '../data-table/data-table-types.js';
-import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
-import { NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
-
-/**
- * @description
- * Allows you to define custom form components for custom fields in the dashboard.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardCustomFormComponent {
-    id: string;
-    component: React.FunctionComponent<CustomFormComponentInputProps>;
-}
-
-export interface DashboardRouteDefinition {
-    component: (route: AnyRoute) => React.ReactNode;
-    path: string;
-    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
-    loader?: RouteOptions['loader'];
-}
-
-export interface ActionBarButtonState {
-    disabled: boolean;
-    visible: boolean;
-}
-
-export interface DashboardNavSectionDefinition {
-    id: string;
-    title: string;
-    icon?: LucideIcon;
-    order?: number;
-}
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * Allows you to define custom action bar items for any page in the dashboard.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export interface DashboardActionBarItem {
-    /**
-     * @description
-     * The ID of the page where the action bar item should be displayed.
-     */
-    pageId: string;
-    /**
-     * @description
-     * A React component that will be rendered in the action bar.
-     */
-    component: React.FunctionComponent<{ context: PageContextValue }>;
-    /**
-     * @description
-     * Any permissions that are required to display this action bar item.
-     */
-    requiresPermission?: string | string[];
-}
-
-export interface DashboardActionBarDropdownMenuItem {
-    locationId: string;
-    component: React.FunctionComponent<{ context: PageContextValue }>;
-    requiresPermission?: string | string[];
-}
-
-export type PageBlockPosition = { blockId: string; order: 'before' | 'after' | 'replace' };
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * The location of a page block in the dashboard. The location can be found by turning on
- * "developer mode" in the dashboard user menu (bottom left corner) and then
- * clicking the `< />` icon when hovering over a page block.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export type PageBlockLocation = {
-    pageId: string;
-    position: PageBlockPosition;
-    column: 'main' | 'side';
-};
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * This allows you to insert a custom component into a specific location
- * on any page in the dashboard.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export interface DashboardPageBlockDefinition {
-    id: string;
-    title?: React.ReactNode;
-    location: PageBlockLocation;
-    component: React.FunctionComponent<{ context: PageContextValue }>;
-    requiresPermission?: string | string[];
-}
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * This allows you to customize aspects of existing data tables in the dashboard.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardDataTableExtensionDefinition {
-    /**
-     * @description
-     * The ID of the page where the data table is located, e.g. `'product-list'`, `'order-list'`.
-     */
-    pageId: string;
-    /**
-     * @description
-     * The ID of the data table block. Defaults to `'list-table'`, which is the default blockId
-     * for the standard list pages. However, some other pages may use a different blockId,
-     * such as `'product-variants-table'` on the `'product-detail'` page.
-     */
-    blockId?: string;
-    /**
-     * @description
-     * An array of additional bulk actions that will be available on the data table.
-     */
-    bulkActions?: BulkAction[];
-    /**
-     * @description
-     * Allows you to extend the list document for the data table.
-     */
-    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);
-}
-
-export interface DashboardDetailFormExtensionDefinition {
-    /**
-     * @description
-     * The ID of the page where the detail form is located, e.g. `'product-detail'`, `'order-detail'`.
-     */
-    pageId: string;
-    /**
-     * @description
-     */
-    extendDetailDocument?: string | DocumentNode | (() => DocumentNode | string);
-}
+// Import types for the main interface
+import {
+    DashboardActionBarItem,
+    DashboardAlertDefinition,
+    DashboardCustomFormComponents,
+    DashboardDataTableExtensionDefinition,
+    DashboardDetailFormExtensionDefinition,
+    DashboardNavSectionDefinition,
+    DashboardPageBlockDefinition,
+    DashboardRouteDefinition,
+    DashboardWidgetDefinition,
+} from './types/index.js';
 
 /**
  * @description
@@ -189,7 +46,7 @@ export interface DashboardExtension {
     actionBarItems?: DashboardActionBarItem[];
     /**
      * @description
-     * Not yet implemented
+     * Allows you to define custom alerts that can be displayed in the dashboard.
      */
     alerts?: DashboardAlertDefinition[];
     /**
@@ -200,9 +57,10 @@ export interface DashboardExtension {
     widgets?: DashboardWidgetDefinition[];
     /**
      * @description
-     * Allows you to define custom form components for custom fields in the dashboard.
+     * Unified registration for custom form components including custom field components,
+     * input components, and display components.
      */
-    customFormComponents?: DashboardCustomFormComponent[];
+    customFormComponents?: DashboardCustomFormComponents;
     /**
      * @description
      * Allows you to customize aspects of existing data tables in the dashboard.

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

@@ -0,0 +1,69 @@
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
+import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
+import { MoneyInput } from '@/components/data-input/money-input.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Input } from '@/components/ui/input.js';
+import { DataInputComponent } from '../component-registry/component-registry.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('inputComponents', new Map<string, DataInputComponent>());
+
+// Create component functions for built-in components
+const TextInput: DataInputComponent = props => (
+    <Input {...props} onChange={e => props.onChange(e.target.value)} />
+);
+const NumberInput: DataInputComponent = props => (
+    <Input {...props} onChange={e => props.onChange(e.target.valueAsNumber)} type="number" />
+);
+const CheckboxInput: DataInputComponent = props => (
+    <Checkbox
+        {...props}
+        checked={props.value === 'true' || props.value === true}
+        onCheckedChange={value => props.onChange(value)}
+    />
+);
+
+// Register built-in input components
+const inputComponents = globalRegistry.get('inputComponents');
+inputComponents.set('vendure:moneyInput', MoneyInput);
+inputComponents.set('vendure:textInput', TextInput);
+inputComponents.set('vendure:numberInput', NumberInput);
+inputComponents.set('vendure:dateTimeInput', DateTimeInput);
+inputComponents.set('vendure:checkboxInput', CheckboxInput);
+inputComponents.set('vendure:facetValueInput', FacetValueInput);
+
+export function getInputComponent(id: string): DataInputComponent | undefined {
+    return globalRegistry.get('inputComponents').get(id);
+}
+
+/**
+ * @description
+ * Generates a component key based on the targeting properties.
+ * Follows the existing pattern: pageId_blockId_fieldName
+ */
+export function generateInputComponentKey(pageId: string, blockId: string, field: string): string {
+    return `${pageId}_${blockId}_${field}`;
+}
+
+export function addInputComponent({
+    pageId,
+    blockId,
+    field,
+    component,
+}: {
+    pageId: string;
+    blockId: string;
+    field: string;
+    component: React.ComponentType<{ value: any; onChange: (value: any) => void; [key: string]: any }>;
+}) {
+    const inputComponents = globalRegistry.get('inputComponents');
+
+    // Generate the key using the helper function
+    const key = generateInputComponentKey(pageId, blockId, field);
+
+    if (inputComponents.has(key)) {
+        // eslint-disable-next-line no-console
+        console.warn(`Input component with key "${key}" is already registered and will be overwritten.`);
+    }
+    inputComponents.set(key, component);
+}

package/src/lib/framework/extension-api/logic/alerts.ts

@@ -0,0 +1,10 @@
+import { globalRegistry } from '../../registry/global-registry.js';
+import { DashboardAlertDefinition } from '../types/alerts.js';
+
+export function registerAlertExtensions(alerts?: DashboardAlertDefinition[]) {
+    if (alerts) {
+        for (const alert of alerts) {
+            globalRegistry.get('dashboardAlertRegistry').set(alert.id, alert);
+        }
+    }
+}

package/src/lib/framework/extension-api/logic/data-table.ts

@@ -0,0 +1,60 @@
+import { parse } from 'graphql';
+
+import { addBulkAction, addListQueryDocument } from '../../data-table/data-table-extensions.js';
+import { addDisplayComponent } from '../display-component-extensions.js';
+import { DashboardDataTableExtensionDefinition } from '../types/index.js';
+
+/**
+ * @description
+ * Generates a data table display component key based on the pageId and column name.
+ * Uses the pattern: pageId_columnName
+ */
+export function generateDataTableDisplayComponentKey(pageId: string, column: string): string {
+    return `${pageId}_${column}`;
+}
+
+/**
+ * @description
+ * Adds a display component for a specific column in a data table.
+ */
+export function addDataTableDisplayComponent(
+    pageId: string,
+    column: string,
+    component: React.ComponentType<{ value: any; [key: string]: any }>,
+) {
+    const key = generateDataTableDisplayComponentKey(pageId, column);
+    addDisplayComponent({ pageId, blockId: 'list-table', field: column, component });
+}
+
+export function registerDataTableExtensions(dataTables?: DashboardDataTableExtensionDefinition[]) {
+    if (dataTables) {
+        for (const dataTable of dataTables) {
+            if (dataTable.bulkActions?.length) {
+                for (const action of dataTable.bulkActions) {
+                    addBulkAction(dataTable.pageId, dataTable.blockId, action);
+                }
+            }
+            if (dataTable.extendListDocument) {
+                const document =
+                    typeof dataTable.extendListDocument === 'function'
+                        ? dataTable.extendListDocument()
+                        : dataTable.extendListDocument;
+
+                addListQueryDocument(
+                    dataTable.pageId,
+                    dataTable.blockId,
+                    typeof document === 'string' ? parse(document) : document,
+                );
+            }
+            if (dataTable.displayComponents?.length) {
+                for (const displayComponent of dataTable.displayComponents) {
+                    addDataTableDisplayComponent(
+                        dataTable.pageId,
+                        displayComponent.column,
+                        displayComponent.component,
+                    );
+                }
+            }
+        }
+    }
+}