@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/shared/detail-page-button.tsx

@@ -2,23 +2,67 @@ import { Link } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import { Button } from '../ui/button.js';
 
+/**
+ * DetailPageButton is a reusable navigation component designed to provide consistent UX
+ * across list views when linking to detail pages. It renders as a ghost button with
+ * a chevron indicator, making it easy for users to identify clickable links that
+ * navigate to detail views.
+ *
+ * @component
+ * @example
+ * // Basic usage with ID (relative navigation)
+ * <DetailPageButton id="123" label="Product Name" />
+ *
+ * @example
+ * // Custom href with search params
+ * <DetailPageButton
+ *   href="/products/detail/456"
+ *   label="Custom Product"
+ *   search={{ tab: 'variants' }}
+ * />
+ *
+ * @example
+ * // Disabled state
+ * <DetailPageButton
+ *   id="789"
+ *   label="Unavailable Item"
+ *   disabled={true}
+ * />
+ *
+ * @param {Object} props - Component props
+ * @param {string|React.ReactNode} props.label - The text or content to display in the button
+ * @param {string} [props.id] - The ID for relative navigation (creates href as `./${id}`)
+ * @param {string} [props.href] - Custom href for navigation (takes precedence over id)
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled (prevents navigation)
+ * @param {Record<string, string>} [props.search] - Search parameters to include in the navigation
+ *
+ * @returns {React.ReactElement} A styled button component that navigates to detail pages
+ *
+ * @remarks
+ * - Uses TanStack Router's Link component for client-side navigation
+ * - Includes a chevron icon (hidden when disabled) to indicate navigation
+ * - Preloading is disabled by default for performance optimization
+ * - Styled as a ghost button variant for subtle, consistent appearance
+ */
 export function DetailPageButton({
     id,
     href,
     label,
     disabled,
+    search,
 }: {
     label: string | React.ReactNode;
     id?: string;
     href?: string;
     disabled?: boolean;
+    search?: Record<string, string>;
 }) {
     if (!id && !href) {
         return <span>{label}</span>;
     }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={href ?? `./${id}`}>
+            <Link to={href ?? `./${id}`} search={search ?? {}} preload={false}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>

package/src/lib/components/shared/entity-assets.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { AssetFragment } from '@/graphql/fragments.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
 import {
     closestCenter,
     DndContext,
@@ -56,11 +56,11 @@ interface FeaturedAssetProps {
 }
 
 function FeaturedAsset({
-                           featuredAsset,
-                           compact = false,
-                           onSelectAssets,
-                           onPreviewAsset,
-                       }: FeaturedAssetProps) {
+    featuredAsset,
+    compact = false,
+    onSelectAssets,
+    onPreviewAsset,
+}: FeaturedAssetProps) {
     return (
         <div
             className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
@@ -90,14 +90,14 @@ function FeaturedAsset({
 
 // Sortable asset item component
 function SortableAsset({
-                           asset,
-                           compact,
-                           isFeatured,
-                           updatePermissions,
-                           onPreview,
-                           onSetAsFeatured,
-                           onRemove,
-                       }: {
+    asset,
+    compact,
+    isFeatured,
+    updatePermissions,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+}: {
     asset: Asset;
     compact: boolean;
     isFeatured: boolean;
@@ -163,13 +163,13 @@ function SortableAsset({
 }
 
 export function EntityAssets({
-                                 assets: initialAssets = [],
-                                 featuredAsset: initialFeaturedAsset,
-                                 compact = false,
-                                 updatePermissions = true,
-                                 multiSelect = true,
-                                 onChange,
-                             }: EntityAssetsProps) {
+    assets: initialAssets = [],
+    featuredAsset: initialFeaturedAsset,
+    compact = false,
+    updatePermissions = true,
+    multiSelect = true,
+    onChange,
+}: EntityAssetsProps) {
     const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
     const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -372,18 +372,17 @@ interface AssetListProps {
     onDragEnd: (event: DragEndEvent) => void;
 }
 
-
 function AssetList({
-                       assets,
-                       compact,
-                       sensors,
-                       updatePermissions,
-                       isFeatured,
-                       onPreview,
-                       onSetAsFeatured,
-                       onRemove,
-                       onDragEnd,
-                   }: AssetListProps) {
+    assets,
+    compact,
+    sensors,
+    updatePermissions,
+    isFeatured,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+    onDragEnd,
+}: AssetListProps) {
     return (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>

package/src/lib/components/shared/error-page.tsx

@@ -1,7 +1,7 @@
-import { Page, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { AlertCircle } from 'lucide-react';
-import { Alert, AlertTitle, AlertDescription } from '../ui/alert.js';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert.js';
 
 export interface ErrorPageProps {
     message: string;
@@ -11,14 +11,14 @@ export interface ErrorPageProps {
  * @description
  * A generic error page that displays an error message.
  */
-export function ErrorPage({ message }: ErrorPageProps) {
+export function ErrorPage({ message }: Readonly<ErrorPageProps>) {
     return (
-        <Page pageId='error-page'>
+        <Page pageId="error-page">
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main" blockId='error-message'>
+                <PageBlock column="main" blockId="error-message">
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

package/src/lib/components/shared/facet-value-chip.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { X } from 'lucide-react';
 
 // Interface for facet value type
@@ -20,15 +20,22 @@ interface FacetValueChipProps {
     onRemove?: (id: string) => void;
 }
 
-export function FacetValueChip({ facetValue, removable = true, onRemove, displayFacetName = true }: FacetValueChipProps) {
+export function FacetValueChip({
+    facetValue,
+    removable = true,
+    onRemove,
+    displayFacetName = true,
+}: FacetValueChipProps) {
     return (
-        <Badge 
+        <Badge
             variant="secondary"
             className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
         >
             <div className="flex items-center gap-1.5">
                 <span className="font-medium">{facetValue.name}</span>
-                {displayFacetName && <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>}
+                {displayFacetName && (
+                    <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>
+                )}
             </div>
             {removable && (
                 <button
@@ -42,4 +49,4 @@ export function FacetValueChip({ facetValue, removable = true, onRemove, display
             )}
         </Badge>
     );
-} 
+}

package/src/lib/components/shared/facet-value-selector.tsx

@@ -1,11 +1,18 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useDebounce } from '@uidotdev/usehooks';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 
@@ -99,13 +106,13 @@ export function FacetValueSelector({
             return api.query(getFacetValueListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for facets based on search
@@ -118,13 +125,13 @@ export function FacetValueSelector({
             return api.query(getFacetListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for paginated values of a specific facet when expanded
@@ -133,7 +140,7 @@ export function FacetValueSelector({
         isLoading: isLoadingExpandedFacet,
         fetchNextPage,
         hasNextPage,
-        isFetchingNextPage
+        isFetchingNextPage,
     } = useInfiniteQuery({
         queryKey: ['facetValues', expandedFacetId, 'infinite'],
         queryFn: async ({ pageParam = 0 }) => {
@@ -144,7 +151,7 @@ export function FacetValueSelector({
                     sort: { code: 'ASC' },
                     skip: pageParam * pageSize,
                     take: pageSize,
-                }
+                },
             });
             return response.facetValues;
         },
@@ -163,22 +170,23 @@ export function FacetValueSelector({
     const expandedFacetName = expandedFacetValues[0]?.facet.name;
 
     // Group facet values by facet
-    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>((groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
-        const facetId = facetValue.facet.id;
-        if (!groups[facetId]) {
-            groups[facetId] = [];
-        }
-        groups[facetId].push(facetValue);
-        return groups;
-    }, {});
+    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>(
+        (groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
+            const facetId = facetValue.facet.id;
+            if (!groups[facetId]) {
+                groups[facetId] = [];
+            }
+            groups[facetId].push(facetValue);
+            return groups;
+        },
+        {},
+    );
 
     const isLoading = isLoadingFacetValues || isLoadingFacets || isLoadingExpandedFacet;
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
         const target = e.currentTarget;
-        const scrolledToBottom = Math.abs(
-            target.scrollHeight - target.clientHeight - target.scrollTop
-        ) < 1;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
 
         if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
             fetchNextPage();
@@ -188,32 +196,23 @@ export function FacetValueSelector({
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button 
-                    variant="outline" 
-                    size="sm" 
-                    type="button"
-                    disabled={disabled}
-                    className="gap-2"
-                >
+                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
                     <Plus className="h-4 w-4" />
                     <Trans>Add facet values</Trans>
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0 w-[400px]" align="start">
                 <Command shouldFilter={false}>
-                    <CommandInput 
-                        placeholder={placeholder} 
+                    <CommandInput
+                        placeholder={placeholder}
                         value={searchTerm}
-                        onValueChange={(value) => {
+                        onValueChange={value => {
                             setSearchTerm(value);
                             setExpandedFacetId(null);
                         }}
                         disabled={disabled}
                     />
-                    <CommandList 
-                        className="h-[200px] overflow-y-auto" 
-                        onScroll={handleScroll}
-                    >
+                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
                         <CommandEmpty>
                             {debouncedSearch.length < 2 ? (
                                 <Trans>Type at least 2 characters to search...</Trans>
@@ -223,7 +222,7 @@ export function FacetValueSelector({
                                 <Trans>No results found</Trans>
                             )}
                         </CommandEmpty>
-                        
+
                         {expandedFacetId ? (
                             <>
                                 <CommandGroup>
@@ -235,7 +234,7 @@ export function FacetValueSelector({
                                     </CommandItem>
                                 </CommandGroup>
                                 <CommandGroup heading={expandedFacetName}>
-                                    {expandedFacetValues.map((facetValue) => (
+                                    {expandedFacetValues.map(facetValue => (
                                         <CommandItem
                                             key={facetValue.id}
                                             value={facetValue.id}
@@ -265,7 +264,7 @@ export function FacetValueSelector({
                             <>
                                 {facets.length > 0 && (
                                     <CommandGroup heading={<Trans>Facets</Trans>}>
-                                        {facets.map((facet) => (
+                                        {facets.map(facet => (
                                             <CommandItem
                                                 key={facet.id}
                                                 value={`facet-${facet.id}`}
@@ -278,24 +277,26 @@ export function FacetValueSelector({
                                         ))}
                                     </CommandGroup>
                                 )}
-                                
-                                {Object.entries(facetGroups).map(([facetId, values]: [string, FacetValue[]]) => (
-                                    <CommandGroup key={facetId} heading={values[0]?.facet.name}>
-                                        {values.map((facetValue: FacetValue) => (
-                                            <CommandItem
-                                                key={facetValue.id}
-                                                value={facetValue.id}
-                                                onSelect={() => {
-                                                    onValueSelect(facetValue);
-                                                    setSearchTerm('');
-                                                    setOpen(false);
-                                                }}
-                                            >
-                                                {facetValue.name}
-                                            </CommandItem>
-                                        ))}
-                                    </CommandGroup>
-                                ))}
+
+                                {Object.entries(facetGroups).map(
+                                    ([facetId, values]: [string, FacetValue[]]) => (
+                                        <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                            {values.map((facetValue: FacetValue) => (
+                                                <CommandItem
+                                                    key={facetValue.id}
+                                                    value={facetValue.id}
+                                                    onSelect={() => {
+                                                        onValueSelect(facetValue);
+                                                        setSearchTerm('');
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    {facetValue.name}
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                    ),
+                                )}
                             </>
                         )}
                     </CommandList>

package/src/lib/components/shared/form-field-wrapper.tsx

@@ -1,37 +1,60 @@
-import {
-    FormControl,
-    FormDescription,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormField,
-} from '../ui/form.js';
-import { FieldValues, FieldPath } from 'react-hook-form';
+import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
+import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 
 export type FormFieldWrapperProps<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @description
+     * Whether to render the form control.
+     * If false, the form control will not be rendered.
+     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
+     * where the FormControl needs to nested in the root component.
+     * @default true
+     */
+    renderFormControl?: boolean;
 };
 
 export function FormFieldWrapper<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({ control, name, render, label, description }: FormFieldWrapperProps<TFieldValues, TName>) {
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    control,
+    name,
+    render,
+    label,
+    description,
+    renderFormControl = true,
+}: FormFieldWrapperProps<TFieldValues, TName>) {
     return (
-        <FormField
-            control={control}
-            name={name}
-            render={renderArgs => (
-                <FormItem>
-                    {label && <FormLabel>{label}</FormLabel>}
-                    <FormControl>{render(renderArgs)}</FormControl>
-                    {description && <FormDescription>{description}</FormDescription>}
-                    <FormMessage />
-                </FormItem>
-            )}
-        />
+        <LocationWrapper identifier={name}>
+            <FormField
+                control={control}
+                name={name}
+                render={renderArgs => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        {renderFormControl ? (
+                            <FormControl>
+                                <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                    {render(renderArgs)}
+                                </OverriddenFormComponent>
+                            </FormControl>
+                        ) : (
+                            <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                {render(renderArgs)}
+                            </OverriddenFormComponent>
+                        )}
+                        {description && <FormDescription>{description}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </LocationWrapper>
     );
 }

package/src/lib/components/shared/history-timeline/history-entry-date.tsx

@@ -0,0 +1,37 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+interface HistoryEntryDateProps {
+    date: string;
+    className?: string;
+}
+
+export function HistoryEntryDate({ date, className }: Readonly<HistoryEntryDateProps>) {
+    const { formatRelativeDate, formatDate } = useLocalFormat();
+
+    const formatFullDateTime = (dateString: string) => {
+        return formatDate(dateString, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        });
+    };
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className={className}>
+                        {formatRelativeDate(date)}
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{formatFullDateTime(date)}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}