@vendure/dashboard 3.2.0

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

@@ -0,0 +1,107 @@
+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 sellerListDocument = graphql(`
+    query SellerList($options: SellerListOptions) {
+        sellers(options: $options) {
+            items {
+                id
+                name
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Seller {
+    id: string;
+    name: string;
+}
+
+export interface SellerSelectorProps {
+    value?: string | null;
+    onChange: (value: string) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function SellerSelector(props: SellerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['sellerList', searchTerm],
+        queryFn: () =>
+            api.query(sellerListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm ? {
+                        name: { contains: searchTerm },
+                    } : undefined,  
+                },
+            }),
+        staleTime: 1000 * 60, // 1 minute
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    const selectedSeller = data?.sellers.items.find(seller => seller.id === props.value);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    {selectedSeller ? (
+                        <span className="flex-1 text-left">{selectedSeller.name}</span>
+                    ) : (
+                        <>
+                            <Plus className="h-4 w-4" />
+                            {props.label ?? <Trans>Select seller</Trans>}
+                        </>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <CommandInput 
+                            placeholder="Search sellers..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No sellers found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.sellers.items.map(seller => (
+                            <CommandItem
+                                key={seller.id}
+                                onSelect={() => {
+                                    props.onChange(seller.id);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{seller.name}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/tax-category-selector.tsx

@@ -0,0 +1,65 @@
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select.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 { Skeleton } from '../ui/skeleton.js';
+
+const taxCategoriesDocument = graphql(`
+    query TaxCategories($options: TaxCategoryListOptions) {
+        taxCategories(options: $options) {
+            items {
+                id
+                name
+                isDefault
+            }
+        }
+    }
+`);
+
+export interface TaxCategorySelectorProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+
+export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
+    const { data, isLoading, isPending, status } = useQuery({
+        queryKey: ['taxCategories'],
+        staleTime: 1000 * 60 * 5,
+        queryFn: () =>
+            api.query(taxCategoriesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+    });
+    if (isLoading || isPending) {
+        return <Skeleton className="h-10 w-full" />;
+    }
+
+    return (
+        <Select value={value} onValueChange={value => value && onChange(value)}>
+            <SelectTrigger>
+                <SelectValue placeholder={<Trans>Select a tax category</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {data && (
+                    <SelectGroup>
+                        {data?.taxCategories.items.map(taxCategory => (
+                            <SelectItem key={taxCategory.id} value={taxCategory.id}>
+                                {taxCategory.name}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}

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

@@ -0,0 +1,74 @@
+import { Controller } from 'react-hook-form';
+import { FieldPath } from 'react-hook-form';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { ControllerProps } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldWrapper } from './form-field-wrapper.js';
+import { FormMessage } from '../ui/form.js';
+import { FormControl } from '../ui/form.js';
+import { FormItem } from '../ui/form.js';
+import { FormDescription, FormField, FormLabel } from '../ui/form.js';
+
+export type TranslatableEntity = FieldValues & {
+    translations?: Array<{ languageCode: string }> | null;
+};
+
+export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity | TranslatableEntity[]> = Omit<
+    ControllerProps<TFieldValues>,
+    'name'
+> & {
+    name: TFieldValues extends TranslatableEntity
+        ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
+        : TFieldValues extends TranslatableEntity[]
+          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
+          : never;
+};
+
+export const TranslatableFormField = <
+    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
+>({
+    name,
+    ...props
+}: TranslatableFormFieldProps<TFieldValues>) => {
+    const { contentLanguage } = useUserSettings().settings;
+    const formValues = props.control?._formValues;
+    const translations = Array.isArray(formValues) ? formValues?.[0].translations : formValues?.translations;
+    const index = translations?.findIndex(
+        (translation: any) => translation?.languageCode === contentLanguage,
+    );
+    if (index === undefined || index === -1) {
+        return null;
+    }
+    const translationName = `translations.${index}.${String(name)}` as FieldPath<TFieldValues>;
+    return <Controller {...props} name={translationName} key={translationName} />;
+};
+
+export type TranslatableFormFieldWrapperProps<
+    TFieldValues extends TranslatableEntity | TranslatableEntity[],
+> = TranslatableFormFieldProps<TFieldValues> &
+    Omit<React.ComponentProps<typeof FormFieldWrapper<TFieldValues>>, 'name'>;
+
+export const TranslatableFormFieldWrapper = <
+    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
+>({
+    name,
+    label,
+    description,
+    render,
+    ...props
+}: TranslatableFormFieldWrapperProps<TFieldValues>) => {
+    return (
+        <TranslatableFormField
+            control={props.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/vendure-image.tsx

@@ -0,0 +1,159 @@
+import { cn } from '@/lib/utils.js';
+import { Image } from 'lucide-react';
+import React from 'react';
+
+export interface AssetLike {
+    id: string;
+    preview: string; // Base URL of the asset
+    name?: string | null;
+    focalPoint?: { x: number; y: number } | null;
+}
+
+export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | null;
+export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | null;
+export type ImageMode = 'crop' | 'resize' | null;
+
+export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    asset: AssetLike | null | undefined;
+    preset?: ImagePreset;
+    mode?: ImageMode;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    useFocalPoint?: boolean; // Whether to use the asset's focal point in crop mode
+    fallback?: React.ReactNode; // What to show if no asset is provided
+    ref?: React.Ref<HTMLImageElement>;
+}
+
+export function VendureImage({
+    asset,
+    preset = null,
+    mode = null,
+    width,
+    height,
+    format = null,
+    quality,
+    useFocalPoint = true,
+    fallback = null,
+    alt,
+    className,
+    style,
+    ref,
+    ...imgProps
+}: VendureImageProps) {
+    if (!asset) {
+        return fallback ? <>{fallback}</> : <PlaceholderImage preset={preset} width={width} height={height} className={className} />;
+    }
+
+    // Build the URL with query parameters
+    const url = new URL(asset.preview);
+
+    // Handle preset if specified
+    if (preset) {
+        url.searchParams.set('preset', preset);
+    } else {
+        // Or handle custom dimensions and mode
+        if (width) url.searchParams.set('w', width.toString());
+        if (height) url.searchParams.set('h', height.toString());
+        if (mode) url.searchParams.set('mode', mode);
+    }
+
+    // Add format if specified
+    if (format) {
+        url.searchParams.set('format', format);
+    }
+
+    // Add quality if specified
+    if (quality) {
+        url.searchParams.set('q', quality.toString());
+    }
+
+    // Apply focal point if available and requested
+    if (useFocalPoint && asset.focalPoint && mode === 'crop') {
+        url.searchParams.set('fpx', asset.focalPoint.x.toString());
+        url.searchParams.set('fpy', asset.focalPoint.y.toString());
+    }
+
+    return (
+        <img
+            src={url.toString()}
+            alt={alt || asset.name || ''}
+            className={cn(className, 'rounded-sm')}
+            style={style}
+            loading="lazy"
+            ref={ref}
+            {...imgProps}
+        />
+    );
+}
+
+export function PlaceholderImage({
+    width = 100,
+    height = 100,
+    preset = null,
+    className,
+    ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & { preset?: ImagePreset }) {
+    if (preset) {
+        switch (preset) {
+            case 'tiny':
+                width = 50;
+                height = 50;
+                break;
+            case 'thumb':
+                width = 150;
+                height = 150;
+                break;
+            case 'small':
+                width = 300;
+                height = 300;
+                break;
+            case 'medium':
+                width = 500;
+                height = 500;
+                break;
+            case 'large':
+                width = 800;
+                height = 800;
+                break;
+            default:
+                break;
+        }
+    }
+    return (
+        <div className={cn(className, 'rounded-sm bg-muted')} style={{ width, height }} {...props}>
+            <Image className="w-full h-full text-muted-foreground" />
+        </div>
+    );
+}
+
+// Convenience components for common use cases
+export function Thumbnail({
+    asset,
+    size = 'thumb',
+    ...props
+}: Omit<VendureImageProps, 'preset'> & { size?: ImagePreset }) {
+    return <VendureImage asset={asset} preset={size} {...props} />;
+}
+
+export function CroppedImage({ asset, width, height, ...props }: Omit<VendureImageProps, 'mode'>) {
+    return <VendureImage asset={asset} mode="crop" width={width} height={height} {...props} />;
+}
+
+export function ResponsiveImage({
+    asset,
+    sizes = '100vw',
+    ...props
+}: VendureImageProps & { sizes?: string }) {
+    // Setup srcset with multiple sizes
+    const srcSet = [
+        `${asset?.preview}?w=320&mode=resize 320w`,
+        `${asset?.preview}?w=480&mode=resize 480w`,
+        `${asset?.preview}?w=640&mode=resize 640w`,
+        `${asset?.preview}?w=1024&mode=resize 1024w`,
+        `${asset?.preview}?w=1280&mode=resize 1280w`,
+    ].join(', ');
+
+    return <VendureImage asset={asset} srcSet={srcSet} sizes={sizes} {...props} />;
+}

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

@@ -0,0 +1,66 @@
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select.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 { Skeleton } from '../ui/skeleton.js';
+
+const zonesDocument = graphql(`
+    query Zones($options: ZoneListOptions) {
+        zones(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+export interface ZoneSelectorProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+
+export function ZoneSelector({ value, onChange }: ZoneSelectorProps) {
+    const { data, isLoading, isPending } = useQuery({
+        queryKey: ['zones'],
+        staleTime: 1000 * 60 * 5,
+        queryFn: () =>
+            api.query(zonesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+    });
+
+    if (isLoading || isPending) {
+        return <Skeleton className="h-10 w-full" />;
+    }
+
+    return (
+        <Select value={value} onValueChange={value => value && onChange(value)}>
+            <SelectTrigger>
+                <SelectValue placeholder={<Trans>Select a zone</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {data && (
+                    <SelectGroup>
+                        {data?.zones.items.map(zone => (
+                            <SelectItem key={zone.id} value={zone.id}>
+                                {zone.name}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}
+

package/src/lib/components/ui/accordion.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+    return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn('border-b last:border-b-0', className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionTrigger({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+function AccordionContent({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            {...props}
+        >
+            <div className={cn('pt-0 pb-4', className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/lib/components/ui/alert-dialog.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils.js';
+import { buttonVariants } from '@/components/ui/button.js';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+    return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+    return (
+        <AlertDialogPrimitive.Overlay
+            data-slot="alert-dialog-overlay"
+            className={cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogContent({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Content
+                data-slot="alert-dialog-content"
+                className={cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-header"
+            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-footer"
+            className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot="alert-dialog-title"
+            className={cn('text-lg font-semibold', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot="alert-dialog-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogAction({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+    return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+    return (
+        <AlertDialogPrimitive.Cancel
+            className={cn(buttonVariants({ variant: 'outline' }), className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    AlertDialog,
+    AlertDialogPortal,
+    AlertDialogOverlay,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogAction,
+    AlertDialogCancel,
+};