mobx-form 14.2.0 → 14.3.0

package/README.md

@@ -1,138 +1,207 @@
-# [Mobx](https://www.npmjs.com/package/mobx)-Form
 
-Simple helper for state management
+# mobx-form
 
-TODO:
+[![NPM Version](https://img.shields.io/npm/v/mobx-form.svg)](https://www.npmjs.com/package/mobx-form)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![CI](https://github.com/royriojas/mobx-form/actions/workflows/ci.yml/badge.svg)](https://github.com/royriojas/mobx-form/actions/workflows/ci.yml)
 
-- Add more examples
-- Add more unit tests
-- Add better documentation
+> A simple, robust, and extensible form state management helper for [MobX](https://github.com/mobxjs/mobx).
 
-## Install
 
-```bash
-npm i --save mobx mobx-form
-```
+`mobx-form` simplifies form validation and state management in MobX-powered React applications. It provides a declarative way to define form models with synchronous and asynchronous validation, dirty tracking, and easy data serialization.
 
-## Usage
+[**View Live Demo / Storybook**](https://royriojas.github.io/mobx-form/)
 
-```javascript
-import { createModel } from 'mobx-form';
+## Features
 
-const model = createModel( {
-  // the field descriptor
-  // when calling model.validate(); all the validators are executed in parallel
-  fieldName1: {
-    // whether validation will happen automatically after first update
-    autoValidate: true,
-    // whether validation should wait until the field is blurred at least once
-    // (meaning the blur event happened at least once in that field).
-    //
-    // This requires that the component calls `markBlurredAndValidate()` after
-    // the blur even is raised on the field
-    waitForBlur: false,
-    // Very useful flag to just make a field required or not without requiring a validator
-    // the `required` property can be:
-    // - a boolean, in which case the error message shown will be `Required`
-    // - a `string` in which case the string message will be used as the message to show when the field has no value
-    required: 'This field is required',
-    // optional, default error message is the validaor function return just true/false
-    errorMessage:
-    // optional, if `required` is defined. Required if not
-    // the validation function it receive the current field and allFields for
-    // validations that need to take in consideration more than one in conjuction
-    //
-    // - if validation passes function must return true.
-    // - if validation does not pass the function should:
-    //   - return false (default errorMessage specified in the validator will be used)
-    //   - throw an error (error.message is going to be used as the errorMessage)
-    //   - reject or return an object with an error field. like:
-    //     ```
-    //     return { error: 'some error' };
-    //     return Promise.reject({ error: 'some error' }); // although this should be considered deprecated
-    //     ```.
-    validator = (field, allFields, model) => {
-      // do validation
-      // return true/false
-      // throw new Error('some error');
-      // return { error: 'some error '};
-    }
-  }
-})
+- ** declarative form definition**: Define your form structure with simple descriptors.
+- **⚡️ Reactive**: Built on MobX for high-performance, fine-grained reactivity.
+- **✅ Validation**:
+  - Sync and Async validators
+  - Multiple validators per field
+  - Cross-field validation (e.g., password confirmation)
+  - Custom error messages
+- **🔍 State Tracking**:
+  - `dirty` state (modified vs initial)
+  - `interacted` state (touched)
+  - `validating` state (async loading indicators)
+- **🛠 Utilities**:
+  - `serializedData` for easy API payloads
+  - `commit()` / `restoreInitialValues()` for transaction-like behavior
+  - `autoValidate` options
 
-performValidation = async () => {
-  // To call all validators
-  await model.validate();
+## Demo / Storybook
 
-  // To check if valid (after awaiting the validate call)
-  if (model.valid) {
-    // get the serialized data
-    // { fieldName: 'value set' }
-    const obj = model.serializedData;
+This project includes a comprehensive Storybook suite demonstrating all features.
 
-    // do something with the serializedData
-    await xhr('/some/endpoint', { method: 'post', payload: obj });
-  };
-};
+To run the interactive stories locally:
 
+```bash
+# Install dependencies
+npm install
 
-// to update values in the form.
-model.updateFrom({ fieldName1: 'new value' }, /* reset = true */); // by default setting values using this method
-                                                                   // will reset the interacted flag on the Field
-                                                                   // and reset the validation error
+# Run Storybook
+npm run storybook
 ```
 
-## Example:
+[**View Live Demo**](https://royriojas.github.io/mobx-form/)
+
+Navigate to `http://localhost:6006` to explore examples like:
+- Simple Login Forms
+- Async Validation (simulated API checks)
+- Dynamic Fields
+- Complex Validation Rules
+
+## Installation
+
+```bash
+npm install --save mobx-form mobx
+# or
+bun add mobx-form mobx
+```
 
-```js
-import trim from 'jq-trim';
+> Note: `mobx` is a peer dependency.
+
+## Usage
+
+### 1. Create a Form Model
+
+```typescript
 import { createModel } from 'mobx-form';
 
-const model = createModel({
+const loginForm = createModel({
+  initialState: {
+    username: '',
+    password: ''
+  },
   descriptors: {
-    name: {
-      required: 'Name is required',
+    username: {
+      required: 'Username is required',
+      autoValidate: true
     },
-    // validator for email
-    email: {
-      // validator function
-      async validator(field) {
-        const email = trim(field.value);
-        // super simple and naive email validation
-        if (!email || !(email.indexOf('@') > 0)) {
-          throw new Error('Please provide an error message');
-        }
-      },
-    },
-    // validator for password
     password: {
-      // validator function
-      async validator(field) {
-        if (!trim(field.value)) {
-          throw new Error('Please provide your password');
+      required: true, // uses default required message
+      validator: (field) => {
+        if (field.value.length < 6) {
+          return { error: 'Password must be at least 6 characters' };
         }
-      },
-    },
-  },
-  initialState: {
-    email: '',
-    password: '',
-  },
+      }
+    }
+  }
+});
+```
+
+### 2. Connect to React
+
+Use `observer` from `mobx-react-lite` to make your component reactive.
+
+```tsx
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+const LoginForm = observer(({ model }) => {
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); model.validate(); }}>
+      
+      {/* Username Field */}
+      <div>
+        <label>Username</label>
+        <input 
+          value={model.fields.username.value}
+          onChange={e => model.fields.username.setValue(e.target.value)}
+          onBlur={() => model.fields.username.markBlurredAndValidate()}
+        />
+        <div className="error">{model.fields.username.error}</div>
+      </div>
+
+      {/* Password Field */}
+      <div>
+        <label>Password</label>
+        <input 
+          type="password"
+          value={model.fields.password.value}
+          onChange={e => model.fields.password.setValue(e.target.value)}
+        />
+        <div className="error">{model.fields.password.error}</div>
+      </div>
+
+      {/* Actions */}
+      <button type="submit" disabled={model.validating}>
+        {model.validating ? 'Checking...' : 'Login'}
+      </button>
+
+      {/* Form Status */}
+      <div>
+        Valid: {model.valid ? 'Yes' : 'No'} | 
+        Dirty: {model.dirty ? 'Yes' : 'No'}
+      </div>
+    </form>
+  );
 });
+```
+
+## API Reference
+
+### `createModel(config)`
+
+Creates a new `FormModel` instance.
+
+**Config Object:**
+- `initialState`: Object containing initial values for fields.
+- `descriptors`: Object definition validation rules and behavior for each field.
+- `options`: `{ throwIfMissingField: boolean }` (default `true`).
+
+### Field Descriptor Properties
 
-const main = async () => {
-  await model.validate();
+| Property | Type | Description |
+|----------|------|-------------|
+| `required` | `boolean \| string` | Marks field as required. String serves as the error message. |
+| `validator` | `Function \| Function[]` | Validation function(s). Return `true`, `{error: msg}`, or throw/return Error. |
+| `autoValidate` | `boolean` | If `true`, validation runs on every change (default behavior). |
+| `waitForBlur` | `boolean` | If `true`, validation is deferred until the field is blurred once. |
+| `value` | `any` | Initial value (can also be set via `initialState`). |
+| `disabled` | `boolean` | If `true`, field is skipped during validation. |
+| `meta` | `object` | Arbitrary metadata (e.g., placeholder text, options list). |
+| `clearErrorOnValueChange` | `boolean` | Immediately clears error when user types. |
 
-  console.log('>>>> model.valid', model.valid);
-  console.log('>>>> model.summary', model.summary);
-  console.log('>>>> model.requiredFields', model.requiredFields);
+### `FormModel` Methods & Properties
+
+- **`model.fields`**: Access to individual field objects (e.g., `model.fields.email`).
+- **`model.validate()`**: Triggers validation for all fields. Returns a Promise.
+- **`model.valid`**: Boolean. `true` if all fields are valid.
+- **`model.dirty`**: Boolean. `true` if any field value differs from initial state.
+- **`model.serializedData`**: Returns a plain JS object with current values (trimmed strings).
+- **`model.commit()`**: Sets current values as the new "initial" state (resets `dirty` to false).
+- **`model.restoreInitialValues()`**: Resets all fields to their last committed values.
+- **`model.addFields(descriptors)`**: Dynamically add new fields to the form.
+
+## Advanced Examples
+
+### Async Validation
+Validators can be async functions. Use the `model.validating` or `field.validating` flags to show loaders.
+
+```typescript
+username: {
+  validator: async (field) => {
+    const isTaken = await checkApiForUser(field.value);
+    if (isTaken) throw new Error('Username already taken');
+  }
+}
+```
+
+### Cross-Field Validation
+Access other fields via the `model` argument in validators.
+
+```typescript
+confirmPassword: {
+  validator: (field, allFields, model) => {
+    if (field.value !== model.fields.password.value) {
+      return { error: 'Passwords do not match' };
+    }
+  }
+}
+```
 
-  // >>>> model.valid false
-  // >>>> model.summary [ 'Name is required',
-  //   'Please provide an error message',
-  //   'Please provide your password' ]
-  // >>>> model.requiredFields [ 'name' ]
-};
+## License
 
-main().catch(err => console.error('>>> error', err));
-```
+MIT

package/dist/dist/mobx-form.d.ts

@@ -0,0 +1,271 @@
+// Generated by dts-bundle v0.7.3
+// Dependencies for this module:
+//   ../lodash
+
+declare module 'mobx-form' {
+    export * from "mobx-form/FormModel";
+}
+
+declare module 'mobx-form/FormModel' {
+    import type { DebouncedFunc } from "lodash";
+    export type Descriptors<T> = {
+            [P in keyof T]: FieldDescriptor<T[P], T>;
+    };
+    export type FormModelArgs<T> = {
+            descriptors: Partial<Descriptors<T>>;
+            initialState?: Partial<T>;
+            options?: ThrowIfMissingFieldType;
+    };
+    export type ResultObj = {
+            error: string;
+    };
+    export type ErrorLike = {
+            message: string;
+    } | Error;
+    export type ValidatorResult = boolean | ResultObj | void;
+    export type ValidateFnArgs<T, K> = {
+            field: Field<T, K>;
+            fields: FormModel<K>["fields"];
+            model: FormModel<K>;
+            value: Field<T, K>["value"];
+    };
+    export type ValidateFn<T, K> = (args: ValidateFnArgs<T, K>) => Promise<ValidatorResult> | ValidatorResult;
+    export type ResetInteractedFlagType = {
+            resetInteractedFlag?: boolean;
+    };
+    export type ThrowIfMissingFieldType = {
+            throwIfMissingField?: boolean;
+    };
+    export interface FieldDescriptor<T, K> {
+            waitForBlur?: boolean;
+            disabled?: boolean;
+            errorMessage?: string;
+            validator?: ValidateFn<T, K> | ValidateFn<T, K>[];
+            hasValue?: (value: T) => boolean;
+            value?: T;
+            required?: boolean | string;
+            autoValidate?: boolean;
+            validationDebounceThreshold?: number;
+            clearErrorOnValueChange?: boolean;
+            meta?: Record<string, any>;
+    }
+    export type CommitType = {
+            commit?: boolean;
+    };
+    export type ForceType = {
+            force?: boolean;
+    };
+    export type SetValueFnArgs = ResetInteractedFlagType & CommitType;
+    /**
+        * Field class provides abstract the validation of a single field
+        */
+    export class Field<T, K> {
+            _name: string;
+            meta?: Record<string, any>;
+            _model: FormModel<K>;
+            _waitForBlur?: boolean | undefined;
+            _disabled?: boolean | undefined;
+            _required?: boolean | string;
+            _validatedOnce: boolean;
+            _clearErrorOnValueChange?: boolean | undefined;
+            _hasValueFn?: (value: T) => boolean;
+            get name(): string;
+            get model(): FormModel<K>;
+            get validatedAtLeastOnce(): boolean;
+            get waitForBlur(): boolean;
+            get disabled(): boolean;
+            get required(): boolean;
+            resetInteractedFlag(): void;
+            markAsInteracted(): void;
+            resetValidatedOnce(): void;
+            get hasValue(): boolean;
+            _validationTs: number;
+            /**
+                * flag to know if a validation is in progress on this field
+                */
+            _validating: boolean;
+            /**
+                * field to store the initial value set on this field
+                * */
+            _initialValue?: T;
+            /**
+                * the value of the field
+                * */
+            _value?: T;
+            /**
+                * whether the user interacted with the field
+                * this means if there is any value set on the field
+                * either setting it using the `setValue` or using
+                * the setter `value`. This is useful to know if
+                * the user has interacted with teh form in any way
+                */
+            _interacted: boolean;
+            /**
+                * whether the field was blurred at least once
+                * usually validators should only start being applied
+                * after the first blur, otherwise they become
+                * too invasive. This flag be used to keep track of
+                * the fact that the user already blurred of a field
+                */
+            _blurredOnce: boolean;
+            get blurred(): boolean;
+            /** the raw error in caes validator throws a real error */
+            rawError?: ErrorLike;
+            /**
+                * the error message associated with this field.
+                * This is used to indicate what error happened during
+                * the validation process
+                */
+            get errorMessage(): string | undefined;
+            /**
+                * whether the validation should be launch after a
+                * new value is set in the field. This is usually associated
+                * to forms that set the value on the fields after each
+                * onChange event
+                */
+            _autoValidate: boolean;
+            get autoValidate(): boolean;
+            /**
+                * used to keep track of the original message
+                */
+            _originalErrorMessage?: string;
+            /**
+                * whether the field is valid or not
+                */
+            get valid(): boolean;
+            /**
+                * whether the user has interacted or not with the field
+                */
+            get interacted(): boolean;
+            /**
+                * get the value set on the field
+                */
+            get value(): T | undefined;
+            _setValueOnly: (val?: T) => void;
+            _setValue: (val?: T) => void;
+            /**
+                * setter for the value of the field
+                */
+            set value(val: T);
+            setValue: (value?: T, { resetInteractedFlag, commit }?: SetValueFnArgs) => void;
+            /**
+                * Restore the initial value of the field
+                */
+            restoreInitialValue: ({ resetInteractedFlag, commit }?: SetValueFnArgs) => void;
+            get dirty(): boolean;
+            commit(): void;
+            /**
+                * clear the valid state of the field by
+                * removing the errorMessage string. A field is
+                * considered valid if the errorMessage is not empty
+                */
+            resetError(): void;
+            clearValidation(): void;
+            /**
+                * mark the field as already blurred so validation can
+                * start to be applied to  the field.
+                */
+            markBlurredAndValidate: () => void;
+            _validateFn?: ValidateFn<T, K> | Array<ValidateFn<T, K>>;
+            _doValidate: () => Promise<ValidatorResult | undefined>;
+            setDisabled(disabled: boolean): void;
+            validate: (opts?: ForceType) => Promise<void>;
+            get originalErrorMessage(): string;
+            setValidating: (validating: boolean) => void;
+            get validating(): boolean;
+            /**
+                * validate the field. If force is true the validation will be perform
+                * even if the field was not initially interacted or blurred
+                *
+                */
+            _validate: ({ force }?: ForceType) => Promise<void>;
+            setRequired: (val: boolean | string) => void;
+            setErrorMessage: (msg?: string) => void;
+            setError: (error: ErrorLike) => void;
+            get error(): string | undefined;
+            _debouncedValidation?: DebouncedFunc<Field<T, K>["_validate"]>;
+            constructor(model: FormModel<K>, value: T, validatorDescriptor: FieldDescriptor<T, K>, fieldName: string);
+    }
+    /**
+        * a helper class to generate a dynamic form
+        * provided some keys and validators descriptors
+        *
+        * @export
+        * @class FormModel
+        */
+    export class FormModel<K> {
+            get validatedAtLeastOnce(): boolean;
+            get dataIsReady(): boolean;
+            get requiredFields(): (keyof K)[];
+            get requiredAreFilled(): boolean;
+            fields: {
+                    [P in keyof K]: Field<K[P], K>;
+            };
+            _validating: boolean;
+            get valid(): boolean;
+            /**
+                * whether or not the form has been "interacted", meaning that at
+                * least a value has set on any of the fields after the model
+                * has been created
+                */
+            get interacted(): boolean;
+            /**
+                * Restore the initial values set at the creation time of the model
+                * */
+            restoreInitialValues(opts?: SetValueFnArgs): void;
+            commit(): void;
+            get dirty(): boolean;
+            /**
+                * Set multiple values to more than one field a time using an object
+                * where each key is the name of a field. The value will be set to each
+                * field and from that point on the values set are considered the new
+                * initial values. Validation and interacted flags are also reset if the second argument is true
+                * */
+            updateFrom(obj: Partial<K>, { resetInteractedFlag, ...opts }?: SetValueFnArgs & ThrowIfMissingFieldType): void;
+            /**
+                * return the array of errors found. The array is an Array<String>
+                * */
+            get summary(): string[];
+            setValidating: (validating: boolean) => void;
+            get validating(): boolean;
+            /**
+                * Manually perform the form validation
+                * */
+            validate: () => Promise<void>;
+            /**
+                * Update the value of the field identified by the provided name.
+                * Optionally if reset is set to true, interacted and
+                * errorMessage are cleared in the Field.
+                * */
+            updateField: (name: keyof K, value?: K[keyof K], opts?: SetValueFnArgs & ThrowIfMissingFieldType) => void;
+            /**
+                * return the data as plain Javascript object (mobx magic removed from the fields)
+                * */
+            get serializedData(): K;
+            /**
+                * Creates an instance of FormModel.
+                * initialState => an object which keys are the names of the fields and the values the initial values for the form.
+                * validators => an object which keys are the names of the fields and the values are the descriptors for the validators
+                */
+            constructor(args: FormModelArgs<K>);
+            _getField(name: keyof K, { throwIfMissingField }?: ThrowIfMissingFieldType): { [P in keyof K]: Field<K[P], K>; }[keyof K];
+            _eachField(cb: (field: Field<K[keyof K], K>) => void): void;
+            get _fieldKeys(): (keyof K)[];
+            resetInteractedFlag(): void;
+            disableFields: (fieldKeys: (keyof K)[]) => void;
+            _createField({ name, descriptor, }: {
+                    name: keyof K;
+                    descriptor: FieldDescriptor<K[keyof K], K>;
+            }): void;
+            addFields: (fieldsDescriptor: Partial<Descriptors<K>>) => void;
+            enableFields(fieldKeys: (keyof K)[]): void;
+            resetValidatedOnce(): void;
+    }
+    /**
+        * return an instance of a FormModel refer to the constructor
+        *
+        */
+    export const createModel: <T>(args: FormModelArgs<T>) => FormModel<T>;
+    export const createModelFromState: <T>(initialState?: Partial<T>, validators?: Descriptors<T>, options?: ThrowIfMissingFieldType) => FormModel<T>;
+}
+

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "mobx-form",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "description": "A simple form helper for mobx",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/mobx-form.d.ts",
   "files": [
     "dist/"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/mobx-form.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
     "lint": "eslint --cache --cache-location node_modules/.cache/ 'src/**/*.ts' 'tests/**/*.ts'",
     "check": "npm run lint && npm run verify",
@@ -25,9 +32,12 @@
     "bump-prerelease": "npm run pre-v && npm version prerelease -m 'BLD: Release v%s' && npm run post-v",
     "prepublishOnly": "npm run build",
     "test": "bun test",
-    "build": "rm -rf ./dist && bun bun.build.ts && npm run dts",
+    "build": "rm -rf ./dist && bun bun.build.ts && npm run dts && npm run bundle-types",
     "dts": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --outDir dist",
-    "smoke:test": "bun simple-demo.ts"
+    "bundle-types": "bash bundle-types.sh",
+    "smoke:test": "bun simple-demo.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -64,17 +74,34 @@
     "mobx": "^6.0.1"
   },
   "devDependencies": {
+    "dts-bundle": "0.7.3",
+    "@eslint/js": "^9.8.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-storysource": "8.6.14",
+    "@storybook/addon-themes": "8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@storybook/theming": "8.6.14",
     "@types/bun": "^1.2.20",
     "@types/lodash": "^4.17.20",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "changelogx": "^5.0.4",
-    "typescript": "5.9.2",
+    "eslint": "9.10.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "@eslint/js": "^9.8.0",
-    "eslint": "9.10.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-tailwindcss": "3.17.4",
-    "typescript-eslint": "^8.0.0"
+    "mobx-react-lite": "^4.1.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "8.6.14",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.3.1"
   }
 }

package/dist/FormModel.d.ts

@@ -1,260 +0,0 @@
-import type { DebouncedFunc } from "lodash";
-export type Descriptors<T> = {
-    [P in keyof T]: FieldDescriptor<T[P], T>;
-};
-export type FormModelArgs<T> = {
-    descriptors: Partial<Descriptors<T>>;
-    initialState?: Partial<T>;
-    options?: ThrowIfMissingFieldType;
-};
-export type ResultObj = {
-    error: string;
-};
-export type ErrorLike = {
-    message: string;
-} | Error;
-export type ValidatorResult = boolean | ResultObj | void;
-export type ValidateFnArgs<T, K> = {
-    field: Field<T, K>;
-    fields: FormModel<K>["fields"];
-    model: FormModel<K>;
-    value: Field<T, K>["value"];
-};
-export type ValidateFn<T, K> = (args: ValidateFnArgs<T, K>) => Promise<ValidatorResult> | ValidatorResult;
-export type ResetInteractedFlagType = {
-    resetInteractedFlag?: boolean;
-};
-export type ThrowIfMissingFieldType = {
-    throwIfMissingField?: boolean;
-};
-export interface FieldDescriptor<T, K> {
-    waitForBlur?: boolean;
-    disabled?: boolean;
-    errorMessage?: string;
-    validator?: ValidateFn<T, K> | ValidateFn<T, K>[];
-    hasValue?: (value: T) => boolean;
-    value?: T;
-    required?: boolean | string;
-    autoValidate?: boolean;
-    validationDebounceThreshold?: number;
-    clearErrorOnValueChange?: boolean;
-    meta?: Record<string, any>;
-}
-export type CommitType = {
-    commit?: boolean;
-};
-export type ForceType = {
-    force?: boolean;
-};
-export type SetValueFnArgs = ResetInteractedFlagType & CommitType;
-/**
- * Field class provides abstract the validation of a single field
- */
-export declare class Field<T, K> {
-    _name: string;
-    meta?: Record<string, any>;
-    _model: FormModel<K>;
-    _waitForBlur?: boolean | undefined;
-    _disabled?: boolean | undefined;
-    _required?: boolean | string;
-    _validatedOnce: boolean;
-    _clearErrorOnValueChange?: boolean | undefined;
-    _hasValueFn?: (value: T) => boolean;
-    get name(): string;
-    get model(): FormModel<K>;
-    get validatedAtLeastOnce(): boolean;
-    get waitForBlur(): boolean;
-    get disabled(): boolean;
-    get required(): boolean;
-    resetInteractedFlag(): void;
-    markAsInteracted(): void;
-    resetValidatedOnce(): void;
-    get hasValue(): boolean;
-    _validationTs: number;
-    /**
-     * flag to know if a validation is in progress on this field
-     */
-    _validating: boolean;
-    /**
-     * field to store the initial value set on this field
-     * */
-    _initialValue?: T;
-    /**
-     * the value of the field
-     * */
-    _value?: T;
-    /**
-     * whether the user interacted with the field
-     * this means if there is any value set on the field
-     * either setting it using the `setValue` or using
-     * the setter `value`. This is useful to know if
-     * the user has interacted with teh form in any way
-     */
-    _interacted: boolean;
-    /**
-     * whether the field was blurred at least once
-     * usually validators should only start being applied
-     * after the first blur, otherwise they become
-     * too invasive. This flag be used to keep track of
-     * the fact that the user already blurred of a field
-     */
-    _blurredOnce: boolean;
-    get blurred(): boolean;
-    /** the raw error in caes validator throws a real error */
-    rawError?: ErrorLike;
-    /**
-     * the error message associated with this field.
-     * This is used to indicate what error happened during
-     * the validation process
-     */
-    get errorMessage(): string | undefined;
-    /**
-     * whether the validation should be launch after a
-     * new value is set in the field. This is usually associated
-     * to forms that set the value on the fields after each
-     * onChange event
-     */
-    _autoValidate: boolean;
-    get autoValidate(): boolean;
-    /**
-     * used to keep track of the original message
-     */
-    _originalErrorMessage?: string;
-    /**
-     * whether the field is valid or not
-     */
-    get valid(): boolean;
-    /**
-     * whether the user has interacted or not with the field
-     */
-    get interacted(): boolean;
-    /**
-     * get the value set on the field
-     */
-    get value(): T | undefined;
-    _setValueOnly: (val?: T) => void;
-    _setValue: (val?: T) => void;
-    /**
-     * setter for the value of the field
-     */
-    set value(val: T);
-    setValue: (value?: T, { resetInteractedFlag, commit }?: SetValueFnArgs) => void;
-    /**
-     * Restore the initial value of the field
-     */
-    restoreInitialValue: ({ resetInteractedFlag, commit }?: SetValueFnArgs) => void;
-    get dirty(): boolean;
-    commit(): void;
-    /**
-     * clear the valid state of the field by
-     * removing the errorMessage string. A field is
-     * considered valid if the errorMessage is not empty
-     */
-    resetError(): void;
-    clearValidation(): void;
-    /**
-     * mark the field as already blurred so validation can
-     * start to be applied to  the field.
-     */
-    markBlurredAndValidate: () => void;
-    _validateFn?: ValidateFn<T, K> | Array<ValidateFn<T, K>>;
-    _doValidate: () => Promise<ValidatorResult | undefined>;
-    setDisabled(disabled: boolean): void;
-    validate: (opts?: ForceType) => Promise<void>;
-    get originalErrorMessage(): string;
-    setValidating: (validating: boolean) => void;
-    get validating(): boolean;
-    /**
-     * validate the field. If force is true the validation will be perform
-     * even if the field was not initially interacted or blurred
-     *
-     */
-    _validate: ({ force }?: ForceType) => Promise<void>;
-    setRequired: (val: boolean | string) => void;
-    setErrorMessage: (msg?: string) => void;
-    setError: (error: ErrorLike) => void;
-    get error(): string | undefined;
-    _debouncedValidation?: DebouncedFunc<Field<T, K>["_validate"]>;
-    constructor(model: FormModel<K>, value: T, validatorDescriptor: FieldDescriptor<T, K>, fieldName: string);
-}
-/**
- * a helper class to generate a dynamic form
- * provided some keys and validators descriptors
- *
- * @export
- * @class FormModel
- */
-export declare class FormModel<K> {
-    get validatedAtLeastOnce(): boolean;
-    get dataIsReady(): boolean;
-    get requiredFields(): (keyof K)[];
-    get requiredAreFilled(): boolean;
-    fields: {
-        [P in keyof K]: Field<K[P], K>;
-    };
-    _validating: boolean;
-    get valid(): boolean;
-    /**
-     * whether or not the form has been "interacted", meaning that at
-     * least a value has set on any of the fields after the model
-     * has been created
-     */
-    get interacted(): boolean;
-    /**
-     * Restore the initial values set at the creation time of the model
-     * */
-    restoreInitialValues(opts?: SetValueFnArgs): void;
-    commit(): void;
-    get dirty(): boolean;
-    /**
-     * Set multiple values to more than one field a time using an object
-     * where each key is the name of a field. The value will be set to each
-     * field and from that point on the values set are considered the new
-     * initial values. Validation and interacted flags are also reset if the second argument is true
-     * */
-    updateFrom(obj: Partial<K>, { resetInteractedFlag, ...opts }?: SetValueFnArgs & ThrowIfMissingFieldType): void;
-    /**
-     * return the array of errors found. The array is an Array<String>
-     * */
-    get summary(): string[];
-    setValidating: (validating: boolean) => void;
-    get validating(): boolean;
-    /**
-     * Manually perform the form validation
-     * */
-    validate: () => Promise<void>;
-    /**
-     * Update the value of the field identified by the provided name.
-     * Optionally if reset is set to true, interacted and
-     * errorMessage are cleared in the Field.
-     * */
-    updateField: (name: keyof K, value?: K[keyof K], opts?: SetValueFnArgs & ThrowIfMissingFieldType) => void;
-    /**
-     * return the data as plain Javascript object (mobx magic removed from the fields)
-     * */
-    get serializedData(): K;
-    /**
-     * Creates an instance of FormModel.
-     * initialState => an object which keys are the names of the fields and the values the initial values for the form.
-     * validators => an object which keys are the names of the fields and the values are the descriptors for the validators
-     */
-    constructor(args: FormModelArgs<K>);
-    _getField(name: keyof K, { throwIfMissingField }?: ThrowIfMissingFieldType): { [P in keyof K]: Field<K[P], K>; }[keyof K];
-    _eachField(cb: (field: Field<K[keyof K], K>) => void): void;
-    get _fieldKeys(): (keyof K)[];
-    resetInteractedFlag(): void;
-    disableFields: (fieldKeys: (keyof K)[]) => void;
-    _createField({ name, descriptor, }: {
-        name: keyof K;
-        descriptor: FieldDescriptor<K[keyof K], K>;
-    }): void;
-    addFields: (fieldsDescriptor: Partial<Descriptors<K>>) => void;
-    enableFields(fieldKeys: (keyof K)[]): void;
-    resetValidatedOnce(): void;
-}
-/**
- * return an instance of a FormModel refer to the constructor
- *
- */
-export declare const createModel: <T>(args: FormModelArgs<T>) => FormModel<T>;
-export declare const createModelFromState: <T>(initialState?: Partial<T>, validators?: Descriptors<T>, options?: ThrowIfMissingFieldType) => FormModel<T>;

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from "./FormModel";