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

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/dashboard-widget/base-widget.tsx

@@ -1,8 +1,8 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { cn } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
-import { PropsWithChildren, useRef, useEffect, useState, createContext, useContext } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import type React from 'react';
+import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
 
 type WidgetDimensions = {
     width: number;

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -1,13 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
-import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
-import { DashboardBaseWidget } from '../base-widget.js';
-import { PaginatedListDataTable, addCustomFields, useLocalFormat } from '@/index.js';
-import { ColumnFiltersState } from '@tanstack/react-table';
-import { useState } from 'react';
-import { SortingState } from '@tanstack/react-table';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PaginatedListDataTable, useLocalFormat } from '@/vdb/index.js';
 import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { formatRelative } from 'date-fns';
-import { Button } from '@/components/ui/button.js';
+import { useState } from 'react';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
+
 export const WIDGET_ID = 'latest-orders-widget';
 
 export function LatestOrdersWidget() {

package/src/lib/framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const latestOrderItemFragment = graphql(`
     fragment LatestOrderItem on Order {

package/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -1,13 +1,12 @@
-import { api } from '@/graphql/api.js';
+import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
-import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
-import { DashboardBaseWidget, useWidgetDimensions } from '../base-widget.js';
-import { orderChartDataQuery } from './metrics-widget.graphql.js';
+import { DashboardBaseWidget } from '../base-widget.js';
 import { MetricsChart } from './chart.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { orderChartDataQuery } from './metrics-widget.graphql.js';
 
 enum DATA_TYPES {
     OrderCount = 'OrderCount',

package/src/lib/framework/dashboard-widget/metrics-widget/metrics-widget.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderChartDataQuery = graphql(`
     query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {

package/src/lib/framework/dashboard-widget/orders-summary/index.tsx

@@ -1,12 +1,12 @@
+import { AnimatedCurrency, AnimatedNumber } from '@/vdb/components/shared/animated-number.js';
+import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel, useLocalFormat } from '@/vdb/index.js';
 import { useQuery } from '@tanstack/react-query';
+import { endOfDay, endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns';
+import { useMemo, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
 import { orderSummaryQuery } from './order-summary-widget.graphql.js';
-import { api } from '@/graphql/api.js';
-import { useMemo, useState } from 'react';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { useChannel, useLocalFormat } from '@/index.js';
-import { startOfDay, endOfDay, subDays, subMonths, startOfMonth, endOfMonth } from 'date-fns';
-import { AnimatedCurrency, AnimatedNumber } from '@/components/shared/animated-number.js';
 
 const WIDGET_ID = 'orders-summary-widget';
 

package/src/lib/framework/dashboard-widget/orders-summary/order-summary-widget.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderSummaryQuery = graphql(`
     query GetOrderSummary($start: DateTime!, $end: DateTime!) {

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -1,4 +1,4 @@
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
+import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
 import { DocumentNode } from 'graphql';
 
 import { globalRegistry } from '../registry/global-registry.js';

package/src/lib/framework/defaults.ts

@@ -1,4 +1,4 @@
-import { setNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { setNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import {
     LayoutDashboardIcon,
     Mail,

package/src/lib/framework/document-extension/extend-detail-form-query.ts

@@ -1,5 +1,5 @@
-import { extendDocument } from '@/framework/document-extension/extend-document.js';
-import { getDetailQueryDocuments } from '@/framework/form-engine/custom-form-component-extensions.js';
+import { extendDocument } from '@/vdb/framework/document-extension/extend-document.js';
+import { getDetailQueryDocuments } from '@/vdb/framework/form-engine/custom-form-component-extensions.js';
 import { DocumentNode } from 'graphql';
 
 /**

package/src/lib/framework/document-extension/extend-document.spec.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { print } from 'graphql';
 import { describe, expect, it } from 'vitest';
 

package/src/lib/framework/document-extension/extend-document.ts

@@ -1,4 +1,4 @@
-import { Variables } from '@/graphql/api.js';
+import { Variables } from '@/vdb/graphql/api.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     DefinitionNode,

package/src/lib/framework/document-introspection/add-custom-fields.ts

@@ -1,9 +1,9 @@
-import { Variables } from '@/graphql/api.js';
+import { Variables } from '@/vdb/graphql/api.js';
 import {
     getServerConfigDocument,
     relationCustomFieldFragment,
     structCustomFieldFragment,
-} from '@/providers/server-config.js';
+} from '@/vdb/providers/server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
 import { ResultOf } from 'gql.tada';

package/src/lib/framework/document-introspection/hooks.ts

@@ -1,4 +1,7 @@
-import { FieldInfo, getListQueryFields } from '@/framework/document-introspection/get-document-structure.js';
+import {
+    FieldInfo,
+    getListQueryFields,
+} from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { DocumentNode } from 'graphql';
 import { useMemo } from 'react';
 

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 '@/vdb/components/data-display/boolean.js';
+import { DateTime } from '@/vdb/components/data-display/date-time.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { VendureImage } from '@/vdb/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);
+}