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

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

@@ -1,159 +0,0 @@
-import { Variables } from '@/vdb/graphql/api.js';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import {
-    DefinitionNode,
-    DocumentNode,
-    FieldNode,
-    FragmentDefinitionNode,
-    Kind,
-    OperationDefinitionNode,
-    parse,
-    SelectionNode,
-    SelectionSetNode,
-} from 'graphql';
-
-/**
- * Type-safe template string function for extending GraphQL documents
- */
-export function extendDocument<T extends TypedDocumentNode, V extends Variables = Variables>(
-    defaultDocument: T,
-    template: TemplateStringsArray,
-    ...values: any[]
-): T;
-export function extendDocument<T extends TypedDocumentNode, V extends Variables = Variables>(
-    defaultDocument: T,
-    sdl: string | DocumentNode,
-): T;
-export function extendDocument<T extends TypedDocumentNode, V extends Variables = Variables>(
-    defaultDocument: T,
-    template: TemplateStringsArray | string | DocumentNode,
-    ...values: any[]
-): T {
-    // Handle template strings, regular strings, and DocumentNode
-    let extensionDocument: DocumentNode;
-    if (Array.isArray(template)) {
-        // Template string array
-        const sdl = (template as TemplateStringsArray).reduce((result, str, i) => {
-            return result + str + String(values[i] ?? '');
-        }, '');
-        extensionDocument = parse(sdl);
-    } else if (typeof template === 'string') {
-        // Regular string
-        extensionDocument = parse(template);
-    } else {
-        // DocumentNode
-        extensionDocument = template as DocumentNode;
-    }
-
-    // Merge the documents
-    const mergedDocument = mergeDocuments(defaultDocument, extensionDocument);
-
-    return mergedDocument as T;
-}
-
-/**
- * Merges two GraphQL documents, adding fields from the extension to the base document
- */
-function mergeDocuments(baseDocument: DocumentNode, extensionDocument: DocumentNode): DocumentNode {
-    const baseClone = JSON.parse(JSON.stringify(baseDocument)) as DocumentNode;
-
-    // Get all operation definitions from both documents
-    const baseOperations = baseClone.definitions.filter(isOperationDefinition);
-    const extensionOperations = extensionDocument.definitions.filter(isOperationDefinition);
-
-    // Get all fragment definitions from both documents
-    const baseFragments = baseClone.definitions.filter(isFragmentDefinition);
-    const extensionFragments = extensionDocument.definitions.filter(isFragmentDefinition);
-
-    // Merge fragments first (extensions can reference them)
-    const mergedFragments = [...baseFragments, ...extensionFragments];
-
-    // For each operation in the extension, find the corresponding base operation and merge
-    for (const extensionOp of extensionOperations) {
-        // Get the top-level field name from the extension operation
-        const extensionField = extensionOp.selectionSet.selections[0] as FieldNode;
-        if (!extensionField) {
-            throw new Error('Extension query must have at least one top-level field');
-        }
-
-        // Find a base operation that has the same top-level field
-        const baseOp = baseOperations.find(op => {
-            const baseField = op.selectionSet.selections[0] as FieldNode;
-            return baseField && baseField.name.value === extensionField.name.value;
-        });
-
-        if (!baseOp) {
-            const validQueryFields = baseOperations
-                .map(op => {
-                    const field = op.selectionSet.selections[0] as FieldNode;
-                    return field ? field.name.value : 'unknown';
-                })
-                .join(', ');
-            throw new Error(
-                `The query extension must extend the '${validQueryFields}' query. ` +
-                    `Got '${extensionField.name.value}' instead.`,
-            );
-        }
-
-        // Merge the selection sets of the matching top-level fields
-        const baseFieldNode = baseOp.selectionSet.selections[0] as FieldNode;
-        if (baseFieldNode.selectionSet && extensionField.selectionSet) {
-            mergeSelectionSets(baseFieldNode.selectionSet, extensionField.selectionSet);
-        }
-    }
-
-    // Update the document with merged definitions
-    (baseClone as any).definitions = [...baseOperations, ...mergedFragments];
-
-    return baseClone;
-}
-
-/**
- * Merges two selection sets, adding fields from the extension to the base
- */
-function mergeSelectionSets(
-    baseSelectionSet: SelectionSetNode,
-    extensionSelectionSet: SelectionSetNode,
-): void {
-    const baseFields = baseSelectionSet.selections.filter(isFieldNode);
-    const extensionFields = extensionSelectionSet.selections.filter(isFieldNode);
-
-    for (const extensionField of extensionFields) {
-        const existingField = baseFields.find(field => field.name.value === extensionField.name.value);
-
-        if (existingField) {
-            // Field already exists, merge their selection sets if both have them
-            if (existingField.selectionSet && extensionField.selectionSet) {
-                mergeSelectionSets(existingField.selectionSet, extensionField.selectionSet);
-            } else if (extensionField.selectionSet && !existingField.selectionSet) {
-                // Extension has a selection set but base doesn't, add it
-                (existingField as any).selectionSet = extensionField.selectionSet;
-            }
-        } else {
-            // Field doesn't exist, add it
-            (baseSelectionSet as any).selections.push(extensionField);
-        }
-    }
-}
-
-/**
- * Type guards
- */
-function isOperationDefinition(value: DefinitionNode): value is OperationDefinitionNode {
-    return value.kind === Kind.OPERATION_DEFINITION;
-}
-
-function isFragmentDefinition(value: DefinitionNode): value is FragmentDefinitionNode {
-    return value.kind === Kind.FRAGMENT_DEFINITION;
-}
-
-function isFieldNode(value: SelectionNode): value is FieldNode {
-    return value.kind === Kind.FIELD;
-}
-
-/**
- * Utility function to create a template string tag for better DX
- */
-export function gqlExtend(strings: TemplateStringsArray, ...values: any[]) {
-    return (defaultDocument: DocumentNode) => extendDocument(defaultDocument, strings, ...values);
-}

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

@@ -1,69 +0,0 @@
-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);
-}

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

@@ -1,69 +0,0 @@
-import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { FacetValueInput } from '@/vdb/components/data-input/facet-value-input.js';
-import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Input } from '@/vdb/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

@@ -1,10 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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,
-                    );
-                }
-            }
-        }
-    }
-}

package/src/lib/framework/extension-api/logic/detail-forms.ts

@@ -1,48 +0,0 @@
-import { addDetailQueryDocument } from '@/vdb/framework/form-engine/custom-form-component-extensions.js';
-import { parse } from 'graphql';
-
-import { addDisplayComponent } from '../display-component-extensions.js';
-import { addInputComponent } from '../input-component-extensions.js';
-import { DashboardDetailFormExtensionDefinition } from '../types/detail-forms.js';
-
-export function registerDetailFormExtensions(detailForms?: DashboardDetailFormExtensionDefinition[]) {
-    if (detailForms) {
-        for (const detailForm of detailForms) {
-            if (detailForm.extendDetailDocument) {
-                const document =
-                    typeof detailForm.extendDetailDocument === 'function'
-                        ? detailForm.extendDetailDocument()
-                        : detailForm.extendDetailDocument;
-
-                addDetailQueryDocument(
-                    detailForm.pageId,
-                    typeof document === 'string' ? parse(document) : document,
-                );
-            }
-
-            // Register input components for this detail form
-            if (detailForm.inputs) {
-                for (const inputComponent of detailForm.inputs) {
-                    addInputComponent({
-                        pageId: detailForm.pageId,
-                        blockId: inputComponent.blockId,
-                        field: inputComponent.field,
-                        component: inputComponent.component,
-                    });
-                }
-            }
-
-            // Register display components for this detail form
-            if (detailForm.displays) {
-                for (const displayComponent of detailForm.displays) {
-                    addDisplayComponent({
-                        pageId: detailForm.pageId,
-                        blockId: displayComponent.blockId,
-                        field: displayComponent.field,
-                        component: displayComponent.component,
-                    });
-                }
-            }
-        }
-    }
-}

package/src/lib/framework/extension-api/logic/form-components.ts

@@ -1,13 +0,0 @@
-import { addCustomFormComponent } from '../../form-engine/custom-form-component-extensions.js';
-import { DashboardCustomFormComponents } from '../types/form-components.js';
-
-export function registerFormComponentExtensions(customFormComponents?: DashboardCustomFormComponents) {
-    if (customFormComponents) {
-        // Handle custom field components
-        if (customFormComponents.customFields) {
-            for (const component of customFormComponents.customFields) {
-                addCustomFormComponent(component);
-            }
-        }
-    }
-}

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

@@ -1,8 +0,0 @@
-// Re-export all domain-specific logic functions
-export * from './alerts.js';
-export * from './data-table.js';
-export * from './detail-forms.js';
-export * from './form-components.js';
-export * from './layout.js';
-export * from './navigation.js';
-export * from './widgets.js';

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

@@ -1,22 +0,0 @@
-import {
-    registerDashboardActionBarItem,
-    registerDashboardPageBlock,
-} from '../../layout-engine/layout-extensions.js';
-import { DashboardActionBarItem, DashboardPageBlockDefinition } from '../types/layout.js';
-
-export function registerLayoutExtensions(
-    actionBarItems?: DashboardActionBarItem[],
-    pageBlocks?: DashboardPageBlockDefinition[],
-) {
-    if (actionBarItems) {
-        for (const item of actionBarItems) {
-            registerDashboardActionBarItem(item);
-        }
-    }
-
-    if (pageBlocks) {
-        for (const block of pageBlocks) {
-            registerDashboardPageBlock(block);
-        }
-    }
-}

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

@@ -1,37 +0,0 @@
-import { addNavMenuItem, addNavMenuSection, NavMenuItem } from '../../nav-menu/nav-menu-extensions.js';
-import { registerRoute } from '../../page/page-api.js';
-import { DashboardNavSectionDefinition, DashboardRouteDefinition } from '../types/navigation.js';
-
-export function registerNavigationExtensions(
-    navSections?: DashboardNavSectionDefinition[],
-    routes?: DashboardRouteDefinition[],
-) {
-    if (navSections) {
-        for (const section of navSections) {
-            addNavMenuSection({
-                ...section,
-                placement: 'top',
-                order: section.order ?? 999,
-                items: [],
-            });
-        }
-    }
-
-    if (routes) {
-        for (const route of 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);
-            }
-        }
-    }
-}

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

@@ -1,10 +0,0 @@
-import { registerDashboardWidget } from '../../dashboard-widget/widget-extensions.js';
-import { DashboardWidgetDefinition } from '../types/index.js';
-
-export function registerWidgetExtensions(widgets?: DashboardWidgetDefinition[]) {
-    if (widgets) {
-        for (const widget of widgets) {
-            registerDashboardWidget(widget);
-        }
-    }
-}

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

@@ -1,54 +0,0 @@
-/**
- * @description
- * **Status: Developer Preview**
- *
- * Allows you to define custom alerts that can be displayed in the dashboard.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export interface DashboardAlertDefinition<TResponse = any> {
-    /**
-     * @description
-     * A unique identifier for the alert.
-     */
-    id: string;
-    /**
-     * @description
-     * The title of the alert. Can be a string or a function that returns a string based on the response data.
-     */
-    title: string | ((data: TResponse) => string);
-    /**
-     * @description
-     * The description of the alert. Can be a string or a function that returns a string based on the response data.
-     */
-    description?: string | ((data: TResponse) => string);
-    /**
-     * @description
-     * The severity level of the alert.
-     */
-    severity: 'info' | 'warning' | 'error';
-    /**
-     * @description
-     * A function that checks the condition and returns the response data.
-     */
-    check: () => Promise<TResponse> | TResponse;
-    /**
-     * @description
-     * The interval in milliseconds to recheck the condition.
-     */
-    recheckInterval?: number;
-    /**
-     * @description
-     * A function that determines whether the alert should be shown based on the response data.
-     */
-    shouldShow?: (data: TResponse) => boolean;
-    /**
-     * @description
-     * Optional actions that can be performed when the alert is shown.
-     */
-    actions?: Array<{
-        label: string;
-        onClick: (data: TResponse) => void;
-    }>;
-}

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

@@ -1,87 +0,0 @@
-import { Table } from '@tanstack/react-table';
-import { DocumentNode } from 'graphql';
-
-/**
- * @description
- * Allows you to define custom display components for specific columns in data tables.
- * The pageId is already defined in the data table extension, so only the column name is needed.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardDataTableDisplayComponent {
-    /**
-     * @description
-     * The name of the column where this display component should be used.
-     */
-    column: string;
-    /**
-     * @description
-     * The React component that will be rendered as the display.
-     * It should accept `value` and other standard display props.
-     */
-    component: React.ComponentType<{ value: any; [key: string]: any }>;
-}
-
-export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {
-    selection: Item[];
-    table: Table<Item>;
-};
-
-export type BulkActionComponent<Item extends { id: string } & Record<string, any>> = React.FunctionComponent<
-    BulkActionContext<Item>
->;
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * A bulk action is a component that will be rendered in the bulk actions dropdown.
- *
- * @docsCategory components
- * @docsPage DataTableBulkActions
- * @since 3.4.0
- */
-export type BulkAction = {
-    order?: number;
-    component: BulkActionComponent<any>;
-};
-
-/**
- * @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);
-    /**
-     * @description
-     * Custom display components for specific columns in the data table.
-     */
-    displayComponents?: DashboardDataTableDisplayComponent[];
-}