@vendure/dashboard 3.2.0

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

@@ -0,0 +1,56 @@
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { useState, createContext, useContext } from 'react';
+import { HistoryNoteEditor } from './history-note-editor.js';
+
+interface HistoryTimelineProps {
+    children: React.ReactNode;
+    onEditNote?: (entryId: string, note: string, isPublic: boolean) => void;
+    onDeleteNote?: (entryId: string) => void;
+}
+
+// Use context to make the note editing functions available to the child
+// HistoryEntry component
+const HistoryTimelineContext = createContext<{
+    editNote: (noteId: string, note: string, isPrivate: boolean) => void;
+    deleteNote: (noteId: string) => void;
+}>({ editNote: () => {}, deleteNote: () => {} });
+
+type NoteEditorNote = { noteId: string; note: string; isPrivate: boolean };
+
+export function useHistoryTimeline() {
+    return useContext(HistoryTimelineContext);
+}
+
+export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
+    const [noteEditorOpen, setNoteEditorOpen] = useState(false);
+    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({ noteId: '', note: '', isPrivate: true });
+
+    const editNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setNoteEditorNote({ noteId, note, isPrivate });
+        setNoteEditorOpen(true);
+    }
+
+    const deleteNote = (noteId: string) => {
+        setNoteEditorNote({ noteId, note: '', isPrivate: true });
+    }
+
+    return (
+        <HistoryTimelineContext.Provider value={{ editNote, deleteNote }}>
+            <ScrollArea className=" pr-4">
+                <div className="relative">
+                    <div className="absolute left-5 top-0 bottom-[44px] w-0.5 bg-gray-200" />
+                {children}
+                </div>
+            </ScrollArea>
+            <HistoryNoteEditor
+                key={noteEditorNote.noteId}
+                note={noteEditorNote.note}
+                onNoteChange={(...args) => onEditNote?.(...args)}
+                open={noteEditorOpen}
+                onOpenChange={setNoteEditorOpen}
+                noteId={noteEditorNote.noteId}
+                isPrivate={noteEditorNote.isPrivate}
+            />
+        </HistoryTimelineContext.Provider>
+    );
+}

package/src/lib/components/shared/icon-mark.tsx

@@ -0,0 +1,18 @@
+export function IconMark(props: React.ComponentProps<'svg'>) {
+    return (
+        <svg viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M10.7466 12.6853V21.9481C10.7466 22.1142 10.8389 22.2712 10.9836 22.3527L19.3904 27.1155C19.6921 27.2846 20.0615 27.2846 20.3632 27.1155L28.77 22.3527C28.9178 22.2682 29.007 22.1142 29.007 21.9481V12.6853C29.007 12.3259 28.6099 12.0994 28.2929 12.2806L20.3632 16.7716C20.0615 16.9407 19.6921 16.9407 19.3904 16.7716L11.4607 12.2806C11.1437 12.0994 10.7466 12.3259 10.7466 12.6853Z"
+                fill="currentColor"
+            />
+            <path
+                d="M8.8932 0.749702L0.486371 5.50943C0.184698 5.67856 0 5.99568 0 6.33393V15.8564C0 16.0225 0.0923489 16.1796 0.237029 16.2611L8.41299 20.894C8.73005 21.0752 9.12715 20.8487 9.12715 20.4893V11.5074C9.12715 11.1661 9.31185 10.852 9.61352 10.6829L17.5432 6.19199C17.8603 6.01078 17.8603 5.56077 17.5432 5.38258L9.36726 0.749702C9.2195 0.665138 9.03788 0.665138 8.89012 0.749702H8.8932Z"
+                fill="currentColor"
+            />
+            <path
+                d="M30.86 0.740669L39.2668 5.5004C39.5685 5.66953 39.7532 5.98664 39.7532 6.3249V15.8474C39.7532 16.0135 39.6608 16.1705 39.5162 16.2521L31.3402 20.885C31.0231 21.0662 30.626 20.8397 30.626 20.4803V11.4984C30.626 11.1571 30.4413 10.843 30.1397 10.6739L22.21 6.18295C21.8929 6.00174 21.8929 5.55174 22.21 5.37355L30.3859 0.740669C30.5337 0.656105 30.7153 0.656105 30.8631 0.740669H30.86Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

package/src/lib/components/shared/language-selector.tsx

@@ -0,0 +1,48 @@
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
+
+const availableGlobalLanguages = graphql(`
+    query AvailableGlobalLanguages {
+        globalSettings {
+            availableLanguages
+        }
+    }
+`);
+
+export interface LanguageSelectorProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    availableLanguageCodes?: string[];
+}
+
+export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps<T>) {
+    const { data } = useQuery({
+        queryKey: ['availableGlobalLanguages'],
+        queryFn: () => api.query(availableGlobalLanguages),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+    const { formatLanguageName } = useLocalFormat();
+    const { value, onChange, multiple, availableLanguageCodes } = props;
+    const { i18n } = useLingui();
+
+    const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
+        value: language,
+        label: formatLanguageName(language)
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a language')}
+            searchPlaceholder={i18n.t('Search languages...')}
+        />
+    );
+}

package/src/lib/components/shared/logo-mark.tsx

@@ -0,0 +1,24 @@
+export function LogoMark(props: React.ComponentProps<'svg'>) {
+    return (
+        <svg viewBox="0 0 177 33" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M65.192 9.73a.729.729 0 0 0-.593-.307h-2.503a.733.733 0 0 0-.685.487l-4.263 12.438-4.33-12.445a.721.721 0 0 0-.684-.486h-2.577a.73.73 0 0 0-.592.307.753.753 0 0 0-.092.662l6.139 17.077c.098.288.37.48.675.48h2.726a.708.708 0 0 0 .675-.48l6.174-17.076a.699.699 0 0 0-.092-.663l.016.01.006-.004ZM83.004 19.262c.026-.272.041-.646.041-1.133 0-1.719-.386-3.3-1.144-4.705a8.804 8.804 0 0 0-3.16-3.357c-1.34-.82-2.865-1.242-4.51-1.242-1.746 0-3.334.428-4.716 1.274-1.382.845-2.469 2.035-3.242 3.53-.767 1.479-1.154 3.175-1.154 5.035 0 1.86.396 3.556 1.17 5.044.782 1.498 1.885 2.689 3.277 3.53 1.391.846 2.995 1.275 4.767 1.275 1.901 0 3.581-.388 4.995-1.166a9.396 9.396 0 0 0 3.423-3.216.739.739 0 0 0-.206-.992l-1.959-1.316c-.165-.109-.361-.15-.561-.109a.728.728 0 0 0-.46.33 5.63 5.63 0 0 1-2.04 2.026c-.84.48-1.934.726-3.259.726-1.581 0-2.789-.521-3.695-1.603a6.478 6.478 0 0 1-1.465-3.3h13.185c.37 0 .685-.282.716-.653v.016l-.003.006Zm-13.647-2.836a6.03 6.03 0 0 1 1.505-2.58c.872-.876 1.968-1.305 3.36-1.305 1.391 0 2.545.371 3.36 1.133.665.627 1.144 1.555 1.407 2.746H69.35l.01.01-.003-.004ZM100.347 12.054a6.516 6.516 0 0 0-2.69-2.423 8.235 8.235 0 0 0-3.598-.803c-1.391 0-2.633.339-3.705 1.002-.437.272-.84.595-1.201.96v-.653a.726.726 0 0 0-.726-.727h-2.469a.728.728 0 0 0-.726.727v17.076c0 .397.32.727.726.727h2.47a.728.728 0 0 0 .725-.727V18.67c0-1.927.396-3.473 1.176-4.58.732-1.044 1.829-1.556 3.334-1.556 2.586 0 3.788 1.38 3.788 4.35v10.329c0 .397.32.727.725.727h2.469a.728.728 0 0 0 .726-.727v-11.42c0-1.421-.336-2.68-.995-3.739h-.029ZM121.243.003h-2.459a.729.729 0 0 0-.726.73v10.082a7.873 7.873 0 0 0-1.54-1.069c-1.125-.601-2.387-.9-3.727-.9-1.744 0-3.331.43-4.717 1.272-1.381.845-2.469 2.026-3.239 3.514-.767 1.473-1.153 3.16-1.153 5.028 0 1.87.393 3.595 1.169 5.077.783 1.495 1.886 2.689 3.277 3.534 1.389.841 2.98 1.27 4.735 1.27 1.325 0 2.568-.304 3.68-.912a7.922 7.922 0 0 0 1.515-1.056v.653c0 .397.323.726.726.726h2.469a.728.728 0 0 0 .726-.726V.73c0-.397-.32-.73-.726-.73l-.01.003Zm-3.185 18.674c0 1.2-.231 2.285-.691 3.226-.453.934-1.062 1.639-1.87 2.15-.798.513-1.686.763-2.713.763-1.027 0-1.876-.247-2.659-.762-.792-.512-1.401-1.226-1.854-2.157-.463-.945-.691-2.036-.691-3.262s.231-2.273.691-3.198c.453-.925 1.062-1.622 1.854-2.141.78-.512 1.655-.762 2.659-.762 1.005 0 1.918.247 2.713.762.789.503 1.417 1.23 1.87 2.15.463.942.691 2.027.691 3.227v.007-.003ZM140.761 9.414h-2.469a.728.728 0 0 0-.726.726v8.533c0 1.927-.396 3.473-1.176 4.58-.732 1.044-1.829 1.556-3.334 1.556-2.583 0-3.788-1.38-3.788-4.35V10.13a.726.726 0 0 0-.726-.726h-2.469a.727.727 0 0 0-.725.726v11.42c0 1.422.336 2.68.995 3.74a6.494 6.494 0 0 0 2.691 2.422 8.263 8.263 0 0 0 3.597.804c1.391 0 2.634-.34 3.705-1.002.437-.272.84-.586 1.211-.96v.653c0 .396.32.726.726.726h2.469a.727.727 0 0 0 .725-.726V10.14a.726.726 0 0 0-.725-.726h.019ZM155.578 9.125a6.292 6.292 0 0 0-1.886-.288c-1.407 0-2.685.397-3.81 1.191-.485.34-.938.746-1.359 1.216v-1.091a.726.726 0 0 0-.726-.727h-2.469a.728.728 0 0 0-.726.727v17.076c0 .397.32.727.726.727h2.469a.728.728 0 0 0 .726-.727v-8.171c0-1.39.247-2.596.741-3.605.485-.982 1.129-1.738 1.911-2.25a4.46 4.46 0 0 1 2.511-.761c.5 0 .947.099 1.359.297.222.109.485.09.691-.042a.731.731 0 0 0 .336-.61V9.82a.718.718 0 0 0-.501-.685l.01-.01h-.003ZM173.399 19.262c.026-.272.042-.637.042-1.133 0-1.719-.387-3.306-1.135-4.705a8.802 8.802 0 0 0-3.16-3.358c-1.341-.819-2.865-1.232-4.51-1.232-1.746 0-3.334.429-4.716 1.274-1.382.845-2.469 2.036-3.242 3.53-.764 1.48-1.154 3.176-1.154 5.035 0 1.86.396 3.556 1.169 5.045.783 1.498 1.886 2.688 3.284 3.53 1.391.845 2.995 1.274 4.767 1.274 1.901 0 3.581-.387 4.995-1.165a9.396 9.396 0 0 0 3.423-3.217.739.739 0 0 0-.206-.992l-1.959-1.316c-.165-.108-.361-.15-.561-.108a.743.743 0 0 0-.459.33 5.592 5.592 0 0 1-2.051 2.025c-.84.48-1.933.727-3.258.727-1.582 0-2.789-.522-3.696-1.604a6.48 6.48 0 0 1-1.464-3.3h13.188a.717.717 0 0 0 .716-.653l-.009.01-.004.003Zm-13.647-2.836a6.039 6.039 0 0 1 1.505-2.58c.872-.877 1.969-1.305 3.36-1.305 1.391 0 2.542.37 3.36 1.133.665.627 1.144 1.555 1.407 2.746h-9.638l.009.01-.003-.004Z"
+                fill="currentColor"
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M174.388 4.798a2.148 2.148 0 0 0-2.136 2.157c0 1.191.957 2.158 2.136 2.158a2.149 2.149 0 0 0 2.137-2.158c0-1.19-.958-2.157-2.137-2.157Zm-2.611 2.157c0-1.456 1.169-2.637 2.611-2.637 1.443 0 2.612 1.181 2.612 2.637 0 1.457-1.169 2.638-2.612 2.638-1.442 0-2.611-1.181-2.611-2.638Z"
+                fill="currentColor"
+            />
+            <path
+                d="M174.242 6.738c.146 0 .254-.03.321-.087.063-.054.098-.147.098-.275 0-.128-.035-.218-.098-.272-.064-.055-.172-.08-.321-.08h-.301v.717h.301v-.003Zm-.297.496V8.29h-.714V5.499h1.088c.364 0 .63.06.798.186.171.121.254.316.254.585a.76.76 0 0 1-.13.455.766.766 0 0 1-.399.26.59.59 0 0 1 .263.153c.079.08.155.198.234.361l.39.791h-.758l-.339-.695c-.066-.137-.136-.236-.206-.284a.463.463 0 0 0-.279-.08h-.199l-.003.003ZM11.065 17.572v9.817a.5.5 0 0 0 .244.429l8.655 5.047a1 1 0 0 0 1.002 0l8.655-5.047a.497.497 0 0 0 .245-.429v-9.817a.49.49 0 0 0-.736-.429l-8.164 4.76a1 1 0 0 1-1.002 0l-8.164-4.76a.49.49 0 0 0-.736.43Z"
+                fill="currentColor"
+            />
+            <path
+                d="M9.156 4.923.501 9.967c-.31.18-.501.516-.501.874v10.092a.5.5 0 0 0 .244.429l8.418 4.91a.49.49 0 0 0 .735-.429v-9.519c0-.362.19-.695.501-.874l8.165-4.76a.498.498 0 0 0 0-.857l-8.418-4.91a.482.482 0 0 0-.492 0h.003ZM31.773 4.913l8.656 5.045c.31.179.501.515.501.873v10.092a.5.5 0 0 1-.244.43l-8.418 4.91a.49.49 0 0 1-.735-.43v-9.519c0-.361-.19-.694-.501-.873l-8.165-4.76a.498.498 0 0 1 0-.858l8.418-4.91c.152-.09.34-.09.492 0h-.004Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

package/src/lib/components/shared/multi-select.tsx

@@ -0,0 +1,159 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { Badge } from '@/components/ui/badge.js';
+import { X, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils.js';
+import { Button } from '@/components/ui/button.js';
+import { useState } from 'react';
+import { Input } from '../ui/input.js';
+
+export interface MultiSelectProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    items: Array<{
+        value: string;
+        label: string;
+        /**
+         * The display value to use for the item.
+         * If not provided, the label will be used.
+         * This is useful for displaying a more complex value in
+         * a React component.
+         */
+        display?: string | React.ReactNode;
+    }>;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    className?: string;
+}
+
+export function MultiSelect<T extends boolean>(props: MultiSelectProps<T>) {
+    const {
+        value,
+        onChange,
+        multiple,
+        items,
+        placeholder = 'Select items',
+        searchPlaceholder = 'Search...',
+        showSearch,
+        className,
+    } = props;
+    const [search, setSearch] = useState('');
+
+    const filteredItems = items.filter(item => item.label.toLowerCase().includes(search.toLowerCase()));
+
+    const handleSelect = (selectedValue: string) => {
+        if (multiple) {
+            const currentValue = value as string[];
+            const newValue = currentValue.includes(selectedValue)
+                ? currentValue.filter(v => v !== selectedValue)
+                : [...currentValue, selectedValue];
+            onChange(newValue as T extends true ? string[] : string);
+        } else {
+            onChange(selectedValue as T extends true ? string[] : string);
+        }
+    };
+
+    const handleRemove = (valueToRemove: string) => {
+        if (multiple) {
+            const currentValue = value as string[];
+            onChange(currentValue.filter(v => v !== valueToRemove) as T extends true ? string[] : string);
+        }
+    };
+
+    const renderTrigger = () => {
+        if (multiple) {
+            const selectedValues = value as string[];
+            return (
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                        'w-full justify-between',
+                        'min-h-[2.5rem] h-auto',
+                        'flex flex-wrap gap-1 p-1',
+                        className,
+                    )}
+                >
+                    <div className="flex flex-wrap gap-1">
+                        {selectedValues.length > 0 ? (
+                            selectedValues.map(selectedValue => {
+                                const item = items.find(i => i.value === selectedValue);
+                                return (
+                                    <Badge
+                                        key={selectedValue}
+                                        variant="secondary"
+                                        className="flex items-center gap-1"
+                                    >
+                                        {item?.display ?? item?.label ?? selectedValue}
+                                        <div
+                                            onClick={e => {
+                                                e.stopPropagation();
+                                                handleRemove(selectedValue);
+                                            }}
+                                            onKeyDown={e => {
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    handleRemove(selectedValue);
+                                                }
+                                            }}
+                                            role="button"
+                                            tabIndex={0}
+                                            className="ml-1 hover:text-destructive cursor-pointer"
+                                            aria-label={`Remove ${item?.label ?? selectedValue}`}
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </div>
+                                    </Badge>
+                                );
+                            })
+                        ) : (
+                            <span className="text-muted-foreground">{placeholder}</span>
+                        )}
+                    </div>
+                    <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            );
+        }
+        const selectedItem = items.find(i => i.value === value);
+        return (
+            <Button variant="outline" role="combobox" className={cn('w-full justify-between', className)}>
+                {selectedItem ? (selectedItem.display ?? selectedItem.label) : placeholder}
+                <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+        );
+    };
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>{renderTrigger()}</PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" side="bottom" align="start">
+                {(showSearch === true || items.length > 10) && (
+                    <div className="p-2">
+                        <Input
+                            type="text"
+                            placeholder={searchPlaceholder}
+                            value={search}
+                            onChange={e => setSearch(e.target.value)}
+                            className="w-full px-2 py-1 text-sm border rounded"
+                        />
+                    </div>
+                )}
+                <div className="max-h-[300px] overflow-auto">
+                    {filteredItems.map(item => (
+                        <button
+                            key={item.value}
+                            onClick={() => handleSelect(item.value)}
+                            className={cn(
+                                'w-full px-2 py-1.5 text-sm text-left hover:bg-accent',
+                                multiple && (value as string[]).includes(item.value) && 'bg-accent',
+                            )}
+                        >
+                            {item.display ?? item.label}
+                        </button>
+                    ))}
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/option-value-input.tsx

@@ -0,0 +1,95 @@
+import { useFieldArray } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import { Input } from "@/components/ui/input.js";
+import { Button } from "@/components/ui/button.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Plus, X } from "lucide-react";
+
+interface OptionValue {
+    value: string;
+    id: string;
+}
+
+interface FormValues {
+    optionGroups: {
+        name: string;
+        values: OptionValue[];
+    }[];
+    variants: Record<string, {
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+    }>;
+}
+
+interface OptionValueInputProps {
+    groupIndex: number;
+    disabled?: boolean;
+}
+
+export function OptionValueInput({ groupIndex, disabled = false }: OptionValueInputProps) {
+    const { control, watch } = useFormContext<FormValues>();
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: `optionGroups.${groupIndex}.values`,
+    });
+
+    const [newValue, setNewValue] = useState('');
+
+    const handleAddValue = () => {
+        if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
+            append({ value: newValue.trim(), id: crypto.randomUUID() });
+            setNewValue('');
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddValue();
+        }
+    };
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-2">
+                <Input
+                    value={newValue}
+                    onChange={e => setNewValue(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="Enter value and press Enter"
+                    disabled={disabled}
+                    className="flex-1"
+                />
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddValue}
+                    disabled={disabled || !newValue.trim()}
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+                {fields.map((field, index) => (
+                    <Badge key={field.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
+                        {field.value}
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-4 w-4 p-0 ml-1"
+                            onClick={() => remove(index)}
+                        >
+                            <X className="h-3 w-3" />
+                        </Button>
+                    </Badge>
+                ))}
+            </div>
+        </div>
+    );
+}