@vendure/dashboard 3.2.0

package/src/lib/components/shared/asset-preview.tsx

@@ -0,0 +1,345 @@
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardHeader } from '@/components/ui/card.js';
+import { FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { AssetFragment } from '@/graphql/fragments.js';
+import { cn, formatFileSize } from '@/lib/utils.js';
+import { ChevronLeft, ChevronRight, Crosshair, Edit, ExternalLink, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { FocalPointControl } from './focal-point-control.js';
+
+export type PreviewPreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | '';
+
+interface Point {
+    x: number;
+    y: number;
+}
+
+export type AssetWithTags = AssetFragment & { tags?: { value: string }[] };
+
+interface AssetPreviewProps {
+    asset: AssetWithTags;
+    assets?: AssetWithTags[];
+    editable?: boolean;
+    customFields?: any[];
+    onAssetChange?: (asset: Partial<AssetWithTags>) => void;
+    onEditClick?: () => void;
+}
+
+export function AssetPreview({
+    asset,
+    assets,
+    editable = false,
+    customFields = [],
+    onAssetChange,
+    onEditClick,
+}: AssetPreviewProps) {
+    const [size, setSize] = useState<PreviewPreset>('medium');
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const [centered, setCentered] = useState(true);
+    const [settingFocalPoint, setSettingFocalPoint] = useState(false);
+    const [lastFocalPoint, setLastFocalPoint] = useState<Point>();
+    const [assetIndex, setAssetIndex] = useState(assets?.indexOf(asset) || 0);
+
+    const imageRef = useRef<HTMLImageElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const sizePriorToFocalPoint = useRef<PreviewPreset>('medium');
+
+    const form = useForm({
+        defaultValues: {
+            name: asset.name,
+            tags: asset.tags?.map(t => t.value) || [],
+        },
+    });
+    const activeAsset = assets?.[assetIndex] ?? asset;
+
+    useEffect(() => {
+        if (assets?.length) {
+            const index = assets.findIndex(a => a.id === asset.id);
+            setAssetIndex(index === -1 ? 0 : index);
+        }
+    }, [assets, asset.id]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            updateDimensions();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const updateDimensions = () => {
+        if (!imageRef.current || !containerRef.current) return;
+
+        const img = imageRef.current;
+        const container = containerRef.current;
+        const imgWidth = img.naturalWidth;
+        const imgHeight = img.naturalHeight;
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+
+        if (settingFocalPoint) {
+            const controlsMarginPx = 48 * 2;
+            const availableHeight = containerHeight - controlsMarginPx;
+            const availableWidth = containerWidth;
+            const hRatio = imgHeight / availableHeight;
+            const wRatio = imgWidth / availableWidth;
+
+            if (1 < hRatio || 1 < wRatio) {
+                const factor = hRatio < wRatio ? wRatio : hRatio;
+                setWidth(Math.round(imgWidth / factor));
+                setHeight(Math.round(imgHeight / factor));
+                setCentered(true);
+                return;
+            }
+        }
+
+        setWidth(imgWidth);
+        setHeight(imgHeight);
+        setCentered(imgWidth <= containerWidth && imgHeight <= containerHeight);
+    };
+
+    const handleFocalPointStart = () => {
+        sizePriorToFocalPoint.current = size;
+        setSize('medium');
+        setSettingFocalPoint(true);
+        setLastFocalPoint(asset.focalPoint || { x: 0.5, y: 0.5 });
+        updateDimensions();
+    };
+
+    const handleFocalPointChange = (point: Point) => {
+        setLastFocalPoint(point);
+    };
+
+    const handleFocalPointCancel = () => {
+        setSettingFocalPoint(false);
+        setLastFocalPoint(undefined);
+        setSize(sizePriorToFocalPoint.current);
+    };
+
+    const handleFocalPointSet = async () => {
+        if (!lastFocalPoint) return;
+
+        try {
+            // TODO: Implement API call to update focal point
+            await onAssetChange?.({
+                id: asset.id,
+                focalPoint: lastFocalPoint,
+            });
+            setSettingFocalPoint(false);
+            setSize(sizePriorToFocalPoint.current);
+            // Show success toast
+        } catch (err) {
+            // Show error toast
+        }
+    };
+
+    const handleRemoveFocalPoint = async () => {
+        try {
+            // TODO: Implement API call to remove focal point
+            await onAssetChange?.({
+                id: asset.id,
+                focalPoint: null,
+            });
+            // Show success toast
+        } catch (err) {
+            // Show error toast
+        }
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-4 h-full">
+            <div className="space-y-4">
+                <Card>
+                    <CardContent className="space-y-4 pt-6">
+                        {!editable && onEditClick && (
+                            <Button variant="ghost" className="w-full justify-start" onClick={onEditClick}>
+                                <Edit className="mr-2 h-4 w-4" />
+                                Edit
+                                <ChevronRight className="ml-auto h-4 w-4" />
+                            </Button>
+                        )}
+
+                        {editable ? (
+                            <FormField
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Name</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        ) : (
+                            <div>
+                                <Label>Name</Label>
+                                <p className="truncate text-sm text-muted-foreground">{activeAsset.name}</p>
+                            </div>
+                        )}
+
+                        <div>
+                            <Label>Source File</Label>
+                            <a
+                                href={activeAsset.source}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sm text-primary hover:underline flex items-center"
+                            >
+                                {activeAsset.source.split('/').pop()}
+                                <ExternalLink className="ml-1 h-3 w-3" />
+                            </a>
+                        </div>
+
+                        <div>
+                            <Label>File Size</Label>
+                            <p className="text-sm text-muted-foreground">
+                                {formatFileSize(activeAsset.fileSize)}
+                            </p>
+                        </div>
+
+                        <div>
+                            <Label>Dimensions</Label>
+                            <p className="text-sm text-muted-foreground">
+                                {activeAsset.width} x {activeAsset.height}
+                            </p>
+                        </div>
+
+                        <div>
+                            <Label>Focal Point</Label>
+                            <div className="space-y-2">
+                                <p className="text-sm text-muted-foreground">
+                                    {activeAsset.focalPoint ? (
+                                        <span className="flex items-center">
+                                            <Crosshair className="mr-1 h-4 w-4" />
+                                            x: {activeAsset.focalPoint.x.toFixed(2)}, y:{' '}
+                                            {activeAsset.focalPoint.y.toFixed(2)}
+                                        </span>
+                                    ) : (
+                                        'Not set'
+                                    )}
+                                </p>
+                                <div className="flex gap-2">
+                                    <Button
+                                        variant="secondary"
+                                        size="sm"
+                                        disabled={settingFocalPoint}
+                                        onClick={handleFocalPointStart}
+                                    >
+                                        {activeAsset.focalPoint ? 'Update' : 'Set'} Focal Point
+                                    </Button>
+                                    {activeAsset.focalPoint && (
+                                        <Button
+                                            variant="secondary"
+                                            size="sm"
+                                            disabled={settingFocalPoint}
+                                            onClick={handleRemoveFocalPoint}
+                                        >
+                                            Remove
+                                        </Button>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>Preview Options</CardHeader>
+                    <CardContent className="space-y-4">
+                        <Select value={size} onValueChange={value => setSize(value as PreviewPreset)}>
+                            <SelectTrigger>
+                                <SelectValue placeholder="Select size" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="tiny">Tiny</SelectItem>
+                                <SelectItem value="thumb">Thumb</SelectItem>
+                                <SelectItem value="small">Small</SelectItem>
+                                <SelectItem value="medium">Medium</SelectItem>
+                                <SelectItem value="large">Large</SelectItem>
+                                <SelectItem value="full">Full Size</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <p className="text-sm text-muted-foreground">
+                            {width} x {height}
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <div className="relative flex items-center justify-center bg-muted/30 rounded-lg">
+                {assets && assets.length > 1 && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute left-4 z-10"
+                            onClick={() => setAssetIndex(i => i - 1)}
+                            disabled={assetIndex === 0}
+                        >
+                            <ChevronLeft className="h-4 w-4" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-4 z-10"
+                            onClick={() => setAssetIndex(i => i + 1)}
+                            disabled={assetIndex === assets.length - 1}
+                        >
+                            <ChevronRight className="h-4 w-4" />
+                        </Button>
+                    </>
+                )}
+
+                <div
+                    ref={containerRef}
+                    className={cn(
+                        'relative',
+                        centered && 'flex items-center justify-center',
+                        settingFocalPoint && 'cursor-crosshair',
+                    )}
+                >
+                    <div className="relative" style={{ width: `${width}px`, height: `${height}px` }}>
+                        <VendureImage
+                            ref={imageRef}
+                            asset={activeAsset}
+                            preset={size || undefined}
+                            mode="resize"
+                            onLoad={updateDimensions}
+                            className="max-w-full max-h-full object-contain"
+                        />
+                        {settingFocalPoint && lastFocalPoint && (
+                            <FocalPointControl
+                                width={width}
+                                height={height}
+                                point={lastFocalPoint}
+                                onChange={handleFocalPointChange}
+                            />
+                        )}
+                    </div>
+
+                    {settingFocalPoint && (
+                        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+                            <Button variant="secondary" onClick={handleFocalPointCancel}>
+                                <X className="mr-2 h-4 w-4" />
+                                Cancel
+                            </Button>
+                            <Button onClick={handleFocalPointSet}>
+                                <Crosshair className="mr-2 h-4 w-4" />
+                                Set Focal Point
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { FacetValueChip } from './facet-value-chip.js';
+import { FacetValueSelector } from './facet-value-selector.js';
+
+// Interface for facet value type
+interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: {
+        id: string;
+        name: string;
+        code: string;
+    };
+}
+
+interface AssignedFacetValuesProps {
+    value?: string[] | null;
+    facetValues: FacetValue[];
+    canUpdate?: boolean;
+    onBlur?: () => void;
+    onChange?: (value: string[]) => void;
+}
+
+export function AssignedFacetValues({
+    value = [],
+    facetValues,
+    canUpdate = true,
+    onBlur,
+    onChange,
+}: AssignedFacetValuesProps) {
+    const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
+    
+    function onSelectHandler(facetValue: FacetValue) {
+        setKnownFacetValues(prev => [...prev, facetValue]);
+        onChange?.([...new Set([...(value ?? []), facetValue.id])]);
+    }
+    
+    function onRemoveHandler(id: string) {
+        onChange?.(value?.filter(fvId => fvId !== id) ?? []);
+    }
+
+    return (
+        <>
+            <div className="flex flex-wrap">
+                {(value ?? []).map(id => {
+                    const facetValue = knownFacetValues.find(fv => fv.id === id);
+                    if (!facetValue) return null;
+                    return (
+                        <div className="mb-2 mr-1">
+                        <FacetValueChip
+                            key={facetValue.id}
+                            facetValue={facetValue}
+                            removable={canUpdate}
+                            onRemove={onRemoveHandler}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+            {canUpdate && (
+                <FacetValueSelector
+                    onValueSelect={onSelectHandler}
+                />
+            )}
+        </>
+    );
+}

package/src/lib/components/shared/channel-code-label.tsx

@@ -0,0 +1,7 @@
+import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
+import { Trans } from '@/lib/trans.js';
+
+export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
+    return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
+}
+

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

@@ -0,0 +1,51 @@
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { MultiSelect } from './multi-select.js';
+import { ChannelCodeLabel } from './channel-code-label.js';
+
+const channelsDocument = graphql(`
+    query channels($options: ChannelListOptions) {
+        channels(options: $options) {
+            items {
+                id
+                code
+            }
+        }
+    }
+`);
+
+export interface ChannelSelectorProps<T extends boolean> {    
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+}
+
+export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T>) {
+    const { value, onChange, multiple } = props;
+    const { i18n } = useLingui();
+
+    const { data: channelsData } = useQuery({
+        queryKey: ['channels'],
+        queryFn: () => api.query(channelsDocument, {}),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const items = (channelsData?.channels.items ?? []).map(channel => ({
+        value: channel.id,
+        label: channel.code,
+        display: <ChannelCodeLabel code={channel.code} />
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a channel')}
+            searchPlaceholder={i18n.t('Search channels...')}
+        />
+    );
+}

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -0,0 +1,51 @@
+import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
+import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { ConfigArgType } from '@vendure/core';
+import { FacetValueInput } from '../data-input/facet-value-input.js';
+
+export interface ConfigurableOperationArgInputProps {
+    definition: ConfigurableOperationDefFragment['args'][number];
+    readOnly?: boolean;
+    value: string;
+    onChange: (value: any) => void;
+}
+
+export function ConfigurableOperationArgInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: ConfigurableOperationArgInputProps) {
+    if ((definition.ui as any)?.component === 'facet-value-form-input') {
+        return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
+    }
+    switch (definition.type as ConfigArgType) {
+        case 'boolean':
+            return (
+                <InputComponent
+                    id="vendure:checkboxInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+        case 'string':
+            return (
+                <InputComponent
+                    id="vendure:textInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+        default:
+            return (
+                <InputComponent
+                    id="vendure:textInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+    }
+}

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -0,0 +1,133 @@
+import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
+import { useForm } from 'react-hook-form';
+import * as React from 'react';
+import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
+import { Input } from '../ui/input.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
+import { Button } from '../ui/button.js';
+import { Trash } from 'lucide-react';
+
+export interface ConfigurableOperationInputProps {
+    operationDefinition: ConfigurableOperationDefFragment;
+    readonly?: boolean;
+    removable?: boolean;
+    position?: number;
+    hideDescription?: boolean;
+    value: ConfigurableOperationInputType;
+    onChange: (val: ConfigurableOperationInputType) => void;
+    onRemove?: () => void;
+}
+
+export function ConfigurableOperationInput({
+    operationDefinition,
+    readonly,
+    removable,
+    position,
+    hideDescription,
+    value,
+    onChange,
+    onRemove,
+}: ConfigurableOperationInputProps) {
+    const form = useForm({
+        defaultValues: {
+            ...value,
+        },
+    });
+
+    const handleInputChange = (name: string, inputValue: string) => {
+        const argIndex = value.arguments.findIndex(arg => arg.name === name);
+        const stringValue = inputValue.toString();
+        let updatedArgs: ConfigurableOperationInputType['arguments'];
+        if (argIndex === -1) {
+            updatedArgs = [...value.arguments, { name, value: stringValue }];
+        } else {
+            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
+        }
+        const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
+        onChange(newVal);
+    };
+
+
+    return (
+        <Form {...form}>
+            <div className="space-y-4">
+                <div className="flex flex-row justify-between">
+                    {!hideDescription && (
+                        <div className="font-medium">
+                            {' '}
+                            {interpolateDescription(operationDefinition, value.arguments)}
+                        </div>
+                    )}
+                    {removable !== false && (
+                        <Button variant="outline" size="icon" onClick={onRemove}>
+                            <Trash />
+                        </Button>
+                    )}
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                    {operationDefinition.args.map(arg => {
+                        const argValue = value.arguments.find(a => a.name === arg.name)?.value || '';
+                        return (
+                            <FormField
+                                key={arg.name}
+                                name={`args.${arg.name}`}
+                                render={() => (
+                                <FormItem>
+                                    <FormLabel>{arg.label || arg.name}</FormLabel>
+                                    <FormControl>
+                                        <ConfigurableOperationArgInput
+                                            definition={arg}
+                                            value={argValue}
+                                            onChange={value => handleInputChange(arg.name, value)}
+                                        />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        </Form>
+    );
+}
+
+/**
+ * Interpolates the description of an ConfigurableOperation with the given values.
+ */
+export function interpolateDescription(
+    operation: any,
+    values: Array<{ name: string; value: string }>,
+    precisionFactor = 2,
+): string {
+    if (!operation) {
+        return '';
+    }
+    const templateString = operation.description;
+    const interpolated = templateString.replace(
+        /{\s*([a-zA-Z0-9]+)\s*}/gi,
+        (substring: string, argName: string) => {
+            const normalizedArgName = argName.toLowerCase();
+            const value = values.find(v => v.name === normalizedArgName)?.value;
+            if (value == null) {
+                return '_';
+            }
+            let formatted = value;
+            const argDef = operation.args.find((arg: any) => arg.name === normalizedArgName);
+            if (
+                argDef &&
+                argDef.type === 'int' &&
+                argDef.ui &&
+                argDef.ui.component === 'currency-form-input'
+            ) {
+                formatted = (Number(value) / Math.pow(10, precisionFactor)).toString();
+            }
+            if (argDef && argDef.type === 'datetime' && (value as any) instanceof Date) {
+                formatted = (value as any).toLocaleDateString();
+            }
+            return formatted;
+        },
+    );
+    return interpolated;
+}