@oronts/vendure-data-hub-plugin 0.1.1 → 0.1.2

package/dist/dashboard/hooks/use-wizard-navigation.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { toast } from 'sonner';
+import type { WizardStep } from '../types/wizard';
+import type { FormValidationResult } from '../utils/form-validation';
+
+interface UseWizardNavigationOptions<TConfig> {
+    steps: WizardStep[];
+    initialConfig: TConfig;
+    validateStep: (stepId: string, config: TConfig) => FormValidationResult;
+    onComplete: (config: TConfig) => void;
+    nameRequiredMessage: string;
+    isSubmitting?: boolean;
+}
+
+export function useWizardNavigation<TConfig extends { name?: string }>({
+    steps,
+    initialConfig,
+    validateStep,
+    onComplete,
+    nameRequiredMessage,
+    isSubmitting,
+}: UseWizardNavigationOptions<TConfig>) {
+    const [config, setConfig] = React.useState<TConfig>(initialConfig);
+    const [currentStep, setCurrentStep] = React.useState(0);
+    const [stepErrors, setStepErrors] = React.useState<Record<string, string>>({});
+    const [attemptedNext, setAttemptedNext] = React.useState(false);
+
+    const updateConfig = React.useCallback((updates: Partial<TConfig>) => {
+        setConfig(prev => ({ ...prev, ...updates }));
+        setStepErrors({});
+        setAttemptedNext(false);
+    }, []);
+
+    const validateCurrentStep = React.useCallback(() => {
+        const stepId = steps[currentStep].id;
+        return validateStep(stepId, config);
+    }, [steps, currentStep, config, validateStep]);
+
+    const canProceed = React.useMemo(() => {
+        const validation = validateCurrentStep();
+        return validation.isValid;
+    }, [validateCurrentStep]);
+
+    const handleNext = React.useCallback(() => {
+        setAttemptedNext(true);
+        const validation = validateCurrentStep();
+
+        if (!validation.isValid) {
+            setStepErrors(validation.errorsByField);
+            const firstError = validation.errors[0];
+            if (firstError) {
+                toast.error(firstError.message);
+            }
+            return;
+        }
+
+        if (currentStep < steps.length - 1) {
+            setAttemptedNext(false);
+            setStepErrors({});
+            setCurrentStep(prev => prev + 1);
+        }
+    }, [validateCurrentStep, currentStep, steps]);
+
+    const handleBack = React.useCallback(() => {
+        if (currentStep > 0) {
+            setAttemptedNext(false);
+            setStepErrors({});
+            setCurrentStep(prev => prev - 1);
+        }
+    }, [currentStep]);
+
+    const handleStepClick = React.useCallback((index: number) => {
+        // Going backward is always allowed; going forward requires current step validation
+        if (index > currentStep) {
+            const validation = validateCurrentStep();
+            if (!validation.isValid) {
+                setAttemptedNext(true);
+                setStepErrors(validation.errorsByField);
+                const firstError = validation.errors[0];
+                if (firstError) {
+                    toast.error(firstError.message);
+                }
+                return;
+            }
+        }
+        setAttemptedNext(false);
+        setStepErrors({});
+        setCurrentStep(index);
+    }, [currentStep, validateCurrentStep]);
+
+    const handleComplete = React.useCallback(() => {
+        if (isSubmitting) return;
+
+        const validation = validateCurrentStep();
+        if (!validation.isValid) {
+            setAttemptedNext(true);
+            setStepErrors(validation.errorsByField);
+            const firstError = validation.errors[0];
+            if (firstError) {
+                toast.error(firstError.message);
+            }
+            return;
+        }
+
+        if (!config.name) {
+            toast.error(nameRequiredMessage);
+            return;
+        }
+        onComplete(config);
+    }, [config, onComplete, nameRequiredMessage, isSubmitting, validateCurrentStep]);
+
+    return {
+        config,
+        setConfig,
+        currentStep,
+        setCurrentStep,
+        stepErrors,
+        setStepErrors,
+        attemptedNext,
+        setAttemptedNext,
+        updateConfig,
+        handleNext,
+        handleBack,
+        handleStepClick,
+        handleComplete,
+        canProceed,
+    };
+}

package/dist/dashboard/index.tsx

@@ -0,0 +1,55 @@
+import { defineDashboardExtension, DashboardRouteDefinition } from '@vendure/dashboard';
+import { Boxes } from 'lucide-react';
+import { DATAHUB_NAV_SECTION } from './constants';
+import {
+    pipelinesList,
+    pipelineDetail,
+    importWizardPage,
+    exportWizardPage,
+    adaptersList,
+    secretsList,
+    secretDetail,
+    connectionsList,
+    connectionDetail,
+    hooksPage,
+    queuesPage,
+    settingsPage,
+    logsPage,
+} from './routes';
+import { ErrorBoundary } from './components/shared';
+
+function wrapWithErrorBoundary(route: DashboardRouteDefinition): DashboardRouteDefinition {
+    const originalComponent = route.component;
+    if (!originalComponent) return route;
+    return {
+        ...route,
+        component: (routeArg) => (
+            <ErrorBoundary>
+                {originalComponent(routeArg)}
+            </ErrorBoundary>
+        ),
+    };
+}
+
+const routes: DashboardRouteDefinition[] = [
+    pipelinesList,
+    importWizardPage,
+    exportWizardPage,
+    pipelineDetail,
+    adaptersList,
+    secretsList,
+    secretDetail,
+    connectionsList,
+    connectionDetail,
+    hooksPage,
+    queuesPage,
+    settingsPage,
+    logsPage,
+].map(wrapWithErrorBoundary);
+
+export default defineDashboardExtension({
+    navSections: [
+        { id: DATAHUB_NAV_SECTION, title: 'Data Hub', icon: Boxes, placement: 'bottom', order: 999 },
+    ],
+    routes,
+});

package/dist/dashboard/routes/adapters/AdapterCard.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Badge } from '@vendure/dashboard';
+import { Puzzle, CheckCircle2, Sparkles } from 'lucide-react';
+import { cn } from '../../utils';
+import { resolveIconName } from '../../utils/icon-resolver';
+import type { DataHubAdapter } from '../../types';
+
+export const AdapterCard = React.memo(function AdapterCard({
+    adapter,
+    onSelect,
+    isBuiltIn = false,
+}: Readonly<{
+    adapter: DataHubAdapter;
+    onSelect: (adapter: DataHubAdapter) => void;
+    isBuiltIn?: boolean;
+}>) {
+    const handleClick = React.useCallback(() => {
+        onSelect(adapter);
+    }, [onSelect, adapter]);
+
+    const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onSelect(adapter);
+        }
+    }, [onSelect, adapter]);
+
+    const Icon = resolveIconName(adapter.icon);
+    const fieldCount = adapter.schema.fields.length;
+    const requiredCount = adapter.schema.fields.filter(f => f.required).length;
+
+    return (
+        <div
+            className={cn(
+                'group relative rounded-xl border bg-card p-4 cursor-pointer transition-all duration-200',
+                'hover:shadow-lg hover:border-primary/40 hover:-translate-y-0.5',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+            )}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            role="button"
+            tabIndex={0}
+            aria-label={`View ${adapter.name ?? adapter.code} adapter details`}
+            data-testid={`datahub-adapter-card-${adapter.code}`}
+        >
+            {/* Header: icon + code + badges */}
+            <div className="flex items-start gap-3 mb-3">
+                <div className={cn(
+                    'flex-shrink-0 p-2 rounded-lg transition-colors',
+                    isBuiltIn
+                        ? 'bg-primary/10 text-primary group-hover:bg-primary/15'
+                        : 'bg-violet-500/10 text-violet-600 dark:text-violet-400 group-hover:bg-violet-500/15',
+                )}>
+                    {Icon ? <Icon className="w-4 h-4" /> : <Puzzle className="w-4 h-4" />}
+                </div>
+                <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                        <code className="text-sm font-semibold truncate">{adapter.code}</code>
+                    </div>
+                    {adapter.name && adapter.name !== adapter.code && (
+                        <p className="text-xs text-muted-foreground truncate">{adapter.name}</p>
+                    )}
+                </div>
+                <div className="flex-shrink-0 flex items-center gap-1">
+                    {isBuiltIn ? (
+                        <Badge variant="outline" className="text-[10px] px-1.5 py-0 gap-1">
+                            <CheckCircle2 className="w-3 h-3" />
+                            Built-in
+                        </Badge>
+                    ) : (
+                        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 gap-1">
+                            <Sparkles className="w-3 h-3" />
+                            Custom
+                        </Badge>
+                    )}
+                </div>
+            </div>
+
+            {/* Description */}
+            <p className="text-xs text-muted-foreground line-clamp-2 mb-3 min-h-[2rem]">
+                {adapter.description || 'No description available'}
+            </p>
+
+            {/* Footer: metadata chips */}
+            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted/60">
+                    {fieldCount} field{fieldCount !== 1 ? 's' : ''}
+                </span>
+                {requiredCount > 0 && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted/60">
+                        {requiredCount} required
+                    </span>
+                )}
+                {adapter.pure && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+                        Pure
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+});

package/dist/dashboard/routes/adapters/AdapterConstants.tsx

@@ -0,0 +1,20 @@
+export const ADAPTERS_TABLE_PAGE_SIZE = 25;
+
+/** UI helper: default example values per schema field type for adapter detail display */
+const EXAMPLE_VALUES: Record<string, unknown> = {
+    number: 1000,
+    boolean: true,
+    select: 'value',
+    json: {},
+    array: [],
+};
+
+export function guessExampleValue(
+    type: string,
+    options?: Array<{ value: string; label: string }> | null,
+): unknown {
+    if (options && options.length > 0) {
+        return options[0].value;
+    }
+    return EXAMPLE_VALUES[type] ?? 'value';
+}

package/dist/dashboard/routes/adapters/AdapterDetail.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import {
+    Button,
+    Badge,
+    Textarea,
+} from '@vendure/dashboard';
+import {
+    Copy,
+    CheckCircle2,
+    Code2,
+    Settings2,
+    Puzzle,
+    Zap,
+    Link2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '../../utils';
+import { UI_DEFAULTS, TEXTAREA_HEIGHTS, TOAST_ADAPTER } from '../../constants';
+import { resolveIconName } from '../../utils/icon-resolver';
+import { guessExampleValue } from './AdapterConstants';
+import type { DataHubAdapter } from '../../types';
+
+export function AdapterDetail({ adapter }: Readonly<{ adapter: DataHubAdapter }>) {
+    const [copied, setCopied] = React.useState(false);
+    const copyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const Icon = resolveIconName(adapter.icon);
+
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (copyTimeoutRef.current) {
+                clearTimeout(copyTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const exampleConfig = React.useMemo(() => {
+        const config: Record<string, unknown> = { adapterCode: adapter.code };
+        for (const field of adapter.schema.fields) {
+            if (field.required) {
+                config[field.key] = guessExampleValue(field.type, field.options);
+            }
+        }
+        return JSON.stringify(config, null, 2);
+    }, [adapter]);
+
+    const copyConfig = async () => {
+        try {
+            await navigator.clipboard.writeText(exampleConfig);
+            setCopied(true);
+            toast.success(TOAST_ADAPTER.CONFIG_COPIED);
+            if (copyTimeoutRef.current) {
+                clearTimeout(copyTimeoutRef.current);
+            }
+            copyTimeoutRef.current = setTimeout(() => setCopied(false), UI_DEFAULTS.COPY_FEEDBACK_TIMEOUT_MS);
+        } catch {
+            toast.error(TOAST_ADAPTER.COPY_ERROR);
+        }
+    };
+
+    const requiredFields = adapter.schema.fields.filter(f => f.required);
+    const optionalFields = adapter.schema.fields.filter(f => !f.required);
+
+    return (
+        <div className="p-5 space-y-6">
+            {/* Quick info cards */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div className="flex items-center gap-3 p-3 rounded-xl bg-muted/30 border">
+                    <div className="p-2 rounded-lg bg-primary/10 text-primary">
+                        {Icon ? <Icon className="w-4 h-4" /> : <Puzzle className="w-4 h-4" />}
+                    </div>
+                    <div>
+                        <div className="text-[11px] text-muted-foreground uppercase tracking-wider">Type</div>
+                        <div className="font-medium text-sm">{adapter.type}</div>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3 p-3 rounded-xl bg-muted/30 border">
+                    <div className={cn(
+                        'p-2 rounded-lg',
+                        adapter.pure ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-muted text-muted-foreground',
+                    )}>
+                        <Zap className="w-4 h-4" />
+                    </div>
+                    <div>
+                        <div className="text-[11px] text-muted-foreground uppercase tracking-wider">Pure</div>
+                        <div className="font-medium text-sm">{adapter.pure ? 'Yes' : 'No'}</div>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3 p-3 rounded-xl bg-muted/30 border">
+                    <div className="p-2 rounded-lg bg-muted text-muted-foreground">
+                        <Link2 className="w-4 h-4" />
+                    </div>
+                    <div>
+                        <div className="text-[11px] text-muted-foreground uppercase tracking-wider">Deps</div>
+                        <div className="font-medium text-sm">
+                            {adapter.requires?.length ? adapter.requires.join(', ') : 'None'}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Configuration Fields */}
+            <div>
+                <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
+                    <Settings2 className="w-4 h-4 text-muted-foreground" />
+                    Configuration Fields
+                    <Badge variant="secondary" className="text-xs ml-auto">
+                        {adapter.schema.fields.length} total
+                    </Badge>
+                </h4>
+                <div className="border rounded-xl overflow-hidden">
+                    <table className="w-full text-sm">
+                        <thead>
+                            <tr className="bg-muted/50">
+                                <th className="text-left px-3 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Field</th>
+                                <th className="text-left px-3 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Type</th>
+                                <th className="text-left px-3 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
+                                <th className="text-left px-3 py-2.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {requiredFields.map(field => (
+                                <tr key={field.key} className="border-t hover:bg-muted/20 transition-colors">
+                                    <td className="px-3 py-2.5">
+                                        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-medium">
+                                            {field.key}
+                                        </code>
+                                    </td>
+                                    <td className="px-3 py-2.5 text-muted-foreground">
+                                        <span className="text-xs">{field.type}</span>
+                                        {field.options && field.options.length > 0 && (
+                                            <span className="ml-1 text-[11px] text-muted-foreground/60">
+                                                ({field.options.map(o => o.value).join(' | ')})
+                                            </span>
+                                        )}
+                                    </td>
+                                    <td className="px-3 py-2.5">
+                                        <Badge variant="destructive" className="text-[10px] px-1.5 py-0">
+                                            Required
+                                        </Badge>
+                                    </td>
+                                    <td className="px-3 py-2.5 text-muted-foreground text-xs">
+                                        {field.description || field.label || '\u2014'}
+                                    </td>
+                                </tr>
+                            ))}
+                            {optionalFields.map(field => (
+                                <tr key={field.key} className="border-t hover:bg-muted/20 transition-colors">
+                                    <td className="px-3 py-2.5">
+                                        <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                                            {field.key}
+                                        </code>
+                                    </td>
+                                    <td className="px-3 py-2.5 text-muted-foreground">
+                                        <span className="text-xs">{field.type}</span>
+                                        {field.options && field.options.length > 0 && (
+                                            <span className="ml-1 text-[11px] text-muted-foreground/60">
+                                                ({field.options.map(o => o.value).join(' | ')})
+                                            </span>
+                                        )}
+                                    </td>
+                                    <td className="px-3 py-2.5">
+                                        <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                                            Optional
+                                        </Badge>
+                                    </td>
+                                    <td className="px-3 py-2.5 text-muted-foreground text-xs">
+                                        {field.description || field.label || '\u2014'}
+                                    </td>
+                                </tr>
+                            ))}
+                            {adapter.schema.fields.length === 0 && (
+                                <tr>
+                                    <td colSpan={4} className="px-3 py-6 text-center text-muted-foreground text-sm">
+                                        No configuration fields
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            {/* Example Configuration */}
+            <div>
+                <div className="flex items-center justify-between mb-3">
+                    <h4 className="text-sm font-medium flex items-center gap-2">
+                        <Code2 className="w-4 h-4 text-muted-foreground" />
+                        Example Configuration
+                    </h4>
+                    <Button variant="outline" size="sm" onClick={copyConfig} data-testid="datahub-adapter-config-copy-button">
+                        {copied ? (
+                            <CheckCircle2 className="w-4 h-4 mr-1 text-emerald-600" />
+                        ) : (
+                            <Copy className="w-4 h-4 mr-1" />
+                        )}
+                        {copied ? 'Copied!' : 'Copy'}
+                    </Button>
+                </div>
+                <Textarea
+                    value={exampleConfig}
+                    readOnly
+                    className={`font-mono text-sm ${TEXTAREA_HEIGHTS.ADAPTER_SCHEMA} rounded-xl`}
+                />
+            </div>
+        </div>
+    );
+}

package/dist/dashboard/routes/adapters/AdapterTypeSection.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { CheckCircle2, Info, Puzzle, Sparkles } from 'lucide-react';
+import { Badge } from '@vendure/dashboard';
+import { AdapterCard } from './AdapterCard';
+import { ITEMS_PER_PAGE } from '../../constants';
+import { useLoadMore } from '../../hooks';
+import { LoadMoreButton } from '../../components/shared';
+import { resolveIconName } from '../../utils/icon-resolver';
+import type { DataHubAdapter } from '../../types';
+
+export function AdapterTypeSection({
+    type,
+    label,
+    description,
+    icon,
+    adapters,
+    onSelect,
+    isBuiltIn,
+}: Readonly<{
+    type: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    adapters: DataHubAdapter[];
+    onSelect: (adapter: DataHubAdapter) => void;
+    isBuiltIn: (code: string) => boolean;
+}>) {
+    const Icon = resolveIconName(icon);
+    const builtIn = React.useMemo(() => adapters.filter(a => isBuiltIn(a.code)), [adapters, isBuiltIn]);
+    const custom = React.useMemo(() => adapters.filter(a => !isBuiltIn(a.code)), [adapters, isBuiltIn]);
+
+    const { displayed: displayedBuiltIn, hasMore: hasMoreBuiltIn, remaining: remainingBuiltIn, loadMore: loadMoreBuiltIn } = useLoadMore(builtIn, { pageSize: ITEMS_PER_PAGE });
+    const { displayed: displayedCustom, hasMore: hasMoreCustom, remaining: remainingCustom, loadMore: loadMoreCustom } = useLoadMore(custom, { pageSize: ITEMS_PER_PAGE });
+
+    return (
+        <div className="space-y-6">
+            {/* Section header */}
+            <div className="flex items-center gap-3 pb-4 border-b">
+                <div className="p-2.5 rounded-xl bg-primary/10 text-primary">
+                    {Icon ? <Icon className="w-5 h-5" /> : <Puzzle className="w-5 h-5" />}
+                </div>
+                <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                        <h3 className="font-semibold">{label}</h3>
+                        <Badge variant="secondary" className="text-xs">
+                            {adapters.length}
+                        </Badge>
+                    </div>
+                    {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
+                </div>
+            </div>
+
+            {builtIn.length > 0 && (
+                <div>
+                    <h4 className="text-sm font-medium mb-3 flex items-center gap-2 text-muted-foreground">
+                        <CheckCircle2 className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
+                        Built-in
+                        <span className="text-xs font-normal">({builtIn.length})</span>
+                    </h4>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                        {displayedBuiltIn.map(adapter => (
+                            <AdapterCard
+                                key={adapter.code}
+                                adapter={adapter}
+                                onSelect={onSelect}
+                                isBuiltIn
+                            />
+                        ))}
+                    </div>
+                    {hasMoreBuiltIn && <LoadMoreButton remaining={remainingBuiltIn} onClick={loadMoreBuiltIn} data-testid={`datahub-adapters-load-more-builtin-${type}`} />}
+                </div>
+            )}
+
+            {custom.length > 0 && (
+                <div>
+                    <h4 className="text-sm font-medium mb-3 flex items-center gap-2 text-muted-foreground">
+                        <Sparkles className="w-4 h-4 text-violet-600 dark:text-violet-400" />
+                        Custom
+                        <span className="text-xs font-normal">({custom.length})</span>
+                    </h4>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                        {displayedCustom.map(adapter => (
+                            <AdapterCard
+                                key={adapter.code}
+                                adapter={adapter}
+                                onSelect={onSelect}
+                            />
+                        ))}
+                    </div>
+                    {hasMoreCustom && <LoadMoreButton remaining={remainingCustom} onClick={loadMoreCustom} data-testid={`datahub-adapters-load-more-custom-${type}`} />}
+                </div>
+            )}
+
+            {adapters.length === 0 && (
+                <div className="text-center py-12 text-muted-foreground">
+                    <div className="mx-auto w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center mb-3">
+                        <Info className="w-6 h-6 opacity-50" />
+                    </div>
+                    <p className="font-medium">No {label.toLowerCase()} registered</p>
+                    <p className="text-sm mt-1">Register adapters in your plugin configuration.</p>
+                </div>
+            )}
+        </div>
+    );
+}