@bgroup/wise-form 1.0.2 → 1.0.5

package/README.md

@@ -5,7 +5,7 @@ A reactive form library for React applications.
 ## Installation
 
 ```bash
-npm install @bgroup/wise-form react @beyond-js/reactive
+pnpm add @bgroup/wise-form react @beyond-js/reactive
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bgroup/wise-form",
-    "version": "1.0.2",
+    "version": "1.0.5",
     "description": "Wise Form - A reactive form library",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -13,8 +13,20 @@
         "./styles": "./dist/form/styles.css"
     },
     "scripts": {
-        "build": "tsc",
-        "prepublishOnly": "npm run build"
+        "dev": "pnpm run dev:all",
+        "dev:ts": "vite build --watch --mode development",
+        "dev:css": "pnpm exec postcss src/form/styles.css -o dist/form/styles.css --watch",
+        "dev:all": "pnpm run dev:ts & pnpm run dev:css",
+        "build": "pnpm run clean && pnpm run build:types && pnpm run build:vite && pnpm run build:css",
+        "build:types": "tsc --emitDeclarationOnly",
+        "build:vite": "vite build",
+        "build:css": "pnpm exec postcss src/form/styles.css -o dist/form/styles.css",
+        "watch": "pnpm run dev:all",
+        "watch:ts": "tsc --watch --emitDeclarationOnly",
+        "watch:css": "pnpm exec postcss src/form/styles.css -o dist/form/styles.css --watch",
+        "clean": "rimraf dist",
+        "prepublishOnly": "pnpm run build",
+        "publish:public": "npm publish --access public"
     },
     "keywords": [
         "form",
@@ -33,6 +45,13 @@
     },
     "devDependencies": {
         "@types/react": "^18.0.26",
-        "typescript": "^5.0.0"
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.22",
+        "postcss": "^8.5.6",
+        "postcss-cli": "^11.0.1",
+        "rimraf": "^5.0.5",
+        "tailwindcss": "^3.4.18",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0"
     }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/form/styles.css

@@ -1,40 +1,14 @@
-.reactive-form-container {
-	display: grid;
-	grid-gap: 1rem;
-}
-
-.reactive-form-container .rf-fields-container {
-	display: grid;
-	grid-gap: 0.5rem;
-}
-
-.reactive-form-container .rf-fields-container.fr-1 {
-	grid-template-columns: repeat(1, 1fr);
-}
-
-.reactive-form-container .rf-fields-container.fr-2 {
-	grid-template-columns: repeat(2, 1fr);
-}
-
-.reactive-form-container .rf-fields-container.fr-3 {
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.reactive-form-container .rf-fields-container.fr-4 {
-	grid-template-columns: repeat(4, 1fr);
-}
-
-.reactive-form-container .rf-fields-container.fr-5 {
-	grid-template-columns: repeat(5, 1fr);
-}
-
-.reactive-form-container .rf-fields-container.fr-6 {
-	grid-template-columns: repeat(6, 1fr);
-}
-
-.reactive-form-container :not(.not-responsive) > .rf-fields-container {
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+	/* Responsive: en mobile los contenedores sin .not-responsive se convierten en 1 columna */
+	/* Esto requiere un selector CSS complejo que no se puede hacer solo con clases de Tailwind */
+	/* Usamos !important para sobrescribir estilos inline dinámicos */
 	@media (max-width: 768px) {
-		grid-template-columns: 1fr !important;
+		.reactive-form-container :not(.not-responsive) > .rf-fields-container {
+			grid-template-columns: 1fr !important;
+		}
 	}
 }
-

package/src/form/view/components/containers/index.tsx

@@ -10,9 +10,38 @@ export function Containers() {
 	} = useWiseFormContext();
 
 	const fields = [...model.fields.values()];
-	return rows.map((num, index) => {
-		const items = fields.splice(0, num[0]) as any; // Type assertion needed due to TypeScript strictness
-		return <RowFieldContainer model={model} template={num} items={items} key={`rf-row--${index}.${num}`} styles={styles} />;
-	});
+	
+	// Use slice instead of splice to avoid mutating the array
+	// Calculate indices safely using useMemo with stable dependencies
+	const rowsLength = rows?.length || 0;
+	const fieldsSize = model.fields?.size || 0;
+	const modelName = model.name;
+	
+	const containers = React.useMemo(() => {
+		let currentIndex = 0;
+		const result = rows.map((num, index) => {
+			const items = fields.slice(currentIndex, currentIndex + num[0]) as any; // Type assertion needed due to TypeScript strictness
+			currentIndex += num[0];
+			return <RowFieldContainer model={model} template={num} items={items} key={`rf-row--${index}.${num}`} styles={styles} />;
+		});
+		return result;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [rowsLength, fieldsSize, modelName]);
+	
+	React.useEffect(() => {
+		const formElement = document.querySelector('form.reactive-form-container') as HTMLElement;
+		const containerElements = formElement?.querySelectorAll('.rf-fields-container');
+		
+		// Verificar si hay algún contenedor que retorna null
+		if (containers.length > 0 && (!containerElements || containerElements.length === 0)) {
+			// Silent check - no logging
+		}
+	}, [containers.length]);
+	
+	if (containers.length === 0) {
+		return null;
+	}
+	
+	return <>{containers}</>;
 }
 

package/src/form/view/components/error.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
 export function ErrorRenderer({ error }) {
-	React.useEffect(() => {
-		console.error(error);
-	}, []);
 	return <div className='alert alert--error pui-alert'>{error}</div>;
 }
 

package/src/form/view/components/field/container.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
 export function ControlFieldContainer({ children }) {
-	return <div className='rf-field-container'>{children}</div>;
+	return <div className='rf-field-container '>{children}</div>;
 }
 

package/src/form/view/components/field/index.tsx

@@ -22,13 +22,12 @@ type WiseFormFieldControlProps = {
 export const Control = ({ field, index, model, hidden }: WiseFormFieldControlProps) => {
 	const { formTypes } = useWiseFormContext();
 	const fieldItem = field as any; // Using any to access dynamic properties
-	
+
 	// Early return if field doesn't have a name (except for wrapper types and special types)
 	const specialTypes = ['wrapper', 'hr', 'button'];
-	const fieldType = fieldItem?.type;
+	let fieldType = fieldItem?.type; // Use let instead of const to allow modification
 	const fieldName = fieldItem?.name;
 	if (!fieldName && !specialTypes.includes(fieldType)) {
-		console.warn('You need to provide a name to get a field in form', (model as any).name || 'unknown');
 		return null;
 	}
 
@@ -77,18 +76,54 @@ export const Control = ({ field, index, model, hidden }: WiseFormFieldControlPro
 		...formTypes,
 	};
 
+	// Handle undefined type fields - use default type instead of returning null
+	if (!fieldType && fieldName) {
+		// Check if field has className 'hide' - these are intentionally hidden fields
+		const className = (fieldItem as any).className || '';
+		if (className.includes('hide') || className === 'hide') {
+			return null;
+		}
+
+		// Check if it's a hidden field in the model
+		const fieldModel = model.getField(fieldName);
+		if (fieldModel) {
+			const properties = (fieldModel as FormField).getProperties();
+			if ((properties as any).hidden) {
+				return null;
+			}
+		}
+
+		// If no type is defined, use default - don't skip the field
+		(fieldItem as any).type = 'default';
+		fieldType = 'default'; // Update fieldType variable to use default
+	}
+
 	const ControlComponent = types[fieldType] ?? types.default;
-	
+
+	if (!ControlComponent) {
+		return null;
+	}
+
+	// Validar que ControlComponent sea realmente un componente válido (función o clase)
+	if (typeof ControlComponent !== 'function' && typeof ControlComponent !== 'object') {
+		return null;
+	}
+
+	// Si es un objeto, puede ser un componente de React (tiene render o $$typeof)
+	if (typeof ControlComponent === 'object' && !ControlComponent.$$typeof && typeof ControlComponent !== 'function') {
+		return null;
+	}
+
 	// Merge field properties with attrs to ensure custom components receive all necessary props
 	const fieldModel = fieldName ? model.getField(fieldName) : null;
 	const fieldProperties = fieldModel ? fieldModel.getProperties() : {};
-	
+
 	// Also include original field item properties (like options, label, etc.)
 	const fieldItemProps = { ...fieldItem };
 	// Remove internal properties that shouldn't be passed to components
 	delete (fieldItemProps as any).name;
 	delete (fieldItemProps as any).type;
-	
+
 	// Filter out non-HTML attributes from fieldProperties to prevent React warnings
 	const invalidAttributes = ['processing', 'processed', 'properties', 'specs', 'hidden', 'identifier'];
 	const filteredFieldProperties = Object.keys(fieldProperties).reduce((acc, key) => {
@@ -97,7 +132,7 @@ export const Control = ({ field, index, model, hidden }: WiseFormFieldControlPro
 		}
 		return acc;
 	}, {} as any);
-	
+
 	return (
 		<ControlFieldContainer>
 			<ControlComponent {...attrs} {...fieldItemProps} {...filteredFieldProperties} />

package/src/form/view/components/rows/row-container.tsx

@@ -39,6 +39,15 @@ export function RowFieldContainer({ template: [totalFields, gridStyle], items, s
 	});
 
 	// Suscribirse a los cambios de cada campo
+	// Use stable references for field names to avoid unnecessary re-renders
+	const fieldNamesRef = React.useRef<string[]>([]);
+	const currentFieldNames = items.map((field: any) => field?.name).filter(Boolean);
+	const fieldNamesChanged = JSON.stringify(fieldNamesRef.current) !== JSON.stringify(currentFieldNames);
+
+	if (fieldNamesChanged) {
+		fieldNamesRef.current = currentFieldNames;
+	}
+
 	React.useEffect(() => {
 		const listeners: Array<() => void> = [];
 
@@ -53,10 +62,14 @@ export function RowFieldContainer({ template: [totalFields, gridStyle], items, s
 
 			const onChange = () => {
 				const properties = (fieldModel as FormField).getProperties();
-				setFieldHiddenStates((prev) => ({
-					...prev,
-					[fieldName]: (properties as any).hidden ?? false,
-				}));
+				setFieldHiddenStates((prev) => {
+					const newHidden = (properties as any).hidden ?? false;
+					if (prev[fieldName] === newHidden) return prev; // Avoid unnecessary state update
+					return {
+						...prev,
+						[fieldName]: newHidden,
+					};
+				});
 			};
 
 			fieldModel.on('change', onChange);
@@ -66,12 +79,15 @@ export function RowFieldContainer({ template: [totalFields, gridStyle], items, s
 		return () => {
 			listeners.forEach((cleanup) => cleanup());
 		};
-	}, [items, model]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentFieldNames.join(','), model.name]);
 
 	let hidden = false;
 	const output = items.reduce((acc: React.ReactElement[], field, index) => {
 		const fieldItem = field as any; // Using any to access dynamic properties
 		const fieldType = fieldItem?.type;
+		const fieldName = fieldItem?.name;
+
 		if (fieldType === "wrapper") {
 			const fieldModel = model.getField(fieldItem?.name);
 			const wrapperHidden = fieldModel ? ((fieldModel as WrappedFormModel).getProperties() as any).hidden ?? false : false;
@@ -80,7 +96,6 @@ export function RowFieldContainer({ template: [totalFields, gridStyle], items, s
 			return acc;
 		}
 
-		const fieldName = fieldItem?.name;
 		const isHidden = fieldName ? (fieldHiddenStates[fieldName] ?? (fieldItem as any).hidden ?? false) : false;
 		if (!isHidden) {
 			acc.push(<Control index={index} model={model} field={fieldItem} key={`rf-row__item--${index}`} hidden={isHidden} />);
@@ -88,9 +103,22 @@ export function RowFieldContainer({ template: [totalFields, gridStyle], items, s
 		return acc;
 	}, []);
 
-	const attrs = { className: `rf-fields-container`, style: {} };
-	attrs.style = { gridTemplateColumns: `${gridStyle}`, ...styles };
-	if (hidden) return null;
+	// Construir clases de Tailwind para el contenedor
+	// grid gap-2 para el layout base
+	// En mobile (< 768px), los contenedores sin .not-responsive se convierten en 1 columna
+	// Esto se maneja con CSS personalizado porque requiere el selector :not(.not-responsive) >
+	const attrs = {
+		className: `rf-fields-container grid gap-2 w-full`,
+		style: { gridTemplateColumns: `${gridStyle}`, ...styles }
+	};
+	if (hidden) {
+		return null;
+	}
+
+	if (output.length === 0) {
+		return null;
+	}
+
 	return <div {...attrs}>{output}</div>;
 }
 

package/src/form/view/components/rows/wrapper.tsx

@@ -1,27 +1,38 @@
 import React from "react";
-import {useWiseFormContext} from "../../context";
+import { useWiseFormContext } from "../../context";
 /**
  *
  * @param data {WrappedFormModel}
  * @param model {FormModel} parent.
  * @returns
  */
-export function FormSectionWrapper({data, model}) {
-	const {formTypes} = useWiseFormContext();
+export function FormSectionWrapper({ data, model }) {
+	const { formTypes } = useWiseFormContext();
 
 	const types = {
 		...formTypes,
 	};
 
-	if (!data.control) throw new Error("Wrapper must have a control");
+	if (!data.control) {
+		throw new Error("Wrapper must have a control");
+	}
 	if (!data.name) {
-		console.error("Wrapper must have a name", data);
 		return null;
 	}
-	if (data?.hidden) return null;
+	if (data?.hidden) {
+		return null;
+	}
 
 	const wrapperModel = model?.getField(data.name);
+	if (!wrapperModel) {
+		return null;
+	}
+
 	const Control = types[data.control];
+	if (!Control) {
+		return null;
+	}
+
 	// data = wrapperModel ? { ...data, ...wrapperModel.getProperties() } : data;
 	return <Control model={wrapperModel} />;
 }

package/src/form/view/components/wrapped-form.tsx

@@ -6,13 +6,46 @@ import { useTemplate } from '../hooks/use-template';
 export function WrappedForm({ children, name, types }): JSX.Element {
 	const { model: parent } = useWiseFormContext();
 	const wrapper = parent.wrappers.get(name);
+
+	if (!wrapper) {
+		return null;
+	}
+
 	const model = wrapper;
 	const template = useTemplate(model.settings);
-	const fields = [...model.settings.fields];
-	const Containers = template.items.map((num, index) => {
-		const items = fields.splice(0, num[0]);
-		return <RowFieldContainer template={num} model={model} items={items} key={`rf-row--${index}.${num}`} />;
-	});
+
+	// Memoizar fields usando una clave estable basada en el contenido
+	// Comparar por longitud y nombres de campos para evitar recrear el array innecesariamente
+	const fieldsKey = React.useMemo(() => {
+		const fieldsArray = model.settings.fields || [];
+		return `${fieldsArray.length}-${fieldsArray.slice(0, 5).map(f => f.name || f.type || '').join(',')}`;
+	}, [model.settings.fields]);
+
+	const fields = React.useMemo(() => {
+		return [...model.settings.fields];
+	}, [fieldsKey]);
+
+	// Use stable references for useMemo dependencies
+	// Usar una referencia estable del modelo y sus propiedades clave
+	const modelName = model.name;
+	const templateItemsLength = template.items?.length || 0;
+	const fieldsLength = fields.length;
+
+	// Crear una clave estable basada en las propiedades del modelo que realmente importan
+	const modelKey = React.useMemo(() => {
+		return `${modelName}-${templateItemsLength}-${fieldsLength}`;
+	}, [modelName, templateItemsLength, fieldsLength]);
+
+	const Containers = React.useMemo(() => {
+		let currentIndex = 0;
+		const result = template.items.map((num, index) => {
+			const items = fields.slice(currentIndex, currentIndex + num[0]);
+			currentIndex += num[0];
+			return <RowFieldContainer template={num} model={model} items={items} key={`rf-row--${index}.${num}`} />;
+		});
+		return result;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [modelKey]);
 
 	const value = {
 		model,

package/src/form/view/hooks/use-model.ts

@@ -2,36 +2,102 @@ import React from 'react';
 import { FormModel } from '@bgroup/wise-form/models';
 import { useTemplate } from './use-template';
 
+/**
+ * Hook para gestionar el modelo del formulario
+ * 
+ * Principios SOLID aplicados:
+ * - Single Responsibility: Solo gestiona el estado del modelo del formulario
+ * - Open/Closed: Extensible mediante eventos del modelo sin modificar el hook
+ * - Dependency Inversion: Depende de la abstracción FormModel, no de implementaciones concretas
+ */
 export function useModel(settings, form?: FormModel) {
-	const [model, setModel] = React.useState(form);
-	const [ready, setReady] = React.useState(false);
-	const [values, setValues] = React.useState(form?.values || {});
-	const templateSpecs = settings ? settings : form;
-	const { type, styles, items } = useTemplate(templateSpecs, templateSpecs.gap);
-	const startup = () => {
-		setReady(false);
-		const onChange = () => {
-			setReady(form.ready);
+	// Estado del modelo - usa el form pasado o null inicialmente
+	const [model, setModel] = React.useState<FormModel | null>(form || null);
+	
+	// Determinar si el modelo está listo basándose en su estado real
+	const getModelReadyState = React.useCallback((currentModel: FormModel | null): boolean => {
+		if (!currentModel) return false;
+		
+		// Si el modelo tiene la propiedad ready, usarla
+		if (currentModel.ready !== undefined) {
+			return currentModel.ready === true;
+		}
+		
+		// Si no tiene ready pero tiene campos y wrappers, asumir que está listo
+		const hasFields = currentModel.fields?.size > 0;
+		const hasWrappers = currentModel.wrappers?.size > 0;
+		const hasName = !!currentModel.name;
+		
+		// Está listo si tiene al menos campos o wrappers y un nombre
+		return hasName && (hasFields || hasWrappers);
+	}, []);
+	
+	// Estado de ready basado en el modelo actual
+	const [ready, setReady] = React.useState(() => getModelReadyState(form || null));
+	const [values, setValues] = React.useState(() => form?.values || {});
+	
+	// Template specs: usar settings si están disponibles, sino usar el form
+	const templateSpecs = settings || form;
+	const { type, styles, items } = useTemplate(templateSpecs, templateSpecs?.gap);
+	
+	// Efecto para inicializar y suscribirse a cambios del modelo
+	React.useEffect(() => {
+		let currentModel: FormModel | null = null;
+		let cleanup: (() => void) | null = null;
+		
+		// Si ya tenemos un modelo, usarlo directamente
+		if (form) {
+			currentModel = form;
+			setModel(form);
+			const initialReady = getModelReadyState(form);
+			setReady(initialReady);
 			setValues({ ...form.values });
-		};
-
-		if (!form) {
-			const properties = settings.fields.map(item => item.name);
-			const values = settings.values || {};
-			form = new FormModel(settings, { properties, ...values });
+		} 
+		// Si no hay modelo pero hay settings, crear uno nuevo
+		else if (settings) {
+			try {
+				const properties = settings.fields?.map((item: any) => item.name) || [];
+				const values = settings.values || {};
+				currentModel = new FormModel(settings, { properties, ...values });
+				setModel(currentModel);
+				
+				// Verificar estado inicial del modelo creado
+				const modelReady = getModelReadyState(currentModel);
+				setReady(modelReady);
+				setValues({ ...currentModel.values });
+			} catch (error) {
+				setReady(false);
+				return;
+			}
+		} 
+		// No hay modelo ni settings
+		else {
+			setReady(false);
+			return;
 		}
-
-		setModel(form);
-		form.on('change', onChange);
-
-		onChange();
-
+		
+		// Suscribirse a cambios del modelo para actualizar el estado
+		if (currentModel) {
+			const onChange = () => {
+				const isReady = getModelReadyState(currentModel);
+				setReady(isReady);
+				if (currentModel) {
+					setValues({ ...currentModel.values });
+				}
+			};
+			
+			currentModel.on('change', onChange);
+			cleanup = () => {
+				currentModel?.off('change', onChange);
+			};
+		}
+		
 		return () => {
-			form.off('change', onChange);
+			if (cleanup) {
+				cleanup();
+			}
 		};
-	};
-
-	React.useEffect(startup, [form?.name]);
+	}, [form?.name, settings?.name, getModelReadyState]);
 
 	return { ready, model, values, type, styles, items };
 }

package/src/form/view/index.tsx

@@ -10,10 +10,22 @@ export function WiseForm({ children, settings, types, model }: IWiseFormSpecs):
 	const { ready, model: instance, type, styles, items } = useModel(settings, model);
 	const formTypes = useTypes(types);
 
-	if (!ready) return null;
+	// IMPORTANTE: useEffect debe estar ANTES de cualquier early return
+	// para cumplir con las reglas de hooks de React
+	React.useEffect(() => {
+		if (!ready || !instance) return;
+	}, [ready, instance?.name]);
+
+	if (!ready) {
+		return null;
+	}
 
 	if (!settings && !model) {
-		console.error('the form does not have settings or model defined', settings);
+		return null;
+	}
+
+	if (!instance) {
+		return null;
 	}
 
 	const onSubmit = (event: React.FormEvent) => {
@@ -38,7 +50,7 @@ export function WiseForm({ children, settings, types, model }: IWiseFormSpecs):
 		<WiseFormContext.Provider value={value}>
 			<form onKeyDown={(e) => {
 				if (e.key === 'Enter') e.preventDefault();
-			}} className="reactive-form-container" onSubmit={onSubmit}>
+			}} className="reactive-form-container grid gap-4" onSubmit={onSubmit}>
 				<Containers />
 				{children}
 			</form>