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

package/dashboard/components/shared/CodeEditor.tsx

@@ -0,0 +1,289 @@
+import * as React from 'react';
+import { useCallback, useRef, useMemo, useState } from 'react';
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@vendure/dashboard';
+import { Maximize2, Minimize2, WandSparkles } from 'lucide-react';
+
+/**
+ * Lightweight JavaScript formatter. Handles indentation, brace/bracket alignment,
+ * semicolon insertion, and basic whitespace normalization without external deps.
+ */
+function formatJavaScript(code: string): string {
+    if (!code.trim()) return code;
+
+    const lines = code.split('\n');
+    let indent = 0;
+    const indentStr = '  ';
+    const result: string[] = [];
+
+    for (const rawLine of lines) {
+        let line = rawLine.trim();
+        if (!line) {
+            // Preserve blank lines (max 1 consecutive)
+            if (result.length > 0 && result[result.length - 1] !== '') {
+                result.push('');
+            }
+            continue;
+        }
+
+        // Decrease indent for closing braces/brackets/parens
+        if (/^[}\])]/.test(line)) {
+            indent = Math.max(0, indent - 1);
+        }
+
+        // Apply current indentation
+        result.push(indentStr.repeat(indent) + line);
+
+        // Increase indent for opening braces/brackets (not in strings/comments)
+        const stripped = line.replace(/\/\/.*$/, '').replace(/'[^']*'|"[^"]*"|`[^`]*`/g, '""');
+        const opens = (stripped.match(/[{(\[]/g) || []).length;
+        const closes = (stripped.match(/[})\]]/g) || []).length;
+        indent = Math.max(0, indent + opens - closes);
+    }
+
+    // Remove trailing blank lines
+    while (result.length > 0 && result[result.length - 1] === '') {
+        result.pop();
+    }
+
+    return result.join('\n');
+}
+
+export interface CodeEditorProps {
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    rows: number;
+    className?: string;
+    showFormatButton?: boolean;
+}
+
+/**
+ * Code editor with line numbers, Tab key support, and synchronized scroll.
+ * Used by both SchemaFormRenderer (TextareaField) and OperatorFieldInput.
+ */
+export function CodeEditor({
+    id,
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    rows,
+    className,
+    showFormatButton,
+}: CodeEditorProps) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const lineCount = useMemo(() => {
+        const lines = (value || '').split('\n').length;
+        return Math.max(lines, rows);
+    }, [value, rows]);
+
+    const lineNumbers = useMemo(
+        () => Array.from({ length: lineCount }, (_, i) => i + 1),
+        [lineCount],
+    );
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            onChange(e.target.value);
+        },
+        [onChange],
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                const ta = e.currentTarget;
+                const start = ta.selectionStart;
+                const end = ta.selectionEnd;
+                const newValue = value.substring(0, start) + '  ' + value.substring(end);
+                onChange(newValue);
+                requestAnimationFrame(() => {
+                    ta.selectionStart = ta.selectionEnd = start + 2;
+                });
+            }
+            // Enter key: auto-indent to match current line
+            if (e.key === 'Enter') {
+                const ta = e.currentTarget;
+                const start = ta.selectionStart;
+                const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+                const currentLine = value.substring(lineStart, start);
+                const match = currentLine.match(/^(\s*)/);
+                const currentIndent = match ? match[1] : '';
+
+                // Add extra indent if line ends with { or (
+                const trimmed = currentLine.trimEnd();
+                const extraIndent = /[{(\[]$/.test(trimmed) ? '  ' : '';
+
+                e.preventDefault();
+                const newValue = value.substring(0, start) + '\n' + currentIndent + extraIndent + value.substring(ta.selectionEnd);
+                onChange(newValue);
+                const newPos = start + 1 + currentIndent.length + extraIndent.length;
+                requestAnimationFrame(() => {
+                    ta.selectionStart = ta.selectionEnd = newPos;
+                });
+            }
+        },
+        [value, onChange],
+    );
+
+    const handleScroll = useCallback(() => {
+        const ta = textareaRef.current;
+        const gutter = ta?.parentElement?.querySelector('[data-gutter]') as HTMLElement | null;
+        if (ta && gutter) {
+            gutter.scrollTop = ta.scrollTop;
+        }
+    }, []);
+
+    const handleFormat = useCallback(() => {
+        onChange(formatJavaScript(value));
+    }, [value, onChange]);
+
+    return (
+        <div className={`relative rounded-md border border-input bg-background overflow-hidden focus-within:ring-1 focus-within:ring-ring ${className ?? ''}`}>
+            {showFormatButton && (
+                <div className="flex items-center justify-between px-2 py-1 bg-muted/30 border-b border-input">
+                    <span className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">JavaScript</span>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-5 text-[10px] gap-1 px-1.5 text-muted-foreground hover:text-foreground"
+                        onClick={handleFormat}
+                        type="button"
+                        disabled={disabled}
+                    >
+                        <WandSparkles className="h-3 w-3" />
+                        Format
+                    </Button>
+                </div>
+            )}
+            <div className="flex">
+                <div
+                    data-gutter
+                    className="flex flex-col items-end pt-2 pb-2 px-2 bg-muted/50 text-muted-foreground text-xs font-mono select-none overflow-hidden border-r border-input"
+                    style={{ minWidth: '2.5rem' }}
+                    aria-hidden="true"
+                >
+                    {lineNumbers.map((n) => (
+                        <div key={n} className="leading-5 h-5">{n}</div>
+                    ))}
+                </div>
+                <textarea
+                    ref={textareaRef}
+                    id={id}
+                    value={value ?? ''}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onScroll={handleScroll}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    rows={rows}
+                    spellCheck={false}
+                    className="flex-1 resize-none bg-transparent p-2 font-mono text-sm leading-5 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                    style={{ tabSize: 2 }}
+                />
+            </div>
+        </div>
+    );
+}
+
+export interface CodeEditorWithExpandProps {
+    id: string;
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    description?: string;
+}
+
+/**
+ * Code editor with an Expand button that opens a fullscreen dialog.
+ * Wraps CodeEditor with expand/collapse functionality.
+ * Includes Format button for JavaScript code formatting.
+ */
+export function CodeEditorWithExpand({
+    id,
+    label,
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    rows = 10,
+    description,
+}: CodeEditorWithExpandProps) {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <div className="space-y-1">
+            <div className="flex justify-end">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs gap-1"
+                    onClick={() => setExpanded(true)}
+                    type="button"
+                >
+                    <Maximize2 className="h-3 w-3" />
+                    Expand
+                </Button>
+            </div>
+
+            <CodeEditor
+                id={id}
+                value={value}
+                onChange={onChange}
+                placeholder={placeholder}
+                disabled={disabled}
+                rows={rows}
+                showFormatButton
+            />
+
+            {description && (
+                <p className="text-[11px] text-muted-foreground leading-relaxed mt-1">{description}</p>
+            )}
+
+            <Dialog open={expanded} onOpenChange={setExpanded}>
+                <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
+                    <DialogHeader className="flex-row items-center justify-between pr-8">
+                        <DialogTitle className="font-mono text-sm">
+                            {label}
+                        </DialogTitle>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 text-xs gap-1"
+                            onClick={() => setExpanded(false)}
+                            type="button"
+                        >
+                            <Minimize2 className="h-3 w-3" />
+                            Collapse
+                        </Button>
+                    </DialogHeader>
+                    <div className="flex-1 min-h-0">
+                        <CodeEditor
+                            id={`${id}-expanded`}
+                            value={value}
+                            onChange={onChange}
+                            placeholder={placeholder}
+                            disabled={disabled}
+                            rows={30}
+                            className="h-full"
+                            showFormatButton
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { Textarea } from '@vendure/dashboard';
 import type { AdapterSchemaField } from '../../../../types';
+import { CodeEditorWithExpand } from '../../CodeEditor';
 
 export interface TextareaFieldProps {
     field: AdapterSchemaField;
@@ -17,15 +18,29 @@ export function TextareaField({ field, value, onChange, compact, disabled, isCod
         onChange(e.target.value);
     }, [onChange]);
 
+    if (!isCode) {
+        return (
+            <Textarea
+                id={field.key}
+                value={value ?? field.default ?? ''}
+                onChange={handleChange}
+                placeholder={field.placeholder}
+                disabled={disabled}
+                rows={compact ? 2 : 5}
+                className={compact ? 'text-sm' : ''}
+            />
+        );
+    }
+
     return (
-        <Textarea
+        <CodeEditorWithExpand
             id={field.key}
+            label={field.label || field.key}
             value={value ?? field.default ?? ''}
-            onChange={handleChange}
+            onChange={onChange}
             placeholder={field.placeholder}
             disabled={disabled}
-            rows={compact ? 2 : 5}
-            className={isCode ? 'font-mono text-sm' : (compact ? 'text-sm' : '')}
+            rows={compact ? 6 : 12}
         />
     );
 }

package/dashboard/components/shared/step-config/AdapterSelector.tsx

@@ -44,7 +44,7 @@ export function AdapterSelector({
     }
 
     return (
-        <Select value={value} onValueChange={onChange} disabled={disabled}>
+        <Select value={value ?? ''} onValueChange={onChange} disabled={disabled}>
             <SelectTrigger className="w-full">
                 <SelectValue placeholder={placeholder}>
                     {selectedAdapter && (
@@ -92,7 +92,7 @@ export function AdapterSelector({
                                         <div className="flex flex-col gap-0.5">
                                             <span className="font-medium">{adapter.name}</span>
                                             {adapter.description && (
-                                                <span className="text-xs text-muted-foreground line-clamp-1">
+                                                <span className="text-xs text-muted-foreground line-clamp-2">
                                                     {adapter.description}
                                                 </span>
                                             )}

package/dashboard/components/shared/step-config/OperatorFieldInput.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from '@vendure/dashboard';
 import { FIELD_TYPE } from '../../../constants';
+import { CodeEditorWithExpand } from '../CodeEditor';
 
 export interface OperatorSchemaField {
     key: string;
@@ -79,6 +80,24 @@ export function OperatorFieldInput({ field, value, onChange }: OperatorFieldInpu
         );
     }
 
+    // Code field type — full code editor with line numbers, Tab support, and expand dialog
+    if (field.type === FIELD_TYPE.CODE || field.type === FIELD_TYPE.EXPRESSION) {
+        return (
+            <div className="space-y-1.5">
+                <FieldLabel field={field} />
+                <CodeEditorWithExpand
+                    id={`operator-${field.key}`}
+                    label={field.label || field.key}
+                    value={String(value ?? '')}
+                    onChange={(v) => handleChange(v)}
+                    placeholder={field.placeholder}
+                    rows={10}
+                    description={field.description}
+                />
+            </div>
+        );
+    }
+
     // JSON/Object/Array field type
     if (isObject) {
         return (

package/dashboard/components/shared/step-config/RouteConfigComponent.tsx

@@ -1,8 +1,19 @@
 import React, { useCallback } from 'react';
-import { Plus, Trash2, AlertTriangle } from 'lucide-react';
-import { Button, Input, Label } from '@vendure/dashboard';
+import { Plus, Trash2, AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import {
+    Button,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@vendure/dashboard';
 import { ROUTE_BRANCH_DEFAULTS, ERROR_MESSAGES } from '../../../constants';
 import { useStableKeys } from '../../../hooks';
+import { useComparisonOperators } from '../../../hooks/api/use-config-options';
+import type { ComparisonOperatorOption } from '../../../hooks/api/use-config-options';
 
 export interface RouteConfigComponentProps {
     readonly config: Record<string, unknown>;
@@ -10,9 +21,15 @@ export interface RouteConfigComponentProps {
     readonly showDuplicateWarning?: boolean;
 }
 
+interface BranchCondition {
+    field: string;
+    cmp: string;
+    value?: unknown;
+}
+
 interface Branch {
     name: string;
-    conditions?: unknown[];
+    when?: BranchCondition[];
 }
 
 export function RouteConfigComponent({
@@ -22,6 +39,7 @@ export function RouteConfigComponent({
 }: RouteConfigComponentProps) {
     const branches = (config.branches as Branch[]) ?? [];
     const branchKeys = useStableKeys(branches, 'branch');
+    const { operators: comparisonOperators } = useComparisonOperators();
 
     const getDuplicateBranches = React.useCallback((branchList: Branch[]) => {
         const names = branchList.map((b) => b.name.trim().toLowerCase());
@@ -50,11 +68,11 @@ export function RouteConfigComponent({
 
         onChange({
             ...config,
-            branches: [...branches, { name: newName, conditions: [] }],
+            branches: [...branches, { name: newName, when: [] }],
         });
     }, [branches, config, onChange]);
 
-    const updateBranch = useCallback((index: number, patch: Record<string, unknown>) => {
+    const updateBranch = useCallback((index: number, patch: Partial<Branch>) => {
         const newBranches = [...branches];
         newBranches[index] = { ...newBranches[index], ...patch };
         onChange({ ...config, branches: newBranches });
@@ -78,41 +96,28 @@ export function RouteConfigComponent({
                 </Button>
             </div>
 
-                        {showDuplicateWarning && hasDuplicates && (
+            {showDuplicateWarning && hasDuplicates && (
                 <div className="p-3 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md">
                     <div className="flex items-center gap-2 text-amber-800 dark:text-amber-400">
                         <AlertTriangle className="h-4 w-4" />
                         <span className="text-sm font-medium">Duplicate branch names detected</span>
                     </div>
-                    <p className="text-xs text-amber-700 mt-1">
+                    <p className="text-xs text-amber-700 dark:text-amber-500 mt-1">
                         {ERROR_MESSAGES.DUPLICATE_BRANCH_NAMES}. Duplicate: {Array.from(duplicates).join(', ')}
                     </p>
                 </div>
             )}
 
             {branches.map((branch, i) => (
-                <div key={branchKeys[i]} className="flex items-center gap-2 p-2 border rounded">
-                    <div className="flex-1">
-                        <Input
-                            value={branch.name}
-                            onChange={(e) => updateBranch(i, { name: e.target.value })}
-                            placeholder="Branch name"
-                            className={isBranchDuplicate(branch.name) ? 'border-amber-300 focus:border-amber-500' : ''}
-                        />
-                                                {!branch.name.trim() && (
-                            <p className="text-xs text-destructive mt-1">{ERROR_MESSAGES.BRANCH_NAME_EMPTY}</p>
-                        )}
-                    </div>
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => removeBranch(i)}
-                        className="text-destructive"
-                        aria-label={`Remove branch ${branch.name || i + 1}`}
-                    >
-                        <Trash2 className="h-4 w-4" />
-                    </Button>
-                </div>
+                <BranchEditor
+                    key={branchKeys[i]}
+                    branch={branch}
+                    isDuplicate={isBranchDuplicate(branch.name)}
+                    comparisonOperators={comparisonOperators}
+                    onUpdate={(patch) => updateBranch(i, patch)}
+                    onRemove={() => removeBranch(i)}
+                    index={i}
+                />
             ))}
 
             {branches.length === 0 && (
@@ -123,3 +128,187 @@ export function RouteConfigComponent({
         </div>
     );
 }
+
+interface BranchEditorProps {
+    branch: Branch;
+    isDuplicate: boolean;
+    comparisonOperators: ComparisonOperatorOption[];
+    onUpdate: (patch: Partial<Branch>) => void;
+    onRemove: () => void;
+    index: number;
+}
+
+function BranchEditor({
+    branch,
+    isDuplicate,
+    comparisonOperators,
+    onUpdate,
+    onRemove,
+    index,
+}: BranchEditorProps) {
+    const conditions = branch.when ?? [];
+    const [expanded, setExpanded] = React.useState(conditions.length > 0);
+
+    const addCondition = useCallback(() => {
+        const newConditions: BranchCondition[] = [...conditions, { field: '', cmp: 'eq', value: '' }];
+        onUpdate({ when: newConditions });
+        setExpanded(true);
+    }, [conditions, onUpdate]);
+
+    const updateCondition = useCallback((condIndex: number, patch: Partial<BranchCondition>) => {
+        const newConditions = [...conditions];
+        newConditions[condIndex] = { ...newConditions[condIndex], ...patch };
+        onUpdate({ when: newConditions });
+    }, [conditions, onUpdate]);
+
+    const removeCondition = useCallback((condIndex: number) => {
+        onUpdate({ when: conditions.filter((_, i) => i !== condIndex) });
+    }, [conditions, onUpdate]);
+
+    return (
+        <div className="border rounded-md overflow-hidden">
+            {/* Branch header: name + delete */}
+            <div className="flex items-center gap-2 p-2 bg-muted/30">
+                <button
+                    type="button"
+                    className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
+                    onClick={() => setExpanded(!expanded)}
+                    aria-label={expanded ? 'Collapse conditions' : 'Expand conditions'}
+                >
+                    {expanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+                </button>
+                <div className="flex-1">
+                    <Input
+                        value={branch.name}
+                        onChange={(e) => onUpdate({ name: e.target.value })}
+                        placeholder="Branch name"
+                        className={`h-8 ${isDuplicate ? 'border-amber-300 focus:border-amber-500' : ''}`}
+                    />
+                    {!branch.name.trim() && (
+                        <p className="text-xs text-destructive mt-1">{ERROR_MESSAGES.BRANCH_NAME_EMPTY}</p>
+                    )}
+                </div>
+                <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
+                    {conditions.length === 0 ? 'catch-all' : `${conditions.length} rule${conditions.length !== 1 ? 's' : ''}`}
+                </span>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onRemove}
+                    className="text-destructive h-8 w-8 p-0"
+                    aria-label={`Remove branch ${branch.name || index + 1}`}
+                >
+                    <Trash2 className="h-4 w-4" />
+                </Button>
+            </div>
+
+            {/* Conditions section */}
+            {expanded && (
+                <div className="p-2 space-y-2 border-t">
+                    {conditions.length === 0 ? (
+                        <p className="text-xs text-muted-foreground italic py-1">
+                            All records (catch-all) -- add conditions to filter records into this branch
+                        </p>
+                    ) : (
+                        <>
+                            <p className="text-xs text-muted-foreground font-medium">
+                                Conditions (all must match):
+                            </p>
+                            {conditions.map((cond, ci) => (
+                                <ConditionRow
+                                    key={ci}
+                                    condition={cond}
+                                    comparisonOperators={comparisonOperators}
+                                    onUpdate={(patch) => updateCondition(ci, patch)}
+                                    onRemove={() => removeCondition(ci)}
+                                />
+                            ))}
+                        </>
+                    )}
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addCondition}>
+                        <Plus className="h-3 w-3 mr-1" />
+                        Add Condition
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ConditionRowProps {
+    condition: BranchCondition;
+    comparisonOperators: ComparisonOperatorOption[];
+    onUpdate: (patch: Partial<BranchCondition>) => void;
+    onRemove: () => void;
+}
+
+function ConditionRow({ condition, comparisonOperators, onUpdate, onRemove }: ConditionRowProps) {
+    const operatorDef = comparisonOperators.find((op) => op.value === condition.cmp);
+    const showValueInput = !operatorDef?.noValue;
+
+    return (
+        <div className="flex items-center gap-1.5">
+            {/* Field path */}
+            <Input
+                value={condition.field}
+                onChange={(e) => onUpdate({ field: e.target.value })}
+                placeholder="field.path"
+                className="flex-1 h-7 text-xs font-mono"
+            />
+
+            {/* Comparison operator */}
+            <Select value={condition.cmp} onValueChange={(v) => onUpdate({ cmp: v })}>
+                <SelectTrigger className="w-[120px] h-7 text-xs">
+                    <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                    {comparisonOperators.map((op) => (
+                        <SelectItem key={op.value} value={op.value}>
+                            {op.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+
+            {/* Value */}
+            {showValueInput && (
+                <Input
+                    value={formatConditionValue(condition.value)}
+                    onChange={(e) => onUpdate({ value: parseConditionValue(e.target.value) })}
+                    placeholder="value"
+                    className="flex-1 h-7 text-xs"
+                />
+            )}
+
+            {/* Remove */}
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 shrink-0"
+                onClick={onRemove}
+                aria-label="Remove condition"
+            >
+                <Trash2 className="h-3 w-3 text-destructive" />
+            </Button>
+        </div>
+    );
+}
+
+function formatConditionValue(value: unknown): string {
+    if (value === null) return 'null';
+    if (value === undefined) return '';
+    if (typeof value === 'boolean') return String(value);
+    if (typeof value === 'number') return String(value);
+    return String(value);
+}
+
+function parseConditionValue(raw: string): unknown {
+    const trimmed = raw.trim();
+    if (trimmed === 'null') return null;
+    if (trimmed === 'true') return true;
+    if (trimmed === 'false') return false;
+    if (trimmed !== '' && !isNaN(Number(trimmed)) && trimmed === String(Number(trimmed))) {
+        return Number(trimmed);
+    }
+    return raw;
+}