@msbci/form-editor 1.3.3 → 1.3.4

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, ComponentType } from 'react';
-import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IVariableTemplate, IVariableTemplateOverrides, IFormType, IScope, IDataSourceConnector, VariableType, RosterType, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
+import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IVariableTemplate, IVariableTemplateOverrides, IFormType, IScope, IDataSourceConfig, IDataSourceConnector, VariableType, RosterType, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
 export { IDataSourceConnector, IFormDefinition, IFormPage, IFormRoster, IFormVariable, IMosobiThemeBase } from '@msbci/form-core';
 import * as zustand from 'zustand';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -53,6 +53,19 @@ interface IEditorAdapter {
      * empty list (the user can no longer pick from existing scopes).
      */
     loadScopes?: () => Promise<IScope[]>;
+    /**
+     * Optional — fetch the {@link IDataSourceConfig} list of a scope.
+     * Called once per scope when `FormEditor` mounts and whenever
+     * `form.scopeIds` changes. The editor merges results across scopes
+     * (first scope wins on `code` conflicts).
+     */
+    loadDataSources?: (scopeId: string) => Promise<IDataSourceConfig[]>;
+    /** Optional — create a {@link IDataSourceConfig} within a scope. */
+    createDataSource?: (scopeId: string, data: Omit<IDataSourceConfig, 'id' | 'scopeId' | 'createdAt' | 'updatedAt'>) => Promise<IDataSourceConfig>;
+    /** Optional — update an existing {@link IDataSourceConfig}. */
+    updateDataSource?: (id: string, data: Partial<Omit<IDataSourceConfig, 'id' | 'scopeId' | 'createdAt' | 'updatedAt'>>) => Promise<IDataSourceConfig>;
+    /** Optional — hard-delete a {@link IDataSourceConfig}. */
+    deleteDataSource?: (id: string) => Promise<void>;
 }
 /** Complete editor state */
 interface EditorState {
@@ -78,6 +91,13 @@ interface EditorState {
      * `adapter.loadScopes()`). Out of the undo/redo history.
      */
     availableScopes: IScope[];
+    /**
+     * Data source configs available for the current form's scopes.
+     * Each entry keeps its `scopeId` so the manager can surface provenance.
+     * Deduplicated by `code` (first scope of `form.scopeIds` wins) when
+     * populated by `FormEditor`. Out of the undo/redo history.
+     */
+    availableDataSources: IDataSourceConfig[];
 }
 /** Editor actions */
 interface EditorActions {
@@ -134,6 +154,8 @@ interface EditorActions {
     setAvailableTemplates: (templates: IVariableTemplate[]) => void;
     /** Replace the scope list shown in the FormProperties scope picker. */
     setAvailableScopes: (scopes: IScope[]) => void;
+    /** Replace the data-source list surfaced to the DataSourceConfigManager. */
+    setAvailableDataSources: (configs: IDataSourceConfig[]) => void;
     setAdapter: (adapter: IEditorAdapter) => void;
     save: () => Promise<void>;
     load: (formId: string) => Promise<void>;
@@ -165,6 +187,10 @@ interface IEditorLabels {
         formProperties: string;
         types: string;
         manageFormTypesTitle: string;
+        /** Header button that opens the DataSourceConfigManager dialog. */
+        dataSources: string;
+        /** Tooltip on the DataSources header button. */
+        manageDataSourcesTitle: string;
         undo: string;
         redo: string;
         save: string;
@@ -413,6 +439,64 @@ interface IEditorLabels {
         dependencyKeyPlaceholder: string;
         addDependency: string;
     };
+    dataSourceManager: {
+        /** ARIA label of the dialog root. */
+        dialogAriaLabel: string;
+        /** Visible dialog title. */
+        title: string;
+        /** Close button aria-label. */
+        closeAriaLabel: string;
+        /** "+ Ajouter une source" CTA. */
+        addButton: string;
+        /** Empty-state message when the scope has no sources yet. */
+        noSources: string;
+        /** Empty-state message when the form has no scope at all. */
+        noScope: string;
+        /** Filter label when multiple scopes are linked to the form. */
+        scopeFilterLabel: string;
+        /** Inline form: code field label. */
+        fieldCode: string;
+        /** Inline form: name field label. */
+        fieldName: string;
+        /** Inline form: url field label. */
+        fieldUrl: string;
+        /** Inline form: method field label. */
+        fieldMethod: string;
+        /** Inline form: queryParam field label. */
+        fieldQueryParam: string;
+        /** Inline form: valueField label. */
+        fieldValueField: string;
+        /** Inline form: labelField label. */
+        fieldLabelField: string;
+        /** Inline form: headers section label. */
+        fieldHeaders: string;
+        /** Header row: key placeholder. */
+        headerKeyPlaceholder: string;
+        /** Header row: value placeholder. */
+        headerValuePlaceholder: string;
+        /** Add-header button. */
+        addHeader: string;
+        /** Inline form: dependencies section label. */
+        fieldDependencies: string;
+        /** Dep row: url param placeholder. */
+        dependencyParamPlaceholder: string;
+        /** Dep row: variable code placeholder. */
+        dependencyVarPlaceholder: string;
+        /** Add-dependency button. */
+        addDependency: string;
+        /** Submit button (create or update). */
+        save: string;
+        /** Cancel button. */
+        cancel: string;
+        /** Edit row pencil button aria-label. */
+        editAria: (code: string) => string;
+        /** Delete row × button aria-label. */
+        deleteAria: (code: string) => string;
+        /** Provenance badge: which scope the source belongs to. */
+        scopeBadge: (scopeCode: string) => string;
+        /** Confirm message before deletion. */
+        confirmDelete: (code: string) => string;
+    };
     formTypesDialog: {
         dialogAriaLabel: string;
         title: string;
@@ -626,7 +710,11 @@ interface DataSourceSelectorProps {
     dataSourceId?: string;
     /** Current dependency mapping: { depKey: variableCode } */
     dependencies?: Record<string, string>;
-    /** Registered connectors available for selection */
+    /**
+     * Legacy connectors injected by the host code. Merged with the
+     * admin-managed configs from the store (the store wins on `id` clash —
+     * the editor surfaces what admins actually configured).
+     */
     availableConnectors: IDataSourceConnector[];
     /** All variable codes available for dependency mapping */
     availableVariables: Array<{
@@ -640,4 +728,26 @@ interface DataSourceSelectorProps {
 }
 declare function DataSourceSelector({ dataSourceId, dependencies, availableConnectors, availableVariables, onConnectorChange, onDependenciesChange, }: DataSourceSelectorProps): react_jsx_runtime.JSX.Element;
 
-export { type ActiveDragData, Canvas, Canvas as CanvasDnd, CanvasSimple, ConditionBuilder, type ConditionBuilderProps, DataSourceSelector, type DataSourceSelectorProps, type DeepPartial, DndManager, type DragEndActions, type EditorActions, EditorLabelsProvider, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, type IEditorLabels, type OverDropData, PropertiesPanel, Toolbox, Toolbox as ToolboxDnd, ToolboxSimple, createDragEndHandler, frLabels as defaultLabels, enLabels, frLabels, mergeLabels, useEditorStore, useLabels };
+/**
+ * DataSourceConfigManager — admin CRUD for IDataSourceConfig within
+ * the scope(s) linked to the current form.
+ *
+ * Renders a native React modal (same pattern as FormTypesDialog) with:
+ *   - A scope filter (visible only when the form has more than one scope)
+ *   - The list of `availableDataSources` filtered by selected scope
+ *   - An inline add/edit form for code, name, url, method, queryParam,
+ *     value/label fields, headers (key/value rows), and dependencies
+ *     (urlParam → variable code rows)
+ *
+ * Persistence goes through the adapter's CRUD methods; the store is
+ * refreshed by mutating `availableDataSources` locally (optimistic — the
+ * server is the source of truth). FormEditor's effect will re-load on
+ * the next scope change.
+ */
+interface DataSourceConfigManagerProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare function DataSourceConfigManager({ open, onClose }: DataSourceConfigManagerProps): react_jsx_runtime.JSX.Element | null;
+
+export { type ActiveDragData, Canvas, Canvas as CanvasDnd, CanvasSimple, ConditionBuilder, type ConditionBuilderProps, DataSourceConfigManager, type DataSourceConfigManagerProps, DataSourceSelector, type DataSourceSelectorProps, type DeepPartial, DndManager, type DragEndActions, type EditorActions, EditorLabelsProvider, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, type IEditorLabels, type OverDropData, PropertiesPanel, Toolbox, Toolbox as ToolboxDnd, ToolboxSimple, createDragEndHandler, frLabels as defaultLabels, enLabels, frLabels, mergeLabels, useEditorStore, useLabels };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, ComponentType } from 'react';
-import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IVariableTemplate, IVariableTemplateOverrides, IFormType, IScope, IDataSourceConnector, VariableType, RosterType, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
+import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IVariableTemplate, IVariableTemplateOverrides, IFormType, IScope, IDataSourceConfig, IDataSourceConnector, VariableType, RosterType, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
 export { IDataSourceConnector, IFormDefinition, IFormPage, IFormRoster, IFormVariable, IMosobiThemeBase } from '@msbci/form-core';
 import * as zustand from 'zustand';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -53,6 +53,19 @@ interface IEditorAdapter {
      * empty list (the user can no longer pick from existing scopes).
      */
     loadScopes?: () => Promise<IScope[]>;
+    /**
+     * Optional — fetch the {@link IDataSourceConfig} list of a scope.
+     * Called once per scope when `FormEditor` mounts and whenever
+     * `form.scopeIds` changes. The editor merges results across scopes
+     * (first scope wins on `code` conflicts).
+     */
+    loadDataSources?: (scopeId: string) => Promise<IDataSourceConfig[]>;
+    /** Optional — create a {@link IDataSourceConfig} within a scope. */
+    createDataSource?: (scopeId: string, data: Omit<IDataSourceConfig, 'id' | 'scopeId' | 'createdAt' | 'updatedAt'>) => Promise<IDataSourceConfig>;
+    /** Optional — update an existing {@link IDataSourceConfig}. */
+    updateDataSource?: (id: string, data: Partial<Omit<IDataSourceConfig, 'id' | 'scopeId' | 'createdAt' | 'updatedAt'>>) => Promise<IDataSourceConfig>;
+    /** Optional — hard-delete a {@link IDataSourceConfig}. */
+    deleteDataSource?: (id: string) => Promise<void>;
 }
 /** Complete editor state */
 interface EditorState {
@@ -78,6 +91,13 @@ interface EditorState {
      * `adapter.loadScopes()`). Out of the undo/redo history.
      */
     availableScopes: IScope[];
+    /**
+     * Data source configs available for the current form's scopes.
+     * Each entry keeps its `scopeId` so the manager can surface provenance.
+     * Deduplicated by `code` (first scope of `form.scopeIds` wins) when
+     * populated by `FormEditor`. Out of the undo/redo history.
+     */
+    availableDataSources: IDataSourceConfig[];
 }
 /** Editor actions */
 interface EditorActions {
@@ -134,6 +154,8 @@ interface EditorActions {
     setAvailableTemplates: (templates: IVariableTemplate[]) => void;
     /** Replace the scope list shown in the FormProperties scope picker. */
     setAvailableScopes: (scopes: IScope[]) => void;
+    /** Replace the data-source list surfaced to the DataSourceConfigManager. */
+    setAvailableDataSources: (configs: IDataSourceConfig[]) => void;
     setAdapter: (adapter: IEditorAdapter) => void;
     save: () => Promise<void>;
     load: (formId: string) => Promise<void>;
@@ -165,6 +187,10 @@ interface IEditorLabels {
         formProperties: string;
         types: string;
         manageFormTypesTitle: string;
+        /** Header button that opens the DataSourceConfigManager dialog. */
+        dataSources: string;
+        /** Tooltip on the DataSources header button. */
+        manageDataSourcesTitle: string;
         undo: string;
         redo: string;
         save: string;
@@ -413,6 +439,64 @@ interface IEditorLabels {
         dependencyKeyPlaceholder: string;
         addDependency: string;
     };
+    dataSourceManager: {
+        /** ARIA label of the dialog root. */
+        dialogAriaLabel: string;
+        /** Visible dialog title. */
+        title: string;
+        /** Close button aria-label. */
+        closeAriaLabel: string;
+        /** "+ Ajouter une source" CTA. */
+        addButton: string;
+        /** Empty-state message when the scope has no sources yet. */
+        noSources: string;
+        /** Empty-state message when the form has no scope at all. */
+        noScope: string;
+        /** Filter label when multiple scopes are linked to the form. */
+        scopeFilterLabel: string;
+        /** Inline form: code field label. */
+        fieldCode: string;
+        /** Inline form: name field label. */
+        fieldName: string;
+        /** Inline form: url field label. */
+        fieldUrl: string;
+        /** Inline form: method field label. */
+        fieldMethod: string;
+        /** Inline form: queryParam field label. */
+        fieldQueryParam: string;
+        /** Inline form: valueField label. */
+        fieldValueField: string;
+        /** Inline form: labelField label. */
+        fieldLabelField: string;
+        /** Inline form: headers section label. */
+        fieldHeaders: string;
+        /** Header row: key placeholder. */
+        headerKeyPlaceholder: string;
+        /** Header row: value placeholder. */
+        headerValuePlaceholder: string;
+        /** Add-header button. */
+        addHeader: string;
+        /** Inline form: dependencies section label. */
+        fieldDependencies: string;
+        /** Dep row: url param placeholder. */
+        dependencyParamPlaceholder: string;
+        /** Dep row: variable code placeholder. */
+        dependencyVarPlaceholder: string;
+        /** Add-dependency button. */
+        addDependency: string;
+        /** Submit button (create or update). */
+        save: string;
+        /** Cancel button. */
+        cancel: string;
+        /** Edit row pencil button aria-label. */
+        editAria: (code: string) => string;
+        /** Delete row × button aria-label. */
+        deleteAria: (code: string) => string;
+        /** Provenance badge: which scope the source belongs to. */
+        scopeBadge: (scopeCode: string) => string;
+        /** Confirm message before deletion. */
+        confirmDelete: (code: string) => string;
+    };
     formTypesDialog: {
         dialogAriaLabel: string;
         title: string;
@@ -626,7 +710,11 @@ interface DataSourceSelectorProps {
     dataSourceId?: string;
     /** Current dependency mapping: { depKey: variableCode } */
     dependencies?: Record<string, string>;
-    /** Registered connectors available for selection */
+    /**
+     * Legacy connectors injected by the host code. Merged with the
+     * admin-managed configs from the store (the store wins on `id` clash —
+     * the editor surfaces what admins actually configured).
+     */
     availableConnectors: IDataSourceConnector[];
     /** All variable codes available for dependency mapping */
     availableVariables: Array<{
@@ -640,4 +728,26 @@ interface DataSourceSelectorProps {
 }
 declare function DataSourceSelector({ dataSourceId, dependencies, availableConnectors, availableVariables, onConnectorChange, onDependenciesChange, }: DataSourceSelectorProps): react_jsx_runtime.JSX.Element;
 
-export { type ActiveDragData, Canvas, Canvas as CanvasDnd, CanvasSimple, ConditionBuilder, type ConditionBuilderProps, DataSourceSelector, type DataSourceSelectorProps, type DeepPartial, DndManager, type DragEndActions, type EditorActions, EditorLabelsProvider, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, type IEditorLabels, type OverDropData, PropertiesPanel, Toolbox, Toolbox as ToolboxDnd, ToolboxSimple, createDragEndHandler, frLabels as defaultLabels, enLabels, frLabels, mergeLabels, useEditorStore, useLabels };
+/**
+ * DataSourceConfigManager — admin CRUD for IDataSourceConfig within
+ * the scope(s) linked to the current form.
+ *
+ * Renders a native React modal (same pattern as FormTypesDialog) with:
+ *   - A scope filter (visible only when the form has more than one scope)
+ *   - The list of `availableDataSources` filtered by selected scope
+ *   - An inline add/edit form for code, name, url, method, queryParam,
+ *     value/label fields, headers (key/value rows), and dependencies
+ *     (urlParam → variable code rows)
+ *
+ * Persistence goes through the adapter's CRUD methods; the store is
+ * refreshed by mutating `availableDataSources` locally (optimistic — the
+ * server is the source of truth). FormEditor's effect will re-load on
+ * the next scope change.
+ */
+interface DataSourceConfigManagerProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare function DataSourceConfigManager({ open, onClose }: DataSourceConfigManagerProps): react_jsx_runtime.JSX.Element | null;
+
+export { type ActiveDragData, Canvas, Canvas as CanvasDnd, CanvasSimple, ConditionBuilder, type ConditionBuilderProps, DataSourceConfigManager, type DataSourceConfigManagerProps, DataSourceSelector, type DataSourceSelectorProps, type DeepPartial, DndManager, type DragEndActions, type EditorActions, EditorLabelsProvider, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, type IEditorLabels, type OverDropData, PropertiesPanel, Toolbox, Toolbox as ToolboxDnd, ToolboxSimple, createDragEndHandler, frLabels as defaultLabels, enLabels, frLabels, mergeLabels, useEditorStore, useLabels };