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

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

@@ -1,81 +0,0 @@
-import {
-    DataDisplayComponent,
-    DataInputComponent,
-} from '@/vdb/framework/component-registry/component-registry.js';
-import { DocumentNode } from 'graphql';
-
-/**
- * @description
- * Allows you to define custom input components for specific fields in detail forms.
- * The pageId is already defined in the detail form extension, so only the blockId and field are needed.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardDetailFormInputComponent {
-    /**
-     * @description
-     * The ID of the block where this input component should be used.
-     */
-    blockId: string;
-    /**
-     * @description
-     * The name of the field where this input component should be used.
-     */
-    field: string;
-    /**
-     * @description
-     * The React component that will be rendered as the input.
-     * It should accept `value`, `onChange`, and other standard input props.
-     */
-    component: DataInputComponent;
-}
-
-/**
- * @description
- * Allows you to define custom display components for specific fields in detail forms.
- * The pageId is already defined in the detail form extension, so only the blockId and field are needed.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardDetailFormDisplayComponent {
-    /**
-     * @description
-     * The ID of the block where this display component should be used.
-     */
-    blockId: string;
-    /**
-     * @description
-     * The name of the field where this display component should be used.
-     */
-    field: string;
-    /**
-     * @description
-     * The React component that will be rendered as the display.
-     * It should accept `value` and other standard display props.
-     */
-    component: DataDisplayComponent;
-}
-
-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);
-    /**
-     * @description
-     * Custom input components for specific fields in the detail form.
-     */
-    inputs?: DashboardDetailFormInputComponent[];
-    /**
-     * @description
-     * Custom display components for specific fields in the detail form.
-     */
-    displays?: DashboardDetailFormDisplayComponent[];
-}

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

@@ -1,32 +0,0 @@
-import type React from 'react';
-
-import { CustomFormComponentInputProps } from '../../form-engine/custom-form-component.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>;
-}
-
-/**
- * @description
- * Interface for registering custom field components in the dashboard.
- * For input and display components, use the co-located approach with detailForms.
- *
- * @docsCategory extensions
- * @since 3.4.0
- */
-export interface DashboardCustomFormComponents {
-    /**
-     * @description
-     * Custom form components for custom fields. These are used when rendering
-     * custom fields in forms.
-     */
-    customFields?: DashboardCustomFormComponent[];
-}

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

@@ -1,8 +0,0 @@
-// Re-export all domain-specific types
-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/types/layout.ts

@@ -1,78 +0,0 @@
-import type React from 'react';
-
-import { PageContextValue } from '../../layout-engine/page-provider.js';
-
-export interface ActionBarButtonState {
-    disabled: boolean;
-    visible: boolean;
-}
-
-/**
- * @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[];
-}

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

@@ -1,19 +0,0 @@
-import { AnyRoute, RouteOptions } from '@tanstack/react-router';
-import { LucideIcon } from 'lucide-react';
-import type React from 'react';
-
-import { NavMenuItem } from '../../nav-menu/nav-menu-extensions.js';
-
-export interface DashboardRouteDefinition {
-    component: (route: AnyRoute) => React.ReactNode;
-    path: string;
-    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
-    loader?: RouteOptions['loader'];
-}
-
-export interface DashboardNavSectionDefinition {
-    id: string;
-    title: string;
-    icon?: LucideIcon;
-    order?: number;
-}

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

@@ -1,97 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * Base props interface for dashboard widgets.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export type DashboardBaseWidgetProps = PropsWithChildren<{
-    id: string;
-    title?: string;
-    description?: string;
-    config?: Record<string, unknown>;
-    actions?: React.ReactNode;
-}>;
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * Represents an instance of a dashboard widget with its layout and configuration.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export type DashboardWidgetInstance = {
-    /**
-     * @description
-     * A unique identifier for the widget instance.
-     */
-    id: string;
-    /**
-     * @description
-     * The ID of the widget definition this instance is based on.
-     */
-    widgetId: string;
-    /**
-     * @description
-     * The layout configuration for the widget.
-     */
-    layout: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
-    /**
-     * @description
-     * Optional configuration data for the widget.
-     */
-    config?: Record<string, unknown>;
-};
-
-/**
- * @description
- * **Status: Developer Preview**
- *
- * Defines a dashboard widget that can be added to the dashboard.
- *
- * @docsCategory extensions
- * @since 3.3.0
- */
-export type DashboardWidgetDefinition = {
-    /**
-     * @description
-     * A unique identifier for the widget.
-     */
-    id: string;
-    /**
-     * @description
-     * The display name of the widget.
-     */
-    name: string;
-    /**
-     * @description
-     * The React component that renders the widget.
-     */
-    component: React.ComponentType<DashboardBaseWidgetProps>;
-    /**
-     * @description
-     * The default size and position of the widget.
-     */
-    defaultSize: { w: number; h: number; x?: number; y?: number };
-    /**
-     * @description
-     * The minimum size constraints for the widget.
-     */
-    minSize?: { w: number; h: number };
-    /**
-     * @description
-     * The maximum size constraints for the widget.
-     */
-    maxSize?: { w: number; h: number };
-};

package/src/lib/framework/form-engine/custom-form-component-extensions.ts

@@ -1,38 +0,0 @@
-import { DocumentNode } from 'graphql';
-
-import { DashboardCustomFormComponent } from '../extension-api/extension-api-types.js';
-import { globalRegistry } from '../registry/global-registry.js';
-
-import { CustomFormComponentInputProps } from './custom-form-component.js';
-
-globalRegistry.register(
-    'customFormComponents',
-    new Map<string, React.FunctionComponent<CustomFormComponentInputProps>>(),
-);
-
-globalRegistry.register('detailQueryDocumentRegistry', new Map<string, DocumentNode[]>());
-
-export function getCustomFormComponent(
-    id: string,
-): React.FunctionComponent<CustomFormComponentInputProps> | undefined {
-    return globalRegistry.get('customFormComponents').get(id);
-}
-
-export function addCustomFormComponent({ id, component }: DashboardCustomFormComponent) {
-    const customFormComponents = globalRegistry.get('customFormComponents');
-    if (customFormComponents.has(id)) {
-        // eslint-disable-next-line no-console
-        console.warn(`Custom form component with id "${id}" is already registered and will be overwritten.`);
-    }
-    customFormComponents.set(id, component);
-}
-
-export function getDetailQueryDocuments(pageId: string): DocumentNode[] {
-    return globalRegistry.get('detailQueryDocumentRegistry').get(pageId) || [];
-}
-
-export function addDetailQueryDocument(pageId: string, document: DocumentNode) {
-    const listQueryDocumentRegistry = globalRegistry.get('detailQueryDocumentRegistry');
-    const existingDocuments = listQueryDocumentRegistry.get(pageId) || [];
-    listQueryDocumentRegistry.set(pageId, [...existingDocuments, document]);
-}

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

@@ -1,33 +0,0 @@
-import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
-import {
-    ControllerFieldState,
-    ControllerRenderProps,
-    FieldPath,
-    FieldValues,
-    UseFormStateReturn,
-} from 'react-hook-form';
-import { getCustomFormComponent } from './custom-form-component-extensions.js';
-
-export interface CustomFormComponentProps {
-    fieldProps: CustomFormComponentInputProps;
-    fieldDef: Pick<CustomFieldConfig, 'ui' | 'type' | 'name'>;
-}
-
-export interface CustomFormComponentInputProps<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-    field: ControllerRenderProps<TFieldValues, TName>;
-    fieldState: ControllerFieldState;
-    formState: UseFormStateReturn<TFieldValues>;
-}
-
-export function CustomFormComponent({ fieldDef, fieldProps }: CustomFormComponentProps) {
-    const Component = getCustomFormComponent(fieldDef.ui?.component);
-
-    if (!Component) {
-        return null;
-    }
-
-    return <Component {...fieldProps} />;
-}

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

@@ -1,51 +0,0 @@
-import {
-    DataDisplayComponent,
-    DataInputComponent,
-    useComponentRegistry,
-} from '@/vdb/framework/component-registry/component-registry.js';
-import { generateInputComponentKey } from '@/vdb/framework/extension-api/input-component-extensions.js';
-import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
-
-export interface OverriddenFormComponent<
-    TFieldValues extends FieldValues = any,
-    TName extends FieldPath<TFieldValues> = any,
-> {
-    fieldName: string;
-    field: ControllerRenderProps<TFieldValues, TName>;
-    children?: React.ReactNode;
-}
-
-/**
- * @description
- * Based on the pageId and blockId of where this is placed, it will check whether any custom components
- * are registered and render them if so. Otherwise, it will render the children, which act as the
- * default if this location has not been overridden.
- *
- * ```tsx
- * <OverriddenFormComponent fieldName="myField" field={field}>
- *   <Input {...field} />
- * </OverriddenFormComponent>
- * ```
- */
-export function OverriddenFormComponent({ fieldName, field, children }: Readonly<OverriddenFormComponent>) {
-    const page = usePage();
-    const pageBlock = usePageBlock({ optional: true });
-    const componentRegistry = useComponentRegistry();
-    let DisplayComponent: DataDisplayComponent | undefined;
-    let InputComponent: DataInputComponent | undefined;
-    if (page.pageId && pageBlock?.blockId) {
-        const customInputComponentKey = generateInputComponentKey(page.pageId, pageBlock.blockId, fieldName);
-        DisplayComponent = componentRegistry.getDisplayComponent(customInputComponentKey);
-        InputComponent = componentRegistry.getInputComponent(customInputComponentKey);
-    }
-    if (DisplayComponent) {
-        return <DisplayComponent {...field} />;
-    }
-
-    if (InputComponent) {
-        return <InputComponent {...field} />;
-    }
-    return children ?? null;
-}

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

@@ -1,58 +0,0 @@
-import { FieldInfo } from '../document-introspection/get-document-structure.js';
-
-/**
- * Transforms relation fields in an entity, extracting IDs from relation objects.
- * This is primarily used for custom fields of type "ID".
- *
- * @param fields - Array of field information
- * @param entity - The entity to transform
- * @returns A new entity with transformed relation fields
- */
-export function transformRelationFields<E extends Record<string, any>>(fields: FieldInfo[], entity: E): E {
-    // Create a shallow copy to avoid mutating the original entity
-    const processedEntity = { ...entity };
-
-    // Skip processing if there are no custom fields
-    if (!entity.customFields || !processedEntity.customFields) {
-        return processedEntity;
-    }
-
-    // Find the customFields field info
-    const customFieldsInfo = fields.find(field => field.name === 'customFields' && field.typeInfo);
-    if (!customFieldsInfo?.typeInfo) {
-        return processedEntity;
-    }
-
-    // Process only ID type custom fields
-    const idTypeCustomFields = customFieldsInfo.typeInfo.filter(field => field.type === 'ID');
-
-    for (const customField of idTypeCustomFields) {
-        const relationField = customField.name;
-
-        if (customField.list) {
-            // For list fields, the accessor is the field name without the "Ids" suffix
-            const propertyAccessorKey = customField.name.replace(/Ids$/, '');
-            const relationValue = entity.customFields[propertyAccessorKey];
-
-            if (relationValue) {
-                const relationIdValue = relationValue.map((v: { id: string }) => v.id);
-                if (relationIdValue && relationIdValue.length > 0) {
-                    processedEntity.customFields[relationField] = relationIdValue;
-                }
-            }
-        } else {
-            // For single fields, the accessor is the field name without the "Id" suffix
-            const propertyAccessorKey = customField.name.replace(/Id$/, '');
-            const relationValue = entity.customFields[propertyAccessorKey];
-
-            if (relationValue) {
-                const relationIdValue = relationValue.id;
-                if (relationIdValue) {
-                    processedEntity.customFields[relationField] = relationIdValue;
-                }
-            }
-        }
-    }
-
-    return processedEntity;
-}

package/src/lib/framework/layout-engine/page-block-provider.tsx

@@ -1,6 +0,0 @@
-import { PageBlockProps } from '@/vdb/framework/layout-engine/page-layout.js';
-import { createContext } from 'react';
-
-export type PageBlockContextValue = Pick<PageBlockProps, 'blockId' | 'column' | 'title' | 'description'>;
-
-export const PageBlockContext = createContext<PageBlockContextValue | undefined>(undefined);

package/src/lib/graphql/common-operations.ts

@@ -1,18 +0,0 @@
-import { graphql } from './graphql.js';
-
-export const duplicateEntityDocument = graphql(`
-    mutation DuplicateEntity($input: DuplicateEntityInput!) {
-        duplicateEntity(input: $input) {
-            ... on DuplicateEntitySuccess {
-                newEntityId
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-            ... on DuplicateEntityError {
-                duplicationError
-            }
-        }
-    }
-`);

package/src/lib/hooks/use-extended-detail-query.ts

@@ -1,37 +0,0 @@
-import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
-import { useLingui } from '@/vdb/lib/trans.js';
-import { DocumentNode } from 'graphql';
-import { useEffect, useMemo, useRef } from 'react';
-import { toast } from 'sonner';
-
-/**
- * @description
- * Extends a detail page query document with any registered extensions provided by
- * the `extendDetailDocument` function for the given page.
- */
-export function useExtendedDetailQuery<T extends DocumentNode>(detailQuery: T, pageId?: string) {
-    const hasShownError = useRef(false);
-    const { i18n } = useLingui();
-
-    const extendedDetailQuery = useMemo(() => {
-        if (!pageId || !detailQuery) {
-            return detailQuery;
-        }
-        const result = extendDetailFormQuery(detailQuery, pageId);
-        if (result.errorMessage && !hasShownError.current) {
-            // Show a user-friendly toast notification
-            toast.error(i18n.t('Query extension error'), {
-                description:
-                    result.errorMessage + '. ' + i18n.t('The page will continue with the default query.'),
-            });
-        }
-        return result.extendedQuery;
-    }, [detailQuery, pageId]);
-
-    // Reset error flag when dependencies change
-    useEffect(() => {
-        hasShownError.current = false;
-    }, [detailQuery, pageId]);
-
-    return extendedDetailQuery;
-}

package/src/lib/hooks/use-extended-list-query.ts

@@ -1,73 +0,0 @@
-import { getListQueryDocuments } from '@/vdb/framework/data-table/data-table-extensions.js';
-import { extendDocument } from '@/vdb/framework/document-extension/extend-document.js';
-import { useLingui } from '@/vdb/lib/trans.js';
-import { DocumentNode } from 'graphql';
-import { useEffect, useMemo, useRef } from 'react';
-import { toast } from 'sonner';
-
-import { usePageBlock } from './use-page-block.js';
-import { usePage } from './use-page.js';
-
-export function useExtendedListQuery<T extends DocumentNode>(listQuery: T) {
-    const { pageId } = usePage();
-    const { blockId } = usePageBlock();
-    const { i18n } = useLingui();
-    const listQueryExtensions = pageId && blockId ? getListQueryDocuments(pageId, blockId) : [];
-    const hasShownError = useRef(false);
-
-    const extendedListQuery = useMemo(() => {
-        let result: T = listQuery;
-        let error: Error | null = null;
-
-        try {
-            result = listQueryExtensions.reduce(
-                (acc, extension) => extendDocument(acc, extension),
-                listQuery,
-            ) as T;
-        } catch (err) {
-            error = err instanceof Error ? err : new Error(String(err));
-            // Continue with the original query instead of the extended one
-            result = listQuery;
-        }
-
-        // Store error for useEffect to handle
-        if (error && !hasShownError.current) {
-            hasShownError.current = true;
-
-            // Provide a helpful error message based on the error type
-            let errorMessage = i18n.t('Failed to extend query document');
-            if (error.message.includes('Extension query must have at least one top-level field')) {
-                errorMessage = i18n.t('Query extension is invalid: must have at least one top-level field');
-            } else if (error.message.includes('The query extension must extend the')) {
-                errorMessage = i18n.t('Query extension mismatch: ') + error.message;
-            } else if (error.message.includes('Syntax Error')) {
-                errorMessage = i18n.t('Query extension contains invalid GraphQL syntax');
-            } else {
-                errorMessage = i18n.t('Query extension error: ') + error.message;
-            }
-
-            // Log the error and continue with the original query
-            // eslint-disable-next-line no-console
-            console.warn(`${errorMessage}. Continuing with original query.`, {
-                pageId,
-                blockId,
-                extensionsCount: listQueryExtensions.length,
-                error: error.message,
-            });
-
-            // Show a user-friendly toast notification
-            toast.error(i18n.t('Query extension error'), {
-                description: errorMessage + '. ' + i18n.t('The page will continue with the default query.'),
-            });
-        }
-
-        return result;
-    }, [listQuery, listQueryExtensions, pageId, blockId]);
-
-    // Reset error flag when dependencies change
-    useEffect(() => {
-        hasShownError.current = false;
-    }, [listQuery, listQueryExtensions, pageId, blockId]);
-
-    return extendedListQuery;
-}

package/src/lib/hooks/use-page-block.tsx

@@ -1,18 +0,0 @@
-import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
-import { useContext } from 'react';
-
-/**
- * @description
- * Returns the current PageBlock context, which means there must be
- * a PageBlock ancestor component higher in the tree.
- *
- * If `optional` is set to true, the hook will not throw if no PageBlock
- * exists higher in the tree, but will just return undefined.
- */
-export function usePageBlock({ optional }: { optional?: boolean } = {}) {
-    const pageBlock = useContext(PageBlockContext);
-    if (!pageBlock && !optional) {
-        throw new Error('PageBlockProvider not found');
-    }
-    return pageBlock;
-}

package/vite/tests/barrel-exports/my-plugin/index.ts

@@ -1 +0,0 @@
-export * from './src/my.plugin';

package/vite/tests/barrel-exports/my-plugin/src/my.plugin.ts

@@ -1,8 +0,0 @@
-import { PluginCommonModule, VendurePlugin } from '@vendure/core';
-
-@VendurePlugin({
-    imports: [PluginCommonModule],
-    providers: [],
-    dashboard: './dashboard/index.tsx',
-})
-export class MyPlugin {}

package/vite/tests/barrel-exports/package.json

@@ -1,6 +0,0 @@
-{
-    "type": "commonjs",
-    "name": "barrel-exports",
-    "version": "0.0.1", 
-    "main": "index.ts"
-}