@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/index.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@/components/ui/button.js';
-import { DashboardWidgetInstance } from '@/framework/dashboard-widget/types.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
-} from '@/framework/dashboard-widget/widget-extensions.js';
+} from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
     FullWidthPageBlock,
     Page,
@@ -11,7 +11,7 @@ import {
     PageActionBarRight,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
@@ -168,8 +168,8 @@ function DashboardPage() {
     }, [layoutWidth, editMode, widgets]);
 
     return (
-        <Page pageId="dashboard">
-            <PageTitle>Dashboard</PageTitle>
+        <Page pageId="insights">
+            <PageTitle>Insights</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <Button variant="outline" onClick={() => setEditMode(prev => !prev)}>

package/src/app/routes/_authenticated.tsx

@@ -1,6 +1,6 @@
-import { AppLayout } from '@/components/layout/app-layout.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
-import { useAuth } from '@/hooks/use-auth.js';
+import { AppLayout } from '@/vdb/components/layout/app-layout.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/vdb/constants.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 
 export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
@@ -15,7 +15,7 @@ export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
         }
     },
     loader: () => ({
-        breadcrumb: 'Dashboard',
+        breadcrumb: 'Insights',
     }),
     component: AuthLayout,
 });

package/src/app/routes/login.tsx

@@ -1,5 +1,5 @@
-import { LoginForm } from '@/components/login/login-form.js';
-import { useAuth } from '@/hooks/use-auth.js';
+import { LoginForm } from '@/vdb/components/login/login-form.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
 import { z } from 'zod';
 

package/src/app/styles.css

@@ -1,9 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
+/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */
+
 /*
 * Important: This is not an actual import. We are pre-processing this CSS file
 * to inject the theme variables into the CSS. This import will be replaced
@@ -64,6 +66,7 @@
     * {
         @apply border-border outline-ring/50;
     }
+
     body {
         @apply bg-background text-foreground;
     }
@@ -87,7 +90,7 @@
     }
 
     .animate-rotate {
-        animation: rotate 0.5s linear;
+        animation: rotate 0.5s linear infinite;
     }
 }
 

package/src/lib/components/data-display/boolean.tsx

@@ -2,7 +2,7 @@ import { CheckIcon, XIcon } from 'lucide-react';
 import React from 'react';
 import { Badge } from '../ui/badge.js';
 
-export function BooleanDisplayCheckbox({ value }: { value: boolean }) {
+export function BooleanDisplayCheckbox({ value }: Readonly<{ value: boolean }>) {
     return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
 }
 

package/src/lib/components/data-display/date-time.tsx

@@ -1,13 +1,19 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 
-export function DateTime({ value }: { value: string | Date }) {
+export function DateTime({ value }: Readonly<{ value: string | Date }>) {
     const { formatDate } = useLocalFormat();
     let renderedDate: string;
+    let renderedTime: string;
     try {
         renderedDate = formatDate(value);
+        renderedTime = formatDate(value, { timeStyle: 'long' });
     } catch (e) {
         renderedDate = value.toString();
+        renderedTime = '';
         console.error(e);
     }
-    return renderedDate;
+    return <div className="flex flex-col">
+        <div className="text-sm">{renderedDate}</div>
+        <div className="text-xs text-muted-foreground">{renderedTime}</div>
+    </div>;
 }

package/src/lib/components/data-display/json.tsx

@@ -1,5 +1,5 @@
 import { JsonEditor } from 'json-edit-react';
 
-export function Json({ value }: { value: any }) {
+export function Json({ value }: Readonly<{ value: any }>) {
     return <JsonEditor data={value} />;
 }

package/src/lib/components/data-display/money.tsx

@@ -1,7 +1,7 @@
-import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 
 // Original component
-function MoneyInternal({ value, currency }: { value: number, currency: string }) {
+function MoneyInternal({ value, currency }: { value: number; currency: string }) {
     const { formatCurrency } = useLocalFormat();
     return formatCurrency(value, currency);
 }
@@ -12,4 +12,3 @@ export function Money(props: { value: any; [key: string]: any }) {
     const currency = rest.currency || 'USD'; // Default currency if none provided
     return MoneyInternal({ value, currency });
 }
-

package/src/lib/components/data-input/affixed-input.tsx

@@ -1,13 +1,12 @@
-import { cn } from '@/lib/utils.js';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { Input } from '../ui/input.js';
-import { ReactNode, useRef, useEffect, useState } from 'react';
 
 interface AffixedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
     prefix?: ReactNode;
     suffix?: ReactNode;
 }
 
-export function AffixedInput({ prefix, suffix, className = '', ...props }: AffixedInputProps) {
+export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
     const prefixRef = useRef<HTMLSpanElement>(null);
     const suffixRef = useRef<HTMLSpanElement>(null);
     const [prefixWidth, setPrefixWidth] = useState(0);
@@ -34,11 +33,7 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Affix
                     {prefix}
                 </span>
             )}
-            <Input
-                {...props}
-                className={className}
-                style={style}
-            />
+            <Input {...props} className={className} style={style} />
             {suffix && (
                 <span ref={suffixRef} className="absolute right-3 text-muted-foreground whitespace-nowrap">
                     {suffix}

package/src/lib/components/data-input/combination-mode-input.tsx

@@ -0,0 +1,52 @@
+import { DataInputComponent } from '@/vdb/framework/component-registry/component-registry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export const CombinationModeInput: DataInputComponent = ({ value, onChange, position, ...props }) => {
+    const booleanValue = value === 'true' || value === true;
+
+    // Only show for items after the first one
+    const selectable = position !== undefined && position > 0;
+
+    const setCombinationModeAnd = () => {
+        onChange(true);
+    };
+
+    const setCombinationModeOr = () => {
+        onChange(false);
+    };
+
+    if (!selectable) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-center -mt-4 -mb-4">
+            <div className="bg-muted border px-3 py-1.5 rounded-full flex gap-1.5 text-xs shadow-sm">
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeAnd}
+                    {...props}
+                >
+                    <Trans>AND</Trans>
+                </button>
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        !booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeOr}
+                    {...props}
+                >
+                    <Trans>OR</Trans>
+                </button>
+            </div>
+        </div>
+    );
+};

package/src/lib/components/data-input/configurable-operation-list-input.tsx

@@ -0,0 +1,433 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigArgType } from '@vendure/core';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+import { Switch } from '../ui/switch.js';
+import { Textarea } from '../ui/textarea.js';
+import { DateTimeInput } from './datetime-input.js';
+
+export interface EnhancedListInputProps {
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+
+/**
+ * A dynamic array input component for configurable operation arguments that handle lists of values.
+ *
+ * This component allows users to add, edit, and remove multiple items from an array-type argument.
+ * Each item in the array is rendered using the appropriate input control based on the argument's
+ * type and UI configuration (e.g., text input, select dropdown, boolean switch, date picker).
+ *
+ * The component supports:
+ * - Adding new items with appropriate input controls
+ * - Editing existing items inline
+ * - Removing items from the array
+ * - Various data types: string, number, boolean, datetime, currency
+ * - Multiple UI components: select, textarea, currency input, etc.
+ * - Keyboard shortcuts (Enter to add items)
+ * - Read-only mode for display purposes
+ *
+ * Used primarily in configurable operations (promotions, shipping methods, payment methods)
+ * where an argument accepts multiple values, such as a list of product IDs, category codes,
+ * or discount amounts.
+ *
+ * @example
+ * // For a promotion condition that accepts multiple product category codes
+ * <EnhancedListInput
+ *   definition={argDefinition}
+ *   value='["electronics", "books", "clothing"]'
+ *   onChange={handleChange}
+ * />
+ */
+export function ConfigurableOperationListInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<EnhancedListInputProps>) {
+    const [newItemValue, setNewItemValue] = useState('');
+
+    // Parse the current array value
+    const arrayValue = parseArrayValue(value);
+
+    const handleArrayChange = (newArray: string[]) => {
+        onChange(JSON.stringify(newArray));
+    };
+
+    const handleAddItem = () => {
+        if (newItemValue.trim()) {
+            const newArray = [...arrayValue, newItemValue.trim()];
+            handleArrayChange(newArray);
+            setNewItemValue('');
+        }
+    };
+
+    const handleRemoveItem = (index: number) => {
+        const newArray = arrayValue.filter((_, i) => i !== index);
+        handleArrayChange(newArray);
+    };
+
+    const handleUpdateItem = (index: number, newValue: string) => {
+        const newArray = arrayValue.map((item, i) => (i === index ? newValue : item));
+        handleArrayChange(newArray);
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleAddItem();
+        }
+    };
+
+    // Render individual item input based on the underlying type
+    const renderItemInput = (itemValue: string, index: number) => {
+        const argType = definition.type as ConfigArgType;
+        const uiComponent = (definition.ui as any)?.component;
+
+        const commonProps = {
+            value: itemValue,
+            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                handleUpdateItem(index, e.target.value),
+            disabled: readOnly,
+        };
+
+        switch (uiComponent) {
+            case 'boolean-form-input':
+                return (
+                    <Switch
+                        checked={itemValue === 'true'}
+                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'select-form-input': {
+                const options = (definition.ui as any)?.options || [];
+                return (
+                    <Select
+                        value={itemValue}
+                        onValueChange={val => handleUpdateItem(index, val)}
+                        disabled={readOnly}
+                    >
+                        <SelectTrigger>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {options.map((option: any) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                    {typeof option.label === 'string'
+                                        ? option.label
+                                        : option.label?.[0]?.value || option.value}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                );
+            }
+            case 'textarea-form-input':
+                return (
+                    <Textarea
+                        {...commonProps}
+                        placeholder="Enter text..."
+                        rows={2}
+                        className="bg-background"
+                    />
+                );
+
+            case 'date-form-input':
+                return (
+                    <DateTimeInput
+                        value={itemValue ? new Date(itemValue) : new Date()}
+                        onChange={val => handleUpdateItem(index, val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'number-form-input': {
+                const ui = definition.ui as any;
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={itemValue}
+                        onChange={e => handleUpdateItem(index, e.target.value)}
+                        disabled={readOnly}
+                        min={ui?.min}
+                        max={ui?.max}
+                        step={ui?.step || (isFloat ? 0.01 : 1)}
+                    />
+                );
+            }
+            case 'currency-form-input':
+                return (
+                    <div className="flex items-center">
+                        <span className="mr-2 text-sm text-muted-foreground">$</span>
+                        <Input
+                            type="number"
+                            value={itemValue}
+                            onChange={e => handleUpdateItem(index, e.target.value)}
+                            disabled={readOnly}
+                            min={0}
+                            step={1}
+                            className="flex-1"
+                        />
+                    </div>
+                );
+        }
+
+        // Fall back to type-based rendering
+        switch (argType) {
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={itemValue === 'true'}
+                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'int':
+            case 'float': {
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={itemValue}
+                        onChange={e => handleUpdateItem(index, e.target.value)}
+                        disabled={readOnly}
+                        step={isFloat ? 0.01 : 1}
+                    />
+                );
+            }
+            case 'datetime':
+                return (
+                    <DateTimeInput
+                        value={itemValue ? new Date(itemValue) : new Date()}
+                        onChange={val => handleUpdateItem(index, val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            default:
+                return <Input type="text" {...commonProps} placeholder="Enter value..." />;
+        }
+    };
+
+    // Render new item input (similar logic but for newItemValue)
+    const renderNewItemInput = () => {
+        const argType = definition.type as ConfigArgType;
+        const uiComponent = (definition.ui as any)?.component;
+
+        const commonProps = {
+            value: newItemValue,
+            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                setNewItemValue(e.target.value),
+            disabled: readOnly,
+            onKeyPress: handleKeyPress,
+        };
+
+        switch (uiComponent) {
+            case 'boolean-form-input': {
+                return (
+                    <Switch
+                        checked={newItemValue === 'true'}
+                        onCheckedChange={checked => setNewItemValue(checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            case 'select-form-input': {
+                const options = (definition.ui as any)?.options || [];
+                return (
+                    <Select value={newItemValue} onValueChange={setNewItemValue} disabled={readOnly}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select value..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {options.map((option: any) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                    {typeof option.label === 'string'
+                                        ? option.label
+                                        : option.label?.[0]?.value || option.value}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                );
+            }
+            case 'textarea-form-input': {
+                return (
+                    <Textarea
+                        {...commonProps}
+                        placeholder="Enter text..."
+                        rows={2}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'date-form-input': {
+                return <DateTimeInput value={newItemValue} onChange={setNewItemValue} disabled={readOnly} />;
+            }
+            case 'number-form-input': {
+                const ui = definition.ui as any;
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={newItemValue}
+                        onChange={e => setNewItemValue(e.target.value)}
+                        disabled={readOnly}
+                        min={ui?.min}
+                        max={ui?.max}
+                        step={ui?.step || (isFloat ? 0.01 : 1)}
+                        placeholder="Enter number..."
+                        onKeyPress={handleKeyPress}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'currency-form-input': {
+                return (
+                    <div className="flex items-center">
+                        <span className="mr-2 text-sm text-muted-foreground">$</span>
+                        <Input
+                            type="number"
+                            value={newItemValue}
+                            onChange={e => setNewItemValue(e.target.value)}
+                            disabled={readOnly}
+                            min={0}
+                            step={1}
+                            placeholder="Enter amount..."
+                            onKeyPress={handleKeyPress}
+                            className="flex-1 bg-background"
+                        />
+                    </div>
+                );
+            }
+        }
+
+        // Fall back to type-based rendering
+        switch (argType) {
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={newItemValue === 'true'}
+                        onCheckedChange={checked => setNewItemValue(checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+            case 'int':
+            case 'float': {
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={newItemValue}
+                        onChange={e => setNewItemValue(e.target.value)}
+                        disabled={readOnly}
+                        step={isFloat ? 0.01 : 1}
+                        placeholder="Enter number..."
+                        onKeyPress={handleKeyPress}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'datetime': {
+                return (
+                    <DateTimeInput
+                        value={newItemValue ? new Date(newItemValue) : new Date()}
+                        onChange={val => setNewItemValue(val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            default: {
+                return (
+                    <Input
+                        type="text"
+                        {...commonProps}
+                        placeholder="Enter value..."
+                        className="bg-background"
+                    />
+                );
+            }
+        }
+    };
+
+    if (readOnly) {
+        return (
+            <div className="space-y-2">
+                {arrayValue.map((item, index) => (
+                    <div key={index + item} className="flex items-center gap-2 p-2 bg-muted rounded-md">
+                        <span className="flex-1">{item}</span>
+                    </div>
+                ))}
+                {arrayValue.length === 0 && <div className="text-sm text-muted-foreground">No items</div>}
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-2">
+            {/* Existing items */}
+            {arrayValue.map((item, index) => (
+                <div key={index + item} className="flex items-center gap-2">
+                    <div className="flex-1">{renderItemInput(item, index)}</div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleRemoveItem(index)}
+                        disabled={readOnly}
+                        type="button"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ))}
+
+            {/* Add new item */}
+            <div className="flex items-center gap-2 p-2 border border-dashed rounded-md">
+                <div className="flex-1">{renderNewItemInput()}</div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddItem}
+                    disabled={readOnly || !newItemValue.trim()}
+                    type="button"
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </div>
+
+            {arrayValue.length === 0 && (
+                <div className="text-sm text-muted-foreground">
+                    No items added yet. Use the input above to add items.
+                </div>
+            )}
+        </div>
+    );
+}
+
+function parseArrayValue(value: string): string[] {
+    if (!value) return [];
+
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.map(String) : [String(parsed)];
+    } catch {
+        // If not JSON, try comma-separated values
+        return value.includes(',')
+            ? value
+                  .split(',')
+                  .map(s => s.trim())
+                  .filter(Boolean)
+            : value
+              ? [value]
+              : [];
+    }
+}