@vendure/dashboard 3.3.8 → 3.4.0

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

@@ -7,6 +7,7 @@ import { DocumentNode } from 'graphql';
  * The pageId is already defined in the data table extension, so only the column name is needed.
  *
  * @docsCategory extensions
+ * @docsPage DataTable
  * @since 3.4.0
  */
 export interface DashboardDataTableDisplayComponent {
@@ -39,21 +40,29 @@ export type BulkActionComponent<Item extends { id: string } & Record<string, any
  * A bulk action is a component that will be rendered in the bulk actions dropdown.
  *
  * @docsCategory components
- * @docsPage DataTableBulkActions
+ * @docsPage DataTable
  * @since 3.4.0
  */
 export type BulkAction = {
+    /**
+     * @description
+     * Optional order number to control the position of this bulk action in the dropdown.
+     * A larger number will appear lower in the list.
+     */
     order?: number;
+    /**
+     * @description
+     * The React component that will be rendered as the bulk action item.
+     */
     component: BulkActionComponent<any>;
 };
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * This allows you to customize aspects of existing data tables in the dashboard.
  *
  * @docsCategory extensions
+ * @docsPage DataTable
  * @since 3.4.0
  */
 export interface DashboardDataTableExtensionDefinition {

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

@@ -10,6 +10,7 @@ import { DocumentNode } from 'graphql';
  * The pageId is already defined in the detail form extension, so only the blockId and field are needed.
  *
  * @docsCategory extensions
+ * @docsPage DetailForms
  * @since 3.4.0
  */
 export interface DashboardDetailFormInputComponent {
@@ -37,6 +38,7 @@ export interface DashboardDetailFormInputComponent {
  * The pageId is already defined in the detail form extension, so only the blockId and field are needed.
  *
  * @docsCategory extensions
+ * @docsPage DetailForms
  * @since 3.4.0
  */
 export interface DashboardDetailFormDisplayComponent {
@@ -58,6 +60,15 @@ export interface DashboardDetailFormDisplayComponent {
     component: DataDisplayComponent;
 }
 
+/**
+ * @description
+ * Allows you to extend existing detail forms (e.g. on the product detail or customer detail pages)
+ * with custom GraphQL queries, input components, and display components.
+ *
+ * @since 3.4.0
+ * @docsPage DetailForms
+ * @docsCategory extensions
+ */
 export interface DashboardDetailFormExtensionDefinition {
     /**
      * @description
@@ -66,6 +77,8 @@ export interface DashboardDetailFormExtensionDefinition {
     pageId: string;
     /**
      * @description
+     * Extends the GraphQL query used to fetch data for the detail page, allowing you to add additional
+     * fields that can be used by custom input or display components.
      */
     extendDetailDocument?: string | DocumentNode | (() => DocumentNode | string);
     /**

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

@@ -7,10 +7,20 @@ import { CustomFormComponentInputProps } from '../../form-engine/custom-form-com
  * Allows you to define custom form components for custom fields in the dashboard.
  *
  * @docsCategory extensions
+ * @docsPage FormComponents
  * @since 3.4.0
  */
 export interface DashboardCustomFormComponent {
+    /**
+     * @description
+     * A unique identifier for the custom form component. It is a good practice to namespace
+     * these IDs to avoid naming collisions, for example `"my-plugin.markdown-editor"`.
+     */
     id: string;
+    /**
+     * @description
+     * The React component that will be rendered as the custom form input.
+     */
     component: React.FunctionComponent<CustomFormComponentInputProps>;
 }
 
@@ -20,6 +30,7 @@ export interface DashboardCustomFormComponent {
  * For input and display components, use the co-located approach with detailForms.
  *
  * @docsCategory extensions
+ * @docsPage FormComponents
  * @since 3.4.0
  */
 export interface DashboardCustomFormComponents {

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

@@ -4,5 +4,6 @@ export * from './data-table.js';
 export * from './detail-forms.js';
 export * from './form-components.js';
 export * from './layout.js';
+export * from './login.js';
 export * from './navigation.js';
 export * from './widgets.js';

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

@@ -9,11 +9,10 @@ export interface ActionBarButtonState {
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * Allows you to define custom action bar items for any page in the dashboard.
  *
  * @docsCategory extensions
+ * @docsPage Layout
  * @since 3.3.0
  */
 export interface DashboardActionBarItem {
@@ -59,13 +58,12 @@ export type PageBlockPosition = { blockId: string; order: 'before' | 'after' | '
 
 /**
  * @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
+ * @docsPage Layout
  * @since 3.3.0
  */
 export type PageBlockLocation = {
@@ -76,12 +74,11 @@ export type PageBlockLocation = {
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * This allows you to insert a custom component into a specific location
  * on any page in the dashboard.
  *
  * @docsCategory extensions
+ * @docsPage Layout
  * @since 3.3.0
  */
 export interface DashboardPageBlockDefinition {

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

@@ -0,0 +1,96 @@
+import type React from 'react';
+
+/**
+ * @description
+ * Defines a custom logo component for the login page.
+ *
+ * @docsCategory extensions
+ * @docsPage Login
+ * @since 3.4.0
+ */
+export interface LoginLogoExtension {
+    /**
+     * @description
+     * A React component that will replace the default Vendure logo.
+     */
+    component: React.ComponentType;
+}
+
+/**
+ * @description
+ * Defines content to display before the login form.
+ *
+ * @docsCategory extensions
+ * @docsPage Login
+ * @since 3.4.0
+ */
+export interface LoginBeforeFormExtension {
+    /**
+     * @description
+     * A React component that will be rendered before the login form.
+     */
+    component: React.ComponentType;
+}
+
+/**
+ * @description
+ * Defines content to display after the login form.
+ *
+ * @docsCategory extensions
+ * @docsPage Login
+ * @since 3.4.0
+ */
+export interface LoginAfterFormExtension {
+    /**
+     * @description
+     * A React component that will be rendered after the login form.
+     */
+    component: React.ComponentType;
+}
+
+/**
+ * @description
+ * Defines a custom login image component that replaces the default image panel.
+ *
+ * @docsCategory extensions
+ * @docsPage Login
+ * @since 3.4.0
+ */
+export interface LoginImageExtension {
+    /**
+     * @description
+     * A React component that will replace the default login image panel.
+     */
+    component: React.ComponentType;
+}
+
+/**
+ * @description
+ * Defines all available login page extensions.
+ *
+ * @docsCategory extensions
+ * @docsPage Login
+ * @since 3.4.0
+ */
+export interface DashboardLoginExtensions {
+    /**
+     * @description
+     * Custom logo component to replace the default Vendure logo.
+     */
+    logo?: LoginLogoExtension;
+    /**
+     * @description
+     * Component to render before the login form.
+     */
+    beforeForm?: LoginBeforeFormExtension;
+    /**
+     * @description
+     * Component to render after the login form.
+     */
+    afterForm?: LoginAfterFormExtension;
+    /**
+     * @description
+     * Custom login image component to replace the default image panel.
+     */
+    loginImage?: LoginImageExtension;
+}

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

@@ -4,16 +4,73 @@ import type React from 'react';
 
 import { NavMenuItem } from '../../nav-menu/nav-menu-extensions.js';
 
+/**
+ * @description
+ * Defines a custom route for the dashboard with optional navigation menu integration.
+ *
+ * @docsCategory extensions
+ * @docsPage Navigation
+ * @since 3.4.0
+ */
 export interface DashboardRouteDefinition {
+    /**
+     * @description
+     * The React component that will be rendered for this route.
+     */
     component: (route: AnyRoute) => React.ReactNode;
+    /**
+     * @description
+     * The URL path for this route, e.g. '/my-custom-page'.
+     */
     path: string;
+    /**
+     * @description
+     * Optional navigation menu item configuration to add this route to the nav menu
+     * on the left side of the dashboard.
+     */
     navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
+    /**
+     * @description
+     * Optional loader function to fetch data before the route renders.
+     * The value is a Tanstack Router
+     * [loader function](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#route-loaders)
+     */
     loader?: RouteOptions['loader'];
 }
 
+/**
+ * @description
+ * Defines a custom navigation section in the dashboard sidebar.
+ *
+ * @docsCategory extensions
+ * @docsPage Navigation
+ * @since 3.4.0
+ */
 export interface DashboardNavSectionDefinition {
+    /**
+     * @description
+     * A unique identifier for the navigation section.
+     */
     id: string;
+    /**
+     * @description
+     * The display title for the navigation section.
+     */
     title: string;
+    /**
+     * @description
+     * Optional icon to display next to the section title. The icons should
+     * be imported from `'lucide-react'`.
+     *
+     * @example
+     * ```ts
+     * import { PlusIcon } from 'lucide-react';
+     * ```
+     */
     icon?: LucideIcon;
+    /**
+     * @description
+     * Optional order number to control the position of this section in the sidebar.
+     */
     order?: number;
 }

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

@@ -2,8 +2,6 @@ import React, { PropsWithChildren } from 'react';
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * Base props interface for dashboard widgets.
  *
  * @docsCategory extensions
@@ -19,8 +17,6 @@ export type DashboardBaseWidgetProps = PropsWithChildren<{
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * Represents an instance of a dashboard widget with its layout and configuration.
  *
  * @docsCategory extensions

package/src/lib/framework/extension-api/use-login-extensions.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+import { globalRegistry } from '../registry/global-registry.js';
+
+import { onExtensionSourceChange } from './define-dashboard-extension.js';
+import { DashboardLoginExtensions } from './types/login.js';
+
+export function useLoginExtensions(): DashboardLoginExtensions {
+    const [extensions, setExtensions] = useState<DashboardLoginExtensions>(() => {
+        return globalRegistry.get('loginExtensions') || {};
+    });
+
+    useEffect(() => {
+        const updateExtensions = () => {
+            setExtensions(globalRegistry.get('loginExtensions') || {});
+        };
+
+        // Subscribe to extension changes
+        onExtensionSourceChange(updateExtensions);
+
+        // Update immediately in case extensions were registered before this hook was called
+        updateExtensions();
+    }, []);
+
+    return extensions;
+}

package/src/lib/framework/layout-engine/dev-mode-button.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { CodeXmlIcon } from 'lucide-react';
+import { forwardRef } from 'react';
+
+export const DevModeButton = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+    (props, ref) => {
+        const { className, ...rest } = props;
+        return (
+            <Button
+                ref={ref}
+                variant="secondary"
+                size="icon"
+                className={cn(
+                    'h-8 w-8 rounded-full bg-dev-mode/20 hover:bg-dev-mode/30 border border-dev-mode/20 shadow-sm',
+                    className,
+                )}
+                {...rest}
+            >
+                <CodeXmlIcon className="text-dev-mode w-4 h-4" />
+            </Button>
+        );
+    },
+);

package/src/lib/framework/layout-engine/location-wrapper.tsx

@@ -1,12 +1,11 @@
 import { CopyableText } from '@/vdb/components/shared/copyable-text.js';
-import { Button } from '@/vdb/components/ui/button.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { cn } from '@/vdb/lib/utils.js';
-import { CodeXmlIcon } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
+import { DevModeButton } from './dev-mode-button.js';
 
 // Singleton state for hover tracking
 let globalHoveredId: string | null = null;
@@ -74,10 +73,10 @@ export function LocationWrapper({ children, identifier }: Readonly<LocationWrapp
         return (
             <div
                 className={cn(
-                    `ring-2 transition-all delay-50 relative`,
+                    `ring-2 transition-all ring-offset-4 ring-offset-background delay-50 relative`,
                     isHovered || isPopoverOpen ? 'ring-dev-mode' : 'ring-transparent',
-                    isPageWrapper ? 'ring-inset' : '',
-                    identifier ? 'rounded-md' : 'rounded-xl',
+                    isPageWrapper ? 'ring-offset-8' : '',
+                    identifier ? 'rounded-md' : 'rounded',
                 )}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
@@ -87,13 +86,7 @@ export function LocationWrapper({ children, identifier }: Readonly<LocationWrapp
                 >
                     <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                         <PopoverTrigger asChild>
-                            <Button
-                                variant="secondary"
-                                size="icon"
-                                className="h-8 w-8 rounded-full bg-dev-mode/10 hover:bg-dev-mode/20 border border-dev-mode/20 shadow-sm"
-                            >
-                                <CodeXmlIcon className="text-dev-mode w-4 h-4" />
-                            </Button>
+                            <DevModeButton />
                         </PopoverTrigger>
                         <PopoverContent className="w-48 p-3">
                             <div className="space-y-2">

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

@@ -36,6 +36,10 @@ class GlobalRegistry {
         const oldValue = this.get(key);
         this.registry.set(key, updater(oldValue));
     }
+
+    public has(key: string): boolean {
+        return this.registry.has(key);
+    }
 }
 
 export type GlobalRegistryKey = keyof GlobalRegistryContents;

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

@@ -1,6 +1,7 @@
 import {
     BulkAction,
     DashboardActionBarItem,
+    DashboardLoginExtensions,
     DashboardPageBlockDefinition,
     DashboardWidgetDefinition,
 } from '@/vdb/framework/extension-api/types/index.js';
@@ -26,4 +27,5 @@ export interface GlobalRegistryContents {
     bulkActionsRegistry: Map<string, BulkAction[]>;
     listQueryDocumentRegistry: Map<string, DocumentNode[]>;
     detailQueryDocumentRegistry: Map<string, DocumentNode[]>;
+    loginExtensions: DashboardLoginExtensions;
 }

package/src/lib/graphql/api.ts

@@ -3,7 +3,10 @@ import { AwesomeGraphQLClient } from 'awesome-graphql-client';
 import { DocumentNode, print } from 'graphql';
 import { uiConfig } from 'virtual:vendure-ui-config';
 
-const API_URL = uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '') + '/admin-api';
+const API_URL =
+    uiConfig.api.host +
+    (uiConfig.api.port !== 'auto' ? `:${uiConfig.api.port}` : '') +
+    `/${uiConfig.api.adminApiPath}`;
 
 export type Variables = object;
 export type RequestDocument = string | DocumentNode;
@@ -16,10 +19,29 @@ const awesomeClient = new AwesomeGraphQLClient({
         const headers = new Headers(options.headers);
 
         if (channelToken) {
-            headers.set('vendure-token', channelToken);
+            headers.set(uiConfig.api.channelTokenKey, channelToken);
         }
 
-        return fetch(url, {
+        // Get the content language from user settings and add as query parameter
+        let finalUrl = url;
+        try {
+            const userSettings = localStorage.getItem('vendure-user-settings');
+            if (userSettings) {
+                const settings = JSON.parse(userSettings);
+                const contentLanguage = settings.contentLanguage;
+
+                if (contentLanguage) {
+                    const urlObj = new URL(finalUrl);
+                    urlObj.searchParams.set('languageCode', contentLanguage);
+                    finalUrl = urlObj.toString();
+                }
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.warn('Failed to read content language from user settings:', error);
+        }
+
+        return fetch(finalUrl, {
             ...options,
             headers,
             credentials: 'include',