@oronts/vendure-data-hub-plugin 0.1.0

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+import { SENTINEL_VALUES } from '../../../../constants';
+
+export interface SelectFieldProps {
+    field: AdapterSchemaField;
+    value: string;
+    onChange: (value: string) => void;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function SelectField({ field, value, onChange, compact, disabled }: SelectFieldProps) {
+    const validOptions = field.options?.filter(o => o.value !== '') ?? [];
+    return (
+        <Select value={value ?? (field.default as string) ?? ''} onValueChange={onChange} disabled={disabled}>
+            <SelectTrigger className={compact ? 'h-8 text-sm' : ''}>
+                <SelectValue placeholder={field.placeholder ?? `Select ${field.label || field.key}`} />
+            </SelectTrigger>
+            <SelectContent>
+                {validOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}
+
+export interface ReferenceFieldProps {
+    field: AdapterSchemaField;
+    value: string;
+    onChange: (value: string) => void;
+    options: string[];
+    placeholder: string;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function ReferenceField({ field, value, onChange, options, placeholder, compact, disabled }: ReferenceFieldProps) {
+    const validOptions = options.filter(o => o !== '');
+    return (
+        <Select value={value ?? ''} onValueChange={onChange} disabled={disabled}>
+            <SelectTrigger className={compact ? 'h-8 text-sm' : ''}>
+                <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+                {validOptions.length === 0 ? (
+                    <SelectItem value={SENTINEL_VALUES.NONE} disabled>
+                        No options available
+                    </SelectItem>
+                ) : (
+                    validOptions.map((code) => (
+                        <SelectItem key={code} value={code}>
+                            {code}
+                        </SelectItem>
+                    ))
+                )}
+            </SelectContent>
+        </Select>
+    );
+}

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Input } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+import { normalizeFieldType } from '../utils';
+
+export interface StringFieldProps {
+    field: AdapterSchemaField;
+    value: string;
+    onChange: (value: string) => void;
+    compact?: boolean;
+    disabled?: boolean;
+}
+
+export function StringField({ field, value, onChange, compact, disabled }: StringFieldProps) {
+    const fieldType = normalizeFieldType(field.type);
+    const inputType = fieldType === 'password' ? 'password' :
+                      fieldType === 'email' ? 'email' :
+                      fieldType === 'url' ? 'url' : 'text';
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(e.target.value);
+    }, [onChange]);
+
+    return (
+        <Input
+            id={field.key}
+            type={inputType}
+            value={value ?? field.default ?? ''}
+            onChange={handleChange}
+            placeholder={field.placeholder}
+            disabled={disabled}
+            className={compact ? 'h-8 text-sm' : ''}
+        />
+    );
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Textarea } from '@vendure/dashboard';
+import type { AdapterSchemaField } from '../../../../types';
+
+export interface TextareaFieldProps {
+    field: AdapterSchemaField;
+    value: string;
+    onChange: (value: string) => void;
+    compact?: boolean;
+    disabled?: boolean;
+    isCode?: boolean;
+}
+
+export function TextareaField({ field, value, onChange, compact, disabled, isCode = false }: TextareaFieldProps) {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onChange(e.target.value);
+    }, [onChange]);
+
+    return (
+        <Textarea
+            id={field.key}
+            value={value ?? field.default ?? ''}
+            onChange={handleChange}
+            placeholder={field.placeholder}
+            disabled={disabled}
+            rows={compact ? 2 : 5}
+            className={isCode ? 'font-mono text-sm' : (compact ? 'text-sm' : '')}
+        />
+    );
+}

package/dashboard/components/shared/schema-form/fields/index.ts

@@ -0,0 +1,23 @@
+export { StringField } from './StringField';
+export type { StringFieldProps } from './StringField';
+
+export { NumberField } from './NumberField';
+export type { NumberFieldProps } from './NumberField';
+
+export { BooleanField } from './BooleanField';
+export type { BooleanFieldProps } from './BooleanField';
+
+export { SelectField, ReferenceField } from './SelectField';
+export type { SelectFieldProps, ReferenceFieldProps } from './SelectField';
+
+export { JsonField } from './JsonField';
+export type { JsonFieldProps } from './JsonField';
+
+export { TextareaField } from './TextareaField';
+export type { TextareaFieldProps } from './TextareaField';
+
+export { FileUploadField } from './FileUploadField';
+export type { FileUploadFieldProps } from './FileUploadField';
+
+export { FieldWrapper } from './FieldWrapper';
+export type { FieldWrapperProps } from './FieldWrapper';

package/dashboard/components/shared/schema-form/index.ts

@@ -0,0 +1,2 @@
+export { SchemaFormRenderer, FIELD_TYPE_RENDERERS } from './SchemaFormRenderer';
+export type { FieldRendererProps, FieldRendererFn } from './SchemaFormRenderer';

package/dashboard/components/shared/schema-form/utils.ts

@@ -0,0 +1,3 @@
+export function normalizeFieldType(type: string): string {
+    return type.toLowerCase();
+}

package/dashboard/components/shared/selectable-card/SelectableCard.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { memo } from 'react';
+import { Badge } from '@vendure/dashboard';
+import type { SelectableCardProps, SelectableCardGridProps } from '../../../types';
+import { ICON_SIZES } from '../../../constants';
+
+function SelectableCardComponent({
+    icon: Icon,
+    title,
+    description,
+    badge,
+    selected,
+    onClick,
+    disabled = false,
+    className = '',
+}: SelectableCardProps) {
+    return (
+        <button
+            type="button"
+            disabled={disabled}
+            aria-pressed={selected}
+            className={`p-4 border rounded-lg text-left transition-all ${
+                selected
+                    ? 'border-primary bg-primary/5 ring-2 ring-primary/20'
+                    : 'hover:border-primary/50'
+            } ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+            onClick={onClick}
+        >
+            {Icon && (
+                <Icon className={`${ICON_SIZES.XL} mb-2 ${selected ? 'text-primary' : 'text-muted-foreground'}`} />
+            )}
+            <div className="flex items-center gap-2">
+                <span className="font-medium">{title}</span>
+                {badge !== undefined && (
+                    <Badge variant="secondary" className="text-xs">
+                        {badge}
+                    </Badge>
+                )}
+            </div>
+            {description && (
+                <div className="text-xs text-muted-foreground mt-1">{description}</div>
+            )}
+        </button>
+    );
+}
+
+export const SelectableCard = memo(SelectableCardComponent);
+
+export function SelectableCardGrid({
+    children,
+    columns = 4,
+    className = '',
+}: SelectableCardGridProps) {
+    const gridCols = {
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-2 md:grid-cols-4',
+    }[columns];
+
+    return (
+        <div className={`grid ${gridCols} gap-4 ${className}`}>
+            {children}
+        </div>
+    );
+}

package/dashboard/components/shared/selectable-card/index.ts

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

package/dashboard/components/shared/stat-card/StatCard.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { memo } from 'react';
+import { Card, CardContent, Skeleton } from '@vendure/dashboard';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { cn } from '../../../utils';
+import { TREND_DIRECTION, ICON_SIZES } from '../../../constants';
+import type { StatCardProps } from '../../../types';
+
+const VARIANT_STYLES: Record<string, string> = {
+    default: 'bg-card',
+    success: 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800',
+    warning: 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800',
+    error: 'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800',
+    info: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800',
+};
+
+const VALUE_STYLES: Record<string, string> = {
+    default: 'text-foreground',
+    success: 'text-emerald-700 dark:text-emerald-400',
+    warning: 'text-amber-700 dark:text-amber-400',
+    error: 'text-red-700 dark:text-red-400',
+    info: 'text-blue-700 dark:text-blue-400',
+};
+
+const TREND_STYLES: Record<string, string> = {
+    up: 'text-emerald-600 dark:text-emerald-400',
+    down: 'text-red-600 dark:text-red-400',
+    neutral: 'text-muted-foreground',
+};
+
+function StatCardComponent({
+    title,
+    value,
+    subtitle,
+    icon,
+    trend,
+    variant = 'default',
+    isLoading = false,
+    onClick,
+    className,
+}: StatCardProps) {
+    const TrendIcon =
+        trend?.direction === TREND_DIRECTION.UP
+            ? TrendingUp
+            : trend?.direction === TREND_DIRECTION.DOWN
+              ? TrendingDown
+              : Minus;
+
+    const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
+
+    if (isLoading) {
+        return (
+            <Card className={cn(VARIANT_STYLES[variant], className)}>
+                <CardContent className="p-4">
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-2">
+                            <Skeleton className="h-4 w-20" />
+                            <Skeleton className="h-8 w-16" />
+                        </div>
+                        <Skeleton className="h-10 w-10 rounded-full" />
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    const content = (
+        <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+                <div>
+                    <p className="text-sm text-muted-foreground">{title}</p>
+                    <p className={cn('text-2xl font-bold', VALUE_STYLES[variant])}>{value}</p>
+                    {subtitle && (
+                        <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
+                    )}
+                    {trend && (
+                        <div
+                            className={cn(
+                                'flex items-center gap-1 mt-1 text-xs',
+                                TREND_STYLES[trend.direction]
+                            )}
+                        >
+                            <TrendIcon className={ICON_SIZES.XS} />
+                            <span>{trend.label ?? `${Math.abs(trend.value)}%`}</span>
+                        </div>
+                    )}
+                </div>
+                {icon && (
+                    <div className="p-2.5 rounded-full bg-muted/50 text-muted-foreground">
+                        {icon}
+                    </div>
+                )}
+            </div>
+        </CardContent>
+    );
+
+    return (
+        <Card
+            className={cn(
+                VARIANT_STYLES[variant],
+                onClick && 'cursor-pointer hover:shadow-md transition-shadow',
+                className
+            )}
+            onClick={onClick}
+            onKeyDown={handleKeyDown}
+            role={onClick ? 'button' : undefined}
+            tabIndex={onClick ? 0 : undefined}
+            aria-label={onClick ? `${title}: ${value}` : undefined}
+            data-testid="datahub-statcard-card"
+        >
+            {content}
+        </Card>
+    );
+}
+
+export const StatCard = memo(StatCardComponent);

package/dashboard/components/shared/stat-card/index.ts

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { memo } from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+export interface AdapterRequiredWarningProps {
+    adapterTypeLabel?: string;
+    compact?: boolean;
+}
+
+export const AdapterRequiredWarning = memo(function AdapterRequiredWarning({
+    adapterTypeLabel = 'adapter',
+    compact = false,
+}: AdapterRequiredWarningProps) {
+    return (
+        <div className={`bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md ${compact ? 'p-2.5' : 'p-3'}`}>
+            <div className="flex items-center gap-2 text-amber-800 dark:text-amber-400">
+                <AlertTriangle className={`${compact ? 'h-4 w-4 shrink-0' : 'h-4 w-4'}`} />
+                <span className="text-sm font-medium">Select {adapterTypeLabel.startsWith('a') ? 'an' : 'a'} {adapterTypeLabel}</span>
+            </div>
+            <p className={`text-xs text-amber-700 mt-1 ${compact ? 'ml-6' : ''}`}>
+                This step requires {adapterTypeLabel.startsWith('a') ? 'an' : 'a'} {adapterTypeLabel} to be configured.
+            </p>
+        </div>
+    );
+});

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

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Input,
+    ScrollArea,
+    Badge,
+} from '@vendure/dashboard';
+import { Search, Loader2 } from 'lucide-react';
+import { useAdaptersByType } from '../../../hooks';
+import { filterAndGroupAdaptersByCategory } from '../../../utils';
+import { COMPONENT_HEIGHTS, SELECT_WIDTHS } from '../../../constants';
+import type { AdapterSelectorProps } from '../../../types';
+
+export function AdapterSelector({
+    stepType,
+    value,
+    onChange,
+    placeholder = 'Select adapter...',
+    disabled = false,
+    adapters: propAdapters,
+}: AdapterSelectorProps) {
+    const [search, setSearch] = React.useState('');
+    const { data: hookAdapters, isLoading } = useAdaptersByType(stepType);
+    const adapters = propAdapters || hookAdapters;
+
+    const groupedAdapters = React.useMemo(
+        () => filterAndGroupAdaptersByCategory(adapters ?? [], search),
+        [adapters, search]
+    );
+
+    const selectedAdapter = adapters?.find((a) => a.code === value);
+
+    if (isLoading && !propAdapters) {
+        return (
+            <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-muted">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                <span className="text-sm text-muted-foreground">Loading adapters...</span>
+            </div>
+        );
+    }
+
+    return (
+        <Select value={value} onValueChange={onChange} disabled={disabled}>
+            <SelectTrigger className="w-full">
+                <SelectValue placeholder={placeholder}>
+                    {selectedAdapter && (
+                        <div className="flex items-center gap-2">
+                            <span>{selectedAdapter.name}</span>
+                            {selectedAdapter.category && (
+                                <Badge variant="secondary" className="text-xs">
+                                    {selectedAdapter.category}
+                                </Badge>
+                            )}
+                        </div>
+                    )}
+                </SelectValue>
+            </SelectTrigger>
+            <SelectContent className={SELECT_WIDTHS.ADAPTER_SELECTOR}>
+                <div className="p-2 border-b">
+                    <div className="relative">
+                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                        <Input
+                            placeholder="Search adapters..."
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            className="pl-8"
+                        />
+                    </div>
+                </div>
+
+                <ScrollArea className={COMPONENT_HEIGHTS.LIST_PANE_MD}>
+                    {Object.keys(groupedAdapters).length === 0 ? (
+                        <div className="p-4 text-center text-sm text-muted-foreground">
+                            No adapters found
+                        </div>
+                    ) : (
+                        Object.entries(groupedAdapters).map(([category, categoryAdapters]) => (
+                            <div key={category} className="py-1">
+                                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    {category}
+                                </div>
+                                {categoryAdapters.map((adapter) => (
+                                    <SelectItem
+                                        key={adapter.code}
+                                        value={adapter.code}
+                                        className="py-2"
+                                    >
+                                        <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">
+                                                    {adapter.description}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </SelectItem>
+                                ))}
+                            </div>
+                        ))
+                    )}
+                </ScrollArea>
+            </SelectContent>
+        </Select>
+    );
+}