@msbci/form-editor 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType } from 'react';
-import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IFormType, IDataSourceConnector, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
+import { ReactNode, ComponentType } from 'react';
+import { IFormDefinition, IFormPage, IFormRoster, IFormVariable, IVariableTemplate, IVariableTemplateOverrides, IFormType, IDataSourceConnector, IConditionRule, IRosterVariableRef } from '@msbci/form-core';
 export { IDataSourceConnector, IFormDefinition, IFormPage, IFormRoster, IFormVariable, IMosobiThemeBase } from '@msbci/form-core';
 import * as zustand from 'zustand';
 
@@ -40,6 +40,12 @@ interface IEditorAdapter {
     saveForm?: (form: IFormDefinition) => Promise<void>;
     loadFormTypes?: () => Promise<IFormType[]>;
     saveFormType?: (type: IFormType) => Promise<void>;
+    /**
+     * Optional — fetch the variable templates of a scope.
+     * When absent, the editor's "Variables" toolbox tab stays empty and
+     * shows the {@link IEditorLabels.toolbox.noTemplates} message.
+     */
+    loadTemplates?: (scopeId: string) => Promise<IVariableTemplate[]>;
 }
 /** Complete editor state */
 interface EditorState {
@@ -52,11 +58,18 @@ interface EditorState {
     history: HistoryEntry[];
     historyIndex: number;
     adapter: IEditorAdapter | null;
+    /**
+     * Variable templates surfaced to the "Variables" toolbox tab. Populated
+     * via `setAvailableTemplates` (typically by `FormEditor` after
+     * `adapter.loadTemplates(form.scopeId)`). Out of the undo/redo history —
+     * this is editor-UI state, not form state.
+     */
+    availableTemplates: IVariableTemplate[];
 }
 /** Editor actions */
 interface EditorActions {
     setForm: (form: IFormDefinition) => void;
-    updateFormMeta: (updates: Partial<Pick<IFormDefinition, 'name' | 'code' | 'description' | 'formTypeId' | 'version'>>) => void;
+    updateFormMeta: (updates: Partial<Pick<IFormDefinition, 'name' | 'code' | 'description' | 'formTypeId' | 'version' | 'langConfig'>>) => void;
     addPage: (page: IFormPage) => void;
     updatePage: (pageCode: string, updates: Partial<IFormPage>) => void;
     removePage: (pageCode: string) => void;
@@ -67,7 +80,33 @@ interface EditorActions {
     addVariable: (pageCode: string, variable: IFormVariable, rosterCode?: string) => void;
     updateVariable: (pageCode: string, variableCode: string, updates: Partial<IFormVariable>, rosterCode?: string) => void;
     removeVariable: (pageCode: string, variableCode: string, rosterCode?: string) => void;
+    /**
+     * Insert a variable that inherits from a `IVariableTemplate`. Template
+     * fields are denormalised onto the new variable; `code` and `name` come
+     * from the template; `templateOverrides` starts empty.
+     */
+    addVariableFromTemplate: (pageCode: string, template: IVariableTemplate, rosterCode?: string) => void;
+    /**
+     * Override a single field of a template-linked variable. Writes the new
+     * value into `templateOverrides[key]` AND mirrors it on the variable so
+     * the canvas can render without invoking the resolver.
+     */
+    setVariableOverride: <K extends keyof IVariableTemplateOverrides>(pageCode: string, variableCode: string, key: K, value: IVariableTemplateOverrides[K], rosterCode?: string) => void;
+    /**
+     * Drop one override key — removes it from `templateOverrides` and
+     * restores the variable's mirrored field from the linked template.
+     */
+    resetVariableOverride: (pageCode: string, variableCode: string, key: keyof IVariableTemplateOverrides, rosterCode?: string) => void;
+    /**
+     * Cross-page / cross-roster move (kept for the existing dnd flow). Use
+     * {@link moveItem} for intra-page reordering of `page.items[]`.
+     */
     moveVariable: (fromPageCode: string, toPageCode: string, variableCode: string, newOrder: number, fromRosterCode?: string, toRosterCode?: string) => void;
+    /**
+     * Reorder the items of a page (variables + rosters mixed) by index.
+     * Updates each item's `order` to its new position.
+     */
+    moveItem: (pageCode: string, fromIndex: number, toIndex: number) => void;
     select: (selection: EditorSelection) => void;
     clearSelection: () => void;
     setView: (view: EditorView) => void;
@@ -78,6 +117,8 @@ interface EditorActions {
     addFormType: (type: Omit<IFormType, 'id'>) => void;
     updateFormType: (id: string, patch: Partial<IFormType>) => void;
     removeFormType: (id: string) => void;
+    /** Replace the variable-template list shown in the Variables tab. */
+    setAvailableTemplates: (templates: IVariableTemplate[]) => void;
     setAdapter: (adapter: IEditorAdapter) => void;
     save: () => Promise<void>;
     load: (formId: string) => Promise<void>;
@@ -86,6 +127,301 @@ interface EditorActions {
 }
 type EditorStore = EditorState & EditorActions;
 
+/**
+ * IEditorLabels — full label dictionary for the FormEditor UI.
+ *
+ * Pattern A (zero external dependency): consumers pass a `labels` prop to
+ * FormEditor and the values flow through React context to every sub-component.
+ * French is the absolute default; English ships out of the box; any other
+ * language can be added by providing a (deep-)partial override.
+ *
+ * Functions in this interface format strings with runtime arguments (counts,
+ * names, indices). They are *replaced wholesale* by deepMerge, not merged.
+ */
+type DeepPartial<T> = T extends (...args: never[]) => unknown ? T : T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+interface IEditorLabels {
+    toolbar: {
+        formNamePlaceholder: string;
+        unsaved: string;
+        addPage: string;
+        types: string;
+        manageFormTypesTitle: string;
+        undo: string;
+        redo: string;
+        save: string;
+        saving: string;
+        export: string;
+        import: string;
+        viewEditor: string;
+        viewPreview: string;
+        viewJson: string;
+    };
+    toolbox: {
+        searchPlaceholder: string;
+        addPageFirst: string;
+        /** Label of the first tab (existing variable/roster types). */
+        tabFields: string;
+        /** Label of the second tab (variable library from current scope). */
+        tabVariables: string;
+        /** Empty state for the Variables tab when the form has a scope but no templates. */
+        noTemplates: string;
+        /** Empty state for the Variables tab when the form has no scope at all. */
+        noScope: string;
+        groupText: string;
+        groupSelection: string;
+        groupDateTime: string;
+        groupMedia: string;
+        groupAdvanced: string;
+        /** Section label for the four roster variants, displayed after ADVANCED. */
+        groupRoster: string;
+        /** Roster type labels — surface the four supported variants. */
+        typeRosterCheck: string;
+        typeRosterList: string;
+        typeRosterCollection: string;
+        typeRosterCollectionExtend: string;
+        /**
+         * Shared variable-type labels. Re-used by both Toolbox(Simple) and
+         * VariableProperties (single source of truth).
+         */
+        types: {
+            text: string;
+            textarea: string;
+            number: string;
+            email: string;
+            select: string;
+            multiselect: string;
+            radio: string;
+            checkbox: string;
+            date: string;
+            datetime: string;
+            time: string;
+            file: string;
+            image: string;
+            gps: string;
+            rating: string;
+            calculated: string;
+            hidden: string;
+            label: string;
+        };
+    };
+    canvas: {
+        /** CanvasSimple — no page in form. */
+        emptyStateNoPage: string;
+        /** Canvas (dnd) — no page in form. */
+        emptyStateNoPageDnd: string;
+        /** Empty page — invites to add a field. */
+        emptyStatePage: string;
+        /** Fallback when page.name is blank. */
+        unnamedPage: string;
+        /** Badge on repeatable pages. */
+        repeatable: string;
+        /** "X fields · Y rosters" — count helper for the page header. */
+        fieldsRostersCount: (fields: number, rosters: number) => string;
+        /** "X fields" — count helper for the Canvas (dnd) page header. */
+        fieldsCount: (fields: number) => string;
+        /** "X vars" — count helper for the roster header. */
+        rosterVarsCount: (vars: number) => string;
+        /** Button: add a roster to the current page. */
+        addRoster: string;
+        /** Button: add a variable inside a roster. */
+        addFieldToRoster: string;
+        /** Prefix shown before the pilot variable code on a roster header. */
+        pilotPrefix: string;
+        /** Default name when auto-creating a roster. */
+        newRosterName: string;
+        /** Default name when auto-creating a roster variable. */
+        newFieldName: string;
+        /** Default name when auto-creating a toolbox-spawned variable.
+         *  Receives the type label (e.g. "Texte court") and returns the full name. */
+        newVariableName: (typeLabel: string) => string;
+        /** Tooltip on the "has conditions" indicator. */
+        hasConditionsTitle: string;
+        /** Tooltip on the "data source connected" indicator. */
+        dataSourceConnectedTitle: string;
+    };
+    properties: {
+        /** Header of the right-hand properties panel. */
+        title: string;
+        name: string;
+        code: string;
+        description: string;
+        placeholder: string;
+        version: string;
+        formType: string;
+        noType: string;
+        formSummary: (pages: number, variables: number) => string;
+        pageSummary: (variables: number, rosters: number) => string;
+        rosterSummary: (variables: number, options: number) => string;
+        repeatablePage: string;
+        minInstances: string;
+        maxInstances: string;
+        controlVariableCode: string;
+        instanceLabel: string;
+        rosterType: string;
+        pilotVariableCode: string;
+        rosterTypes: {
+            check: string;
+            list: string;
+            collection: string;
+            collection_extend: string;
+        };
+        /** Banner title shown on top of VariableProperties when the variable links to a template. */
+        linkedTemplate: string;
+        /** Label for the read-only code field on a linked variable. */
+        templateCode: string;
+        /** Label for the read-only name field on a linked variable. */
+        templateName: string;
+        /** Per-override reset button label. */
+        resetOverride: string;
+        type: string;
+        ratingStyle: string;
+        ratingStyles: {
+            star: string;
+            number: string;
+            color: string;
+        };
+        layout: string;
+        startNewRow: string;
+        columnSpan: string;
+        columnSpanAuto: string;
+        columnSpanHalf: string;
+        columnSpanThird: string;
+        columnSpanFull: string;
+        required: string;
+        readonly: string;
+        hidden: string;
+        expression: string;
+        langConfigSection: string;
+        langConfigAvailable: string;
+        langConfigDefault: string;
+        langConfigStrategy: string;
+        langConfigStrategies: {
+            prop: string;
+            browser: string;
+            selector: string;
+            auto: string;
+        };
+        langConfigSelectorPosition: string;
+        langConfigPositions: {
+            top: string;
+            bottom: string;
+        };
+        langConfigConfirmRemove: (lang: string) => string;
+        langConfigConfirmYes: string;
+        langConfigConfirmNo: string;
+    };
+    optionsEditor: {
+        optionsCount: (count: number) => string;
+        noOptions: string;
+        optionLabelPlaceholder: string;
+        optionValuePlaceholder: string;
+        addOption: string;
+        optionLabelAria: (index: number) => string;
+        optionValueAria: (index: number) => string;
+        removeOptionAria: (index: number) => string;
+    };
+    conditionBuilder: {
+        conditionsCount: (count: number) => string;
+        addCondition: string;
+        rulesCount: (rules: number) => string;
+        addRule: string;
+        action: string;
+        match: string;
+        all: string;
+        any: string;
+        actions: {
+            show: string;
+            hide: string;
+            validate: string;
+            require: string;
+            readonly: string;
+            setValue: string;
+        };
+        operators: {
+            equals: string;
+            not_equals: string;
+            greater_than: string;
+            less_than: string;
+            greater_than_or_equal: string;
+            less_than_or_equal: string;
+            contains: string;
+            not_contains: string;
+            is_empty: string;
+            is_not_empty: string;
+            starts_with: string;
+            ends_with: string;
+            in: string;
+            not_in: string;
+            between: string;
+            regex: string;
+        };
+        variablePlaceholder: string;
+        valuePlaceholder: string;
+        errorMessage: string;
+        errorMessagePlaceholder: string;
+        targetVariableCode: string;
+        targetVariablePlaceholder: string;
+        valueToSet: string;
+        valueToSetPlaceholder: string;
+    };
+    dataSource: {
+        title: string;
+        connector: string;
+        none: string;
+        connectedTo: string;
+        dependencies: (count: number) => string;
+        selectVariable: string;
+        dependencyKeyPlaceholder: string;
+        addDependency: string;
+    };
+    formTypesDialog: {
+        dialogAriaLabel: string;
+        title: string;
+        closeAriaLabel: string;
+        noTypes: string;
+        confirmDelete: string;
+        deleteConfirm: string;
+        deleteCancel: string;
+        removeTypeAria: (name: string) => string;
+        newTypeNamePlaceholder: string;
+        newTypeCodePlaceholder: string;
+        addButton: string;
+    };
+    formEditor: {
+        previewMissing: string;
+    };
+}
+
+/**
+ * French labels for FormEditor — absolute default.
+ *
+ * Any consumer that does not pass a `labels` prop will see this content.
+ */
+
+declare const frLabels: IEditorLabels;
+
+/**
+ * English labels for FormEditor — opt-in via `labels` prop.
+ */
+
+declare const enLabels: IEditorLabels;
+
+interface EditorLabelsProviderProps {
+    labels: IEditorLabels;
+    children: ReactNode;
+}
+declare function EditorLabelsProvider({ labels, children, }: EditorLabelsProviderProps): react_jsx_runtime.JSX.Element;
+/** Read the resolved labels. Defaults to French if no provider is mounted. */
+declare function useLabels(): IEditorLabels;
+/**
+ * Recursively merges `override` into `base`. Functions, arrays and primitives
+ * are replaced wholesale. Plain objects are merged key-by-key so a partial
+ * override never erases sibling keys.
+ */
+declare function mergeLabels(base: IEditorLabels, override?: DeepPartial<IEditorLabels>): IEditorLabels;
+
 interface FormEditorProps {
     theme?: Record<string, unknown>;
     dataSources?: Record<string, IDataSourceConnector>;
@@ -94,6 +430,12 @@ interface FormEditorProps {
     formId?: string;
     onChange?: (form: IFormDefinition) => void;
     onSave?: () => void;
+    /**
+     * Localised labels for every visible string in the editor.
+     * Deep-merged with the French defaults — pass only the keys you want to
+     * override. Use {@link import('../i18n').enLabels} for English out of the box.
+     */
+    labels?: DeepPartial<IEditorLabels>;
     PreviewComponent?: ComponentType<{
         formSchema: IFormDefinition;
         theme?: Record<string, unknown>;
@@ -107,7 +449,7 @@ interface FormEditorProps {
     /** Wrapper around the entire editor (e.g. DndContext) */
     Wrapper?: ComponentType<any>;
 }
-declare function FormEditor({ theme, dataSources, adapter, initialForm, formId, onChange, onSave, PreviewComponent, ToolboxComponent, CanvasComponent, Wrapper, }: FormEditorProps): react_jsx_runtime.JSX.Element;
+declare function FormEditor({ theme, dataSources, adapter, initialForm, formId, onChange, onSave, labels, PreviewComponent, ToolboxComponent, CanvasComponent, Wrapper, }: FormEditorProps): react_jsx_runtime.JSX.Element;
 
 declare const useEditorStore: zustand.UseBoundStore<zustand.StoreApi<EditorStore>>;
 
@@ -122,14 +464,19 @@ interface EditorToolbarProps {
 declare function EditorToolbar({ onSave, onExport, onImport }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Toolbox — left panel. Click to add variables to selected page.
- * No drag & drop dependency.
+ * Toolbox — left panel. Two tabs:
+ *   - Champs    : variable types + roster variants (original content).
+ *   - Variables : reusable templates from the current scope.
+ *
+ * Click to add. No drag & drop dependency (see Toolbox.tsx for DnD).
  */
 declare function ToolboxSimple(): react_jsx_runtime.JSX.Element;
 
 /**
  * Canvas — center panel. Displays form structure.
- * Click to select. Supports roster creation and variable management.
+ * Click to select. Variables and rosters share a single ordered list
+ * (`page.items[]`) and are rendered together; rosters always break the
+ * current multi-column row and span the full width.
  */
 declare function CanvasSimple(): react_jsx_runtime.JSX.Element;
 
@@ -181,4 +528,4 @@ interface DataSourceSelectorProps {
 }
 declare function DataSourceSelector({ dataSourceId, dependencies, availableConnectors, availableVariables, onConnectorChange, onDependenciesChange, }: DataSourceSelectorProps): react_jsx_runtime.JSX.Element;
 
-export { CanvasSimple as Canvas, ConditionBuilder, type ConditionBuilderProps, DataSourceSelector, type DataSourceSelectorProps, type EditorActions, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, PropertiesPanel, ToolboxSimple as Toolbox, useEditorStore };
+export { CanvasSimple as Canvas, ConditionBuilder, type ConditionBuilderProps, DataSourceSelector, type DataSourceSelectorProps, type DeepPartial, type EditorActions, EditorLabelsProvider, type EditorSelection, type EditorState, type EditorStore, EditorToolbar, type EditorView, FormEditor, type FormEditorProps, type HistoryEntry, type IEditorAdapter, type IEditorLabels, PropertiesPanel, ToolboxSimple as Toolbox, frLabels as defaultLabels, enLabels, frLabels, mergeLabels, useEditorStore, useLabels };