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

package/dist/dashboard/hooks/use-adapter-catalog.ts

@@ -0,0 +1,253 @@
+import * as React from 'react';
+import {
+    GitBranch,
+    Settings,
+    type LucideIcon,
+} from 'lucide-react';
+import { useAdapters } from './api/use-adapters';
+import { useConnectionCodes } from './api/use-connections';
+import { useSecrets } from './api/use-secrets';
+import { QUERY_LIMITS, FALLBACK_COLORS, UI_ADAPTER_CATEGORY, ADAPTER_TYPE_TO_NODE_TYPE, ADAPTER_TYPE_TO_CATEGORY } from '../constants';
+import { resolveIconName } from '../utils/icon-resolver';
+
+interface CatalogSchemaField {
+    key: string;
+    label?: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    defaultValue?: unknown;
+    placeholder?: string;
+    options?: Array<{ value: string; label: string }>;
+}
+
+export interface AdapterMetadata {
+    code: string;
+    type: string;
+    name: string;
+    description?: string;
+    icon: LucideIcon;
+    color: string;
+    category: string;
+    nodeType: AdapterNodeType;
+    schema?: {
+        fields: CatalogSchemaField[];
+    };
+    entityType?: string;
+    formatType?: string;
+    patchableFields?: string[];
+    editorType?: string;
+    summaryTemplate?: string;
+    categoryLabel?: string;
+    categoryOrder?: number;
+    wizardHidden?: boolean;
+    builtIn?: boolean;
+}
+
+type AdapterNodeType = import('../types').VisualNodeCategory;
+
+interface AdapterCatalog {
+    sources: AdapterMetadata[];
+    transforms: AdapterMetadata[];
+    validation: AdapterMetadata[];
+    routing: AdapterMetadata[];
+    destinations: AdapterMetadata[];
+    feeds: AdapterMetadata[];
+    exports: AdapterMetadata[];
+    sinks: AdapterMetadata[];
+    all: AdapterMetadata[];
+}
+
+function adapterTypeToNodeType(adapterType: string): AdapterNodeType {
+    return (ADAPTER_TYPE_TO_NODE_TYPE[adapterType] ?? 'transform') as AdapterNodeType;
+}
+
+function adapterTypeToCategory(adapterType: string): string {
+    return ADAPTER_TYPE_TO_CATEGORY[adapterType] ?? 'other';
+}
+
+function buildAdapterMetadata(adapter: {
+    code: string;
+    type: string;
+    name?: string | null;
+    description?: string | null;
+    icon?: string | null;
+    color?: string | null;
+    schema?: {
+        fields: Array<{
+            key: string;
+            label?: string | null;
+            type: string;
+            required?: boolean | null;
+            description?: string | null;
+            defaultValue?: unknown;
+            placeholder?: string | null;
+            options?: Array<{ value: string; label: string }> | null;
+        }>;
+    };
+    entityType?: string | null;
+    formatType?: string | null;
+    patchableFields?: readonly string[] | null;
+    editorType?: string | null;
+    summaryTemplate?: string | null;
+    categoryLabel?: string | null;
+    categoryOrder?: number | null;
+    wizardHidden?: boolean | null;
+    builtIn?: boolean | null;
+}): AdapterMetadata {
+    const code = adapter.code;
+    const type = adapter.type;
+
+    const icon = resolveIconName(adapter.icon) ?? Settings;
+    const color = adapter.color ?? FALLBACK_COLORS.UNKNOWN_STEP_COLOR;
+
+    let schema = adapter.schema;
+    if (typeof schema === 'string') {
+        try {
+            schema = JSON.parse(schema);
+        } catch {
+            schema = { fields: [] };
+        }
+    }
+
+    const mappedFields: CatalogSchemaField[] = (schema?.fields ?? []).map((f) => ({
+        key: f.key,
+        label: f.label ?? undefined,
+        type: f.type,
+        required: f.required ?? undefined,
+        description: f.description ?? undefined,
+        defaultValue: f.defaultValue ?? undefined,
+        placeholder: f.placeholder ?? undefined,
+        options: f.options ?? undefined,
+    }));
+
+    return {
+        code,
+        type,
+        name: adapter.name ?? code,
+        description: adapter.description ?? undefined,
+        icon,
+        color,
+        category: adapterTypeToCategory(type),
+        nodeType: adapterTypeToNodeType(type),
+        schema: { fields: mappedFields },
+        entityType: adapter.entityType ?? undefined,
+        formatType: adapter.formatType ?? undefined,
+        patchableFields: adapter.patchableFields ? [...adapter.patchableFields] : undefined,
+        editorType: adapter.editorType ?? undefined,
+        summaryTemplate: adapter.summaryTemplate ?? undefined,
+        categoryLabel: adapter.categoryLabel ?? undefined,
+        categoryOrder: adapter.categoryOrder ?? undefined,
+        wizardHidden: adapter.wizardHidden ?? undefined,
+        builtIn: adapter.builtIn ?? undefined,
+    };
+}
+
+const CORE_ADAPTERS: AdapterMetadata[] = [
+    {
+        code: 'condition',
+        type: 'ROUTER',
+        name: 'Condition',
+        description: 'Route records based on conditions',
+        icon: GitBranch,
+        color: '#f97316',
+        category: UI_ADAPTER_CATEGORY.ROUTING,
+        nodeType: 'condition',
+        schema: {
+            fields: [
+                { key: 'expression', label: 'Condition Expression', type: 'text', required: true, description: 'JavaScript expression to evaluate (e.g., price > 100)' },
+            ],
+        },
+    },
+];
+
+interface UseAdapterCatalogResult {
+    catalog: AdapterCatalog;
+    adapters: AdapterMetadata[];
+    connectionCodes: string[];
+    secretOptions: Array<{ code: string; provider?: string }>;
+    isLoading: boolean;
+    error: Error | null;
+    getAdapter: (code: string) => AdapterMetadata | undefined;
+    getAdaptersByType: (type: string) => AdapterMetadata[];
+    getAdaptersByNodeType: (nodeType: AdapterNodeType) => AdapterMetadata[];
+}
+
+export function useAdapterCatalog(): UseAdapterCatalogResult {
+    const { data: adaptersData, isLoading: adaptersLoading, error: adaptersError } = useAdapters();
+    const { data: connectionCodesData } = useConnectionCodes();
+    const { data: secretsData } = useSecrets({ take: QUERY_LIMITS.SECRETS_LIST });
+
+    const adapters: AdapterMetadata[] = React.useMemo(() => {
+        const rawAdapters = adaptersData ?? [];
+        const mapped = rawAdapters.map(buildAdapterMetadata);
+
+        const codes = new Set(mapped.map(a => a.code));
+        for (const core of CORE_ADAPTERS) {
+            if (!codes.has(core.code)) {
+                mapped.push(core);
+            }
+        }
+
+        return mapped;
+    }, [adaptersData]);
+
+    const catalog: AdapterCatalog = React.useMemo(() => {
+        const sources = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.SOURCES);
+        const transforms = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.TRANSFORMS);
+        const validation = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.VALIDATION);
+        const routing = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.ROUTING);
+        const destinations = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.DESTINATIONS);
+        const feeds = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.FEEDS);
+        const exports = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.EXPORTS);
+        const sinks = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.SINKS);
+
+        return {
+            sources,
+            transforms,
+            validation,
+            routing,
+            destinations,
+            feeds,
+            exports,
+            sinks,
+            all: adapters,
+        };
+    }, [adapters]);
+
+    const connectionCodes = React.useMemo(() => {
+        return connectionCodesData ?? [];
+    }, [connectionCodesData]);
+
+    const secretOptions = React.useMemo(() => {
+        return (secretsData?.items ?? []).map(s => ({
+            code: s.code,
+            provider: s.provider ?? undefined,
+        }));
+    }, [secretsData]);
+
+    const getAdapter = React.useCallback((code: string) => {
+        return adapters.find(a => a.code === code);
+    }, [adapters]);
+
+    const getAdaptersByType = React.useCallback((type: string) => {
+        return adapters.filter(a => a.type === type);
+    }, [adapters]);
+
+    const getAdaptersByNodeType = React.useCallback((nodeType: AdapterNodeType) => {
+        return adapters.filter(a => a.nodeType === nodeType);
+    }, [adapters]);
+
+    return {
+        catalog,
+        adapters,
+        connectionCodes,
+        secretOptions,
+        isLoading: adaptersLoading,
+        error: adaptersError as Error | null,
+        getAdapter,
+        getAdaptersByType,
+        getAdaptersByNodeType,
+    };
+}
+

package/dist/dashboard/hooks/use-export-templates.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@vendure/dashboard';
+import { parse } from 'graphql';
+import { CACHE_TIMES } from '../constants';
+import { filterTemplates } from '../utils/template-helpers';
+import { createQueryKeys } from '../utils/query-key-factory';
+
+export interface ExportTemplate {
+    id: string;
+    name: string;
+    description: string;
+    icon?: string;
+    format: string;
+    requiredFields: string[];
+    tags?: string[];
+    featured?: boolean;
+    definition?: {
+        sourceEntity?: string;
+        format?: string;
+        formatOptions?: Record<string, unknown>;
+        fields?: { sourceField: string; outputName: string }[];
+        destinationType?: string;
+    };
+}
+
+const exportTemplatesDocument = parse(`
+    query DataHubExportTemplatesApi {
+        dataHubExportTemplates {
+            id
+            name
+            description
+            icon
+            format
+            requiredFields
+            tags
+            definition
+        }
+    }
+`);
+
+const exportTemplateKeys = createQueryKeys('export-templates');
+
+export interface UseExportTemplatesResult {
+    templates: ExportTemplate[];
+    getTemplateById: (id: string) => ExportTemplate | undefined;
+    searchTemplates: (query: string) => ExportTemplate[];
+    isLoading: boolean;
+}
+
+export function useExportTemplates(): UseExportTemplatesResult {
+    const { data: templates = [], isLoading } = useQuery({
+        queryKey: exportTemplateKeys.lists(),
+        queryFn: () =>
+            api.query(exportTemplatesDocument)
+                .then((res: Record<string, unknown>) => {
+                    const items = res?.dataHubExportTemplates;
+                    return Array.isArray(items) ? items as ExportTemplate[] : [];
+                })
+                .catch(() => [] as ExportTemplate[]),
+        staleTime: CACHE_TIMES.ADAPTER_CATALOG,
+    });
+
+    const getTemplateById = React.useCallback(
+        (id: string) => templates.find(t => t.id === id),
+        [templates],
+    );
+
+    const searchTemplates = React.useCallback(
+        (query: string) => filterTemplates(templates, query),
+        [templates],
+    );
+
+    return {
+        templates,
+        getTemplateById,
+        searchTemplates,
+        isLoading,
+    };
+}

package/dist/dashboard/hooks/use-import-templates.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@vendure/dashboard';
+import { parse } from 'graphql';
+import type { TemplateCategory } from '../types';
+import { CACHE_TIMES } from '../constants';
+import { filterTemplates } from '../utils/template-helpers';
+import { createQueryKeys } from '../utils/query-key-factory';
+
+export interface ImportTemplate {
+    id: string;
+    name: string;
+    description: string;
+    category: TemplateCategory;
+    icon?: string;
+    requiredFields: string[];
+    optionalFields: string[];
+    sampleData?: Record<string, unknown>[];
+    featured?: boolean;
+    tags?: string[];
+    formats?: string[];
+    definition?: {
+        sourceType?: string;
+        fileFormat?: string;
+        targetEntity?: string;
+        existingRecords?: string;
+        lookupFields?: string[];
+        fieldMappings?: { sourceField: string; targetField: string }[];
+    };
+}
+
+export interface CategoryInfo {
+    category: TemplateCategory;
+    label: string;
+    description: string;
+    icon: string;
+    count: number;
+}
+
+const importTemplatesDocument = parse(`
+    query DataHubImportTemplatesApi {
+        dataHubImportTemplates {
+            id
+            name
+            description
+            category
+            icon
+            requiredFields
+            optionalFields
+            sampleData
+            featured
+            tags
+            formats
+            definition
+        }
+    }
+`);
+
+const importTemplateCategoriesDocument = parse(`
+    query DataHubImportTemplateCategoriesApi {
+        dataHubImportTemplateCategories {
+            category
+            label
+            description
+            icon
+            count
+        }
+    }
+`);
+
+const base = createQueryKeys('import-templates');
+const importTemplateKeys = {
+    ...base,
+    categories: () => [...base.all, 'categories'] as const,
+};
+
+export interface UseImportTemplatesResult {
+    templates: ImportTemplate[];
+    categories: CategoryInfo[];
+    getTemplateById: (id: string) => ImportTemplate | undefined;
+    getTemplatesByCategory: (category: TemplateCategory) => ImportTemplate[];
+    searchTemplates: (query: string) => ImportTemplate[];
+    isLoading: boolean;
+}
+
+export function useImportTemplates(): UseImportTemplatesResult {
+    const { data: templates = [], isLoading: templatesLoading } = useQuery({
+        queryKey: importTemplateKeys.lists(),
+        queryFn: () =>
+            api.query(importTemplatesDocument)
+                .then((res: Record<string, unknown>) => {
+                    const items = res?.dataHubImportTemplates;
+                    return Array.isArray(items) ? items as ImportTemplate[] : [];
+                })
+                .catch(() => [] as ImportTemplate[]),
+        staleTime: CACHE_TIMES.ADAPTER_CATALOG,
+    });
+
+    const { data: backendCategories, isLoading: categoriesLoading } = useQuery({
+        queryKey: importTemplateKeys.categories(),
+        queryFn: () =>
+            api.query(importTemplateCategoriesDocument)
+                .then((res: Record<string, unknown>) => {
+                    const items = res?.dataHubImportTemplateCategories;
+                    return Array.isArray(items) ? items as CategoryInfo[] : [];
+                })
+                .catch(() => [] as CategoryInfo[]),
+        staleTime: CACHE_TIMES.ADAPTER_CATALOG,
+    });
+
+    const categories = React.useMemo(
+        () => backendCategories ?? [],
+        [backendCategories],
+    );
+
+    const getTemplateById = React.useCallback(
+        (id: string) => templates.find(t => t.id === id),
+        [templates],
+    );
+
+    const getTemplatesByCategory = React.useCallback(
+        (category: TemplateCategory) => templates.filter(t => t.category === category),
+        [templates],
+    );
+
+    const searchTemplates = React.useCallback(
+        (query: string) => filterTemplates(templates, query),
+        [templates],
+    );
+
+    return {
+        templates,
+        categories,
+        getTemplateById,
+        getTemplatesByCategory,
+        searchTemplates,
+        isLoading: templatesLoading || categoriesLoading,
+    };
+}

package/dist/dashboard/hooks/use-load-more.ts

@@ -0,0 +1,29 @@
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+
+interface UseLoadMoreOptions {
+    pageSize?: number;
+}
+
+export function useLoadMore<T>(items: T[], options?: UseLoadMoreOptions) {
+    const pageSize = options?.pageSize ?? 10;
+    const [displayCount, setDisplayCount] = useState(pageSize);
+    const prevLengthRef = useRef(items.length);
+
+    // Reset displayCount when items array changes length (new data loaded)
+    useEffect(() => {
+        if (items.length !== prevLengthRef.current) {
+            prevLengthRef.current = items.length;
+            setDisplayCount(pageSize);
+        }
+    }, [items.length, pageSize]);
+
+    const displayed = useMemo(() => items.slice(0, displayCount), [items, displayCount]);
+    const hasMore = displayCount < items.length;
+    const remaining = items.length - displayCount;
+
+    const loadMore = useCallback(() => {
+        setDisplayCount(c => c + pageSize);
+    }, [pageSize]);
+
+    return { displayed, hasMore, remaining, loadMore };
+}

package/dist/dashboard/hooks/use-stable-keys.ts

@@ -0,0 +1,54 @@
+import { useMemo, useRef } from 'react';
+
+let keyCounter = 0;
+function generateStableKey(prefix: string): string {
+    return `${prefix}-${++keyCounter}-${Date.now()}`;
+}
+
+/**
+ * Generate stable React keys for items that may be reordered.
+ * Uses object identity to track items across renders.
+ */
+export function useStableKeys<T extends object>(items: T[], prefix: string): string[] {
+    const keysRef = useRef<Map<T, string>>(new Map());
+    const prevItemsRef = useRef<T[]>([]);
+
+    if (prevItemsRef.current !== items) {
+        const newMap = new Map<T, string>();
+        for (const item of items) {
+            const existingKey = keysRef.current.get(item);
+            newMap.set(item, existingKey ?? generateStableKey(prefix));
+        }
+        keysRef.current = newMap;
+        prevItemsRef.current = items;
+    }
+
+    return items.map(item => keysRef.current.get(item) ?? generateStableKey(prefix));
+}
+
+/**
+ * Generate stable IDs for list items that lack referential identity.
+ * Uses index-based tracking: IDs persist at the same position across renders.
+ * Items at existing indices keep their IDs; new indices get fresh IDs.
+ *
+ * Use this instead of useStableKeys when items are recreated each render
+ * (e.g. from config objects, form state) and cannot be tracked by identity.
+ */
+export function useStableIndexIds(items: readonly unknown[], prefix: string): string[] {
+    const idMapRef = useRef<Map<number, string>>(new Map());
+
+    return useMemo(() => {
+        const prevMap = idMapRef.current;
+        const newMap = new Map<number, string>();
+
+        const ids = items.map((_, index) => {
+            const existing = prevMap.get(index);
+            const id = existing ?? generateStableKey(prefix);
+            newMap.set(index, id);
+            return id;
+        });
+
+        idMapRef.current = newMap;
+        return ids;
+    }, [items, prefix]);
+}

package/dist/dashboard/hooks/use-trigger-types.ts

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import { Play, type LucideIcon } from 'lucide-react';
+import type { TriggerType } from '../../shared/types';
+import { useTriggerTypeSchemas, type TypedOptionValue, type ConfigOptionValue } from './api/use-config-options';
+import { resolveIconName } from '../utils/icon-resolver';
+
+export interface TriggerTypeConfig {
+    readonly type: TriggerType;
+    readonly label: string;
+    readonly description: string;
+    readonly icon: string;
+}
+
+export interface WizardTriggerOption {
+    readonly id: string;
+    readonly label: string;
+    readonly desc: string;
+}
+
+function toTriggerTypeConfig(opt: ConfigOptionValue | TypedOptionValue): TriggerTypeConfig {
+    return {
+        type: opt.value as TriggerType,
+        label: opt.label,
+        description: opt.description ?? '',
+        icon: opt.icon ?? 'play',
+    };
+}
+
+function toWizardOption(opt: ConfigOptionValue | TypedOptionValue): WizardTriggerOption {
+    return {
+        id: opt.value,
+        label: opt.label,
+        desc: opt.description ?? '',
+    };
+}
+
+/**
+ * Provides trigger type metadata from the backend.
+ * Replaces the hardcoded TRIGGER_TYPE_CONFIGS, TRIGGER_ICONS,
+ * IMPORT_WIZARD_TRIGGERS, and EXPORT_WIZARD_TRIGGERS constants.
+ *
+ * Trigger wizard scoping is now driven by backend `wizardScopes` metadata
+ * instead of hardcoded Sets.
+ */
+export function useTriggerTypes() {
+    const { schemas: triggerSchemas, isLoading } = useTriggerTypeSchemas();
+
+    const configs = useMemo(() => {
+        const map: Partial<Record<TriggerType, TriggerTypeConfig>> = {};
+        for (const schema of triggerSchemas) {
+            map[schema.value as TriggerType] = toTriggerTypeConfig(schema);
+        }
+        return map as Record<TriggerType, TriggerTypeConfig>;
+    }, [triggerSchemas]);
+
+    const configList = useMemo(
+        () => triggerSchemas.map(toTriggerTypeConfig),
+        [triggerSchemas],
+    );
+
+    const importWizardTriggers = useMemo(
+        () => triggerSchemas
+            .filter(schema => schema.wizardScopes?.includes('import'))
+            .map(toWizardOption),
+        [triggerSchemas],
+    );
+
+    const exportWizardTriggers = useMemo(
+        () => triggerSchemas
+            .filter(schema => schema.wizardScopes?.includes('export'))
+            .map(toWizardOption),
+        [triggerSchemas],
+    );
+
+    return {
+        /** Record<TriggerType, TriggerTypeConfig> for keyed access. */
+        configs,
+        /** Flat list of all trigger type configs. */
+        configList,
+        /** Filtered trigger options for import wizard. */
+        importWizardTriggers,
+        /** Filtered trigger options for export wizard. */
+        exportWizardTriggers,
+        /** Raw trigger type schemas for schema-driven rendering */
+        triggerSchemas,
+        isLoading,
+    };
+}
+
+/**
+ * Returns a function that resolves a trigger type string to a LucideIcon.
+ * Useful for map/list rendering where a hook cannot be called per item.
+ */
+export function useTriggerIconResolver(): (triggerType: TriggerType) => LucideIcon {
+    const { configs } = useTriggerTypes();
+    return useMemo(
+        () => (triggerType: TriggerType) => resolveIconName(configs[triggerType]?.icon) ?? Play,
+        [configs],
+    );
+}