@vendure/dashboard 3.2.0 → 3.2.2

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

@@ -1,65 +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>
-    );
+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

@@ -1,37 +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>
-            )}
-        />
-    );
-}
+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

@@ -1,112 +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>
-    );
-}
+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

@@ -1,28 +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>
-    );
-}
+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

@@ -1,60 +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>
-    );
-}
+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>
+    );
+}