@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/shared/confirmation-dialog.tsx

@@ -1,58 +1,58 @@
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
-import { Trans } from '@/lib/trans.js';
-import { useState } from 'react';
-
-export function ConfirmationDialog({
-    title,
-    description,
-    onConfirm,
-    children,
-    confirmText,
-    cancelText,
-}: {
-    title: string;
-    description: string;
-    onConfirm: () => void;
-    confirmText?: string;
-    cancelText?: string;
-    children: React.ReactNode;
-}) {
-    const [open, setOpen] = useState(false);
-    return (
-        <AlertDialog open={open} onOpenChange={setOpen}>
-            <AlertDialogTrigger asChild onClick={() => setOpen(true)}>
-                {children}
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-                <AlertDialogHeader>
-                    <AlertDialogTitle>{title}</AlertDialogTitle>
-                    <AlertDialogDescription>{description}</AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                    <AlertDialogCancel onClick={() => setOpen(false)}>
-                        {cancelText ?? <Trans>Cancel</Trans>}
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                        type="button"
-                        onClick={() => {
-                            onConfirm();
-                            setOpen(false);
-                        }}
-                    >
-                        {confirmText ?? <Trans>Continue</Trans>}
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
-    );
-}
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog.js';
+import { Trans } from '@/lib/trans.js';
+import { useState } from 'react';
+
+export function ConfirmationDialog({
+    title,
+    description,
+    onConfirm,
+    children,
+    confirmText,
+    cancelText,
+}: {
+    title: string;
+    description: string;
+    onConfirm: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    children: React.ReactNode;
+}) {
+    const [open, setOpen] = useState(false);
+    return (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+            <AlertDialogTrigger asChild onClick={() => setOpen(true)}>
+                {children}
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription>{description}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={() => setOpen(false)}>
+                        {cancelText ?? <Trans>Cancel</Trans>}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        type="button"
+                        onClick={() => {
+                            onConfirm();
+                            setOpen(false);
+                        }}
+                    >
+                        {confirmText ?? <Trans>Continue</Trans>}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

package/src/lib/components/shared/copyable-text.tsx

@@ -1,31 +1,31 @@
-import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { CopyIcon } from 'lucide-react';
-import { useState } from 'react';
-import { CheckIcon } from 'lucide-react';
-
-export function CopyableText({ text }: { text: string }) {
-    const [copiedId, setCopiedId] = useState<string | null>(null);
-    const [, copy] = useCopyToClipboard();
-
-    const handleCopy = async (text: string, id: string) => {
-        await copy(text);
-        setCopiedId(id);
-        setTimeout(() => setCopiedId(null), 2000);
-    };
-
-    return (
-        <div className="flex items-center gap-2">
-            <div className="font-mono text-sm">{text}</div>
-            <button
-                onClick={() => handleCopy(text, 'page')}
-                className="p-1 hover:bg-muted rounded-md transition-colors"
-            >
-                {copiedId === 'page' ? (
-                    <CheckIcon className="h-4 w-4 text-green-500" />
-                ) : (
-                    <CopyIcon className="h-4 w-4" />
-                )}
-            </button>
-        </div>
-    );
-}
+import { useCopyToClipboard } from '@uidotdev/usehooks';
+import { CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { CheckIcon } from 'lucide-react';
+
+export function CopyableText({ text }: { text: string }) {
+    const [copiedId, setCopiedId] = useState<string | null>(null);
+    const [, copy] = useCopyToClipboard();
+
+    const handleCopy = async (text: string, id: string) => {
+        await copy(text);
+        setCopiedId(id);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <div className="font-mono text-sm">{text}</div>
+            <button
+                onClick={() => handleCopy(text, 'page')}
+                className="p-1 hover:bg-muted rounded-md transition-colors"
+            >
+                {copiedId === 'page' ? (
+                    <CheckIcon className="h-4 w-4 text-green-500" />
+                ) : (
+                    <CopyIcon className="h-4 w-4" />
+                )}
+            </button>
+        </div>
+    );
+}

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

@@ -1,105 +1,105 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, 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 { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { Plus, Search } from 'lucide-react';
-import { useState } from 'react';
-
-const countryListDocument = graphql(`
-    query CountryList($options: CountryListOptions) {
-        countries(options: $options) {
-            items {
-                id
-                name
-                code
-            }
-            totalItems
-        }
-    }
-`);
-
-export interface Country {
-    id: string;
-    name: string;
-    code: string;
-}
-
-export interface CountrySelectorProps {
-    onSelect: (value: Country) => void;
-    label?: string | React.ReactNode;
-    readOnly?: boolean;
-}
-
-export function CountrySelector(props: CountrySelectorProps) {
-    const [open, setOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const { data, isLoading } = useQuery({
-        queryKey: ['countries', searchTerm],
-        queryFn: () =>
-            api.query(countryListDocument, {
-                options: {
-                    sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                        code: { contains: searchTerm },
-                    } : undefined,
-                    filterOperator: searchTerm ? 'OR' : undefined,
-                },
-            }),
-        staleTime: 1000 * 60 * 60, // 1 hour
-    });
-
-    const handleSearch = (value: string) => {
-        setSearchTerm(value);
-    };
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
-                    <Plus className="h-4 w-4" />
-                    {props.label ?? <Trans>Select country</Trans>}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0 w-[350px]" align="start">
-                <Command shouldFilter={false}>
-                    <div className="flex items-center border-b px-3">
-                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                        <CommandInput 
-                            placeholder="Search countries..." 
-                            onValueChange={handleSearch}
-                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
-                        />
-                    </div>
-                    <CommandList>
-                        <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No countries found</Trans>
-                            )}
-                        </CommandEmpty>
-                        {data?.countries.items.map(country => (
-                            <CommandItem
-                                key={country.id}
-                                onSelect={() => {
-                                    props.onSelect(country);
-                                    setOpen(false);
-                                }}
-                                className="flex flex-col items-start"
-                            >
-                                <div className="font-medium">{country.name}</div>
-                                <div className="text-sm text-muted-foreground">{country.code}</div>
-                            </CommandItem>
-                        ))}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
-
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, 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 { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const countryListDocument = graphql(`
+    query CountryList($options: CountryListOptions) {
+        countries(options: $options) {
+            items {
+                id
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Country {
+    id: string;
+    name: string;
+    code: string;
+}
+
+export interface CountrySelectorProps {
+    onSelect: (value: Country) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function CountrySelector(props: CountrySelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['countries', searchTerm],
+        queryFn: () =>
+            api.query(countryListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm ? {
+                        name: { contains: searchTerm },
+                        code: { contains: searchTerm },
+                    } : undefined,
+                    filterOperator: searchTerm ? 'OR' : undefined,
+                },
+            }),
+        staleTime: 1000 * 60 * 60, // 1 hour
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {props.label ?? <Trans>Select country</Trans>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                        <CommandInput 
+                            placeholder="Search countries..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No countries found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.countries.items.map(country => (
+                            <CommandItem
+                                key={country.id}
+                                onSelect={() => {
+                                    props.onSelect(country);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{country.name}</div>
+                                <div className="text-sm text-muted-foreground">{country.code}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}
+

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

@@ -1,33 +1,33 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { CurrencyCode } from '@/constants.js';
-import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
-
-export interface CurrencySelectorProps<T extends boolean> {    
-    value: T extends true ? string[] : string;
-    onChange: (value: T extends true ? string[] : string) => void;
-    multiple?: T;
-    availableCurrencyCodes?: string[];
-}
-
-export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps<T>) {
-    const { formatCurrencyName } = useLocalFormat();
-    const { value, onChange, multiple, availableCurrencyCodes } = props;
-    const { i18n } = useLingui();
-
-    const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
-        value: currencyCode,
-        label: formatCurrencyName(currencyCode)
-    }));
-
-    return (
-        <MultiSelect
-            value={value}
-            onChange={onChange}
-            multiple={multiple}
-            items={items}
-            placeholder={i18n.t('Select a currency')}
-            searchPlaceholder={i18n.t('Search currencies...')}
-        />
-    );
-}
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { CurrencyCode } from '@/constants.js';
+import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
+
+export interface CurrencySelectorProps<T extends boolean> {    
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    availableCurrencyCodes?: string[];
+}
+
+export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps<T>) {
+    const { formatCurrencyName } = useLocalFormat();
+    const { value, onChange, multiple, availableCurrencyCodes } = props;
+    const { i18n } = useLingui();
+
+    const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
+        value: currencyCode,
+        label: formatCurrencyName(currencyCode)
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a currency')}
+            searchPlaceholder={i18n.t('Search currencies...')}
+        />
+    );
+}

package/src/lib/components/shared/custom-fields-form.tsx

@@ -1,86 +1,86 @@
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { Control, ControllerRenderProps } from 'react-hook-form';
-import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Switch } from '../ui/switch.js';
-import { CustomFieldType } from '@vendure/common/lib/shared-types';
-import { TranslatableFormField } from './translatable-form-field.js';
-import { customFieldConfigFragment } from '@/providers/server-config.js';
-import { ResultOf } from 'gql.tada';
-
-type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
-
-interface CustomFieldsFormProps {
-    entityType: string;
-    control: Control<any, any>;
-}
-
-export function CustomFieldsForm({ entityType, control }: CustomFieldsFormProps) {
-    const {
-        settings: { displayLanguage },
-    } = useUserSettings();
-    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
-        return input?.find(t => t.languageCode === displayLanguage)?.value;
-    }
-    const customFields = useCustomFieldConfig(entityType);
-    return (
-        <div className="grid grid-cols-2 gap-4">
-            {customFields?.map(fieldDef => (
-                <div key={fieldDef.name}>
-                    {fieldDef.type === 'localeString' || fieldDef.type === 'localeText' ? (
-                        <TranslatableFormField
-                            control={control}
-                            name={`customFields.${fieldDef.name}`}
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                                    <FormControl>
-                                        {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
-                                    </FormControl>
-                                </FormItem>
-                            )}
-                        />
-                    ) : (
-                        <FormField
-                            control={control}
-                            name={`customFields.${fieldDef.name}`}
-                            render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                                <FormControl>
-                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
-                                </FormControl>
-                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
-                                <FormMessage />
-                            </FormItem>
-                            )}
-                        />
-                    )}
-                </div>
-            ))}
-        </div>
-    );
-}
-
-function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
-    switch (fieldDef.type as CustomFieldType) {    
-        case 'string':
-            return <Input {...field} />;
-        case 'float':
-        case 'int':
-            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
-        case 'boolean':
-            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
-        default:
-            return <Input {...field} />
-    }
-}
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
+import { Control, ControllerRenderProps } from 'react-hook-form';
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Switch } from '../ui/switch.js';
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
+import { TranslatableFormField } from './translatable-form-field.js';
+import { customFieldConfigFragment } from '@/providers/server-config.js';
+import { ResultOf } from 'gql.tada';
+
+type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
+
+interface CustomFieldsFormProps {
+    entityType: string;
+    control: Control<any, any>;
+}
+
+export function CustomFieldsForm({ entityType, control }: CustomFieldsFormProps) {
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
+    }
+    const customFields = useCustomFieldConfig(entityType);
+    return (
+        <div className="grid grid-cols-2 gap-4">
+            {customFields?.map(fieldDef => (
+                <div key={fieldDef.name}>
+                    {fieldDef.type === 'localeString' || fieldDef.type === 'localeText' ? (
+                        <TranslatableFormField
+                            control={control}
+                            name={`customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                    <FormControl>
+                                        {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    ) : (
+                        <FormField
+                            control={control}
+                            name={`customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                <FormControl>
+                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                </FormControl>
+                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                            )}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
+    switch (fieldDef.type as CustomFieldType) {    
+        case 'string':
+            return <Input {...field} />;
+        case 'float':
+        case 'int':
+            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
+        case 'boolean':
+            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
+        default:
+            return <Input {...field} />
+    }
+}