@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

package/src/lib/components/ui/toggle-group.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Bold, Italic, Underline } from 'lucide-react';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group.js';
+
+const meta = {
+    title: 'UI/Toggle Group',
+    component: ToggleGroup,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <ToggleGroup type="multiple">
+            <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Toggle underline">
+                <Underline className="h-4 w-4" />
+            </ToggleGroupItem>
+        </ToggleGroup>
+    ),
+};

package/src/lib/components/ui/toggle.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Bold } from 'lucide-react';
+import { Toggle } from './toggle.js';
+
+const meta = {
+    title: 'UI/Toggle',
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'outline'],
+            description: 'Toggle variant',
+        },
+        size: {
+            control: 'select',
+            options: ['default', 'sm', 'lg'],
+            description: 'Toggle size',
+        },
+    },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        variant: 'default',
+        size: 'default',
+    },
+    render: args => (
+        <Toggle {...args}>
+            <Bold className="h-4 w-4" />
+        </Toggle>
+    ),
+};

package/src/lib/components/ui/tooltip.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+
+const meta = {
+    title: 'UI/Tooltip',
+    component: Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button>Hover me</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>This is a tooltip</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    ),
+};

package/src/lib/components/ui/tooltip.tsx

@@ -36,13 +36,13 @@ function TooltipContent({
                 data-slot="tooltip-content"
                 sideOffset={sideOffset}
                 className={cn(
-                    'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs',
+                    'bg-secondary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs',
                     className,
                 )}
                 {...props}
             >
                 {children}
-                <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+                <TooltipPrimitive.Arrow className="bg-secondary fill-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
             </TooltipPrimitive.Content>
         </TooltipPrimitive.Portal>
     );

package/src/lib/framework/alert/alert-extensions.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
@@ -18,13 +17,3 @@ export function getAlertRegistry() {
 export function getAlert(id: string) {
     return getAlertRegistry().get(id);
 }
-
-export function useAlerts() {
-    const [alerts, setAlerts] = useState<DashboardAlertDefinition[]>([]);
-
-    useEffect(() => {
-        setAlerts(Array.from(getAlertRegistry().values()));
-    }, []);
-
-    return { alerts };
-}

package/src/lib/framework/alert/alert-item.tsx

@@ -1,44 +1,39 @@
 import { Button } from '@/vdb/components/ui/button.js';
+import { Alert } from '@/vdb/hooks/use-alerts.js';
 import { cn } from '@/vdb/lib/utils.js';
-import { useQuery } from '@tanstack/react-query';
 import { ComponentProps } from 'react';
 
-import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
-
 interface AlertItemProps extends ComponentProps<'div'> {
-    alert: DashboardAlertDefinition;
+    alert: Alert;
 }
 
 export function AlertItem({ alert, className, ...props }: Readonly<AlertItemProps>) {
-    const { data } = useQuery({
-        queryKey: ['alert', alert.id],
-        queryFn: () => alert.check(),
-        refetchInterval: alert.recheckInterval,
-    });
-
-    const isAlertActive = alert.shouldShow?.(data);
-
-    if (!isAlertActive) {
+    if (!alert.active) {
         return null;
     }
+    const { definition: def } = alert;
 
     return (
         <div className={cn('flex items-center justify-between gap-1', className)} {...props}>
             <div className="flex flex-col">
-                <span className="font-semibold">
-                    {typeof alert.title === 'string' ? alert.title : alert.title(data)}
+                <span className="text-sm">
+                    {typeof def.title === 'string' ? def.title : def.title(alert.lastData)}
                 </span>
-                <span className="text-sm text-muted-foreground">
-                    {typeof alert.description === 'string' ? alert.description : alert.description?.(data)}
+                <span className="text-xs text-muted-foreground">
+                    {typeof def.description === 'string'
+                        ? def.description
+                        : def.description?.(alert.lastData)}
                 </span>
             </div>
             <div className="flex items-center gap-1">
-                {alert.actions?.map(action => (
+                {def.actions?.map(action => (
                     <Button
                         key={action.label}
                         variant="secondary"
                         size="sm"
-                        onClick={() => action.onClick(data)}
+                        onClick={async () => {
+                            await action.onClick({ data: alert.lastData, dismiss: () => alert.dismiss() });
+                        }}
                     >
                         {action.label}
                     </Button>

package/src/lib/framework/alert/alerts-indicator.tsx

@@ -1,23 +1,22 @@
-import { useQueries } from '@tanstack/react-query';
-import { useAlerts } from './alert-extensions.js';
+import { useAlerts } from '@/vdb/hooks/use-alerts.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 export function AlertsIndicator() {
-    const { alerts } = useAlerts();
+    const { activeCount, highestSeverity } = useAlerts();
 
-    const alertsCount = useQueries({
-        queries: alerts.map(alert => ({
-            queryKey: ['alert', alert.id],
-            queryFn: () => alert.check(),
-        })),
-        combine: results => {
-            return results.filter((result, idx) => result.data && alerts[idx].shouldShow?.(result.data))
-                .length;
-        },
-    });
+    if (activeCount === 0) {
+        return null;
+    }
 
     return (
-        <div className="absolute -right-1 -top-1 rounded-full bg-red-500 text-xs w-4 h-4 flex items-center justify-center">
-            {alertsCount}
+        <div
+            className={cn(
+                `absolute -right-1 -top-1 rounded-full bg-primary text-xs w-4 h-4 flex items-center justify-center`,
+                highestSeverity === 'error' && 'bg-destructive',
+                highestSeverity === 'warning' && 'bg-yellow-400 dark:bg-yellow-600',
+            )}
+        >
+            {activeCount}
         </div>
     );
 }

package/src/lib/framework/alert/search-index-buffer-alert/search-index-buffer-alert.ts

@@ -0,0 +1,41 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { toast } from 'sonner';
+
+import { DashboardAlertDefinition } from '../../extension-api/types/index.js';
+
+const pendingSearchIndexUpdatesDocument = graphql(`
+    query GetPendingSearchIndexUpdates {
+        pendingSearchIndexUpdates
+    }
+`);
+
+export const runPendingSearchIndexUpdatesDocument = graphql(`
+    mutation RunPendingSearchIndexUpdates {
+        runPendingSearchIndexUpdates {
+            success
+        }
+    }
+`);
+
+export const searchIndexBufferAlert: DashboardAlertDefinition<number> = {
+    id: 'search-index-buffer-alert',
+    check: async () => {
+        const data = await api.query(pendingSearchIndexUpdatesDocument);
+        return data.pendingSearchIndexUpdates;
+    },
+    shouldShow: data => data > 0,
+    title: data => /* i18n*/ `${data} pending search index updates`,
+    severity: data => (data < 10 ? 'info' : 'warning'),
+    actions: [
+        {
+            label: /* i18n*/ `Run pending updates`,
+            onClick: async ({ dismiss }) => {
+                await api.mutate(runPendingSearchIndexUpdatesDocument, {});
+                toast.success(/* i18n*/ 'Running pending search index updates');
+                dismiss();
+            },
+        },
+    ],
+    recheckInterval: 60_000,
+};

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

@@ -1,24 +1,13 @@
-import {
-    DashboardFormComponent,
-    DashboardFormComponentProps,
-} from '@/vdb/framework/form-engine/form-engine-types.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import * as React from 'react';
 import { getDisplayComponent } from '../extension-api/display-component-extensions.js';
 import { getInputComponent } from '../extension-api/input-component-extensions.js';
 
-export interface ComponentRegistryEntry<Props extends Record<string, any>> {
-    component: React.ComponentType<Props>;
-}
-
-// Display component interface (unchanged)
-export interface DataDisplayComponentProps {
+export type DataDisplayComponentProps<T extends Record<string, any> = Record<string, any>> = {
     value: any;
-
-    [key: string]: any;
-}
+} & T;
 
 export type DataDisplayComponent = React.ComponentType<DataDisplayComponentProps>;
-export type { DashboardFormComponentProps as DataInputComponentProps };
 
 // Component registry hook that uses the global registry
 export function useComponentRegistry() {

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,8 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
-import { Trans } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
 type WidgetDimensions = {
@@ -21,14 +20,24 @@ export const useWidgetDimensions = () => {
     return context;
 };
 
+/**
+ * @description
+ * A wrapper component that should be used for any custom Insights page widgets.
+ * This ensures that your custom widget has all the basic functionality needed to be
+ * correctly rendered on the Insights page.
+ *
+ * @docsCategory extensions-api
+ * @docsPage widgets
+ * @since 3.3.0
+ */
 export function DashboardBaseWidget({
-                                        id,
-                                        config,
-                                        children,
-                                        title,
-                                        description,
-                                        actions,
-                                    }: DashboardBaseWidgetProps) {
+    id,
+    config,
+    children,
+    title,
+    description,
+    actions,
+}: DashboardBaseWidgetProps) {
     const headerRef = useRef<HTMLDivElement>(null);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);

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

@@ -5,7 +5,6 @@ import {
     OrderStateCell,
 } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
@@ -39,7 +38,6 @@ export function LatestOrdersWidget() {
             },
         },
     ]);
-    const { formatCurrency } = useLocalFormat();
 
     // Update filters when date range changes
     useEffect(() => {

package/src/lib/framework/dashboard-widget/widget-filters-context.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useLingui } from '@lingui/react/macro';
-import { createContext, useContext, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
 export interface DefinedDateRange {
     from: Date;
@@ -14,17 +14,18 @@ export interface WidgetFilters {
 
 const WidgetFiltersContext = createContext<WidgetFilters | undefined>(undefined);
 
-export function WidgetFiltersProvider({
-    children,
-    filters
-}: PropsWithChildren<{ filters: WidgetFilters }>) {
-    return (
-        <WidgetFiltersContext.Provider value={filters}>
-            {children}
-        </WidgetFiltersContext.Provider>
-    );
+export function WidgetFiltersProvider({ children, filters }: PropsWithChildren<{ filters: WidgetFilters }>) {
+    return <WidgetFiltersContext.Provider value={filters}>{children}</WidgetFiltersContext.Provider>;
 }
 
+/**
+ * @description
+ * Exposes a context object for use in building Insights page widgets.
+ *
+ * @docsCategory hooks
+ * @docsPage useWidgetFilters
+ * @since 3.5.0
+ */
 export function useWidgetFilters() {
     const { t } = useLingui();
     const context = useContext(WidgetFiltersContext);
@@ -32,4 +33,4 @@ export function useWidgetFilters() {
         throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
     }
     return context;
-}
+}

package/src/lib/framework/defaults.ts

@@ -1,13 +1,7 @@
+import { registerAlert } from '@/vdb/framework/alert/alert-extensions.js';
+import { searchIndexBufferAlert } from '@/vdb/framework/alert/search-index-buffer-alert/search-index-buffer-alert.js';
 import { setNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
-import {
-    LayoutDashboardIcon,
-    Mail,
-    Settings2,
-    ShoppingCart,
-    SquareTerminal,
-    Terminal,
-    Users,
-} from 'lucide-react';
+import { ChartLine, Percent, Settings2, ShoppingBag, Tags, Terminal, Users } from 'lucide-react';
 
 import { LatestOrdersWidget } from './dashboard-widget/latest-orders-widget/index.js';
 import { MetricsWidget } from './dashboard-widget/metrics-widget/index.js';
@@ -21,14 +15,14 @@ export function registerDefaults() {
                 id: 'insights',
                 title: /* i18n*/ 'Insights',
                 placement: 'top',
-                icon: LayoutDashboardIcon,
+                icon: ChartLine,
                 url: '/',
                 order: 100,
             },
             {
                 id: 'catalog',
                 title: /* i18n*/ 'Catalog',
-                icon: SquareTerminal,
+                icon: Tags,
                 placement: 'top',
                 order: 200,
                 items: [
@@ -72,7 +66,7 @@ export function registerDefaults() {
             {
                 id: 'sales',
                 title: /* i18n*/ 'Sales',
-                icon: ShoppingCart,
+                icon: ShoppingBag,
                 placement: 'top',
                 order: 300,
                 items: [
@@ -111,7 +105,7 @@ export function registerDefaults() {
             {
                 id: 'marketing',
                 title: /* i18n*/ 'Marketing',
-                icon: Mail,
+                icon: Percent,
                 placement: 'top',
                 order: 500,
                 items: [
@@ -271,4 +265,6 @@ export function registerDefaults() {
         component: OrdersSummaryWidget,
         defaultSize: { w: 6, h: 3, x: 6, y: 0 },
     });
+
+    registerAlert(searchIndexBufferAlert);
 }

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

@@ -15,6 +15,11 @@ import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('inputComponents', new Map<string, DashboardFormComponent>());
 
+const DefaultProductInput: DashboardFormComponent = props => (
+    <DefaultRelationInput {...props} entityType="ProductVariant" />
+);
+DefaultProductInput.metadata = { isListInput: 'dynamic' };
+
 // Register built-in input components
 const inputComponents = globalRegistry.get('inputComponents');
 inputComponents.set('facet-value-input', FacetValueInput);
@@ -28,7 +33,7 @@ inputComponents.set('textarea-form-input', TextareaInput);
 inputComponents.set('html-editor-form-input', RichTextInput);
 inputComponents.set('rich-text-form-input', RichTextInput);
 inputComponents.set('password-form-input', PasswordInput);
-inputComponents.set('product-selector-form-input', DefaultRelationInput);
+inputComponents.set('product-selector-form-input', DefaultProductInput);
 inputComponents.set('relation-form-input', DefaultRelationInput);
 inputComponents.set('select-form-input', SelectWithOptions);
 inputComponents.set('product-multi-form-input', ProductMultiInput);

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

@@ -1,10 +1,11 @@
-import { globalRegistry } from '../../registry/global-registry.js';
+import { registerAlert } from '@/vdb/framework/alert/alert-extensions.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);
+            registerAlert(alert);
         }
     }
 }

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

@@ -1,3 +1,5 @@
+export type AlertSeverity = 'info' | 'warning' | 'error';
+
 /**
  * @description
  * Allows you to define custom alerts that can be displayed in the dashboard.
@@ -26,7 +28,7 @@ export interface DashboardAlertDefinition<TResponse = any> {
      * @description
      * The severity level of the alert.
      */
-    severity: 'info' | 'warning' | 'error';
+    severity: AlertSeverity | ((data: TResponse) => AlertSeverity);
     /**
      * @description
      * A function that checks the condition and returns the response data.
@@ -34,20 +36,24 @@ export interface DashboardAlertDefinition<TResponse = any> {
     check: () => Promise<TResponse> | TResponse;
     /**
      * @description
-     * The interval in milliseconds to recheck the condition.
+     * A function that determines whether the alert should be rendered based on the response data.
      */
-    recheckInterval?: number;
+    shouldShow: (data: TResponse) => boolean;
     /**
      * @description
-     * A function that determines whether the alert should be shown based on the response data.
+     * The interval in milliseconds to recheck the condition.
      */
-    shouldShow?: (data: TResponse) => boolean;
+    recheckInterval?: number;
     /**
      * @description
      * Optional actions that can be performed when the alert is shown.
+     *
+     * The `onClick()` handler will receive the data returned by the `check` function,
+     * as well as a `dismiss()` function that can be used to immediately dismiss the
+     * current alert.
      */
     actions?: Array<{
         label: string;
-        onClick: (data: TResponse) => void;
+        onClick: (args: { data: TResponse; dismiss: () => void }) => void | Promise<any>;
     }>;
 }

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

@@ -1,5 +1,8 @@
+import { DataDisplayComponentProps } from '@/vdb/framework/component-registry/component-registry.js';
 import { Table } from '@tanstack/react-table';
+import { CellContext } from '@tanstack/table-core';
 import { DocumentNode } from 'graphql';
+import React from 'react';
 
 /**
  * @description
@@ -21,7 +24,7 @@ export interface DashboardDataTableDisplayComponent {
      * 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 }>;
+    component: React.ComponentType<DataDisplayComponentProps<CellContext<any, any>>>;
 }
 
 export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {
@@ -120,7 +123,7 @@ export type BulkAction = {
  * This allows you to customize aspects of existing data tables in the dashboard.
  *
  * @docsCategory extensions-api
- * @docsPage DataTable
+ * @docsPage DataTables
  * @since 3.4.0
  */
 export interface DashboardDataTableExtensionDefinition {

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

@@ -93,9 +93,49 @@ export type PageBlockLocation = {
  * @since 3.3.0
  */
 export interface DashboardPageBlockDefinition {
+    /**
+     * @description
+     * An ID for the page block. Should be unique at least
+     * to the page in which it appears.
+     */
     id: string;
+    /**
+     * @description
+     * An optional title for the page block
+     */
     title?: React.ReactNode;
+    /**
+     * @description
+     * The location of the page block. It specifies the pageId, and then the
+     * relative location compared to another existing block.
+     */
     location: PageBlockLocation;
-    component: React.FunctionComponent<{ context: PageContextValue }>;
+    /**
+     * @description
+     * The component to be rendered inside the page block.
+     */
+    component?: React.FunctionComponent<{ context: PageContextValue }>;
+    /**
+     * @description
+     * Control whether to render the page block depending on your custom
+     * logic.
+     *
+     * This can also be used to disable any built-in blocks you
+     * do not need to display.
+     *
+     * If you need to query aspects about the current context not immediately
+     * provided in the `PageContextValue`, you can also use hooks such as
+     * `useChannel` in this function.
+     *
+     * @since 3.5.0
+     */
+    shouldRender?: (context: PageContextValue) => boolean;
+    /**
+     * @description
+     * If provided, the logged-in user must have one or more of the specified
+     * permissions in order for the block to render.
+     *
+     * For more advanced control over rendering, use the `shouldRender` function.
+     */
     requiresPermission?: string | string[];
 }

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

@@ -48,22 +48,6 @@ export interface LoginAfterFormExtension {
     component: React.ComponentType;
 }
 
-/**
- * @description
- * Defines a custom login image component that replaces the default image panel.
- *
- * @docsCategory extensions-api
- * @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.
@@ -89,9 +73,4 @@ export interface DashboardLoginExtensions {
      * Component to render after the login form.
      */
     afterForm?: LoginAfterFormExtension;
-    /**
-     * @description
-     * Custom login image component to replace the default image panel.
-     */
-    loginImage?: LoginImageExtension;
 }