@oronts/vendure-data-hub-plugin 0.1.0

package/dashboard/components/shared/feedback/LoadingState.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent } from '@vendure/dashboard';
+import type { LoadingStateProps } from '../../../types';
+import { LOADING_STATE_TYPE, SKELETON_WIDTHS, ICON_SIZES } from '../../../constants';
+
+// Deterministic skeleton width based on index
+function getSkeletonWidth(index: number): number {
+    return SKELETON_WIDTHS[index % SKELETON_WIDTHS.length];
+}
+
+export function LoadingState({
+    type = LOADING_STATE_TYPE.SPINNER,
+    rows = 3,
+    message = 'Loading...',
+    className = '',
+}: LoadingStateProps) {
+    if (type === LOADING_STATE_TYPE.SPINNER) {
+        return (
+            <div className={`flex items-center justify-center p-8 ${className}`} data-testid="loading-spinner">
+                <Loader2 className={`${ICON_SIZES.XL} animate-spin text-muted-foreground`} />
+                {message && <span className="ml-3 text-muted-foreground">{message}</span>}
+            </div>
+        );
+    }
+
+    if (type === LOADING_STATE_TYPE.TABLE) {
+        // Index as key is acceptable for skeleton placeholders - purely decorative, never reordered
+        return (
+            <div className={`space-y-3 ${className}`} data-testid="loading-table-skeleton">
+                <div className="flex gap-4 border-b pb-2">
+                    {[0, 1, 2, 3].map((colIndex) => (
+                        <div
+                            key={`header-${colIndex}`}
+                            className="h-4 bg-muted rounded animate-pulse"
+                            style={{ width: getSkeletonWidth(colIndex) }}
+                        />
+                    ))}
+                </div>
+                {Array.from({ length: rows }).map((_, rowIndex) => (
+                    <div key={`row-${rowIndex}`} className="flex gap-4 py-2">
+                        {[0, 1, 2, 3].map((colIndex) => (
+                            <div
+                                key={`cell-${colIndex}`}
+                                className="h-4 bg-muted rounded animate-pulse"
+                                style={{ width: getSkeletonWidth((rowIndex + colIndex) % SKELETON_WIDTHS.length) }}
+                            />
+                        ))}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    if (type === LOADING_STATE_TYPE.FORM) {
+        // Index as key is acceptable for skeleton placeholders - purely decorative, never reordered
+        return (
+            <div className={`space-y-4 ${className}`}>
+                {Array.from({ length: rows }).map((_, fieldIndex) => (
+                    <div key={`field-${fieldIndex}`} className="space-y-2">
+                        <div className="h-4 w-24 bg-muted rounded animate-pulse" />
+                        <div className="h-10 bg-muted rounded animate-pulse" />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    if (type === LOADING_STATE_TYPE.CARD) {
+        // Index as key is acceptable for skeleton placeholders - purely decorative, never reordered
+        return (
+            <div className={`grid gap-4 md:grid-cols-2 lg:grid-cols-3 ${className}`}>
+                {Array.from({ length: rows }).map((_, cardIndex) => (
+                    <Card key={`card-${cardIndex}`}>
+                        <CardContent className="p-4 space-y-3">
+                            <div className="h-5 w-3/4 bg-muted rounded animate-pulse" />
+                            <div className="h-4 w-full bg-muted rounded animate-pulse" />
+                            <div className="h-4 w-2/3 bg-muted rounded animate-pulse" />
+                        </CardContent>
+                    </Card>
+                ))}
+            </div>
+        );
+    }
+
+    if (type === LOADING_STATE_TYPE.LIST) {
+        // Index as key is acceptable for skeleton placeholders - purely decorative, never reordered
+        return (
+            <div className={`space-y-2 ${className}`}>
+                {Array.from({ length: rows }).map((_, itemIndex) => (
+                    <div key={`item-${itemIndex}`} className="flex items-center gap-3 p-2">
+                        <div className="h-8 w-8 bg-muted rounded-full animate-pulse" />
+                        <div className="flex-1 space-y-1">
+                            <div className="h-4 w-1/3 bg-muted rounded animate-pulse" />
+                            <div className="h-3 w-2/3 bg-muted rounded animate-pulse" />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    return null;
+}

package/dashboard/components/shared/feedback/ValidationErrorDisplay.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { memo } from 'react';
+import { AlertCircle } from 'lucide-react';
+import type { ValidationErrorDisplayProps } from '../../../types';
+
+export const ValidationErrorDisplay = memo(function ValidationErrorDisplay({
+    errors,
+    show = true,
+    title = 'Please fix the following errors:',
+    className = '',
+}: ValidationErrorDisplayProps) {
+    if (!show || Object.keys(errors).length === 0) return null;
+
+    return (
+        <div className={`mb-4 p-3 rounded-lg border border-destructive/50 bg-destructive/10 ${className}`}>
+            <div className="flex items-start gap-2">
+                <AlertCircle className="w-4 h-4 text-destructive mt-0.5" />
+                <div>
+                    <div className="text-sm font-medium text-destructive mb-1">{title}</div>
+                    <ul className="text-sm text-destructive/90 list-disc pl-4">
+                        {Object.entries(errors).map(([field, error]) => (
+                            <li key={field}>{error}</li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+});

package/dashboard/components/shared/feedback/index.ts

@@ -0,0 +1,4 @@
+export { LoadingState } from './LoadingState';
+export { EmptyState } from './EmptyState';
+export { ErrorState } from './ErrorState';
+export { ValidationErrorDisplay } from './ValidationErrorDisplay';

package/dashboard/components/shared/file-dropzone/FileDropzone.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { useCallback, memo } from 'react';
+import { Button } from '@vendure/dashboard';
+import { Upload, RefreshCw, CheckCircle2, X, File } from 'lucide-react';
+import type { FileType, FileDropzoneProps } from '../../../types';
+import { formatFileSize } from '../../../utils';
+import { DROPZONE_DIMENSIONS, ICON_SIZES, buildAcceptString } from '../../../constants';
+import { useOptionValues } from '../../../hooks/api/use-config-options';
+import { resolveIconName } from '../../../utils/icon-resolver';
+
+function FileDropzoneComponent({
+    onFileSelect,
+    allowedTypes,
+    accept,
+    loading = false,
+    loadingMessage = 'Parsing file...',
+    selectedFile,
+    onClear,
+    showFileIcons = true,
+    compact = false,
+    className = '',
+}: FileDropzoneProps) {
+    const [dragOver, setDragOver] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const { options: fileFormatOptions } = useOptionValues('fileFormats');
+
+    const handleDrop = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files[0];
+        if (file) onFileSelect(file);
+    }, [onFileSelect]);
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) onFileSelect(file);
+    }, [onFileSelect]);
+
+    const handleClick = useCallback(() => {
+        if (!selectedFile) {
+            inputRef.current?.click();
+        }
+    }, [selectedFile]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if ((e.key === 'Enter' || e.key === ' ') && !selectedFile) {
+            e.preventDefault();
+            inputRef.current?.click();
+        }
+    }, [selectedFile]);
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        setDragOver(true);
+    }, []);
+
+    const handleDragLeave = useCallback(() => {
+        setDragOver(false);
+    }, []);
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClear?.();
+    }, [onClear]);
+
+    const handleBrowseClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        inputRef.current?.click();
+    }, []);
+
+    const acceptString = accept || buildAcceptString(allowedTypes);
+    const padding = compact ? DROPZONE_DIMENSIONS.PADDING_COMPACT : DROPZONE_DIMENSIONS.PADDING_DEFAULT;
+    const iconSize = compact ? DROPZONE_DIMENSIONS.ICON_COMPACT : DROPZONE_DIMENSIONS.ICON_DEFAULT;
+    const fileIconSize = compact ? DROPZONE_DIMENSIONS.FILE_ICON_COMPACT : DROPZONE_DIMENSIONS.FILE_ICON_DEFAULT;
+
+    const borderClass = selectedFile
+        ? 'border-green-500 bg-green-50 dark:bg-green-950/20'
+        : dragOver
+            ? 'border-primary bg-primary/5'
+            : 'border-muted-foreground/25 hover:border-primary/50';
+
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            aria-label="Upload file"
+            className={`border-2 border-dashed rounded-lg ${padding} text-center transition-colors cursor-pointer ${borderClass} ${className}`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            data-testid="datahub-filedropzone-dropzone"
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                accept={acceptString}
+                onChange={handleChange}
+                className="hidden"
+                aria-hidden="true"
+            />
+
+            {loading ? (
+                <div className="flex flex-col items-center gap-4">
+                    <RefreshCw className={`${iconSize} text-primary animate-spin`} />
+                    <p className="text-lg font-medium">{loadingMessage}</p>
+                </div>
+            ) : selectedFile ? (
+                <div className="flex flex-col items-center gap-2">
+                    <CheckCircle2 className={`${iconSize} text-green-500`} />
+                    <p className="font-medium">{selectedFile.name}</p>
+                    <p className="text-sm text-muted-foreground">
+                        {formatFileSize(selectedFile.size)}
+                    </p>
+                    {onClear && (
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="mt-2"
+                            onClick={handleClearClick}
+                            data-testid="datahub-filedropzone-remove"
+                        >
+                            <X className={`${ICON_SIZES.SM} mr-2`} />
+                            Remove
+                        </Button>
+                    )}
+                </div>
+            ) : (
+                <>
+                    {showFileIcons && allowedTypes && allowedTypes.length > 0 && (
+                        <div className="flex justify-center gap-4 mb-4">
+                            {allowedTypes.map(type => {
+                                if (!type) return null;
+                                const formatOpt = fileFormatOptions.find(f => f.value === type.toUpperCase());
+                                const Icon = resolveIconName(formatOpt?.icon) ?? File;
+                                const hexColor = formatOpt?.color ?? undefined;
+                                return <Icon key={type} className={fileIconSize} style={hexColor ? { color: hexColor } : undefined} />;
+                            })}
+                        </div>
+                    )}
+                    {!showFileIcons && (
+                        <Upload className={`${iconSize} mx-auto mb-4 text-muted-foreground`} />
+                    )}
+                    <p className={`font-medium ${compact ? 'text-base' : 'text-lg'} mb-2`}>
+                        Drop your file here or click to browse
+                    </p>
+                    {allowedTypes && allowedTypes.length > 0 && (
+                        <p className="text-sm text-muted-foreground mb-4">
+                            Supports: {allowedTypes.filter((t): t is FileType => Boolean(t)).map(t => t.toUpperCase()).join(', ')}
+                        </p>
+                    )}
+                    <Button
+                        variant="outline"
+                        onClick={handleBrowseClick}
+                        data-testid="datahub-filedropzone-browse"
+                    >
+                        <Upload className={`${ICON_SIZES.SM} mr-2`} />
+                        Browse Files
+                    </Button>
+                </>
+            )}
+        </div>
+    );
+}
+
+export const FileDropzone = memo(FileDropzoneComponent);

package/dashboard/components/shared/file-dropzone/index.ts

@@ -0,0 +1 @@
+export { FileDropzone } from './FileDropzone';

package/dashboard/components/shared/filter-conditions-editor/FilterConditionsEditor.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import {
+    Button,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Badge,
+} from '@vendure/dashboard';
+import { Plus, Trash2 } from 'lucide-react';
+import { COMPONENT_WIDTHS, SENTINEL_VALUES } from '../../../constants';
+import type { FilterCondition, FilterOperator } from '../../../types';
+import { useComparisonOperators } from '../../../hooks/api/use-config-options';
+import type { ComparisonOperatorOption } from '../../../hooks/api/use-config-options';
+import { useStableKeys } from '../../../hooks';
+
+export interface FilterConditionsEditorProps {
+    /** Array of filter conditions */
+    conditions: FilterCondition[];
+    /** Called when conditions change */
+    onChange: (conditions: FilterCondition[]) => void;
+    /** Available fields to filter on */
+    fields: string[];
+    /** Logic operator between conditions (AND/OR) */
+    logic?: 'AND' | 'OR';
+    /** Called when logic changes */
+    onLogicChange?: (logic: 'AND' | 'OR') => void;
+    /** Show logic selector */
+    showLogicSelector?: boolean;
+    /** Placeholder for field selector */
+    fieldPlaceholder?: string;
+    /** Placeholder for value input */
+    valuePlaceholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Add button label */
+    addLabel?: string;
+    /** Compact mode */
+    compact?: boolean;
+}
+
+/**
+ * Shared component for editing filter conditions.
+ * Used by pipeline editors and wizards for consistent filter UI.
+ */
+export function FilterConditionsEditor({
+    conditions,
+    onChange,
+    fields,
+    logic = 'AND',
+    onLogicChange,
+    showLogicSelector = true,
+    fieldPlaceholder = 'Select field...',
+    valuePlaceholder = 'Value',
+    emptyMessage = 'No conditions - all rows pass through',
+    addLabel = 'Add Condition',
+    compact = false,
+}: FilterConditionsEditorProps) {
+    const { operators: comparisonOperators } = useComparisonOperators();
+    const conditionKeys = useStableKeys(conditions, 'condition');
+
+    const addCondition = useCallback(() => {
+        onChange([...conditions, { field: '', operator: 'eq' as FilterOperator, value: '' }]);
+    }, [conditions, onChange]);
+
+    const updateCondition = useCallback((index: number, updates: Partial<FilterCondition>) => {
+        const newConditions = [...conditions];
+        newConditions[index] = { ...newConditions[index], ...updates };
+        onChange(newConditions);
+    }, [conditions, onChange]);
+
+    const removeCondition = useCallback((index: number) => {
+        onChange(conditions.filter((_, i) => i !== index));
+    }, [conditions, onChange]);
+
+    return (
+        <div className={compact ? 'space-y-2' : 'space-y-4'}>
+            <div className="flex items-center justify-between">
+                <Label className={compact ? 'text-xs' : ''}>Filter Conditions</Label>
+                <div className="flex items-center gap-2">
+                    {showLogicSelector && onLogicChange && (
+                        <Select
+                            value={logic}
+                            onValueChange={(v) => onLogicChange(v as 'AND' | 'OR')}
+                        >
+                            <SelectTrigger className={COMPONENT_WIDTHS.LOGIC_SELECT}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="AND">AND</SelectItem>
+                                <SelectItem value="OR">OR</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    )}
+                    <Button variant="outline" size="sm" onClick={addCondition} data-testid="datahub-filter-conditions-add-button">
+                        <Plus className="w-4 h-4 mr-2" />
+                        {addLabel}
+                    </Button>
+                </div>
+            </div>
+
+            {conditions.length === 0 ? (
+                <div className={`text-center ${compact ? 'py-4' : 'py-6'} text-muted-foreground border-2 border-dashed rounded-lg`}>
+                    <p className={compact ? 'text-xs' : 'text-sm'}>{emptyMessage}</p>
+                </div>
+            ) : (
+                <div className={compact ? 'space-y-1.5' : 'space-y-2'}>
+                    {conditions.map((condition, index) => (
+                        <FilterConditionRow
+                            key={conditionKeys[index]}
+                            condition={condition}
+                            fields={fields}
+                            comparisonOperators={comparisonOperators}
+                            logic={logic}
+                            showLogicBadge={showLogicSelector && index > 0}
+                            fieldPlaceholder={fieldPlaceholder}
+                            valuePlaceholder={valuePlaceholder}
+                            compact={compact}
+                            onUpdate={(updates) => updateCondition(index, updates)}
+                            onRemove={() => removeCondition(index)}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface FilterConditionRowProps {
+    condition: FilterCondition;
+    fields: string[];
+    comparisonOperators: ComparisonOperatorOption[];
+    logic: 'AND' | 'OR';
+    showLogicBadge: boolean;
+    fieldPlaceholder: string;
+    valuePlaceholder: string;
+    compact: boolean;
+    onUpdate: (updates: Partial<FilterCondition>) => void;
+    onRemove: () => void;
+}
+
+function FilterConditionRow({
+    condition,
+    fields,
+    comparisonOperators,
+    logic,
+    showLogicBadge,
+    fieldPlaceholder,
+    valuePlaceholder,
+    compact,
+    onUpdate,
+    onRemove,
+}: FilterConditionRowProps) {
+    const operatorDef = comparisonOperators.find((op) => op.value === condition.operator);
+    const showValueInput = !operatorDef?.noValue;
+
+    return (
+        <div className="flex items-center gap-2">
+            {showLogicBadge && (
+                <Badge variant="outline" className="w-12 justify-center flex-shrink-0">
+                    {logic}
+                </Badge>
+            )}
+
+            {/* Field Selector */}
+            <Select
+                value={condition.field || SENTINEL_VALUES.NONE}
+                onValueChange={(v) => onUpdate({ field: v === SENTINEL_VALUES.NONE ? '' : v })}
+            >
+                <SelectTrigger className={compact ? 'flex-1 h-8' : 'flex-1'}>
+                    <SelectValue placeholder={fieldPlaceholder} />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectItem value={SENTINEL_VALUES.NONE}>{fieldPlaceholder}</SelectItem>
+                    {fields.map((f) => (
+                        <SelectItem key={f} value={f}>
+                            {f}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+
+            {/* Operator Selector */}
+            <Select
+                value={condition.operator}
+                onValueChange={(v) => onUpdate({ operator: v as FilterOperator })}
+            >
+                <SelectTrigger className={compact ? `${COMPONENT_WIDTHS.OPERATOR_SELECT} h-8` : COMPONENT_WIDTHS.OPERATOR_SELECT}>
+                    <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                    {comparisonOperators.map((op) => (
+                        <SelectItem key={op.value} value={op.value}>
+                            {op.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+
+            {/* Value Input (if operator requires it) */}
+            {showValueInput && (
+                <Input
+                    value={String(condition.value ?? '')}
+                    onChange={(e) => onUpdate({ value: e.target.value })}
+                    placeholder={valuePlaceholder}
+                    className={compact ? 'flex-1 h-8' : 'flex-1'}
+                />
+            )}
+
+            {/* Remove Button */}
+            <Button
+                variant="ghost"
+                size="icon"
+                className={compact ? 'h-8 w-8' : ''}
+                onClick={onRemove}
+                aria-label="Remove condition"
+            >
+                <Trash2 className={compact ? 'w-3.5 h-3.5 text-destructive' : 'w-4 h-4 text-destructive'} />
+            </Button>
+        </div>
+    );
+}

package/dashboard/components/shared/filter-conditions-editor/index.ts

@@ -0,0 +1 @@
+export { FilterConditionsEditor } from './FilterConditionsEditor';

package/dashboard/components/shared/index.ts

@@ -0,0 +1,45 @@
+export {
+    StepConfigPanel,
+    AdapterSelector,
+    AdapterRequiredWarning,
+    RouteConfigComponent,
+    ValidateConfigComponent,
+    AdvancedMapEditor,
+    AdvancedTemplateEditor,
+    AdvancedWhenEditor,
+    MultiOperatorEditor,
+    StepTester,
+    OperatorCheatSheetButton,
+} from './step-config';
+export type { StepConfigData } from './step-config';
+
+export { SchemaFormRenderer } from './schema-form';
+export { TriggerForm } from './trigger-config';
+export { TriggersPanel } from './triggers-panel';
+
+export { LoadingState, EmptyState, ErrorState, ValidationErrorDisplay } from './feedback';
+
+export { StatCard } from './stat-card';
+
+export {
+    WizardProgressBar,
+    WizardFooter,
+    ConfigurationNameCard,
+    SummaryCard,
+    SummaryCardGrid,
+} from './wizard';
+export {
+    TriggerSelector,
+    TriggerSchemaFields,
+} from './wizard-trigger';
+
+export { SelectableCard, SelectableCardGrid } from './selectable-card';
+export { EntitySelector } from './entity-selector';
+
+export { FileDropzone } from './file-dropzone';
+
+export { FilterConditionsEditor } from './filter-conditions-editor';
+
+export { ErrorBoundary } from './error-boundary';
+
+export { LoadMoreButton } from './LoadMoreButton';