@dipusevilla/componentes-iu 1.0.8

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

@@ -0,0 +1,187 @@
+import type { AnyObject, ObjectSchema } from "yup";
+import { Size } from "../components/InputGroup";
+/**
+ * Tipo de campo atómico admitido.
+ */
+export type FieldType = "text" | "email" | "number" | "password" | "select" | "date" | "optionGroup" | "button" | "textarea" | "file" | "checkbox";
+/**
+ * Esquema que describe un campo atómico del formulario.
+ */
+export interface FieldSchema {
+    suffixButton?: React.ReactNode | string;
+    /** Nombre único del campo. */
+    name: string;
+    /** Etiqueta visible. */
+    label?: string;
+    /** Tipo de campo (sin incluir 'button' ni 'inputGroup'). */
+    type: Exclude<FieldType, "button" | "inputGroup">;
+    /** Ancho CSS / Tailwind (ej. "flex-1", "w-1/2"). */
+    width?: string;
+    /** Placeholder para inputs de texto. */
+    placeholder?: string;
+    /** Tamaño de componente (sm, md, lg). */
+    size?: "sm" | "md" | "lg";
+    /** Opciones para selects u optionGroup. */
+    options?: any[];
+    /** Función asíncrona para cargar opciones dinámicas en <Select>. */
+    loadOptions?: () => Promise<any[]>;
+    /** Información adicional (ReactNode). */
+    info?: React.ReactNode;
+    /** Reglas de validación para Yup / react-hook-form. */
+    validation?: {
+        required?: boolean | string;
+        minLength?: {
+            value: number;
+            message: string;
+        };
+        maxLength?: {
+            value: number;
+            message: string;
+        };
+        pattern?: {
+            value: RegExp;
+            message: string;
+        };
+    };
+    /** Límite de caracteres (solo para textarea). */
+    maxLength?: number;
+    /** Mostrar contador de caracteres (para textarea). */
+    showCounter?: boolean;
+    /** Atributos para FileUploader. */
+    accept?: string;
+    maxFiles?: number;
+    multiple?: boolean;
+    /** Para optionGroup: disposición vertical. */
+    vertical?: boolean;
+    /** Etiqueta del grupo (solo para optionGroup). */
+    groupLabel?: string;
+    /** Variante de estilo (por ejemplo, en botones). */
+    variant?: "primary" | "outline" | "ghost";
+    /** Icono SVG adjunto. */
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Posición del icono (solo para botones o inputs con icono). */
+    iconPosition?: "left" | "right";
+    /** Etiqueta accesible. */
+    ariaLabel?: string;
+    /** Condición de habilitación basada en otro campo. */
+    disabledWhen?: {
+        watchField: string;
+        watchValue: unknown | ((allValues: Record<string, unknown>) => boolean);
+    };
+    /** Deshabilitar manualmente. */
+    disabled?: boolean;
+    /** Para date: mostrar hora. */
+    showTime?: boolean;
+    /** Condición de visibilidad basada en otro campo. */
+    visibleWhen?: {
+        watchField: string;
+        watchValue: unknown | ((allValues: Record<string, unknown>) => boolean);
+    };
+    /** Atributo para saber si hay carga en curso */
+    loading?: boolean;
+}
+/**
+ * Campo de tipo botón.
+ */
+export interface ButtonField extends Omit<FieldSchema, "type"> {
+    type: "button";
+    /** Función al hacer click. */
+    onClick: () => void;
+}
+/**
+ * Grupo de inputs.
+ */
+export interface InputGroupField {
+    type: "inputGroup";
+    /** Etiqueta del grupo. */
+    groupLabel: string;
+    /** Inputs internos (string refiere a FieldSchema global, o FieldSchema inline). */
+    inputs: Array<string | FieldSchema>;
+    /** Separador visual opcional. */
+    separator?: React.ReactNode;
+    /** Si true, usa separator; si false, ignora separator. */
+    useSeparator?: boolean;
+    /** Clase CSS adicional. */
+    className?: string;
+    /** Si true, muestra los labels de cada campo. */
+    showVisibleLabel?: boolean;
+    name: string;
+    size?: Size;
+    disabled?: boolean;
+}
+/**
+ * Columna dentro de una fila.
+ */
+export interface SectionColumn {
+    /** Ancho CSS/Tailwind. */
+    width?: string;
+    /** Campos en esta columna. */
+    fields?: Array<string | FieldSchema | ButtonField | InputGroupField>;
+    /** Sub-columnas anidadas. */
+    cols?: SectionColumn[];
+    /** Sub-filas anidadas. */
+    rows?: SectionRow;
+}
+/**
+ * Objeto que describe una fila de columnas.
+ */
+export interface SectionRowObject {
+    /** Título de la fila (ej. "Datos Personales"). */
+    title?: string;
+    /** Columnas en esta fila. */
+    columns: SectionColumn[];
+}
+/**
+ * Un conjunto de filas (SectionRowObject[]).
+ */
+export type SectionRow = SectionRowObject[];
+/**
+ * Bloque colapsable que agrupa varias filas.
+ */
+export interface SectionBlock {
+    /** Título de la sección colapsable. */
+    sectionTitle: string;
+    /** Si true, la sección arranca expandida. */
+    defaultOpen?: boolean;
+    /** Arreglo de filas que pertenecen a esta sección. */
+    rows: SectionRow;
+}
+/**
+ * Nodo de layout:
+ * - "rows": contiene varios bloques colapsables (SectionBlock[]).
+ * - "tabs": conjunto de pestañas que a su vez tienen bloques colapsables.
+ */
+export type LayoutNode = {
+    type: "rows";
+    sections: SectionBlock[];
+} | {
+    type: "tabs";
+    tabs: Array<{
+        key: string;
+        label: string;
+        sections: SectionBlock[];
+    }>;
+};
+/**
+ * Esquema completo del formulario.
+ */
+export interface FormSchema {
+    /** Esquema Yup para validación dinámica (opcional). */
+    validationSchema?: ObjectSchema<AnyObject>;
+    /** Layout principal: array de LayoutNode. */
+    layout: LayoutNode[];
+    /** Definición global de todos los campos. */
+    fields: FieldSchema[];
+    /** Función a llamar al hacer submit. */
+    onSubmit: (data: unknown) => void | Promise<void>;
+    /** Mensaje de éxito a mostrar. */
+    successMessage?: string;
+    /** Mensaje de error a mostrar. */
+    errorMessage?: string;
+    /** Botones personalizados al final del formulario. */
+    footerButtons?: React.ReactNode;
+    /** Valores por defecto sincrónicos. */
+    defaultValues?: Record<string, unknown>;
+    /** Función asíncrona para obtener defaultValues. */
+    loadDefaultValues?: () => Promise<Record<string, unknown>>;
+}

package/dist/types/utils/scrollToFirstError.d.ts

@@ -0,0 +1 @@
+export declare function scrollToFirstError(errors: Record<string, any>): void;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@dipusevilla/componentes-iu",
+  "version": "1.0.8",
+  "description": "Librería de componentes React de Dipusevilla",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "ui",
+    "dipusevilla"
+  ],
+  "author": "Dipusevilla <desarrolloinpro@dipusevilla.es>",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "unpkg": "dist/index.umd.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build:types": "tsc --project tsconfig.build.json",
+    "build": "vite build && npm run build:types",
+    "prepublishOnly": "npm run build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.4",
+    "@heroicons/react": "^2.2.0",
+    "@hookform/resolvers": "^5.0.1",
+    "clsx": "^2.1.1",
+    "i18next": "^25.2.1",
+    "react-hook-form": "^7.56.4",
+    "react-i18next": "^15.5.2",
+    "yup": "^1.6.1"
+  },
+  "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/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",
+    "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"
+  },
+  "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"
+  ]
+}