@vendure/dashboard 3.2.0

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

@@ -0,0 +1,306 @@
+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 { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { ChevronRight, Loader2, Plus } from 'lucide-react';
+import React, { useState } from 'react';
+
+export interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: Facet;
+}
+
+export interface Facet {
+    id: string;
+    name: string;
+    code: string;
+}
+
+interface FacetValueSelectorProps {
+    onValueSelect: (value: FacetValue) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    pageSize?: number;
+}
+
+const getFacetValueListDocument = graphql(`
+    query GetFacetValueList($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+const getFacetListDocument = graphql(`
+    query GetFacetList($options: FacetListOptions) {
+        facets(options: $options) {
+            items {
+                id
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+const getFacetValuesForFacetDocument = graphql(`
+    query GetFacetValuesForFacet($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+export function FacetValueSelector({
+    onValueSelect,
+    disabled,
+    placeholder = 'Search facet values...',
+    pageSize = 4,
+}: FacetValueSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [expandedFacetId, setExpandedFacetId] = useState<string | null>(null);
+    const debouncedSearch = useDebounce(searchTerm, 200);
+
+    // Query for facet values based on search
+    const { data: facetValueData, isLoading: isLoadingFacetValues } = useQuery({
+        queryKey: ['facetValues', debouncedSearch],
+        queryFn: () => {
+            if (debouncedSearch.length < 2) {
+                return { facetValues: { items: [], totalItems: 0 } };
+            }
+            return api.query(getFacetValueListDocument, {
+                options: {
+                    filter: {
+                        name: { contains: debouncedSearch }
+                    },
+                    take: 100
+                }
+            });
+        },
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+    });
+
+    // Query for facets based on search
+    const { data: facetData, isLoading: isLoadingFacets } = useQuery({
+        queryKey: ['facets', debouncedSearch],
+        queryFn: () => {
+            if (debouncedSearch.length < 2) {
+                return { facets: { items: [], totalItems: 0 } };
+            }
+            return api.query(getFacetListDocument, {
+                options: {
+                    filter: {
+                        name: { contains: debouncedSearch }
+                    },
+                    take: 100
+                }
+            });
+        },
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+    });
+
+    // Query for paginated values of a specific facet when expanded
+    const {
+        data: expandedFacetData,
+        isLoading: isLoadingExpandedFacet,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage
+    } = useInfiniteQuery({
+        queryKey: ['facetValues', expandedFacetId, 'infinite'],
+        queryFn: async ({ pageParam = 0 }) => {
+            if (!expandedFacetId) return null;
+            const response = await api.query(getFacetValuesForFacetDocument, {
+                options: {
+                    filter: { facetId: { eq: expandedFacetId } },
+                    sort: { code: 'ASC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                }
+            });
+            return response.facetValues;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        enabled: !!expandedFacetId,
+        initialPageParam: 0,
+    });
+
+    const facetValues = facetValueData?.facetValues.items ?? [];
+    const facets = facetData?.facets.items ?? [];
+    const expandedFacetValues = expandedFacetData?.pages.flatMap(page => page?.items ?? []) ?? [];
+    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 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;
+
+        if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
+            fetchNextPage();
+        }
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <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} 
+                        value={searchTerm}
+                        onValueChange={(value) => {
+                            setSearchTerm(value);
+                            setExpandedFacetId(null);
+                        }}
+                        disabled={disabled}
+                    />
+                    <CommandList 
+                        className="h-[200px] overflow-y-auto" 
+                        onScroll={handleScroll}
+                    >
+                        <CommandEmpty>
+                            {debouncedSearch.length < 2 ? (
+                                <Trans>Type at least 2 characters to search...</Trans>
+                            ) : isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No results found</Trans>
+                            )}
+                        </CommandEmpty>
+                        
+                        {expandedFacetId ? (
+                            <>
+                                <CommandGroup>
+                                    <CommandItem
+                                        onSelect={() => setExpandedFacetId(null)}
+                                        className="cursor-pointer"
+                                    >
+                                        ← <Trans>Back to search</Trans>
+                                    </CommandItem>
+                                </CommandGroup>
+                                <CommandGroup heading={expandedFacetName}>
+                                    {expandedFacetValues.map((facetValue) => (
+                                        <CommandItem
+                                            key={facetValue.id}
+                                            value={facetValue.id}
+                                            onSelect={() => {
+                                                onValueSelect(facetValue);
+                                                setSearchTerm('');
+                                                setExpandedFacetId(null);
+                                                setOpen(false);
+                                            }}
+                                        >
+                                            {facetValue.name}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                                {(isFetchingNextPage || isLoadingExpandedFacet) && (
+                                    <div className="flex items-center justify-center py-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                    </div>
+                                )}
+                                {!hasNextPage && expandedFacetValues.length > 0 && (
+                                    <div className="text-center py-2 text-sm text-muted-foreground">
+                                        <Trans>No more items</Trans>
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {facets.length > 0 && (
+                                    <CommandGroup heading={<Trans>Facets</Trans>}>
+                                        {facets.map((facet) => (
+                                            <CommandItem
+                                                key={facet.id}
+                                                value={`facet-${facet.id}`}
+                                                onSelect={() => setExpandedFacetId(facet.id)}
+                                                className="cursor-pointer"
+                                            >
+                                                <span className="flex-1">{facet.name}</span>
+                                                <ChevronRight className="h-4 w-4" />
+                                            </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>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/focal-point-control.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils.js';
+
+interface Point {
+    x: number;
+    y: number;
+}
+
+interface FocalPointControlProps {
+    width: number;
+    height: number;
+    point: Point;
+    onChange: (point: Point) => void;
+}
+
+export function FocalPointControl({
+    width,
+    height,
+    point,
+    onChange,
+}: FocalPointControlProps) {
+    const [dragging, setDragging] = useState(false);
+
+    useEffect(() => {
+        if (!dragging) return;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const rect = (e.target as HTMLDivElement)?.getBoundingClientRect();
+            const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+            onChange({ x, y });
+        };
+
+        const handleMouseUp = () => {
+            setDragging(false);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [dragging, onChange]);
+
+    return (
+        <div
+            className="absolute inset-0 cursor-crosshair"
+            onMouseDown={() => setDragging(true)}
+        >
+            <div
+                className={cn(
+                    'absolute w-6 h-6 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2',
+                    'shadow-[0_0_0_1px_rgba(0,0,0,0.3)]',
+                    dragging && 'scale-75'
+                )}
+                style={{
+                    left: `${point.x * width}px`,
+                    top: `${point.y * height}px`,
+                }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,37 @@
+import {
+    FormControl,
+    FormDescription,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormField,
+} from '../ui/form.js';
+import { FieldValues, FieldPath } from 'react-hook-form';
+
+export type FormFieldWrapperProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+};
+
+export function FormFieldWrapper<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({ control, name, render, label, description }: 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>
+            )}
+        />
+    );
+}

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

@@ -0,0 +1,112 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { Trans } from '@/lib/trans.js';
+import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
+import { useCallback } from 'react';
+import { useHistoryTimeline } from './history-timeline.js';
+
+export interface HistoryEntryItem {
+    id: string;
+    type: string;
+    createdAt: string;
+    isPublic: boolean;
+    administrator?: {
+        id: string;
+        firstName: string;
+        lastName: string;
+    } | null;
+    data: any;
+}
+
+interface HistoryEntryProps {
+    entry: HistoryEntryItem;
+    isNoteEntry: boolean;
+    timelineIcon: React.ReactNode;
+    title: string | React.ReactNode;
+    children: React.ReactNode;
+}
+
+export function HistoryEntry({ entry, isNoteEntry, timelineIcon, title, children }: HistoryEntryProps) {
+    const { formatDate } = useLocalFormat();
+    const { editNote, deleteNote } = useHistoryTimeline();
+
+    const formatDateTime = useCallback(
+        (date: string) => {
+            return formatDate(date, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+            });
+        },
+        [formatDate],
+    );
+
+    return (
+        <div key={entry.id} className="relative mb-4 pl-11">
+            <div className="absolute left-0 w-10 flex items-center justify-center">
+                <div className={`rounded-full flex items-center justify-center h-6 w-6`}>
+                    <div
+                        className={`rounded-full bg-muted text-muted-foreground flex items-center justify-center h-6 w-6`}
+                    >
+                        {timelineIcon}
+                    </div>
+                </div>
+            </div>
+
+            <div className="px-4 rounded-md">
+                <div className="mt-2 text-sm text-muted-foreground flex items-center">
+                    <span>{formatDateTime(entry.createdAt)}</span>
+                    {entry.administrator && (
+                        <span className="ml-2">
+                            {entry.administrator.firstName} {entry.administrator.lastName}
+                        </span>
+                    )}
+                </div>
+                <div className="flex items-start justify-between">
+                    <div>
+                        <div className="font-medium text-sm">{title}</div>
+                        {children}
+                    </div>
+
+                    {isNoteEntry && (
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                                    <MoreVerticalIcon className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem
+                                    onClick={() => editNote(entry.id, entry.data.note, !entry.isPublic)}
+                                    className="cursor-pointer"
+                                >
+                                    <PencilIcon className="mr-2 h-4 w-4" />
+                                    <Trans>Edit</Trans>
+                                </DropdownMenuItem>
+                                <Separator className="my-1" />
+                                <DropdownMenuItem
+                                    onClick={() => deleteNote(entry.id)}
+                                    className="cursor-pointer text-red-600 focus:text-red-600"
+                                >
+                                    <TrashIcon className="mr-2 h-4 w-4" />
+                                    <span>Delete</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    )}
+                </div>
+            </div>
+            <div className="border-b border-muted my-4 mx-4"></div>
+        </div>
+    );
+}

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Trans } from '@/lib/trans.js';
+
+interface HistoryNoteCheckboxProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+export function HistoryNoteCheckbox({ value, onChange }: HistoryNoteCheckboxProps) {
+    return (
+        <div className="flex items-center space-x-2">
+            <Checkbox
+                id="note-private"
+                checked={value}
+                onCheckedChange={checked => onChange(checked as boolean)}
+            />
+            <label
+                htmlFor="note-private"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+                <Trans>Note is private</Trans>
+            </label>
+            <span className={value ? 'text-gray-500 text-xs' : 'text-green-600 text-xs'}>
+                {value ? <Trans>Visible to admins only</Trans> : <Trans>Visible to customer</Trans>}
+            </span>
+        </div>
+    );
+}

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -0,0 +1,60 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Trans } from '@/lib/trans.js';
+import { useState } from 'react';
+import { HistoryNoteCheckbox } from './history-note-checkbox.js';
+
+interface NoteEditorProps {
+    note: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onNoteChange: (noteId: string, note: string, isPrivate: boolean) => void;
+    noteId: string;
+    isPrivate: boolean;
+}
+
+export function HistoryNoteEditor({
+    open,
+    onOpenChange,
+    note,
+    onNoteChange,
+    noteId,
+    isPrivate,
+}: NoteEditorProps) {
+    const [value, setValue] = useState(note);
+    const [noteIsPrivate, setNoteIsPrivate] = useState(isPrivate);
+    const handleSave = () => {
+        onNoteChange(noteId, value, noteIsPrivate);
+        onOpenChange(false);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Edit Note</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Update the note content or visibility</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <Textarea value={value} onChange={e => setValue(e.target.value)} />
+                <HistoryNoteCheckbox value={noteIsPrivate} onChange={setNoteIsPrivate} />
+                <DialogFooter>
+                    <Button onClick={() => handleSave()}>
+                        <Trans>Save</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { useState } from 'react';
+import { HistoryNoteCheckbox } from './history-note-checkbox.js';
+
+interface HistoryNoteInputProps {
+    onAddNote: (note: string, isPrivate: boolean) => void;
+}
+
+export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
+    const [note, setNote] = useState('');
+    const [noteIsPrivate, setNoteIsPrivate] = useState(true);
+
+    const handleAddNote = () => {
+        if (note.trim()) {
+            onAddNote(note, noteIsPrivate);
+            setNote('');
+        }
+    };
+
+    return (
+        <div className="border rounded-md p-4">
+            <div className="flex flex-col space-y-4">
+                <Textarea
+                    placeholder="Add a note..."
+                    value={note}
+                    onChange={e => setNote(e.target.value)}
+                    className="min-h-[80px] resize-none"
+                />
+                <div className="flex items-center justify-between">
+                    <HistoryNoteCheckbox value={noteIsPrivate} onChange={setNoteIsPrivate} />
+                    <Button onClick={handleAddNote} disabled={!note.trim()} size="sm">
+                        Add note
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}