@bolttech/form-engine-core 0.0.1-beta.1

package/src/masks/string.d.ts

@@ -0,0 +1,97 @@
+import { TMasks } from '../types/schema';
+/**
+ * Replaces all characters in a string with a specified replacement string or character.
+ *
+ * @param value - The value to be masked.
+ * @param masks - An object containing the mask configuration.
+ * @returns The masked value.
+ *
+ * @example
+ * ```typescript
+ * import { replaceAll } from './path/to/maskFunctions';
+ *
+ * const masks = { replaceAll: '*' };
+ *
+ * const maskedValue = replaceAll('12345', masks);
+ * console.log(maskedValue); // Output: '*****'
+ *
+ * // Using from a JSON config
+ * const config = {
+ *   value: 'hello',
+ *   masks: { replaceAll: '*' }
+ * };
+ *
+ * const maskedValue = replaceAll(config.value, config.masks);
+ * console.log(maskedValue); // Output: '*****'
+ * ```
+ */
+export declare const replaceAll: (value: string | number, masks: TMasks) => unknown;
+/**
+ * Formats a numeric value as a currency string based on the provided mask configuration.
+ *
+ * @param value - The numeric value to be formatted.
+ * @param masks - An object containing the mask configuration.
+ * @returns The formatted currency string.
+ *
+ * @example
+ * ```typescript
+ * import { currency } from './path/to/maskFunctions';
+ *
+ * const masks = {
+ *   currency: {
+ *     align: 'right',
+ *     decimal: ',',
+ *     precision: 2,
+ *     prefix: 'USD',
+ *     thousands: '.'
+ *   }
+ * };
+ *
+ * const formattedValue = currency(12345.67, masks);
+ * console.log(formattedValue); // Output: '12.345,67 $'
+ *
+ * // Using from a JSON config
+ * const config = {
+ *   value: 9876.54,
+ *   masks: {
+ *     currency: {
+ *       align: 'right',
+ *       decimal: ',',
+ *       precision: 2,
+ *       prefix: 'EUR',
+ *       thousands: '.'
+ *     }
+ *   }
+ * };
+ *
+ * const formattedValue = currency(config.value, config.masks);
+ * console.log(formattedValue); // Output: '9.876,54 €'
+ * ```
+ */
+export declare const currency: (value: string | number, masks: TMasks) => unknown;
+/**
+ * Applies a custom mask to a string based on the provided mask configuration.
+ *
+ * @param value - The value to be masked.
+ * @param masks - An object containing the mask configuration.
+ * @returns The masked value.
+ *
+ * @example
+ * ```typescript
+ * import { custom } from './path/to/maskFunctions';
+ *
+ * const masks = { custom: '##-##' };
+ *
+ * const maskedValue = custom('123456', masks);
+ * console.log(maskedValue); // Output: '12-34'
+ *
+ * // Using from a JSON config
+ * const config = {
+ *   masks: { custom: '###-###' }
+ * };
+ *
+ * const maskedValue = custom(config.value, config.masks);
+ * console.log(maskedValue); // Output: '987-654'
+ * ```
+ */
+export declare const custom: (value: string, masks: TMasks) => string;

package/src/types/event.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @type TEvents
+ * Represents the different types of events that can occur on form fields.
+ *
+ * @example
+ * ```typescript
+ * const event: TEvents = 'ON_FIELD_CHANGE';
+ * ```
+ */
+type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIELD_FOCUS' | 'ON_FIELD_CLICK' | 'ON_FIELD_KEYUP' | 'ON_FIELD_KEYDOWN' | 'ON_FORM_SUBMIT' | 'ON_API_FIELD_RESPONSE';
+/**
+ * @type TMutationEvents
+ * Represents the different types of events that can occur internally that triggers templating.
+ *
+ * @example
+ * ```typescript
+ * const event: TMutationEvents = 'ON_VALUE';
+ * ```
+ */
+type TMutationEvents = 'ON_VALUE' | 'ON_PROPS' | 'ON_VISIBILITY' | 'ON_API' | 'ON_IVARS' | 'ON_FIELDS';
+declare enum TMutationEnum {
+    ON_VALUE = "value",
+    ON_PROPS = "props",
+    ON_VISIBILITY = "visibility",
+    ON_API = "api",
+    ON_IVARS = "iVars",
+    ON_FIELDS = "fields"
+}
+/**
+ * @type TValueChangeEvent
+ * Represents the custom change handle function to perform value changes.
+ *
+ * @example
+ * ```typescript
+ * handleChangeEvent (value, opts) {
+ *   return value
+ * }
+ * ```
+ */
+type TValueChangeEvent = (value: unknown, opts?: {
+    props: Record<string, unknown>;
+}) => void;
+export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent };

package/src/types/form.d.ts

@@ -0,0 +1,51 @@
+import { IFormSchema } from '../interfaces/schema';
+import { TMapper } from './mapper';
+/**
+ * @type TFormValues
+ * Represents the values and state of a form.
+ *
+ * @property {Record<string, unknown>} values - The current values of the form fields.
+ * @property {string[]} erroredFields - A list of field names that have errors.
+ * @property {boolean} isValid - Indicates whether the form is valid.
+ *
+ * @example
+ * ```typescript
+ * const formValues: TFormValues = {
+ *   values: { name: 'John', age: 30 },
+ *   erroredFields: ['email'],
+ *   isValid: false
+ * };
+ * ```
+ */
+type TFormValues = {
+    values: Record<string, unknown>;
+    erroredFields: string[];
+    isValid: boolean;
+};
+/**
+ * @type TFormEntry
+ * Represents the entry configuration for a form.
+ *
+ * @property {IFormSchema} [schema] - The schema defining the structure and behavior of the form.
+ * @property {Record<string, unknown>} [initialValues] - The initial values for the form fields.
+ * @property {(data: TFormValues) => void} [onSubmit] - Callback function to handle form submission.
+ *
+ * @example
+ * ```typescript
+ * const formEntry: TFormEntry = {
+ *   schema: [{ component: 'input', props: {}, name: 'name' }],
+ *   initialValues: { name: 'John' },
+ *   onSubmit: (data) => { console.log(data); }
+ * };
+ * ```
+ */
+type TFormEntry = Omit<IFormSchema, 'components'> & {
+    schema?: IFormSchema;
+    onSubmit?: (data: TFormValues) => void;
+    onData?: (payload: {
+        field: string;
+        data: TFormValues;
+    }) => void;
+    mappers: TMapper<unknown>[];
+};
+export { TFormValues, TFormEntry };

package/src/types/mapper.d.ts

@@ -0,0 +1,94 @@
+import { TValueChangeEvent } from './event';
+import { OneOf } from './utility';
+/**
+ * @type TComponentPropsMapping
+ * Represents the mapping of component properties for various events and actions.
+ *
+ * @property {string} [getValue] - Function to get the value.
+ * @property {string} [setValue] - Function to set the value.
+ * @property {string} [onBlur] - Function to handle the blur event.
+ * @property {string} [onClick] - Function to handle the click event.
+ * @property {string} [onFocus] - Function to handle the focus event.
+ * @property {string} [onKeyUp] - Function to handle the keyup event.
+ * @property {string} [onKeyDown] - Function to handle the keydown event.
+ * @property {string} [setErrorMessage] - Function to set the error message.
+ * @property {string} [setErrorState] - Function to set the error state.
+ *
+ * @example
+ * ```typescript
+ * const componentProps: TComponentPropsMapping = {
+ *   getValue: 'getValueFunction',
+ *   setValue: 'setValueFunction',
+ *   onBlur: 'handleBlur',
+ *   onClick: 'handleClick',
+ *   onFocus: 'handleFocus',
+ *   onKeyUp: 'handleKeyUp',
+ *   onKeyDown: 'handleKeyDown',
+ *   setErrorMessage: 'setErrorMessageFunction',
+ *   setErrorState: 'setErrorStateFunction'
+ * };
+ * ```
+ */
+type TComponentPropsMapping = {
+    getValue?: string;
+    setValue?: string;
+    onBlur?: string;
+    onClick?: string;
+    onFocus?: string;
+    onKeyUp?: string;
+    onKeyDown?: string;
+    setErrorMessage?: string;
+    setErrorState?: string;
+};
+/**
+ * @type TMapper
+ * Represents the mapping of a component, including the component type,
+ * name, events, and an optional function to handle value changes.
+ *
+ * @property {ElementType} component - The type of the component.
+ * @property {string} componentName - The name of the component.
+ * @property {TComponentPropsMapping} [events] - Mapping event properties for the component.
+ * @property {TValueChangeEvent} [valueChangeEvent] - Optional function to handle value changes.
+ *
+ * @example
+ * ```typescript
+ * const mappers: TMapper[] = [
+ *  {
+ *    component: InputElement,
+ *    componentName: 'input',
+ *    events: {
+ *      getValue: 'onChange2',
+ *      onBlur: 'onBlur2',
+ *      onFocus: 'onFocus2',
+ *    }
+ *  },
+ *  {
+ *    component: Container,
+ *    componentName: 'row',
+ *  },
+ *  {
+ *    component: Dropdown,
+ *    componentName: 'dropdown',
+ *    valueChangeEvent: (event: {
+ *      id: string;
+ *      label: string;
+ *      value: string;
+ *    }) => ({ _value: event.value, _stateValue: event.id }),
+ *  },
+ *  {
+ *    component: DatePicker,
+ *    componentName: 'datepicker',
+ *    valueChangeEvent: (event: string) => event,
+ *  },
+ * ];
+ * ```
+ */
+type TMapper<T> = {
+    componentName: string;
+    events?: TComponentPropsMapping;
+    valueChangeEvent?: TValueChangeEvent;
+} & OneOf<{
+    component: T;
+    asynccomponent: T;
+}>;
+export { TMapper, TComponentPropsMapping };