@oronts/vendure-data-hub-plugin 0.1.0

package/dashboard/components/shared/schema-form/SchemaFormRenderer.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { Label } from '@vendure/dashboard';
+import type { AdapterSchemaField, SchemaFormRendererProps } from '../../../types';
+import { normalizeFieldType } from './utils';
+import {
+    StringField,
+    NumberField,
+    BooleanField,
+    SelectField,
+    ReferenceField,
+    JsonField,
+    TextareaField,
+    FileUploadField,
+    FieldWrapper,
+} from './fields';
+
+/** Props passed to every field type renderer function in the registry. */
+export interface FieldRendererProps {
+    field: AdapterSchemaField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    compact: boolean;
+    disabled: boolean;
+    error?: string;
+    /** Secret codes available for reference fields. */
+    secretCodes: string[];
+    /** Connection codes available for reference fields. */
+    connectionCodes: string[];
+}
+
+/** A render function that returns a React element for a given field type. */
+export type FieldRendererFn = (props: FieldRendererProps) => React.ReactElement;
+
+function wrapField(
+    field: AdapterSchemaField,
+    compact: boolean,
+    error: string | undefined,
+    child: React.ReactNode,
+): React.ReactElement {
+    return (
+        <FieldWrapper key={field.key} field={field} compact={compact} error={error}>
+            {child}
+        </FieldWrapper>
+    );
+}
+
+const renderStringField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <StringField field={field} value={value as string} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} />,
+    );
+
+const renderNumberField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <NumberField field={field} value={value as number | undefined} onChange={onChange as (v: number | undefined) => void} compact={compact} disabled={disabled} />,
+    );
+
+const renderBooleanField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) => (
+    <div key={field.key} className={compact ? 'py-1' : 'py-2'}>
+        <div className="flex items-center justify-between">
+            <Label htmlFor={field.key} className={compact ? 'text-xs font-medium' : 'text-sm font-medium'}>
+                {field.label || field.key}
+                {field.required && <span className="text-destructive ml-0.5">*</span>}
+            </Label>
+            <BooleanField field={field} value={value as boolean} onChange={onChange as (v: boolean) => void} disabled={disabled} />
+        </div>
+        {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </div>
+);
+
+const renderSelectField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <SelectField field={field} value={value as string} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} />,
+    );
+
+const renderSecretField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error, secretCodes }) =>
+    wrapField(field, compact, error,
+        <ReferenceField field={field} value={value as string} onChange={onChange as (v: string) => void} options={secretCodes} placeholder="Select secret..." compact={compact} disabled={disabled} />,
+    );
+
+const renderConnectionField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error, connectionCodes }) =>
+    wrapField(field, compact, error,
+        <ReferenceField field={field} value={value as string} onChange={onChange as (v: string) => void} options={connectionCodes} placeholder="Select connection..." compact={compact} disabled={disabled} />,
+    );
+
+const renderJsonField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <JsonField field={field} value={value} onChange={onChange} compact={compact} disabled={disabled} />,
+    );
+
+const renderTextareaField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <TextareaField field={field} value={value as string} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} />,
+    );
+
+const renderCodeField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <TextareaField field={field} value={value as string} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} isCode />,
+    );
+
+const renderEntityField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) => {
+    if (field.options && field.options.length > 0) {
+        return wrapField(field, compact, error,
+            <SelectField field={field} value={value as string} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} />,
+        );
+    }
+    return wrapField(field, compact, error,
+        <StringField field={field} value={String(value ?? field.default ?? '')} onChange={onChange as (v: string) => void} compact={compact} disabled={disabled} />,
+    );
+};
+
+const renderFileUploadField: FieldRendererFn = ({ field, value, onChange, compact, disabled, error }) =>
+    wrapField(field, compact, error,
+        <FileUploadField field={field} value={value as string | undefined} onChange={onChange as (v: string | undefined) => void} compact={compact} disabled={disabled} />,
+    );
+
+/**
+ * Registry mapping normalized field type strings to render functions.
+ * Exported so custom dashboards can add entries for custom field types.
+ */
+export const FIELD_TYPE_RENDERERS: Record<string, FieldRendererFn> = {
+    string: renderStringField,
+    text: renderStringField,
+    password: renderStringField,
+    email: renderStringField,
+    url: renderStringField,
+    number: renderNumberField,
+    int: renderNumberField,
+    float: renderNumberField,
+    boolean: renderBooleanField,
+    select: renderSelectField,
+    secret: renderSecretField,
+    connection: renderConnectionField,
+    json: renderJsonField,
+    object: renderJsonField,
+    array: renderJsonField,
+    textarea: renderTextareaField,
+    code: renderCodeField,
+    expression: renderCodeField,
+    entity: renderEntityField,
+    file: renderFileUploadField,
+    fileupload: renderFileUploadField,
+};
+
+function evaluateDependency(
+    dependsOn: AdapterSchemaField['dependsOn'] | undefined,
+    values: Record<string, unknown>
+): boolean {
+    if (!dependsOn) return true;
+
+    const fieldValue = values[dependsOn.field];
+    const targetValue = dependsOn.value;
+    const operator = dependsOn.operator ?? 'eq';
+
+    switch (operator) {
+        case 'eq':
+            return fieldValue === targetValue;
+        case 'ne':
+            return fieldValue !== targetValue;
+        case 'in':
+            return Array.isArray(targetValue) && targetValue.includes(fieldValue);
+        case 'exists':
+            return fieldValue !== undefined && fieldValue !== null && fieldValue !== '';
+        default:
+            return true;
+    }
+}
+
+export function SchemaFormRenderer({
+    schema,
+    values,
+    onChange,
+    errors = {},
+    readOnly = false,
+    hideOptional = false,
+    secretCodes = [],
+    connectionCodes = [],
+    compact = false,
+}: SchemaFormRendererProps) {
+    const visibleFields = useMemo(() => {
+        if (!schema?.fields) return [];
+        return schema.fields.filter((field) => {
+            if (field.hidden) return false;
+            if (hideOptional && !field.required && !field.advanced) return false;
+            if (!evaluateDependency(field.dependsOn, values)) return false;
+            return true;
+        });
+    }, [schema?.fields, values, hideOptional]);
+
+    const groupedFields = useMemo(() => {
+        const groups: Record<string, AdapterSchemaField[]> = { _default: [] };
+        for (const field of visibleFields) {
+            const groupName = field.group || '_default';
+            if (!groups[groupName]) groups[groupName] = [];
+            groups[groupName].push(field);
+        }
+        return groups;
+    }, [visibleFields]);
+
+    const handleFieldChange = useCallback((key: string, value: unknown) => {
+        onChange({ ...values, [key]: value });
+    }, [onChange, values]);
+
+    const renderField = (field: AdapterSchemaField) => {
+        const value = values[field.key];
+        const error = errors[field.key];
+        const fieldType = normalizeFieldType(field.type);
+
+        const rendererProps: FieldRendererProps = {
+            field,
+            value,
+            onChange: (v: unknown) => handleFieldChange(field.key, v),
+            compact,
+            disabled: readOnly,
+            error,
+            secretCodes,
+            connectionCodes,
+        };
+
+        const renderer = FIELD_TYPE_RENDERERS[fieldType];
+        if (renderer) {
+            return renderer(rendererProps);
+        }
+
+        // Fallback for unknown types: select if options exist, otherwise string input
+        if (field.options && field.options.length > 0) {
+            return renderSelectField(rendererProps);
+        }
+        return renderStringField({ ...rendererProps, value: String(value ?? field.default ?? '') });
+    };
+
+    return (
+        <div className={compact ? 'space-y-2' : 'space-y-4'}>
+            {Object.entries(groupedFields).map(([groupName, fields]) => (
+                <div key={groupName} className={compact ? 'space-y-2' : 'space-y-4'}>
+                    {groupName !== '_default' && (
+                        <h4 className="text-sm font-medium text-muted-foreground border-b pb-2 capitalize">
+                            {groupName.replace(/-/g, ' ')}
+                        </h4>
+                    )}
+                    <div className={groupName !== '_default' ? 'pl-2 border-l-2 space-y-3' : ''}>
+                        {fields.map(renderField)}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

package/dashboard/components/shared/schema-form/fields/BooleanField.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Switch } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+
+export interface BooleanFieldProps {
+    field: AdapterSchemaField;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+}
+
+export function BooleanField({ field, value, onChange, disabled }: BooleanFieldProps) {
+    return (
+        <div className="flex items-center gap-2">
+            <Switch
+                id={field.key}
+                checked={value ?? (field.default as boolean) ?? false}
+                onCheckedChange={onChange}
+                disabled={disabled}
+            />
+            {field.description && (
+                <span className="text-xs text-muted-foreground">{field.description}</span>
+            )}
+        </div>
+    );
+}

package/dashboard/components/shared/schema-form/fields/FieldWrapper.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Label } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+
+export interface FieldWrapperProps {
+    field: AdapterSchemaField;
+    compact?: boolean;
+    error?: string;
+    children: React.ReactNode;
+}
+
+export function FieldWrapper({ field, compact, error, children }: FieldWrapperProps) {
+    return (
+        <div className={compact ? 'space-y-1' : 'space-y-2'}>
+            <div className="flex items-center gap-1">
+                <Label htmlFor={field.key} className={compact ? 'text-xs font-medium' : 'text-sm font-medium'}>
+                    {field.label || field.key}
+                    {field.required && <span className="text-destructive ml-0.5">*</span>}
+                </Label>
+            </div>
+            {children}
+            {field.description && !compact && (
+                <p className="text-xs text-muted-foreground">{field.description}</p>
+            )}
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/dashboard/components/shared/schema-form/fields/FileUploadField.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { Button } from '@vendure/dashboard';
+import { Upload, CheckCircle2, X, RefreshCw } from 'lucide-react';
+import type { AdapterSchemaField } from '../../../../types';
+import { getErrorMessage } from '../../../../../shared';
+import { DATAHUB_API_UPLOAD } from '../../../../constants';
+import { buildAcceptString } from '../../../../constants/file-format-registry';
+import { formatFileSize } from '../../../../utils';
+
+export interface FileUploadFieldProps {
+    field: AdapterSchemaField;
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function FileUploadField({ field, value, onChange, compact, disabled }: FileUploadFieldProps) {
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileSelect = useCallback(async (file: File) => {
+        setSelectedFile(file);
+        setError(null);
+        setUploading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const uploadResponse = await fetch(DATAHUB_API_UPLOAD, {
+                method: 'POST',
+                body: formData,
+                credentials: 'include',
+            });
+
+            if (!uploadResponse.ok) {
+                const errorData = await uploadResponse.json().catch(() => ({}));
+                throw new Error(errorData.error || `Upload failed: ${uploadResponse.status}`);
+            }
+
+            const uploadResult = await uploadResponse.json();
+
+            if (!uploadResult.success || !uploadResult.file) {
+                throw new Error(uploadResult.error || 'Upload failed');
+            }
+
+            const fileId = uploadResult.file.id;
+            setUploadedFileName(uploadResult.file.originalName || file.name);
+            onChange(fileId);
+        } catch (err) {
+            setError(getErrorMessage(err));
+            setSelectedFile(null);
+        } finally {
+            setUploading(false);
+        }
+    }, [onChange]);
+
+    const handleClear = useCallback(() => {
+        setSelectedFile(null);
+        setUploadedFileName(null);
+        setError(null);
+        onChange(undefined);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    }, [onChange]);
+
+    const handleDrop = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        if (file && !disabled) handleFileSelect(file);
+    }, [disabled, handleFileSelect]);
+
+    const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) handleFileSelect(file);
+    }, [handleFileSelect]);
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+    }, []);
+
+    const hasFile = !!value || !!uploadedFileName;
+    const displayName = uploadedFileName || (value ? `File ID: ${value}` : null);
+    const padding = compact ? 'p-3' : 'p-4';
+
+    const handleDropzoneClick = useCallback(() => {
+        if (!value && !uploadedFileName && !disabled) inputRef.current?.click();
+    }, [disabled, value, uploadedFileName]);
+
+    const handleDropzoneKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!value && !uploadedFileName && !disabled) inputRef.current?.click();
+        }
+    }, [disabled, value, uploadedFileName]);
+
+    const handleRemoveClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        handleClear();
+    }, [handleClear]);
+
+    return (
+        <div className="space-y-2">
+            <div
+                className={`border-2 border-dashed rounded-lg ${padding} text-center transition-colors ${
+                    hasFile
+                        ? 'border-green-500 bg-green-50 dark:bg-green-950/20'
+                        : 'border-muted-foreground/25 hover:border-primary/50 cursor-pointer'
+                } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+                onClick={handleDropzoneClick}
+                onKeyDown={handleDropzoneKeyDown}
+                role="button"
+                tabIndex={disabled ? -1 : 0}
+                aria-label="Upload file"
+                aria-disabled={disabled}
+            >
+                <input
+                    ref={inputRef}
+                    type="file"
+                    accept={buildAcceptString()}
+                    onChange={handleInputChange}
+                    className="hidden"
+                    disabled={disabled}
+                />
+
+                {uploading ? (
+                    <div className="flex flex-col items-center gap-2">
+                        <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+                        <p className="text-sm">Uploading...</p>
+                    </div>
+                ) : hasFile ? (
+                    <div className="flex flex-col items-center gap-2">
+                        <CheckCircle2 className="w-6 h-6 text-green-500" />
+                        <p className="text-sm font-medium truncate max-w-full">{displayName}</p>
+                        {selectedFile && (
+                            <p className="text-xs text-muted-foreground">
+                                {formatFileSize(selectedFile.size)}
+                            </p>
+                        )}
+                        {!disabled && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="mt-1 h-7 text-xs"
+                                onClick={handleRemoveClick}
+                            >
+                                <X className="w-3 h-3 mr-1" />
+                                Remove
+                            </Button>
+                        )}
+                    </div>
+                ) : (
+                    <div className="flex flex-col items-center gap-2">
+                        <Upload className="w-6 h-6 text-muted-foreground" />
+                        <p className="text-sm">Drop file or click to browse</p>
+                        <p className="text-xs text-muted-foreground">CSV, JSON, Excel, XML</p>
+                    </div>
+                )}
+            </div>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/dashboard/components/shared/schema-form/fields/JsonField.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Textarea } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+import { DEBOUNCE_DELAYS } from '../../../../constants';
+
+export interface JsonFieldProps {
+    field: AdapterSchemaField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function JsonField({ field, value, onChange, compact, disabled }: JsonFieldProps) {
+    const [text, setText] = useState(() => {
+        try {
+            return value ? JSON.stringify(value, null, 2) : '';
+        } catch {
+            return '';
+        }
+    });
+    const [error, setError] = useState<string | null>(null);
+    const [isPending, setIsPending] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const mountedRef = useRef(true);
+
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        try {
+            const newText = value ? JSON.stringify(value, null, 2) : '';
+            const currentParsed = text.trim() ? JSON.parse(text) : undefined;
+            if (JSON.stringify(currentParsed) !== JSON.stringify(value)) {
+                setText(newText);
+                setError(null);
+            }
+        } catch {
+            // JSON parse/stringify failed - keep existing text
+        }
+    }, [value, text]);
+
+    const validateJson = useCallback((jsonText: string): string | null => {
+        if (!jsonText.trim()) {
+            return null;
+        }
+        try {
+            JSON.parse(jsonText);
+            return null;
+        } catch (e) {
+            const parseError = e as SyntaxError;
+            let message = parseError.message
+                .replace(/^JSON\.parse: /, '')
+                .replace(/^SyntaxError: /, '');
+
+            const posMatch = message.match(/at position (\d+)/i);
+            if (posMatch) {
+                const pos = parseInt(posMatch[1], 10);
+                const lines = jsonText.substring(0, pos).split('\n');
+                const line = lines.length;
+                const col = lines[lines.length - 1].length + 1;
+                message = message.replace(/ at position \d+/, '').replace(/ in JSON at position \d+/, '');
+                return `Invalid JSON: ${message} (line ${line}, col ${col})`;
+            }
+            return `Invalid JSON: ${message}`;
+        }
+    }, []);
+
+    const handleChange = useCallback((newText: string) => {
+        setText(newText);
+        setIsPending(true);
+
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            if (!mountedRef.current) return;
+
+            setIsPending(false);
+            const validationError = validateJson(newText);
+
+            if (validationError) {
+                setError(validationError);
+            } else {
+                setError(null);
+                if (!newText.trim()) {
+                    onChange(undefined);
+                } else {
+                    try {
+                        onChange(JSON.parse(newText));
+                    } catch {
+                        // JSON parse failed - already handled by validation above
+                    }
+                }
+            }
+        }, DEBOUNCE_DELAYS.JSON_VALIDATION);
+    }, [onChange, validateJson]);
+
+    const getBorderClass = useCallback(() => {
+        if (disabled) return '';
+        if (error) return 'border-destructive focus:border-destructive focus:ring-destructive/20';
+        if (isPending) return 'border-amber-400';
+        return '';
+    }, [disabled, error, isPending]);
+
+    const handleTextareaChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        handleChange(e.target.value);
+    }, [handleChange]);
+
+    return (
+        <div className="space-y-1">
+            <Textarea
+                id={field.key}
+                value={text}
+                onChange={handleTextareaChange}
+                placeholder={field.placeholder ?? '{}'}
+                disabled={disabled}
+                rows={compact ? 3 : 6}
+                className={`font-mono text-xs ${getBorderClass()}`}
+            />
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/dashboard/components/shared/schema-form/fields/NumberField.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Input } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+
+export interface NumberFieldProps {
+    field: AdapterSchemaField;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function NumberField({ field, value, onChange, compact, disabled }: NumberFieldProps) {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const val = e.target.value;
+        onChange(val === '' ? undefined : Number(val));
+    }, [onChange]);
+
+    return (
+        <Input
+            id={field.key}
+            type="number"
+            value={value ?? field.default ?? ''}
+            onChange={handleChange}
+            placeholder={field.placeholder}
+            disabled={disabled}
+            min={field.validation?.min}
+            max={field.validation?.max}
+            className={compact ? 'h-8 text-sm' : ''}
+        />
+    );
+}