mobx-formkit 1.0.0

package/src/props.ts

@@ -0,0 +1,127 @@
+import { FieldPropsEnum, FieldPropsOccurrence, SeparatedPropsMode } from "./models/FieldProps";
+
+export interface PropsGroupsInterface {
+  editable: string[];
+  handlers: string[];
+  computed: string[];
+  functions: string[];
+  validation: string[];
+  separated: string[];
+  occurrences: {
+    [index: string]: FieldPropsOccurrence;
+  };
+}
+
+export const props: PropsGroupsInterface = {
+  editable: [
+    FieldPropsEnum.type,
+    FieldPropsEnum.value,
+    FieldPropsEnum.initial,
+    FieldPropsEnum.default,
+    FieldPropsEnum.label,
+    FieldPropsEnum.placeholder,
+    FieldPropsEnum.related,
+    FieldPropsEnum.options,
+    FieldPropsEnum.extra,
+    FieldPropsEnum.bindings,
+    FieldPropsEnum.hooks,
+    FieldPropsEnum.handlers,
+    FieldPropsEnum.deleted,
+    FieldPropsEnum.disabled,
+    FieldPropsEnum.autoFocus,
+    FieldPropsEnum.inputMode,
+    FieldPropsEnum.ref,
+    FieldPropsEnum.nullable,
+    FieldPropsEnum.autoComplete,
+  ],
+  handlers: [
+    FieldPropsEnum.onChange,
+    FieldPropsEnum.onToggle,
+    FieldPropsEnum.onFocus,
+    FieldPropsEnum.onBlur,
+    FieldPropsEnum.onDrop,
+    FieldPropsEnum.onSubmit,
+    FieldPropsEnum.onReset,
+    FieldPropsEnum.onClear,
+    FieldPropsEnum.onAdd,
+    FieldPropsEnum.onDel,
+  ],
+  computed: [
+    FieldPropsEnum.error,
+    FieldPropsEnum.hasError,
+    FieldPropsEnum.isValid,
+    FieldPropsEnum.isDirty,
+    FieldPropsEnum.isPristine,
+    FieldPropsEnum.isDefault,
+    FieldPropsEnum.isEmpty,
+    FieldPropsEnum.focused,
+    FieldPropsEnum.touched,
+    FieldPropsEnum.changed,
+    FieldPropsEnum.validating,
+    FieldPropsEnum.submitting,
+    FieldPropsEnum.resetting,
+    FieldPropsEnum.clearing,
+    FieldPropsEnum.blurred,
+    FieldPropsEnum.deleted,
+    FieldPropsEnum.disabled,
+  ],
+  separated: [
+    SeparatedPropsMode.computed,
+    SeparatedPropsMode.values,
+    SeparatedPropsMode.labels,
+    SeparatedPropsMode.placeholders,
+    SeparatedPropsMode.defaults,
+    SeparatedPropsMode.initials,
+    SeparatedPropsMode.disabled,
+    SeparatedPropsMode.deleted,
+    SeparatedPropsMode.types,
+    SeparatedPropsMode.related,
+    SeparatedPropsMode.rules,
+    SeparatedPropsMode.options,
+    SeparatedPropsMode.bindings,
+    SeparatedPropsMode.extra,
+    SeparatedPropsMode.hooks,
+    SeparatedPropsMode.handlers,
+    SeparatedPropsMode.validatedWith,
+    SeparatedPropsMode.validators,
+    SeparatedPropsMode.observers,
+    SeparatedPropsMode.interceptors,
+    SeparatedPropsMode.converters,
+    SeparatedPropsMode.input,
+    SeparatedPropsMode.output,
+    SeparatedPropsMode.autoFocus,
+    SeparatedPropsMode.inputMode,
+    SeparatedPropsMode.refs,
+    SeparatedPropsMode.classes,
+    SeparatedPropsMode.nullable,
+    SeparatedPropsMode.autoComplete,
+  ],
+  functions: [
+    FieldPropsEnum.computed,
+    FieldPropsEnum.observers,
+    FieldPropsEnum.interceptors,
+    FieldPropsEnum.converter,
+    FieldPropsEnum.input,
+    FieldPropsEnum.output,
+  ],
+  validation: [
+    FieldPropsEnum.rules,
+    FieldPropsEnum.validators,
+    FieldPropsEnum.validatedWith,
+  ],
+  occurrences: {
+    isDirty: FieldPropsOccurrence.some,
+    isPristine: FieldPropsOccurrence.every,
+    isDefault: FieldPropsOccurrence.every,
+    isValid: FieldPropsOccurrence.every,
+    isEmpty: FieldPropsOccurrence.every,
+    hasError: FieldPropsOccurrence.some,
+    focused: FieldPropsOccurrence.some,
+    blurred: FieldPropsOccurrence.some,
+    touched: FieldPropsOccurrence.some,
+    deleted: FieldPropsOccurrence.every,
+    disabled: FieldPropsOccurrence.every,
+    clearing: FieldPropsOccurrence.every,
+    resetting: FieldPropsOccurrence.every,
+  },
+};

package/src/utils.ts

@@ -0,0 +1,218 @@
+import { has, isEmpty, isPlainObject } from "lodash";
+import { values as mobxValues, keys as mobxKeys } from "mobx";
+import { FieldInterface } from "./models/FieldInterface";
+import { AllowedFieldPropsTypes, FieldPropsEnum, FieldPropsOccurrence } from "./models/FieldProps";
+import { props } from "./props";
+
+const getObservableMapValues = (fields: any):
+  ReadonlyArray<FieldInterface> => {
+  // ArrayMap duck-typing
+  if (fields && fields._isArrayMap) {
+    const result: FieldInterface[] = [];
+    fields.forEach((value: FieldInterface) => result.push(value));
+    return result;
+  }
+  return mobxValues(fields);
+};
+
+const getObservableMapKeys = (fields: any):
+  ReadonlyArray<any> => {
+  // ArrayMap duck-typing
+  if (fields && fields._isArrayMap) {
+    return Array.from(fields.keys());
+  }
+  return mobxKeys(fields);
+};
+
+const checkObserveItem =
+  (change: any) =>
+  ({ key, to, type, exec }: any) =>
+    change.type === type &&
+    change.name === key &&
+    change.newValue === to &&
+    exec.apply(change, [change]);
+
+const checkObserve = (collection: Record<string, any>[]) => (change: any) =>
+  collection.map(checkObserveItem(change));
+
+const checkPropOccurrence = ({ type, data }: any): boolean => {
+  let $check: any;
+  switch (type) {
+    case FieldPropsOccurrence.some: $check = ($data: object) => ($data as any[]).some(Boolean); break;
+    case FieldPropsOccurrence.every: $check = ($data: object) => ($data as any[]).every(Boolean); break;
+    default: throw new Error('Occurrence not found for specified prop');
+  }
+  return $check(data);
+};
+
+const hasProps = ($type: string, $data: any): boolean => {
+  let $props: string[] | null;
+  switch ($type) {
+    case AllowedFieldPropsTypes.computed:
+      $props = props.computed;
+      break;
+    case AllowedFieldPropsTypes.observable:
+        $props = [
+          FieldPropsEnum.fields,
+          ...props.computed,
+          ...props.editable,
+        ];
+        break;
+    case AllowedFieldPropsTypes.editable:
+      $props = [
+        ...props.editable,
+        ...props.validation,
+        ...props.functions,
+        ...props.handlers,
+      ];
+      break;
+    case AllowedFieldPropsTypes.all:
+      $props = [
+        FieldPropsEnum.id,
+        FieldPropsEnum.key,
+        FieldPropsEnum.name,
+        FieldPropsEnum.path,
+        ...props.computed,
+        ...props.editable,
+        ...props.validation,
+        ...props.functions,
+        ...props.handlers,
+      ];
+      break;
+    default:
+      $props = null;
+  }
+
+  return $data.filter((x: string) => $props!.includes(x)).length > 0;
+};
+
+/**
+  Check Allowed Properties
+*/
+const allowedProps = (type: string, data: string[]): void => {
+  if (hasProps(type, data)) return;
+  const $msg = "The selected property is not allowed";
+  throw new Error(`${$msg} (${JSON.stringify(data)})`);
+};
+
+/**
+  Throw Error if undefined Fields
+*/
+const throwError = (path: string, fields: any, msg: null | string = null): void => {
+  if (fields != null) return;
+  const $msg = msg == null ? "The selected field is not defined" : msg;
+  throw new Error(`${$msg} (${path})`);
+};
+
+const pathToStruct = (path: string): string => {
+  let struct;
+  struct = path.replace(/\.\d+($|\.)/g, "[].");
+  struct = struct.replace("..", ".");
+  struct = struct.replace(/^\.+|\.+$/g, "");
+  return struct;
+};
+
+const isArrayFromStruct = (struct: string[], structPath: string): boolean => {
+  if (isArrayOfStrings(struct)) return !!struct
+    .filter((s) => s.startsWith(structPath))
+    .find((s) => s.substring(structPath.length) === "[]")
+    || (struct?.find((e) => e === structPath)?.endsWith('[]') ?? false);
+  else return false;
+};
+
+const hasSome = (obj: any, keys: any): boolean =>
+  keys.some((key: string) => has(obj, key));
+
+const isEmptyArray = (field: any): boolean =>
+  isEmpty(field) && Array.isArray(field);
+
+const isArrayOfStrings = (struct: any): boolean =>
+  Array.isArray(struct) && struct.every((s: any) => typeof s === 'string');
+
+const isArrayOfObjects = (fields: any): boolean =>
+  Array.isArray(fields) && fields.every((f: any) => isPlainObject(f));
+
+const getKeys = (fields: any) =>
+  fields ? [...new Set(Object.values(fields).flatMap((values) => values ? Object.keys(values) : []))] : [];
+
+const hasUnifiedProps = ({ fields }: any) =>
+  !isArrayOfStrings({ fields }) && hasProps(AllowedFieldPropsTypes.editable, getKeys(fields));
+
+const hasSeparatedProps = (initial: any): boolean =>
+  hasSome(initial, props.separated) || hasSome(initial, props.validation);
+
+const allowNested = (field: any, strictProps: boolean): boolean =>
+  field !== null && typeof field === 'object' &&
+  !(field instanceof Date) &&
+  !has(field, FieldPropsEnum.fields) &&
+  !has(field, FieldPropsEnum.class) &&
+    (!hasSome(field, [
+      ...props.editable,
+      ...props.handlers,
+      ...props.validation,
+      ...props.functions,
+    ]) || strictProps);
+
+const parseIntKeys = (fields: any) =>
+  Array.from(getObservableMapKeys(fields)).map(Number);
+
+const hasIntKeys = (fields: any): boolean =>
+  parseIntKeys(fields).every((x: any) => Number.isInteger(x));
+
+const maxKey = (fields: any): number => {
+  const keys = parseIntKeys(fields);
+  const maxVal = keys.length ? Math.max(...keys) : undefined;
+  return maxVal === void 0 ? 0 : maxVal + 1;
+};
+
+let _idCounter = 0;
+const _localUniqueId = (prefix: string): string => `${prefix}${++_idCounter}`;
+
+const uniqueId = (field: any): string =>
+  _localUniqueId([field.path.replace(/\./g, "-"), "--"].join(""));
+
+const isEvent = (obj: any): boolean => {
+  if (obj == null || typeof Event === "undefined") return false;
+  return obj instanceof Event || obj.target != null;
+};
+
+const hasFiles = ($: any): boolean =>
+  !!$?.target?.files && $.target.files.length !== 0;
+
+const isBool = ($: any, val: any): boolean =>
+  typeof val === 'boolean' && typeof $.target.checked === 'boolean';
+
+const $try = (...args: any[]) => {
+  for (const val of args) {
+    if (val !== undefined) return val;
+  }
+  return undefined;
+};
+
+export {
+  props,
+  checkObserve,
+  checkPropOccurrence,
+  hasProps,
+  allowedProps,
+  throwError,
+  isArrayOfStrings,
+  isEmptyArray,
+  isArrayOfObjects,
+  pathToStruct,
+  isArrayFromStruct,
+  hasUnifiedProps,
+  hasSeparatedProps,
+  allowNested,
+  parseIntKeys,
+  hasIntKeys,
+  maxKey,
+  uniqueId,
+  isEvent,
+  hasFiles,
+  isBool,
+  hasSome,
+  $try,
+  getObservableMapKeys,
+  getObservableMapValues,
+};

package/src/validators/AJV.ts

@@ -0,0 +1,140 @@
+
+import FieldInterface from "../models/FieldInterface";
+import FormInterface from "../models/FormInterface";
+import StateInterface from "../models/StateInterface";
+import {
+  ValidationPlugin,
+  ValidationPluginConfig,
+  ValidationPluginConstructor,
+  ValidationPluginInterface,
+} from "../models/ValidatorInterface";
+
+function isPromise(obj: any): obj is Promise<any> {
+  return (
+    !!obj &&
+    typeof obj.then === "function" &&
+    (typeof obj === "object" || typeof obj === "function")
+  );
+}
+
+class AJV<TValidator = any> implements ValidationPluginInterface<TValidator> {
+  promises: Promise<any>[];
+  config: ValidationPluginConfig<TValidator>;
+  state: StateInterface | null;
+  extend?: (args: { validator: TValidator; form: FormInterface }) => void;
+  validator: any;
+  schema: any;
+
+  constructor({
+    config,
+    state = null,
+    promises = [],
+  }: ValidationPluginConstructor<TValidator>) {
+    this.state = state;
+    this.promises = promises;
+    this.config = config;
+    this.extend = config?.extend;
+    this.schema = config.schema;
+    this.initValidator();
+  }
+
+  extendOptions(options: any = {}) {
+    return {
+      ...options,
+      allErrors: true,
+      coerceTypes: true,
+      strict: false,
+    };
+  }
+
+  initValidator(): void {
+    const AjvPackage = this.config.package as any;
+    const validatorInstance = new AjvPackage(this.extendOptions(this.config.options));
+
+    if (typeof validatorInstance.addFormat === "function") {
+      validatorInstance.addFormat("email", (value: any) =>
+        typeof value === "string"
+          ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+          : false
+      );
+    }
+
+    if (typeof this.extend === "function") {
+      this.extend({
+        form: this.state!.form,
+        validator: validatorInstance,
+      });
+    }
+
+    this.validator = validatorInstance.compile(this.schema);
+  }
+
+  validate(field: FieldInterface): void {
+    let result: any;
+    try {
+      result = this.validator(field.state.form.flatMapValues);
+    } catch (e) {
+      return;
+    }
+
+    if (isPromise(result)) {
+      const $p = result
+        .then(() => field.setValidationAsyncData(true))
+        .catch((err) => err && this.handleAsyncError(field, err.errors))
+        .then(() => this.executeAsyncValidation(field));
+
+      this.promises.push($p);
+      return;
+    }
+
+    this.handleSyncError(field, this.validator.errors);
+  }
+
+  handleSyncError(field: FieldInterface, errors: any[]): void {
+    const fieldError = this.findError(field.path ?? '', errors);
+    if (!fieldError) return;
+
+    const message = `${field.label} ${fieldError.message}`;
+    field.invalidate(message, false);
+  }
+
+  handleAsyncError(field: FieldInterface, errors: any[]): void {
+    const fieldError = this.findError(field.path ?? '', errors);
+    if (!fieldError) return;
+
+    const message = `${field.label} ${fieldError.message}`;
+    field.setValidationAsyncData(false, message);
+  }
+
+  normalizePath(value: any): string {
+    return String(value)
+      .replace(/^[./]+/, "")
+      .replace(/\]/g, "")
+      .replace(/\[/g, ".")
+      .replace(/\//g, ".");
+  }
+
+  findError(path: string, errors: any[]): any {
+    if (!errors) return;
+    const $path = this.normalizePath(path);
+    return errors.find(({ instancePath, dataPath }) => {
+      const $dataPath = this.normalizePath(
+        typeof instancePath === "string" ? instancePath : dataPath
+      );
+      return $dataPath.includes($path);
+    });
+  }
+
+  executeAsyncValidation(field: FieldInterface): void {
+    if (field.validationAsyncData.valid === false) {
+      field.invalidate(field.validationAsyncData.message ?? undefined, false, true);
+    }
+  }
+}
+
+export default <TValidator = any>(
+  config?: ValidationPluginConfig<TValidator>
+): ValidationPlugin<TValidator> => ({
+  class: AJV<TValidator>,
+  config,
+});

package/src/validators/DVR.ts

@@ -0,0 +1,145 @@
+import { forIn, isEmpty } from "lodash";
+import FieldInterface from "../models/FieldInterface";
+import FormInterface from "../models/FormInterface";
+import StateInterface from "../models/StateInterface";
+import {
+  ValidationPlugin,
+  ValidationPluginConfig,
+  ValidationPluginConstructor,
+  ValidationPluginInterface,
+} from "../models/ValidatorInterface";
+
+class DVR<TValidator = any>
+  implements ValidationPluginInterface<TValidator>
+{
+  promises: Promise<any>[];
+  config: any;
+  state: StateInterface | null;
+  extend?: (args: { validator: TValidator; form: FormInterface }) => void;
+  validator: TValidator;
+  schema?: any;
+
+  constructor({
+    config,
+    state = null,
+    promises = [],
+  }: ValidationPluginConstructor<TValidator>) {
+    this.state = state;
+    this.promises = promises;
+    this.config = config;
+    this.extend = config?.extend;
+    this.validator = config.package!;
+    this.extendValidator();
+  }
+
+  extendValidator() {
+    if (typeof this.extend === "function") {
+      this.extend({
+        validator: this.validator,
+        form: this.state!.form,
+      });
+    }
+  }
+
+  validate(field: FieldInterface) {
+    const data = this.state!.form.flatMapValues;
+    this.validateFieldAsync(field, data);
+    this.validateFieldSync(field, data);
+  }
+
+  makeLabels(validation: any, field: FieldInterface) {
+    const labels: Record<string, any> = { [field.path ?? ""]: field.label };
+    forIn(validation.rules[field.path ?? ""], (rule) => {
+      if (
+        typeof rule.value === "string" &&
+        rule.name.match(/^(required_|same|different)/)
+      ) {
+        forIn(rule.value.split(","), (p, i: any) => {
+          if (!rule.name.match(/^required_(if|unless)/) || i % 2 === 0) {
+            const f = this.state!.form.$(p);
+            if (f && f.path && f.label) {
+              labels[f.path] = f.label;
+            }
+          }
+        });
+      } else if (
+        typeof rule.value === "string" &&
+        rule.name.match(/^(before|after)/)
+      ) {
+        const f = this.state!.form.$(rule.value);
+        if (f && f.path && f.label) {
+          labels[f.path] = f.label;
+        }
+      }
+    });
+    validation.setAttributeNames(labels);
+  }
+
+  validateFieldSync(field: FieldInterface, data: any) {
+    const $rules = this.rules(field.rules, "sync");
+    if (isEmpty($rules[0])) return;
+    const rules = { [field.path ?? ""]: $rules };
+    const validation = new (this.validator as any)(data, rules);
+    this.makeLabels(validation, field);
+    if (validation.passes()) return;
+    field.invalidate((validation.errors.get(field.path) as any[])[0], false);
+  }
+
+  validateFieldAsync(field: FieldInterface, data: any) {
+    const $rules = this.rules(field.rules, "async");
+    if (isEmpty($rules[0])) return;
+    const rules = { [field.path ?? ""]: $rules };
+    const validation = new (this.validator as any)(data, rules);
+    this.makeLabels(validation, field);
+
+    const $p = new Promise((resolve: any) =>
+      validation.checkAsync(
+        () => this.handleAsyncPasses(field, resolve),
+        () => this.handleAsyncFails(field, validation, resolve)
+      )
+    );
+
+    this.promises.push($p);
+  }
+
+  handleAsyncPasses(field: FieldInterface, resolve: () => void) {
+    field.setValidationAsyncData(true);
+    resolve();
+  }
+
+  handleAsyncFails(
+    field: FieldInterface,
+    validation: any,
+    resolve: () => void
+  ) {
+    field.setValidationAsyncData(
+      false,
+      (validation.errors.get(field.path) as any[])[0]
+    );
+    this.executeAsyncValidation(field);
+    resolve();
+  }
+
+  executeAsyncValidation(field: FieldInterface) {
+    if (field.validationAsyncData.valid === false) {
+      field.invalidate(field.validationAsyncData.message ?? undefined, false, true);
+    }
+  }
+
+  rules(rules: any, type: "sync" | "async") {
+    const $rules = Array.isArray(rules) ? rules : typeof rules === 'string' ? rules.split("|") : [];
+    const v = new (this.validator as any)();
+    return $rules.filter(($rule: any) =>
+      type === "async"
+        ? v.getRule($rule.split(":")[0])?.async
+        : !v.getRule($rule.split(":")[0])?.async
+    );
+  }
+}
+
+export default <TValidator = any>(
+  config?: ValidationPluginConfig<TValidator>
+): ValidationPlugin<TValidator> => ({
+  class: DVR<TValidator>,
+  config,
+});

package/src/validators/JOI.ts

@@ -0,0 +1,79 @@
+import FieldInterface from "../models/FieldInterface";
+import FormInterface from "../models/FormInterface";
+import StateInterface from "../models/StateInterface";
+import {
+  ValidationPlugin,
+  ValidationPluginConfig,
+  ValidationPluginConstructor,
+  ValidationPluginInterface,
+} from "../models/ValidatorInterface";
+
+class JOI<TValidator = any> implements ValidationPluginInterface<TValidator> {
+  promises: Promise<any>[];
+  config: ValidationPluginConfig<TValidator>;
+  state: StateInterface | null;
+  extend?: (args: { validator: TValidator; form: FormInterface }) => void;
+  validator: TValidator;
+  schema: any;
+
+  constructor({
+    config,
+    state = null,
+    promises = [],
+  }: ValidationPluginConstructor<TValidator>) {
+    this.state = state;
+    this.promises = promises;
+    this.config = config;
+    this.extend = config?.extend;
+    this.validator = config.package!;
+    this.schema = config.schema;
+    this.extendValidator();
+  }
+
+  extendValidator(): void {
+    if (typeof this.extend === "function") {
+      this.extend({
+        validator: this.validator,
+        form: this.state!.form,
+      });
+    }
+  }
+
+  validate(field: FieldInterface): void {
+    const data = this.state!.form.flatMapValues;
+    const { error } = this.schema.validate(data, { abortEarly: false });
+
+    if (!error) return;
+
+    const fieldPathArray = (field.path ?? "").split(".");
+
+    const fieldErrors = error.details
+      .filter((detail: any) => {
+        const errorPathString = detail.path.join(".");
+        const fieldPathString = fieldPathArray.join(".");
+        return (
+          errorPathString === fieldPathString ||
+          errorPathString.startsWith(`${fieldPathString}.`)
+        );
+      })
+      .map((detail: any) => {
+        const label = detail.context?.label || detail.path.join(".");
+        const message = detail.message.replace(
+          `${detail.path.join(".")}`,
+          label
+        );
+        return message;
+      });
+
+    if (fieldErrors.length) {
+      field.validationErrorStack = fieldErrors;
+    }
+  }
+}
+
+export default <TValidator = any>(
+  config?: ValidationPluginConfig<TValidator>
+): ValidationPlugin<TValidator> => ({
+  class: JOI<TValidator>,
+  config,
+});