@dipusevilla/componentes-iu 1.0.56 → 1.0.57

package/dist/types/editor/dnd/renderField.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { RuleExpr } from "../../rules/RuleDSL";
+import type { FieldEntry, FieldSchema, ButtonField, InputGroupField } from "../../types/FormTypes";
+type RuleContainer = {
+    enabled?: boolean;
+    rule?: RuleExpr;
+    clearTo?: unknown;
+};
+export type RenderFieldDeps = {
+    fields: FieldEntry[];
+    fieldsByName: Record<string, FieldEntry>;
+    control: any;
+    errors: Record<string, any>;
+    isSubmitting: boolean;
+    loadingDefaults: boolean;
+    asyncOptionsMap: Record<string, any[]>;
+    adapterOptionsMap: Record<string, any[]>;
+    evalContainer: (c: RuleContainer | undefined, def: boolean) => boolean;
+    disabledMap: Record<string, boolean>;
+    registry?: Record<string, unknown>;
+    methods: any;
+};
+export declare function renderFieldFactory(deps: RenderFieldDeps): (item: string | FieldSchema | ButtonField | InputGroupField) => React.ReactNode;
+export {};

package/dist/types/editor/dnd/types.d.ts

@@ -4,6 +4,9 @@ export type FieldIndexPath = {
     c: number;
     idx: number;
 };
+export type InputGroupIndexPath = {
+    idx: number;
+};
 export type DragData = {
     kind: "field-in-rows";
     name: string;
@@ -14,9 +17,14 @@ export type DragData = {
     tabKey: string;
     name: string;
     path: FieldIndexPath;
+} | {
+    kind: "field-in-inputgroup";
+    groupName: string;
+    name: string;
+    path: InputGroupIndexPath;
 } | {
     kind: "palette-field";
-    factoryKind: "text" | "number" | "email" | "password" | "select" | "textarea" | "checkbox" | "date" | "file";
+    factoryKind: "text" | "number" | "email" | "password" | "select" | "textarea" | "checkbox" | "date" | "file" | "inputGroup";
 } | {
     kind: "rows-section";
     nodeIdx: number;
@@ -31,6 +39,22 @@ export type DragData = {
     nodeIdx: number;
     tabKey: string;
     sIdx: number;
+} | {
+    kind: "tab-section";
+    nodeIdx: number;
+    tabKey: string;
+    sIdx: number;
+} | {
+    kind: "row-in-section";
+    li: number;
+    sIdx: number;
+    rIdx: number;
+} | {
+    kind: "row-in-tab-section";
+    li: number;
+    tabKey: string;
+    sIdx: number;
+    rIdx: number;
 };
 export type DropTarget = {
     scope: "rows-column";
@@ -59,4 +83,23 @@ export type DropTarget = {
     nodeIdx: number;
     tabKey: string;
     insertAt: number;
+} | {
+    scope: "input-group";
+    groupName: string;
+    insertAt: number;
+} | {
+    scope: "input-group";
+    groupName: string;
+    insertAt: number;
+} | {
+    scope: "row-slot";
+    li: number;
+    sIdx: number;
+    insertAt: number;
+} | {
+    scope: "tab-row-slot";
+    li: number;
+    tabKey: string;
+    sIdx: number;
+    insertAt: number;
 };

package/dist/types/editor/dnd/useFormRendererDeps.d.ts

@@ -0,0 +1,23 @@
+import { RuleExpr } from "../../rules/RuleDSL";
+import { FormSchema, FieldSchema } from "../../types/FormTypes";
+type RuleContainer = {
+    enabled?: boolean;
+    rule?: RuleExpr;
+    clearTo?: unknown;
+};
+export declare function useFormRendererDeps(schema: FormSchema, externalResolver?: any, serviceRegistry?: Record<string, unknown>): {
+    methods: import("react-hook-form").UseFormReturn<Record<string, unknown>, any, Record<string, unknown>>;
+    control: import("react-hook-form").Control<Record<string, unknown>, any, Record<string, unknown>>;
+    formState: import("react-hook-form").FormState<Record<string, unknown>>;
+    fields: import("../../types/FormTypes").FieldEntry[];
+    fieldsByName: Record<string, FieldSchema>;
+    asyncOptionsMap: Record<string, import("../../hooks/useAsyncSelectOptions").Option[]>;
+    adapterOptionsMap: any;
+    disabledMap: {
+        [x: string]: boolean;
+    };
+    evalContainer: (container: RuleContainer | undefined, whenDisabled: boolean) => boolean;
+    registry: Record<string, unknown> | undefined;
+    layout: import("../../types/FormTypes").LayoutNode[];
+};
+export {};

package/dist/types/editor/importers/generateFromDTO.d.ts

@@ -0,0 +1,56 @@
+import type { FieldEntry, FieldSchema, FormSchema } from "../../types/FormTypes";
+/** =======================
+ *  Tipos y opciones
+ *  ======================= */
+export type Primitive = string | number | boolean | null | undefined | Date;
+export type AnyDTO = Record<string, any>;
+export type TypeOverride = "text" | "number" | "email" | "password" | "textarea" | "select" | "checkbox" | "date" | "file" | "tel" | "url";
+export type SelectSource = {
+    kind: string;
+    params?: Record<string, any>;
+} | {
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+};
+export type GenerateFromDTOOptions = {
+    flatten?: boolean;
+    maxDepth?: number;
+    exclude?: Array<string | RegExp>;
+    typeOverrides?: Array<{
+        match: string | RegExp;
+        type: TypeOverride;
+    }>;
+    labelOverrides?: Record<string, string>;
+    requiredStrategy?: (args: {
+        name: string;
+        inputType: FieldSchema["type"];
+        sample?: unknown;
+    }) => boolean;
+    selectSourceResolver?: (name: string) => SelectSource | undefined;
+    widthStrategy?: (args: {
+        name: string;
+        inputType: FieldSchema["type"];
+    }) => string | undefined;
+    textareaStrategy?: (args: {
+        name: string;
+        sample?: string;
+    }) => {
+        isTextArea: boolean;
+        maxLength?: number;
+    } | undefined;
+    sortComparator?: (a: FieldSchema, b: FieldSchema) => number;
+    formTitle?: string;
+    formId?: string;
+};
+/** =======================
+ *  Core: DTO → FieldEntry[]
+ *  ======================= */
+export declare function generateFieldsFromDTO(dto: AnyDTO, opts?: GenerateFromDTOOptions): FieldEntry[];
+export declare function generateFormFromDTO(dto: AnyDTO, opts?: GenerateFromDTOOptions): FormSchema;
+/** API de alto nivel:
+ *  - Si pasas un OBJETO → genera del objeto (como antes).
+ *  - Si pasas un STRING con `export interface ...` → lo parsea y respeta opcionales.
+ */
+export declare function generateFormFromTypeDef(input: string | AnyDTO, opts?: GenerateFromDTOOptions): FormSchema;

package/dist/types/editor/relations/RelationsOverlay.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { FormSchema } from "../../types/FormTypes";
+export type RelationsOverlayProps = {
+    enabled?: boolean;
+    anchors: Record<string, {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }>;
+    schema: FormSchema | null;
+};
+export declare const RelationsOverlay: React.FC<RelationsOverlayProps>;
+export declare const RelationsOverlayRenderer: React.FC;

package/dist/types/editor/shortcuts/ShortcutsConfigModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ShortcutAction, ShortcutConfig } from './shortcutsConfig';
+interface ShortcutsConfigModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    config: Record<ShortcutAction, ShortcutConfig>;
+    onSave: (config: Record<ShortcutAction, ShortcutConfig>) => void;
+}
+export declare const ShortcutsConfigModal: React.FC<ShortcutsConfigModalProps>;
+export {};

package/dist/types/editor/shortcuts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shortcutsConfig';
+export * from './useShortcuts';
+export * from './ShortcutsConfigModal';

package/dist/types/editor/shortcuts/shortcutsConfig.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Sistema de configuración de shortcuts para el editor de formularios
+ */
+export type ShortcutAction = 'undo' | 'redo' | 'save' | 'saveAs' | 'toggleRelations' | 'togglePreview' | 'deleteField' | 'duplicateField' | 'copy' | 'paste' | 'selectAll' | 'newSchema' | 'importSchema' | 'exportSchema';
+export interface ShortcutConfig {
+    key: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+    description: string;
+    action: ShortcutAction;
+    enabled: boolean;
+}
+/**
+ * Configuración por defecto de shortcuts
+ */
+export declare const DEFAULT_SHORTCUTS: Record<ShortcutAction, ShortcutConfig>;
+/**
+ * Carga la configuración de shortcuts desde localStorage
+ */
+export declare function loadShortcutsConfig(): Record<ShortcutAction, ShortcutConfig>;
+/**
+ * Guarda la configuración de shortcuts en localStorage
+ */
+export declare function saveShortcutsConfig(config: Record<ShortcutAction, ShortcutConfig>): void;
+/**
+ * Resetea la configuración a los valores por defecto
+ */
+export declare function resetShortcutsConfig(): Record<ShortcutAction, ShortcutConfig>;
+/**
+ * Verifica si un evento de teclado coincide con un shortcut
+ */
+export declare function matchesShortcut(event: KeyboardEvent, config: ShortcutConfig): boolean;
+/**
+ * Genera una representación legible del shortcut
+ */
+export declare function formatShortcut(config: ShortcutConfig): string;
+/**
+ * Valida que no haya conflictos entre shortcuts
+ */
+export declare function validateShortcuts(config: Record<ShortcutAction, ShortcutConfig>): {
+    valid: boolean;
+    conflicts: Array<{
+        action1: ShortcutAction;
+        action2: ShortcutAction;
+    }>;
+};

package/dist/types/editor/shortcuts/useShortcuts.d.ts

@@ -0,0 +1,9 @@
+import { ShortcutAction, ShortcutConfig } from './shortcutsConfig';
+export type ShortcutHandler = (event: KeyboardEvent) => void | boolean;
+/**
+ * Hook para gestionar shortcuts del editor
+ */
+export declare function useShortcuts(handlers: Partial<Record<ShortcutAction, ShortcutHandler>>): {
+    config: Record<ShortcutAction, ShortcutConfig>;
+    updateConfig: (newConfig: Record<ShortcutAction, ShortcutConfig>) => void;
+};

package/dist/types/editor/store.d.ts

@@ -21,6 +21,7 @@ export type Selection = {
 } | {
     kind: "none";
 };
+type FieldDomRegistry = Record<string, HTMLElement | null>;
 export type ColumnPreset = "1" | "2" | "3" | "4" | "1/3-2/3" | "2/3-1/3" | "1/4-3/4" | "3/4-1/4";
 type IndexPath = {
     s: number;
@@ -29,13 +30,36 @@ type IndexPath = {
     idx: number;
 };
 type EditorState = {
+    previewMode: boolean;
     schema: FormSchema;
     selection: Selection;
     past: FormSchema[];
     future: FormSchema[];
+    fieldPick: FieldPickState;
+    relationsEnabled: boolean;
+    toggleRelations: (v?: boolean) => void;
+    fieldDom: FieldDomRegistry;
+    registerFieldEl: (name: string, el: HTMLElement | null) => void;
+    showRelations: boolean;
+    fieldAnchors: Record<string, AnchorPoint>;
+    registerFieldAnchor: (name: string, pt: AnchorPoint) => void;
+    unregisterFieldAnchor: (name: string) => void;
+};
+type FieldPickState = {
+    armed: boolean;
+    forField?: string;
+    fieldKey?: "visibleWhen" | "disabledWhen" | "clearWhen";
+};
+type AnchorPoint = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
 };
 type EditorActions = {
     changeFieldType: (name: string, newType: "text" | "number" | "email" | "password" | "select" | "textarea" | "checkbox" | "date" | "file") => void;
+    setPreviewMode: (v: boolean) => void;
+    togglePreview: () => void;
     setSchema: (updater: (draft: FormSchema) => void) => void;
     setSelection: (sel: Selection) => void;
     undo: () => void;
@@ -122,6 +146,9 @@ type EditorActions = {
     insertExistingFieldAtAt: (rowsNodeIdx: number, name: string, sectionIdx: number, rowIdx: number, colIdx: number, atIdx: number) => void;
     addFieldAndPlaceAtAt: (rowsNodeIdx: number, fieldTemplate: Omit<FieldSchema, "name"> & Partial<Pick<FieldSchema, "name">>, sectionIdx: number, rowIdx: number, colIdx: number, atIdx: number) => void;
     moveSectionAcrossNodes: (fromNodeIdx: number, fromSectionIdx: number, toNodeIdx: number, insertAt: number) => void;
+    armFieldPick: (forField: string, fieldKey: "visibleWhen" | "disabledWhen" | "clearWhen") => void;
+    cancelFieldPick: () => void;
+    completeFieldPick: (pickedFieldName: string) => void;
 };
 export declare const useEditorStore: import("zustand").UseBoundStore<import("zustand").StoreApi<EditorState & EditorActions>>;
 export {};

package/dist/types/editor/utils/fieldKinds.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type FieldKind = "text" | "number" | "email" | "password" | "tel" | "url" | "textarea" | "select" | "checkbox" | "date" | "file" | "search" | "inputGroup" | "section-layout" | "tabs-layout";
+/** Colores (variables del tema) por tipo de componente */
+export declare const KIND_COLOR_VAR: Record<string, string>;
+export declare function getKindColor(kind?: string): string;
+/** Icono (outline) por tipo de componente */
+export declare function getKindIcon(kind?: string): React.ReactNode;
+/** Opciones estándar para el Inspector */
+export declare const TYPE_OPTIONS_RICH: Array<{
+    value: FieldKind;
+    label: string;
+}>;

package/dist/types/editor/utils/input-group.d.ts

@@ -0,0 +1,7 @@
+type FormSchema = any;
+export type GroupDetectOptions = {
+    addressGroupName?: string;
+    groupSuffix?: string;
+};
+export declare function applySmartInputGroups(form: FormSchema, opts?: GroupDetectOptions): FormSchema;
+export {};

package/dist/types/editor/utils/layout-utils.d.ts

@@ -0,0 +1,30 @@
+import { applySmartInputGroups } from "./input-group";
+type FormSchema = any;
+type SectionizeOptions = {
+    /** "smart" decide por sección; o fuerza 1..4 */
+    columns?: 1 | 2 | 3 | 4 | "smart";
+    generalTitle?: string;
+    titleCase?: boolean;
+    /** Estrategia custom para decidir full-span; si no, heurística por defecto */
+    fullSpanStrategy?: (field: any) => boolean;
+    /** Fusionar secciones diminutas para reducir ruido */
+    mergeTinySections?: boolean;
+    /** Nº mínimo de campos “normales” por sección antes de fusionar */
+    minFieldsPerSection?: number;
+    /** Agrupar por concepto/alias dentro de cada sección */
+    groupByConcept?: boolean;
+    /** "keep" deja todos; "adjacent" contiguos; "drop-secondary" colapsa duplicados */
+    collapseConceptDuplicates?: "keep" | "adjacent" | "drop-secondary";
+    /** NUEVO: activa bloques semánticos (Empresa, Contacto, etc.) */
+    entityBlocks?: "auto" | "off";
+    /** NUEVO: mapa para personalizar match → título de bloque */
+    entityTitles?: Partial<Record<EntityKey, string>>;
+};
+export declare function toNColumnsLayout(form: FormSchema, n: 1 | 2 | 3 | 4): FormSchema;
+type EntityKey = "identifiers" | "company" | "contact" | "address" | "dates" | "money" | "web" | "general";
+export declare function autoSectionizeAndLayout(form: FormSchema, opts?: SectionizeOptions): FormSchema;
+export declare function composeSmartForm(form: FormSchema, opts?: {
+    sectionize?: Parameters<typeof autoSectionizeAndLayout>[1];
+    groups?: Parameters<typeof applySmartInputGroups>[1];
+}): FormSchema;
+export {};

package/dist/types/types/FormTypes.d.ts

@@ -11,7 +11,7 @@ export type Condition = {
 /**
  * Tipo de campo atómico admitido.
  */
-export type FieldType = "text" | "email" | "number" | "password" | "select" | "date" | "optionGroup" | "button" | "textarea" | "file" | "inputGroup" | "checkbox" | "search";
+export type FieldType = "text" | "email" | "url" | "tel" | "number" | "password" | "select" | "date" | "optionGroup" | "button" | "textarea" | "file" | "inputGroup" | "checkbox" | "search";
 type FormCtx = {
     getValues: UseFormGetValues<any>;
     watch: UseFormWatch<any>;
@@ -95,6 +95,16 @@ export interface FieldSchema {
         label: string;
         value: any;
     }[]>;
+    /** Clave para buscar el proveedor de búsqueda en el registro (alternativa a searchFn inline) */
+    searchSource?: string;
+    /** Modo de búsqueda: 'button' (click para buscar) o 'debounced' (al escribir) */
+    searchMode?: "button" | "debounced";
+    /** Mínimo de caracteres para buscar (modo debounced) */
+    minChars?: number;
+    /** Tiempo de espera para buscar (modo debounced) */
+    debounceMs?: number;
+    /** Función para resolver valor inicial (edición) */
+    resolveByValue?: (value: string, ctx?: FormCtx) => Promise<Option | null>;
     /** Valores por defecto sincrónicos. */
     defaultValue?: Record<string, unknown>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dipusevilla/componentes-iu",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "Librería de componentes React de Dipusevilla",
   "keywords": [
     "react",
@@ -10,94 +10,87 @@
     "dipusevilla"
   ],
   "author": "Dipusevilla <desarrolloinpro@dipusevilla.es>",
+  "license": "ISC",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "unpkg": "dist/index.umd.js",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build:types": "tsc --project tsconfig.build.json",
     "build": "vite build && npm run build:types",
-    "prepublishOnly": "npm run build",
+    "build:types": "tsc --project tsconfig.build.json",
+    "build-storybook": "storybook build",
     "dev": "vite",
     "lint": "eslint .",
+    "prepublishOnly": "npm run build",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "publish": "npm publish --access public"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "publish": "npm publish --access public",
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@headlessui/react": "^2.2.4",
+    "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.2.0",
-    "@hookform/resolvers": "^5.0.1",
+    "@hookform/resolvers": "^5.2.2",
     "clsx": "^2.1.1",
-    "i18next": "^25.2.1",
-    "immer": "^10.1.3",
-    "react-hook-form": "^7.56.4",
-    "react-i18next": "^15.5.2",
-    "react-router-dom": "^7.9.4",
-    "tailwind-merge": "^3.3.1",
-    "yup": "^1.6.1",
+    "i18next": "^25.6.2",
+    "immer": "^10.2.0",
+    "react-hook-form": "^7.66.0",
+    "react-i18next": "^16.3.3",
+    "react-router-dom": "^7.9.6",
+    "tailwind-merge": "^3.4.0",
+    "yup": "^1.7.1",
     "zustand": "^5.0.8"
   },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@eslint/js": "^9.25.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/builder-vite": "^8.6.14",
-    "@storybook/experimental-addon-test": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@tailwindcss/postcss": "^4.1.8",
-    "@tailwindcss/vite": "^4.1.7",
-    "@types/i18next": "^12.1.0",
-    "@types/node": "^22.15.29",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@types/tailwindcss": "^3.0.11",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^0.12.0",
-    "globals": "^16.0.0",
-    "playwright": "^1.52.0",
-    "postcss": "^8.5.4",
-    "storybook": "^8.6.14",
+    "@chromatic-com/storybook": "4.1.2",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-onboarding": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/uuid": "^11.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.9",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.0.7",
+    "globals": "^16.5.0",
+    "playwright": "^1.56.1",
+    "postcss": "^8.5.6",
+    "storybook": "10.0.7",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^4.1.8",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
-    "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^3.1.4"
+    "tailwindcss": "^4.1.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^6.4.1",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.9"
   },
-  "license": "ISC",
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"
     ]
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./style.css": "./dist/index.css"
-  },
-  "files": [
-    "dist"
-  ]
+  }
 }

package/dist/types/editor/components/RuleBuilder.d.ts

@@ -1,11 +0,0 @@
-import type { RuleExpr } from "../../rules/RuleDSL";
-type Props = {
-    value?: RuleExpr;
-    onChange: (expr: RuleExpr) => void;
-    fieldOptions: Array<{
-        label: string;
-        value: string;
-    }>;
-};
-export declare function RuleBuilder({ value, onChange, fieldOptions }: Props): import("react/jsx-runtime").JSX.Element;
-export {};