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

package/dist/dashboard/components/shared/wizard-trigger/TriggerSelector.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { memo } from 'react';
+import type { TriggerType, TriggerSelectorProps } from '../../../types';
+import { useTriggerIconResolver } from '../../../hooks';
+import { SelectableCard, SelectableCardGrid } from '../selectable-card';
+
+function TriggerSelectorComponent({
+    options,
+    value,
+    onChange,
+    columns = 4,
+}: TriggerSelectorProps) {
+    const resolveTriggerIcon = useTriggerIconResolver();
+    return (
+        <SelectableCardGrid columns={columns}>
+            {options.map(option => {
+                const Icon = resolveTriggerIcon(option.id as TriggerType);
+                return (
+                    <SelectableCard
+                        key={option.id}
+                        icon={Icon}
+                        title={option.label}
+                        description={option.desc}
+                        selected={value === option.id}
+                        onClick={() => onChange(option.id)}
+                    />
+                );
+            })}
+        </SelectableCardGrid>
+    );
+}
+
+export const TriggerSelector = memo(TriggerSelectorComponent);

package/dist/dashboard/components/shared/wizard-trigger/index.ts

@@ -0,0 +1,2 @@
+export { TriggerSelector } from './TriggerSelector';
+export { TriggerSchemaFields } from './TriggerSchemaFields';

package/dist/dashboard/components/templates/TemplateGallery.tsx

@@ -0,0 +1,210 @@
+/**
+ * Template Gallery Component
+ *
+ * Displays available import templates with filtering and search capabilities.
+ */
+
+import * as React from 'react';
+import { memo } from 'react';
+import { CheckCircle, Package, Search } from 'lucide-react';
+import { Badge, Input } from '@vendure/dashboard';
+import type { TemplateCategory } from '../../types';
+import type { ImportTemplate, CategoryInfo } from '../../hooks/use-import-templates';
+import { resolveIconName } from '../../utils';
+import { filterTemplates } from '../../utils/template-helpers';
+
+export interface TemplateGalleryProps {
+    templates: ImportTemplate[];
+    categories: CategoryInfo[];
+    selectedTemplate?: ImportTemplate | null;
+    onSelectTemplate: (template: ImportTemplate) => void;
+    onUseTemplate?: (template: ImportTemplate) => void;
+}
+
+function TemplateCardComponent({
+    template,
+    selected,
+    onSelect,
+}: {
+    template: ImportTemplate;
+    selected: boolean;
+    onSelect: () => void;
+}) {
+    const IconComponent = resolveIconName(template.icon) ?? Package;
+
+    return (
+        <button
+            type="button"
+            onClick={onSelect}
+            className={`
+                relative p-4 rounded-lg border text-left transition-all w-full
+                ${selected
+                    ? 'border-primary bg-primary/5 ring-2 ring-primary/20'
+                    : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                }
+            `}
+        >
+            <div className="flex items-start gap-3">
+                <div className={`p-2 rounded-md ${selected ? 'bg-primary/10' : 'bg-muted'}`}>
+                    <IconComponent className={`h-5 w-5 ${selected ? 'text-primary' : 'text-muted-foreground'}`} />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                    <h4 className="font-medium text-sm truncate">{template.name}</h4>
+                    <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+                        {template.description}
+                    </p>
+
+                    <div className="flex items-center gap-2 mt-3 flex-wrap">
+                        {template.formats?.map(format => (
+                            <Badge key={format} variant="outline" className="text-xs">
+                                {format.toUpperCase()}
+                            </Badge>
+                        ))}
+                        {template.tags?.map(tag => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                                {tag}
+                            </Badge>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {selected && (
+                <div className="absolute bottom-2 right-2">
+                    <CheckCircle className="h-4 w-4 text-primary" />
+                </div>
+            )}
+        </button>
+    );
+}
+
+const TemplateCard = memo(TemplateCardComponent);
+
+function CategoryTabComponent({
+    category,
+    selected,
+    onSelect,
+}: {
+    category: CategoryInfo;
+    selected: boolean;
+    onSelect: () => void;
+}) {
+    const IconComponent = resolveIconName(category.icon) ?? Package;
+
+    return (
+        <button
+            type="button"
+            onClick={onSelect}
+            className={`
+                flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap
+                ${selected
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                }
+            `}
+        >
+            <IconComponent className="h-4 w-4" />
+            <span>{category.label}</span>
+            <Badge variant="secondary" className="ml-1 text-xs">
+                {category.count}
+            </Badge>
+        </button>
+    );
+}
+
+const CategoryTab = memo(CategoryTabComponent);
+
+function TemplateGalleryComponent({
+    templates,
+    categories,
+    selectedTemplate,
+    onSelectTemplate,
+}: TemplateGalleryProps) {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [selectedCategory, setSelectedCategory] = React.useState<TemplateCategory | 'all'>('all');
+
+    const filteredTemplates = React.useMemo(() => {
+        let filtered = templates;
+
+        // Filter by category
+        if (selectedCategory !== 'all') {
+            filtered = filtered.filter(t => t.category === selectedCategory);
+        }
+
+        // Filter by search query
+        return filterTemplates(filtered, searchQuery);
+    }, [templates, selectedCategory, searchQuery]);
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Search Bar */}
+            <div className="mb-4">
+                <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                        type="text"
+                        placeholder="Search templates..."
+                        value={searchQuery}
+                        onChange={e => setSearchQuery(e.target.value)}
+                        className="pl-9"
+                    />
+                </div>
+            </div>
+
+            {/* Category Tabs */}
+            <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
+                <button
+                    type="button"
+                    onClick={() => setSelectedCategory('all')}
+                    className={`
+                        flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap
+                        ${selectedCategory === 'all'
+                            ? 'bg-primary text-primary-foreground'
+                            : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                        }
+                    `}
+                >
+                    All Templates
+                    <Badge variant="secondary" className="ml-1 text-xs">
+                        {templates.length}
+                    </Badge>
+                </button>
+                {categories.map(cat => (
+                    <CategoryTab
+                        key={cat.category}
+                        category={cat}
+                        selected={selectedCategory === cat.category}
+                        onSelect={() => setSelectedCategory(cat.category)}
+                    />
+                ))}
+            </div>
+
+            {/* Template Grid */}
+            <div className="flex-1 overflow-y-auto">
+                {filteredTemplates.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                        <Package className="h-12 w-12 text-muted-foreground/50 mb-4" />
+                        <h3 className="text-lg font-medium">No templates found</h3>
+                        <p className="text-sm text-muted-foreground mt-1">
+                            Try adjusting your search or category filter
+                        </p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                        {filteredTemplates.map(template => (
+                            <TemplateCard
+                                key={template.id}
+                                template={template}
+                                selected={selectedTemplate?.id === template.id}
+                                onSelect={() => onSelectTemplate(template)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export const TemplateGallery = memo(TemplateGalleryComponent);

package/dist/dashboard/components/templates/TemplatePreview.tsx

@@ -0,0 +1,214 @@
+/**
+ * Template Preview Component
+ *
+ * Shows detailed information about a selected template including
+ * required fields, sample data, and configuration preview.
+ */
+
+import * as React from 'react';
+import { memo } from 'react';
+import {
+    FileText,
+    CheckCircle,
+    Circle,
+    Tag,
+    Download,
+    Copy,
+    ChevronDown,
+    ChevronRight,
+} from 'lucide-react';
+import { Badge, Button } from '@vendure/dashboard';
+import { toast } from 'sonner';
+import { TOAST_TEMPLATE } from '../../constants';
+import type { ImportTemplate } from '../../hooks/use-import-templates';
+
+export interface TemplatePreviewProps {
+    template: ImportTemplate;
+    onUseTemplate: () => void;
+}
+
+function TemplatePreviewComponent({ template, onUseTemplate }: TemplatePreviewProps) {
+    const [showSampleData, setShowSampleData] = React.useState(false);
+
+    const handleCopySampleData = React.useCallback(() => {
+        if (template.sampleData) {
+            const csvHeader = [...template.requiredFields, ...template.optionalFields].join(',');
+            const csvRows = template.sampleData.map(row =>
+                [...template.requiredFields, ...template.optionalFields]
+                    .map(field => row[field] ?? '')
+                    .join(','),
+            );
+            const csv = [csvHeader, ...csvRows].join('\n');
+            navigator.clipboard.writeText(csv).catch(() => {
+                // Silently fail if clipboard API is not available
+            });
+            toast.success(TOAST_TEMPLATE.SAMPLE_COPIED);
+        }
+    }, [template]);
+
+    const handleDownloadSample = React.useCallback(() => {
+        if (template.sampleData) {
+            const csvHeader = [...template.requiredFields, ...template.optionalFields].join(',');
+            const csvRows = template.sampleData.map(row =>
+                [...template.requiredFields, ...template.optionalFields]
+                    .map(field => {
+                        const value = row[field] ?? '';
+                        // Escape commas and quotes in CSV
+                        const strValue = String(value);
+                        if (strValue.includes(',') || strValue.includes('"')) {
+                            return `"${strValue.replace(/"/g, '""')}"`;
+                        }
+                        return strValue;
+                    })
+                    .join(','),
+            );
+            const csv = [csvHeader, ...csvRows].join('\n');
+
+            const blob = new Blob([csv], { type: 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${template.id}-sample.csv`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+
+            toast.success(TOAST_TEMPLATE.SAMPLE_DOWNLOADED);
+        }
+    }, [template]);
+
+    return (
+        <div className="border rounded-lg bg-card">
+            {/* Header */}
+            <div className="p-4 border-b">
+                <div className="flex items-start justify-between">
+                    <div>
+                        <h3 className="text-lg font-semibold">{template.name}</h3>
+                        <p className="text-sm text-muted-foreground mt-1">{template.description}</p>
+                    </div>
+                    <Button onClick={onUseTemplate}>
+                        Use Template
+                    </Button>
+                </div>
+
+                {/* Format badges */}
+                <div className="flex items-center gap-2 mt-3 flex-wrap">
+                    {template.formats?.map(format => (
+                        <Badge key={format} variant="outline" className="text-xs">
+                            {format.toUpperCase()}
+                        </Badge>
+                    ))}
+                </div>
+
+                {/* Tags */}
+                {template.tags && template.tags.length > 0 && (
+                    <div className="flex items-center gap-1.5 mt-3">
+                        <Tag className="h-3.5 w-3.5 text-muted-foreground" />
+                        {template.tags.map(tag => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                                {tag}
+                            </Badge>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Required Fields */}
+            <div className="p-4 border-b">
+                <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
+                    <FileText className="h-4 w-4" />
+                    Required Fields
+                </h4>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                    {template.requiredFields.map(field => (
+                        <div
+                            key={field}
+                            className="flex items-center gap-2 text-sm"
+                        >
+                            <CheckCircle className="h-4 w-4 text-green-500" />
+                            <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{field}</code>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Optional Fields */}
+            {template.optionalFields.length > 0 && (
+                <div className="p-4 border-b">
+                    <h4 className="text-sm font-medium mb-3">Optional Fields</h4>
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                        {template.optionalFields.map(field => (
+                            <div
+                                key={field}
+                                className="flex items-center gap-2 text-sm"
+                            >
+                                <Circle className="h-4 w-4 text-muted-foreground" />
+                                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{field}</code>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Sample Data */}
+            {template.sampleData && template.sampleData.length > 0 && (
+                <div className="p-4">
+                    <button
+                        type="button"
+                        onClick={() => setShowSampleData(!showSampleData)}
+                        className="flex items-center gap-2 text-sm font-medium w-full text-left"
+                    >
+                        {showSampleData ? (
+                            <ChevronDown className="h-4 w-4" />
+                        ) : (
+                            <ChevronRight className="h-4 w-4" />
+                        )}
+                        Sample Data ({template.sampleData.length} rows)
+                    </button>
+
+                    {showSampleData && (
+                        <div className="mt-3">
+                            <div className="flex justify-end gap-2 mb-2">
+                                <Button variant="ghost" size="sm" onClick={handleCopySampleData}>
+                                    <Copy className="h-3.5 w-3.5 mr-1" />
+                                    Copy CSV
+                                </Button>
+                                <Button variant="ghost" size="sm" onClick={handleDownloadSample}>
+                                    <Download className="h-3.5 w-3.5 mr-1" />
+                                    Download
+                                </Button>
+                            </div>
+                            <div className="overflow-x-auto border rounded">
+                                <table className="w-full text-xs">
+                                    <thead className="bg-muted">
+                                        <tr>
+                                            {[...template.requiredFields, ...template.optionalFields].map(field => (
+                                                <th key={field} className="px-3 py-2 text-left font-medium">
+                                                    {field}
+                                                </th>
+                                            ))}
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {template.sampleData.map((row, idx) => (
+                                            <tr key={idx} className="border-t">
+                                                {[...template.requiredFields, ...template.optionalFields].map(field => (
+                                                    <td key={field} className="px-3 py-2">
+                                                        {String(row[field] ?? '')}
+                                                    </td>
+                                                ))}
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export const TemplatePreview = memo(TemplatePreviewComponent);

package/dist/dashboard/components/templates/index.ts

@@ -0,0 +1,4 @@
+export { TemplateGallery } from './TemplateGallery';
+export type { TemplateGalleryProps } from './TemplateGallery';
+export { TemplatePreview } from './TemplatePreview';
+export type { TemplatePreviewProps } from './TemplatePreview';

package/dist/dashboard/components/wizards/export-wizard/DestinationStep.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { useCallback, memo, useMemo } from 'react';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from '@vendure/dashboard';
+import { FolderOpen } from 'lucide-react';
+import { useSecrets } from '../../../hooks/api';
+import { useOptionValues, useDestinationSchemas, type ConfigOptionValue, type DestinationSchema, type ConnectionSchemaField } from '../../../hooks/api/use-config-options';
+import { resolveIconName } from '../../../utils';
+import { WizardStepContainer } from '../shared';
+import { SelectableCard, SelectableCardGrid } from '../../shared/selectable-card';
+import { SchemaFormRenderer } from '../../shared/schema-form';
+import { STEP_CONTENT } from './constants';
+import type { ExportConfiguration, DestinationType } from './types';
+import type { AdapterSchema, AdapterSchemaField, SchemaFieldType } from '../../../../shared/types';
+
+interface DestinationStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function DestinationStep({ config, updateConfig, errors = {} }: DestinationStepProps) {
+    const destination = config.destination ?? { type: 'FILE' };
+
+    const { data: secretsData } = useSecrets();
+    const secretCodes = useMemo(
+        () => (secretsData?.items ?? []).map(s => s.code),
+        [secretsData],
+    );
+
+    const { options: destinationTypeOptions } = useOptionValues('destinationTypes');
+    const { schemas: destinationSchemas } = useDestinationSchemas();
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.destination.title}
+            description={STEP_CONTENT.destination.description}
+        >
+            <DestinationTypeSelection destination={destination} updateConfig={updateConfig} options={destinationTypeOptions} />
+
+            <DestinationConfigPanel
+                destination={destination}
+                updateConfig={updateConfig}
+                secretCodes={secretCodes}
+                schemas={destinationSchemas}
+            />
+        </WizardStepContainer>
+    );
+}
+
+interface DestinationConfigPanelProps {
+    destination: ExportConfiguration['destination'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    secretCodes: string[];
+    schemas: DestinationSchema[];
+}
+
+function DestinationConfigPanel({
+    destination,
+    updateConfig,
+    secretCodes,
+    schemas,
+}: DestinationConfigPanelProps) {
+    const schema = schemas.find(s => s.type === destination.type);
+
+    // DOWNLOAD: static message, no form
+    if (schema?.message) {
+        return (
+            <div className="p-4 rounded-lg bg-muted/50 text-sm text-muted-foreground">
+                <p>{schema.message}</p>
+            </div>
+        );
+    }
+
+    // Schema found with fields: render schema-driven editor
+    if (schema && schema.fields.length > 0) {
+        return (
+            <SchemaDestinationEditor
+                schema={schema}
+                destination={destination}
+                updateConfig={updateConfig}
+                secretCodes={secretCodes}
+            />
+        );
+    }
+
+    // No schema found: generic fallback
+    return <GenericDestinationConfig destinationType={destination.type} />;
+}
+
+interface DestinationTypeSelectionProps {
+    destination: ExportConfiguration['destination'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    options: ConfigOptionValue[];
+}
+
+function DestinationTypeSelection({ destination, updateConfig, options }: DestinationTypeSelectionProps) {
+    return (
+        <SelectableCardGrid columns={3}>
+            {options.map(type => (
+                <DestinationTypeCard
+                    key={type.value}
+                    type={type}
+                    destination={destination}
+                    updateConfig={updateConfig}
+                />
+            ))}
+        </SelectableCardGrid>
+    );
+}
+
+interface DestinationTypeCardProps {
+    type: ConfigOptionValue;
+    destination: ExportConfiguration['destination'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+}
+
+const DestinationTypeCard = memo(function DestinationTypeCard({
+    type,
+    destination,
+    updateConfig,
+}: DestinationTypeCardProps) {
+    const handleClick = useCallback(() => {
+        updateConfig({ destination: { type: type.value as DestinationType } });
+    }, [type.value, updateConfig]);
+
+    return (
+        <SelectableCard
+            icon={resolveIconName(type.icon) ?? FolderOpen}
+            title={type.label}
+            selected={destination.type === type.value}
+            onClick={handleClick}
+            data-testid={`datahub-export-destination-${type.value}-btn`}
+        />
+    );
+});
+
+// --- Schema-driven destination editor using SchemaFormRenderer ---
+
+/** Convert ConnectionSchemaField[] to AdapterSchema for SchemaFormRenderer. */
+function toAdapterSchema(fields: ConnectionSchemaField[]): AdapterSchema {
+    return {
+        fields: fields.map((f): AdapterSchemaField => ({
+            key: f.key,
+            label: f.label,
+            description: f.description ?? undefined,
+            type: (f.type || 'string') as SchemaFieldType,
+            required: f.required ?? undefined,
+            default: f.defaultValue,
+            placeholder: f.placeholder ?? undefined,
+            options: f.options?.map(o => ({ value: o.value, label: o.label })),
+        })),
+    };
+}
+
+interface SchemaDestinationEditorProps {
+    schema: DestinationSchema;
+    destination: ExportConfiguration['destination'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    secretCodes: string[];
+}
+
+function SchemaDestinationEditor({ schema, destination, updateConfig, secretCodes }: SchemaDestinationEditorProps) {
+    const configKey = schema.configKey as keyof typeof destination;
+    const currentConfig = (destination[configKey] as Record<string, unknown> | undefined) ?? {};
+
+    const adapterSchema = useMemo(() => toAdapterSchema(schema.fields), [schema.fields]);
+
+    const handleChange = useCallback((values: Record<string, unknown>) => {
+        updateConfig({
+            destination: {
+                ...destination,
+                [configKey]: values,
+            },
+        });
+    }, [destination, configKey, updateConfig]);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{schema.label}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <SchemaFormRenderer
+                    schema={adapterSchema}
+                    values={currentConfig}
+                    onChange={handleChange}
+                    secretCodes={secretCodes}
+                />
+            </CardContent>
+        </Card>
+    );
+}
+
+function GenericDestinationConfig({ destinationType }: { destinationType: string }) {
+    return (
+        <div className="p-4 rounded-lg bg-muted/50 text-sm text-muted-foreground">
+            <p>
+                No additional configuration is needed for the "{destinationType}" destination type.
+            </p>
+        </div>
+    );
+}