@bgroup/wise-form 1.0.1

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { Control } from "../field";
+import { FormSectionWrapper } from "./wrapper";
+import { IFieldContainer } from "../../../interfaces/field-container";
+import type { FormField, WrappedFormModel } from "../../../../models";
+
+/**
+ * Represents a container for form fields within a row, organizing them according to a specified grid style.
+ * This component is used to group form fields dynamically based on the `template` property, allowing for
+ * a flexible layout structure within the form. It supports wrapping fields in a div with a CSS grid layout
+ * to align items as specified by the `template` and `styles` provided.
+ *
+ * @param {Object} props The properties passed to the RowFieldContainer component.
+ * @param {[number, string]} props.template A tuple where the first element is the total number of fields in the row,
+ * and the second element is a string representing the CSS grid template for the layout of these fields.
+ * @param {WiseFormField[]} props.items An array of form field configurations that will be rendered within this row.
+ * @param {any} [props.styles] Optional styles to be applied to the row container, allowing for further customization.
+ * @param
+ *
+*/
+export function RowFieldContainer({ template: [totalFields, gridStyle], items, styles, model }: IFieldContainer) {
+	// Estado para rastrear los valores de hidden de cada campo de forma reactiva
+	const [fieldHiddenStates, setFieldHiddenStates] = React.useState<Record<string, boolean>>(() => {
+		const initialStates: Record<string, boolean> = {};
+		items.forEach((field) => {
+			const fieldItem = field as any; // Using any to access dynamic properties
+			const fieldName = fieldItem?.name;
+			if (fieldName) {
+				const fieldModel = model.getField(fieldName);
+				if (fieldModel) {
+					const properties = (fieldModel as FormField).getProperties();
+					initialStates[fieldName] = (properties as any).hidden ?? false;
+				} else {
+					initialStates[fieldName] = (fieldItem as any).hidden ?? false;
+				}
+			}
+		});
+		return initialStates;
+	});
+
+	// Suscribirse a los cambios de cada campo
+	React.useEffect(() => {
+		const listeners: Array<() => void> = [];
+
+		items.forEach((field) => {
+			const fieldItem = field as any; // Using any to access dynamic properties
+			const fieldName = fieldItem?.name;
+			const fieldType = fieldItem?.type;
+			if (!fieldName || fieldType === "wrapper") return;
+
+			const fieldModel = model.getField(fieldName);
+			if (!fieldModel) return;
+
+			const onChange = () => {
+				const properties = (fieldModel as FormField).getProperties();
+				setFieldHiddenStates((prev) => ({
+					...prev,
+					[fieldName]: (properties as any).hidden ?? false,
+				}));
+			};
+
+			fieldModel.on('change', onChange);
+			listeners.push(() => fieldModel.off('change', onChange));
+		});
+
+		return () => {
+			listeners.forEach((cleanup) => cleanup());
+		};
+	}, [items, model]);
+
+	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;
+		if (fieldType === "wrapper") {
+			const fieldModel = model.getField(fieldItem?.name);
+			const wrapperHidden = fieldModel ? ((fieldModel as WrappedFormModel).getProperties() as any).hidden ?? false : false;
+			if (wrapperHidden) hidden = true;
+			acc.push(<FormSectionWrapper key={`rf-row__item--${index}`} data={fieldItem} model={model} />);
+			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} />);
+		}
+		return acc;
+	}, []);
+
+	const attrs = { className: `rf-fields-container`, style: {} };
+	attrs.style = { gridTemplateColumns: `${gridStyle}`, ...styles };
+	if (hidden) return null;
+	return <div {...attrs}>{output}</div>;
+}
+

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

@@ -0,0 +1,28 @@
+import React from "react";
+import {useWiseFormContext} from "../../context";
+/**
+ *
+ * @param data {WrappedFormModel}
+ * @param model {FormModel} parent.
+ * @returns
+ */
+export function FormSectionWrapper({data, model}) {
+	const {formTypes} = useWiseFormContext();
+
+	const types = {
+		...formTypes,
+	};
+
+	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;
+
+	const wrapperModel = model?.getField(data.name);
+	const Control = types[data.control];
+	// data = wrapperModel ? { ...data, ...wrapperModel.getProperties() } : data;
+	return <Control model={wrapperModel} />;
+}
+

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { WrappedWiseFormContext, useWiseFormContext } from '../context';
+import { RowFieldContainer } from './rows/row-container';
+import { useTemplate } from '../hooks/use-template';
+
+export function WrappedForm({ children, name, types }): JSX.Element {
+	const { model: parent } = useWiseFormContext();
+	const wrapper = parent.wrappers.get(name);
+	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}`} />;
+	});
+
+	const value = {
+		model,
+		name,
+		template,
+		formTypes: types ?? {},
+		parent,
+	};
+
+	return (
+		<WrappedWiseFormContext.Provider value={value}>
+			{Containers}
+			{children}
+		</WrappedWiseFormContext.Provider>
+	);
+}
+

package/src/form/view/context.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { FormModel, WrappedFormModel } from '@bgroup/wise-form/models';
+export interface IFormContext {
+	model?: FormModel | WrappedFormModel;
+	name?: string;
+	values?: Record<string, any>;
+	items?: any;
+	rows?: [number, string][];
+	template?: {
+		type: string;
+		styles: any;
+		items: any[];
+	};
+	formTypes?: Record<string, React.ElementType>;
+}
+
+export interface IWrappedFormContext extends IFormContext {
+	parent: IFormContext;
+}
+const value: IFormContext = {};
+export const WiseFormContext = React.createContext(value);
+export const useWiseFormContext = () => React.useContext(WiseFormContext);
+
+export const WrappedWiseFormContext = React.createContext(value);
+export const useWrappedWiseFormContext = () => React.useContext(WrappedWiseFormContext);
+

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormModel } from '@bgroup/wise-form/models';
+import { useTemplate } from './use-template';
+
+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);
+			setValues({ ...form.values });
+		};
+
+		if (!form) {
+			const properties = settings.fields.map(item => item.name);
+			const values = settings.values || {};
+			form = new FormModel(settings, { properties, ...values });
+		}
+
+		setModel(form);
+		form.on('change', onChange);
+
+		onChange();
+
+		return () => {
+			form.off('change', onChange);
+		};
+	};
+
+	React.useEffect(startup, [form?.name]);
+
+	return { ready, model, values, type, styles, items };
+}

package/src/form/view/hooks/use-template.tsx

@@ -0,0 +1,64 @@
+import { IFormTemplate } from '../../interfaces/template';
+
+/**
+ * Applies a template to create a structured layout, optionally using a gap between elements.
+ *
+ * @param template - The template to be applied. Can be an array or an object conforming to the IFormTemplate interface.
+ * @param gap - Specifies the gap between elements.
+ * The `gap` parameter is deprecated and will be removed in a future version. Use the gap property within the template object instead.
+ * @returns An object representing the structured layout with type, styles, and items.
+ */
+export function useTemplate(settings, gap = undefined) {
+	if (!settings?.template) throw new Error(`${settings?.name} Doesn't have a template`);
+
+	let template = settings?.template;
+	let structure = template;
+	let styles = {};
+
+	if (!template) {
+		return {
+			type: 'grid',
+			styles: {},
+			items: settings.fields.map(item => [1, '1fr']),
+		};
+	}
+
+	if (gap) {
+		template = { structure: template, gap: gap } as IFormTemplate;
+	}
+	const isArray = Array.isArray(template);
+
+	if (!isArray) {
+		if (typeof template !== 'object' || !template.structure || !Array.isArray(template.structure)) {
+			throw new Error('Template must be an array or an object');
+		}
+		structure = template.structure;
+
+		styles = template.gap ? { gap: template.gap } : {};
+	}
+
+	const processString = str => {
+		if (typeof str === 'number') return [1, '1fr'];
+		const [num, times] = str.split('x').map(Number);
+
+		const tpl = times
+			? [
+					times,
+					Array(times)
+						.fill(num)
+						.reduce((acc, v) => `${acc} 1fr`, ''),
+			  ]
+			: [1, '1fr'];
+		return tpl;
+	};
+
+	return {
+		type: 'grid',
+		styles: styles,
+		items: structure.map(item => {
+			if (!Array.isArray(item)) return processString(item);
+			return item;
+		}),
+	};
+}
+

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { WFSettings } from '../../../settings';
+import { SelectionField } from '../components/field/selection';
+import { Input, Textarea } from '../../../components/ui';
+
+export function useTypes(types) {
+	return React.useMemo(() => {
+		const defaultTypes = {
+			checkbox: SelectionField,
+			radio: SelectionField,
+			select: SelectionField,
+			textarea: Textarea,
+			text: Input,
+			password: Input,
+			default: Input,
+		};
+
+		return { ...defaultTypes, ...WFSettings.types, ...types };
+	}, [types]);
+}
+

package/src/form/view/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useModel } from './hooks/use-model';
+import { WiseFormContext } from './context';
+import { useTypes } from './hooks/use-types';
+
+import { IWiseFormSpecs } from '../interfaces/wise-form-specs';
+import { Containers } from './components/containers';
+
+export function WiseForm({ children, settings, types, model }: IWiseFormSpecs): JSX.Element {
+	const { ready, model: instance, type, styles, items } = useModel(settings, model);
+	const formTypes = useTypes(types);
+
+	if (!ready) return null;
+
+	if (!settings && !model) {
+		console.error('the form does not have settings or model defined', settings);
+	}
+
+	const onSubmit = (event: React.FormEvent) => {
+		event.preventDefault();
+		// Form submission can be handled via callbacks or custom handlers
+		if (instance.callbacks?.onSubmit) {
+			instance.callbacks.onSubmit({ form: instance, event });
+		}
+	};
+
+	const value = {
+		model: instance,
+		items,
+		rows: items,
+		values: instance.values,
+		name: instance.name,
+		template: { type, styles, items },
+		formTypes,
+	};
+
+	return (
+		<WiseFormContext.Provider value={value}>
+			<form onKeyDown={(e) => {
+				if (e.key === 'Enter') e.preventDefault();
+			}} className="reactive-form-container" onSubmit={onSubmit}>
+				<Containers />
+				{children}
+			</form>
+		</WiseFormContext.Provider>
+	);
+}
+

package/src/formulas/helpers/condition-types.ts

@@ -0,0 +1,5 @@
+export const conditionsTypes = {
+    every: "validateAll",
+    some: "validateAny"
+}
+

package/src/formulas/helpers/evaluations.ts

@@ -0,0 +1,48 @@
+export class EvaluationsManager {
+	private static evaluations: Record<string, (value: any, comparisonValue?: any) => boolean> = {
+		equal: (value, comparisonValue) => value == comparisonValue,
+		lower: (value, comparisonValue) => Number(value) < Number(comparisonValue),
+		upper: (value, comparisonValue) => Number(value) > Number(comparisonValue),
+		between: (value, [min, max]) => {
+			const numValue = Number(value);
+			return numValue >= Number(min) && numValue <= Number(max);
+		},
+		different: (value, comparisonValue) => value != comparisonValue,
+		hasValue: value => ![undefined, null, '', false].includes(value),
+		empty: value => [undefined, null, '',].includes(value),
+		lessOrEqual: (value, comparisonValue) => Number(value) <= Number(comparisonValue),
+		greaterOrEqual: (value, comparisonValue) => Number(value) >= Number(comparisonValue),
+	};
+
+	static validate(identifier: string, value: any, comparisonValue?: any): boolean {
+		if (!this.evaluations[identifier]) {
+			throw new Error(`Evaluation identifier "${identifier}" not recognized.`);
+		}
+
+		const result = this.evaluations[identifier](value, comparisonValue);
+		return result;
+	}
+
+	/**
+   * Evalúa un arreglo de valores para ver si alguno cumple con la condición especificada.
+   * Retorna true si al menos uno de los valores cumple con la condición.
+   */
+	static validateAny(identifier: string, values: any[], comparisonValue?: any): boolean {
+		if (!this.evaluations[identifier]) {
+			throw new Error(`Evaluation identifier "${identifier}" not recognized.`);
+		}
+		return values.some(value => this.evaluations[identifier](value, comparisonValue));
+	}
+
+	/**
+	 * Evalúa un arreglo de valores para ver si todos cumplen con la condición especificada.
+	 * Retorna true solo si todos los valores cumplen con la condición.
+	 */
+	static validateAll(identifier: string, values: any[], comparisonValue?: any): boolean {
+		if (!this.evaluations[identifier]) {
+			throw new Error(`Evaluation identifier "${identifier}" not recognized.`);
+		}
+		return values.every(value => this.evaluations[identifier](value, comparisonValue));
+	}
+}
+

package/src/formulas/helpers/formula.ts

@@ -0,0 +1,27 @@
+import { Lexer } from './lexer';
+import { Parser } from './parser';
+import { Token } from './token';
+
+type ParserData = {
+	parser: Parser;
+	tokens: Token[];
+	[key: string]: any;
+};
+
+export class Formula {
+	#lexer = new Lexer();
+	#parsers: Map<string, ParserData> = new Map();
+	#tokens: Token[];
+	constructor(data) {
+		if (!data.formula) throw new Error('To get a parser you must provide a formula');
+		// if (this.#parsers.has(data.formula)) return this.#parsers.get(data.formula);
+		const tokens = this.#lexer.tokenize(data.formula);
+		const parser = new Parser(tokens);
+		const result = { tokens, parser, ...data };
+		this.#parsers.set(data.formula, result);
+		return result;
+	}
+
+	initialize() {}
+}
+

package/src/formulas/helpers/lexer.ts

@@ -0,0 +1,82 @@
+import { Token } from './token';
+import { TokenType } from '../types';
+
+export class Lexer {
+	private tokenRegex: RegExp = /\s*(\(|\)|\+|\-|\*|\/|\d+\.\d+|\d+|[A-Za-z_][A-Za-z0-9_]*)\s*/g;
+	private flattenTokens: boolean;
+
+	constructor(flattenTokens: boolean = false) {
+		this.flattenTokens = flattenTokens;
+	}
+
+	tokenize(formula: string): Token[] {
+		this.tokenRegex.lastIndex = 0;
+		const tokens: Token[] = [];
+		const stack: Array<Token[]> = [tokens]; // Stack to manage nested token lists
+		let match: RegExpExecArray | null;
+
+		while ((match = this.tokenRegex.exec(formula)) !== null) {
+			const tokenValue = match[1];
+			let tokenType: TokenType = this.determineTokenType(tokenValue);
+
+			if (tokenType === 'parenthesis') {
+				if (tokenValue === '(') {
+					if (!this.flattenTokens) {
+						// Start a new scope for tokens
+						stack.push([]);
+					}
+				} else {
+					if (!this.flattenTokens) {
+						// End the current scope
+						const subTokens = stack.pop();
+						if (!subTokens) {
+							throw new Error('Mismatched parentheses in the formula');
+						}
+						// Create a parenthesis token with these subtokens as children
+						const parentTokens = stack[stack.length - 1];
+						parentTokens.push(new Token('parenthesis', '()', null, subTokens));
+					}
+				}
+			} else {
+				// Add this token to the current scope
+				stack[stack.length - 1].push(new Token(tokenType, tokenValue));
+			}
+		}
+
+		if (stack.length !== 1) {
+			throw new Error('Mismatched parentheses in the formula');
+		}
+
+		// If flattenTokens is true, flatten all tokens into a single array
+		if (this.flattenTokens) {
+			return this.flatten(tokens);
+		}
+
+		return tokens; // Return the outermost list of tokens
+	}
+
+	private determineTokenType(value: string): TokenType {
+		const operators = {
+			'+': 'operator',
+			'-': 'operator',
+			'*': 'operator',
+			'/': 'operator',
+			'(': 'parenthesis',
+			')': 'parenthesis',
+		};
+		return operators[value] || (!isNaN(parseFloat(value)) ? 'number' : 'variable');
+	}
+
+	private flatten(tokens: Token[]): Token[] {
+		const flatList: Token[] = [];
+		for (const token of tokens) {
+			if (token.type === 'parenthesis' && token.children) {
+				flatList.push(...this.flatten(token.children)); // Flatten nested tokens
+			} else {
+				flatList.push(token);
+			}
+		}
+		return flatList;
+	}
+}
+

package/src/formulas/helpers/parser.ts

@@ -0,0 +1,55 @@
+import { Token } from './token';
+
+type TokenType = 'variable' | 'number' | 'operator';
+
+/**
+ * The Parser class is responsible for parsing a sequence of tokens into an abstract syntax tree (AST).
+ * The tokens should be an array of objects with `type` and `value` properties.
+ *
+ * The Parser handles mathematical expressions and ensures that the tokens are in the correct order
+ * for later evaluation. It understands variables, numbers, and parentheses, and is extendable to support
+ * additional operations and precedence rules.
+ *
+ * Example usage:
+ * ```
+ * const tokens: Token[] = [...];
+ * const parser = new Parser(tokens);
+ * const ast = parser.parse();
+ * ```
+ */
+export class Parser {
+	private tokens: Token[];
+	private currentTokenIndex: number;
+
+	constructor(tokens: Token[]) {
+		this.tokens = tokens;
+		this.currentTokenIndex = 0;
+	}
+
+	public parse(): Token | undefined {
+		return this.parseExpression();
+	}
+
+	private parseExpression(): Token | undefined {
+		let token = this.tokens[this.currentTokenIndex];
+		if (token && token.type === 'variable') {
+			this.currentTokenIndex++;
+			return token;
+		} else if (token && token.type === 'number') {
+			this.currentTokenIndex++;
+			return token;
+		} else if (token && token.value === '(') {
+			this.currentTokenIndex++; // Skip '('
+			let expr = this.parseExpression(); // Parse subexpression
+			if (this.tokens[this.currentTokenIndex] && this.tokens[this.currentTokenIndex].value === ')') {
+				this.currentTokenIndex++; // Skip ')'
+				return expr;
+			}
+		}
+		// TODO: Add cases for parsing different operations (like addition, multiplication etc.)
+		// TODO: Implement precedence handling for different operations
+		// This function should be extended to fully construct the AST.
+		return undefined;
+	}
+}
+

package/src/formulas/helpers/token.ts

@@ -0,0 +1,22 @@
+import { TokenType } from '../types';
+
+/**
+ * The Token class now includes a stringValue property for storing the original string value
+ * of the expression inside the parentheses and an optional parent property for storing the parent token.
+ */
+export class Token {
+	type: TokenType;
+	value: string;
+	stringValue?: string;
+	children?: Token[];
+	parent?: Token;
+
+	constructor(type: TokenType, value: string, stringValue?: string, children?: Token[], parent?: Token) {
+		this.type = type;
+		this.value = value;
+		this.stringValue = stringValue;
+		this.children = children;
+		this.parent = parent;
+	}
+}
+