@bgroup/wise-form 1.0.1

package/src/components/ui/Input.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	name?: string;
+	value?: string | number;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	disabled?: boolean;
+	placeholder?: string;
+	type?: string;
+	className?: string;
+	id?: string;
+	[key: string]: any; // Allow additional props that will be filtered
+}
+
+// Helper function to filter out non-HTML attributes
+const filterHtmlAttributes = (props: Record<string, any>): React.InputHTMLAttributes<HTMLInputElement> => {
+	const invalidAttributes = [
+		'processing', 'processed', 'label', 'options', 'properties', 'specs',
+		'hidden', 'identifier', 'queryValue', 'dependentOn', 'onChange', 'callbacks',
+		'selectedOptionLabel', 'notTrigger', 'autoSelectFirst', 'disabledOptions',
+		'fieldsToSetParameters', 'queryTrafficParameters', 'tooltipData', 'opened',
+		'isVisibleHeader', 'entries', 'rows', 'total', 'selectedItem', 'selectedDelete',
+		'keys', 'dataHead', 'textEmpty', 'actions', 'currentPage', 'limitDepdentOnItems',
+		'showSelect', 'itemTable', 'className', 'variant', 'toFixed', 'decimalsLimit',
+		'isPercent', 'condition', 'parameter', 'color', 'template', 'control'
+	];
+	
+	const filtered: any = {};
+	
+	for (const key in props) {
+		// Skip invalid attributes
+		if (invalidAttributes.includes(key)) {
+			continue;
+		}
+		
+		// Keep valid HTML attributes, event handlers, and data/aria attributes
+		if (
+			key.startsWith('on') ||
+			key.startsWith('data-') ||
+			key.startsWith('aria-') ||
+			!invalidAttributes.includes(key)
+		) {
+			// Only include if it's a valid HTML attribute or event handler
+			const validHtmlAttrs = [
+				'name', 'value', 'onChange', 'onBlur', 'onFocus', 'onKeyDown', 'onKeyUp', 
+				'onKeyPress', 'onClick', 'onDoubleClick', 'onMouseEnter', 'onMouseLeave',
+				'disabled', 'readOnly', 'required', 'placeholder', 'type', 'id', 
+				'autoComplete', 'autoFocus', 'maxLength', 'minLength', 'pattern', 'step', 
+				'min', 'max', 'size', 'spellCheck', 'tabIndex', 'title', 'style',
+				'accept', 'alt', 'checked', 'defaultValue', 'form', 'formAction',
+				'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'height',
+				'list', 'multiple', 'src', 'width'
+			];
+			
+			if (validHtmlAttrs.includes(key) || key.startsWith('on') || key.startsWith('data-') || key.startsWith('aria-')) {
+				filtered[key] = props[key];
+			}
+		}
+	}
+	
+	return filtered;
+};
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+	const { className, ...rest } = props;
+	const validHtmlAttributes = filterHtmlAttributes(rest);
+	
+	return <input ref={ref} className={className} {...validHtmlAttributes} />;
+});
+
+Input.displayName = 'Input';
+

package/src/components/ui/Radio.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	name?: string;
+	value?: string | number;
+	checked?: boolean;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	disabled?: boolean;
+	className?: string;
+	id?: string;
+	label?: string;
+	[key: string]: any; // Allow additional props that will be filtered
+}
+
+// Helper function to filter out non-HTML attributes
+const filterHtmlAttributes = (props: Record<string, any>): React.InputHTMLAttributes<HTMLInputElement> => {
+	const invalidAttributes = [
+		'processing', 'processed', 'label', 'options', 'properties', 'specs',
+		'hidden', 'identifier', 'queryValue', 'dependentOn', 'callbacks',
+		'selectedOptionLabel', 'notTrigger', 'autoSelectFirst', 'disabledOptions',
+		'fieldsToSetParameters', 'queryTrafficParameters', 'tooltipData', 'opened',
+		'isVisibleHeader', 'entries', 'rows', 'total', 'selectedItem', 'selectedDelete',
+		'keys', 'dataHead', 'textEmpty', 'actions', 'currentPage', 'limitDepdentOnItems',
+		'showSelect', 'itemTable', 'variant', 'toFixed', 'decimalsLimit',
+		'isPercent', 'condition', 'parameter', 'color', 'template', 'control'
+	];
+	
+	const filtered: any = {};
+	
+	for (const key in props) {
+		if (invalidAttributes.includes(key)) {
+			continue;
+		}
+		
+		if (
+			key.startsWith('on') ||
+			key.startsWith('data-') ||
+			key.startsWith('aria-') ||
+			!invalidAttributes.includes(key)
+		) {
+			const validHtmlAttrs = [
+				'name', 'value', 'checked', 'onChange', 'onBlur', 'onFocus', 'onKeyDown', 
+				'onKeyUp', 'onKeyPress', 'onClick', 'disabled', 'readOnly', 'required', 
+				'type', 'id', 'autoFocus', 'tabIndex', 'title', 'style', 'form'
+			];
+			
+			if (validHtmlAttrs.includes(key) || key.startsWith('on') || key.startsWith('data-') || key.startsWith('aria-')) {
+				filtered[key] = props[key];
+			}
+		}
+	}
+	
+	return filtered;
+};
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+	const { className, label, ...rest } = props;
+	const validHtmlAttributes = filterHtmlAttributes(rest);
+	return (
+		<label>
+			<input ref={ref} type="radio" className={className} {...validHtmlAttributes} />
+			{label && <span>{label}</span>}
+		</label>
+	);
+});
+
+Radio.displayName = 'Radio';
+

package/src/components/ui/Select.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+	name?: string;
+	value?: string | number;
+	onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+	disabled?: boolean;
+	options?: Array<{ value: string | number; label?: string; [key: string]: any }>;
+	className?: string;
+	id?: string;
+	placeholder?: string;
+	[key: string]: any; // Allow additional props that will be filtered
+}
+
+// Helper function to filter out non-HTML attributes
+const filterHtmlAttributes = (props: Record<string, any>): React.SelectHTMLAttributes<HTMLSelectElement> => {
+	const invalidAttributes = [
+		'processing', 'processed', 'label', 'options', 'properties', 'specs',
+		'hidden', 'identifier', 'queryValue', 'dependentOn', 'callbacks',
+		'selectedOptionLabel', 'notTrigger', 'autoSelectFirst', 'disabledOptions',
+		'fieldsToSetParameters', 'queryTrafficParameters', 'tooltipData', 'opened',
+		'isVisibleHeader', 'entries', 'rows', 'total', 'selectedItem', 'selectedDelete',
+		'keys', 'dataHead', 'textEmpty', 'actions', 'currentPage', 'limitDepdentOnItems',
+		'showSelect', 'itemTable', 'variant', 'toFixed', 'decimalsLimit',
+		'isPercent', 'condition', 'parameter', 'color', 'template', 'control'
+	];
+	
+	const filtered: any = {};
+	
+	for (const key in props) {
+		if (invalidAttributes.includes(key)) {
+			continue;
+		}
+		
+		if (
+			key.startsWith('on') ||
+			key.startsWith('data-') ||
+			key.startsWith('aria-') ||
+			!invalidAttributes.includes(key)
+		) {
+			const validHtmlAttrs = [
+				'name', 'value', 'onChange', 'onBlur', 'onFocus', 'onKeyDown', 'onKeyUp', 
+				'onKeyPress', 'onClick', 'disabled', 'readOnly', 'required', 
+				'type', 'id', 'autoFocus', 'tabIndex', 'title', 'style', 'form',
+				'multiple', 'size'
+			];
+			
+			if (validHtmlAttrs.includes(key) || key.startsWith('on') || key.startsWith('data-') || key.startsWith('aria-')) {
+				filtered[key] = props[key];
+			}
+		}
+	}
+	
+	return filtered;
+};
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
+	const { className, options = [], placeholder, ...rest } = props;
+	const validHtmlAttributes = filterHtmlAttributes(rest);
+	return (
+		<select ref={ref} className={className} {...validHtmlAttributes}>
+			{placeholder && <option value="">{placeholder}</option>}
+			{options.map((option, index) => (
+				<option key={index} value={option.value}>
+					{option.label || option.value}
+				</option>
+			))}
+		</select>
+	);
+});
+
+Select.displayName = 'Select';
+

package/src/components/ui/Textarea.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	name?: string;
+	value?: string | number;
+	onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+	disabled?: boolean;
+	placeholder?: string;
+	className?: string;
+	id?: string;
+	[key: string]: any; // Allow additional props that will be filtered
+}
+
+// Helper function to filter out non-HTML attributes
+const filterHtmlAttributes = (props: Record<string, any>): React.TextareaHTMLAttributes<HTMLTextAreaElement> => {
+	const invalidAttributes = [
+		'processing', 'processed', 'label', 'options', 'properties', 'specs',
+		'hidden', 'identifier', 'queryValue', 'dependentOn', 'onChange', 'callbacks',
+		'selectedOptionLabel', 'notTrigger', 'autoSelectFirst', 'disabledOptions',
+		'fieldsToSetParameters', 'queryTrafficParameters', 'tooltipData', 'opened',
+		'isVisibleHeader', 'entries', 'rows', 'total', 'selectedItem', 'selectedDelete',
+		'keys', 'dataHead', 'textEmpty', 'actions', 'currentPage', 'limitDepdentOnItems',
+		'showSelect', 'itemTable', 'className', 'variant', 'toFixed', 'decimalsLimit',
+		'isPercent', 'condition', 'parameter', 'color', 'template', 'control'
+	];
+	
+	const filtered: any = {};
+	
+	for (const key in props) {
+		if (invalidAttributes.includes(key)) {
+			continue;
+		}
+		
+		if (
+			key.startsWith('on') ||
+			key.startsWith('data-') ||
+			key.startsWith('aria-') ||
+			!invalidAttributes.includes(key)
+		) {
+			const validHtmlAttrs = [
+				'name', 'value', 'onChange', 'onBlur', 'onFocus', 'onKeyDown', 'onKeyUp', 
+				'onKeyPress', 'onClick', 'disabled', 'readOnly', 'required', 'placeholder', 
+				'type', 'id', 'autoComplete', 'autoFocus', 'maxLength', 'minLength', 
+				'pattern', 'spellCheck', 'tabIndex', 'title', 'style', 'form', 'rows', 'cols'
+			];
+			
+			if (validHtmlAttrs.includes(key) || key.startsWith('on') || key.startsWith('data-') || key.startsWith('aria-')) {
+				filtered[key] = props[key];
+			}
+		}
+	}
+	
+	return filtered;
+};
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
+	const { className, ...rest } = props;
+	const validHtmlAttributes = filterHtmlAttributes(rest);
+	return <textarea ref={ref} className={className} {...validHtmlAttributes} />;
+});
+
+Textarea.displayName = 'Textarea';
+

package/src/components/ui/index.ts

@@ -0,0 +1,14 @@
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';
+export { Radio } from './Radio';
+export { Select } from './Select';
+
+export type { InputProps } from './Input';
+export type { TextareaProps } from './Textarea';
+export type { CheckboxProps } from './Checkbox';
+export type { CheckboxGroupProps } from './CheckboxGroup';
+export type { RadioProps } from './Radio';
+export type { SelectProps } from './Select';
+

package/src/form/index.ts

@@ -0,0 +1,11 @@
+export { WiseForm } from './view';
+export { useWiseFormContext, useWrappedWiseFormContext } from './view/context';
+export { WrappedForm } from './view/components/wrapped-form';
+export { Control } from './view/components/field';
+
+export type { IWiseFormSpecs } from './interfaces/wise-form-specs';
+export type { IFormSettings } from './interfaces/settings';
+export type { IFormTemplate } from './interfaces/template';
+export type { IWiseForm, WiseFormField } from './interfaces/interfaces';
+export type { IFieldContainer } from './interfaces/field-container';
+

package/src/form/interfaces/field-container.ts

@@ -0,0 +1,9 @@
+import { WiseFormField } from './interfaces';
+
+export interface IFieldContainer {
+	template: [number, string];
+	items: WiseFormField[];
+	styles?: any; // @todo: add correct type
+	model: any;
+}
+

package/src/form/interfaces/interfaces.ts

@@ -0,0 +1,12 @@
+import type { FormField, WrappedFormModel } from '@bgroup/wise-form/models';
+
+// Interface for individual form field elements
+export type WiseFormField = (FormField | WrappedFormModel)[];
+
+// Interface for the general form structure
+export interface IWiseForm {
+	name: string;
+	template: string;
+	fields: WiseFormField;
+}
+

package/src/form/interfaces/settings.ts

@@ -0,0 +1,11 @@
+import { WiseFormField } from './interfaces';
+import { IFormTemplate } from './template';
+
+export interface IFormSettings {
+	name: 'string';
+	template?: IFormTemplate;
+	values?: Record<string, string>;
+	fields: WiseFormField[];
+	gap?: number;
+}
+

package/src/form/interfaces/template.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+
+export interface IFormTemplate extends CSSProperties {
+	structure?: string | (string | number | (string | number)[])[];
+	gap?: string;
+}
+

package/src/form/interfaces/wise-form-specs.ts

@@ -0,0 +1,10 @@
+import type { FormModel } from '@bgroup/wise-form/models';
+import { IFormSettings } from './settings';
+
+export interface IWiseFormSpecs {
+	children?: React.ReactNode;
+	settings?: IFormSettings;
+	model?: FormModel;
+	types?: Record<string, React.ReactNode>;
+}
+

package/src/form/styles.css

@@ -0,0 +1,40 @@
+.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 {
+	@media (max-width: 768px) {
+		grid-template-columns: 1fr !important;
+	}
+}
+

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

@@ -0,0 +1,18 @@
+import React from "react";
+import {useWiseFormContext} from "../../context";
+import {RowFieldContainer} from "../rows/row-container";
+
+export function Containers() {
+	const {
+		rows,
+		model,
+		template: {styles},
+	} = 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} />;
+	});
+}
+

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

@@ -0,0 +1,9 @@
+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

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

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

@@ -0,0 +1,107 @@
+import React from "react";
+import { Input, Textarea } from "../../../../components/ui";
+import { SelectionField } from "./selection";
+import { ControlFieldContainer } from "./container";
+import { useWiseFormContext } from "../../context";
+import type { FormModel, WrappedFormModel, FormField } from "../../../../models";
+import { useField } from "./use-field";
+
+type WiseFormFieldControlProps = {
+	field: FormField | WrappedFormModel;
+	index: number;
+	model: FormModel | WrappedFormModel;
+	hidden?: boolean;
+};
+/**
+ *
+ * @param props.field WiseForm Json config
+ * @param props.index Index of the field
+ * @param props.model Field or Wrapper Model.
+ * @returns
+ */
+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;
+	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;
+	}
+
+	const { attrs } = useField(model, fieldItem);
+
+	// Estado reactivo para el valor de hidden del campo
+	const [isHidden, setIsHidden] = React.useState(() => {
+		if (hidden !== undefined) return hidden;
+		if (!fieldName) return false;
+		const fieldModel = model.getField(fieldName);
+		if (fieldModel) {
+			const properties = (fieldModel as FormField).getProperties();
+			return (properties as any).hidden ?? false;
+		}
+		return (fieldItem as any).hidden ?? false;
+	});
+
+	// Suscribirse a los cambios del modelo del campo
+	React.useEffect(() => {
+		if (!fieldName) return;
+		const fieldModel = model.getField(fieldName);
+		if (!fieldModel) return;
+
+		const onChange = () => {
+			const properties = (fieldModel as FormField).getProperties();
+			setIsHidden((properties as any).hidden ?? false);
+		};
+
+		fieldModel.on('change', onChange);
+		return () => {
+			fieldModel.off('change', onChange);
+		};
+	}, [model, fieldName]);
+
+	if (isHidden) return null;
+	const types = {
+		...{
+			checkbox: SelectionField,
+			radio: SelectionField,
+			select: SelectionField,
+			textarea: Textarea,
+			text: Input,
+			password: Input,
+			default: Input,
+		},
+		...formTypes,
+	};
+
+	const ControlComponent = types[fieldType] ?? types.default;
+	
+	// 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) => {
+		if (!invalidAttributes.includes(key)) {
+			acc[key] = fieldProperties[key];
+		}
+		return acc;
+	}, {} as any);
+	
+	return (
+		<ControlFieldContainer>
+			<ControlComponent {...attrs} {...fieldItemProps} {...filteredFieldProperties} />
+		</ControlFieldContainer>
+	);
+};
+

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox, CheckboxGroup, Radio, Select } from '../../../../components/ui';
+import { ErrorRenderer } from '../error';
+import { useWiseFormContext } from '../../context';
+
+export function SelectionField(props) {
+	if (!props.options) return <ErrorRenderer error={`the field does not have options, field: ${props.name}`} />;
+
+	const { name } = useWiseFormContext();
+	const types = {
+		checkbox: Checkbox,
+		radio: Radio,
+		select: SelectionField,
+	};
+
+	if (!types.hasOwnProperty(props.type)) return <ErrorRenderer error='the props type is not supported' />;
+	const Control = types[props.type];
+
+	// Filter out non-HTML attributes before passing to Select
+	const invalidAttributes = ['processing', 'processed', 'properties', 'specs', 'hidden', 'identifier'];
+	const filteredProps = Object.keys(props).reduce((acc, key) => {
+		if (!invalidAttributes.includes(key)) {
+			acc[key] = props[key];
+		}
+		return acc;
+	}, {} as any);
+
+	if (props.type === 'select') return <Select {...filteredProps} />;
+
+	if (props.type === 'checkbox') return <CheckboxGroup {...filteredProps} />;
+
+	const output = props.options.map((option, key) => {
+		const attributes = { ...option, name: props.name };
+		return <Control {...attributes} key={`${name}.${props.name}.${key}`} />;
+	});
+
+	return output;
+}
+

package/src/form/view/components/field/use-field.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useWiseFormContext } from '../../context';
+
+export function useField(model, field) {
+	// Early return if field doesn't have a name
+	if (!field?.name) {
+		return { attrs: {} };
+	}
+
+	const fieldModel = model.getField(field.name);
+
+	const { values } = useWiseFormContext();
+	const value = fieldModel?.value ?? values[field.name];
+	const [attributes, setAttributes] = React.useState(fieldModel?.attributes || {});
+	
+	const onChange = field.name ? (event) => {
+		if (event && event.target) {
+			model.setField(field.name, event.target.value);
+		}
+	} : undefined;
+
+	React.useEffect(() => {
+		if (!fieldModel || !field.name) return;
+		
+		const onChange = () => {
+			setAttributes({ ...fieldModel.attributes, disabled: fieldModel.disabled });
+		};
+		fieldModel.on('change', onChange);
+		const cleanUp = () => {
+			fieldModel.off('change', onChange);
+			fieldModel.cleanUp();
+		};
+		return cleanUp;
+	}, [fieldModel?.name, field.name]);
+
+	/**
+	 * It's necessary to change the field spread.
+	 */
+
+	const attrs = { 
+		value, 
+		...attributes, 
+		...(onChange && { onChange }), 
+		disabled: fieldModel?.disabled ?? false 
+	};
+
+	return { attrs };
+}
+