@quen-ui/components 0.0.14 → 1.0.0

package/dist/Form/defaultValidateMessages.es.js

@@ -0,0 +1,51 @@
+const typeTemplate = "${name} is not a valid ${type}";
+const defaultValidateMessages = {
+  default: "Field validation error for ${name}",
+  required: "Please enter ${name}",
+  enum: "${name} must be one of [${enum}]",
+  whitespace: "${name} cannot be a blank character",
+  date: {
+    format: "${name} date format is invalid",
+    parse: "${name} cannot be converted to a date",
+    invalid: "${name} is an invalid date"
+  },
+  types: {
+    string: typeTemplate,
+    method: typeTemplate,
+    array: typeTemplate,
+    object: typeTemplate,
+    number: typeTemplate,
+    date: typeTemplate,
+    boolean: typeTemplate,
+    integer: typeTemplate,
+    float: typeTemplate,
+    regexp: typeTemplate,
+    email: typeTemplate,
+    url: typeTemplate,
+    hex: typeTemplate
+  },
+  string: {
+    len: "${name} must be ${len} characters",
+    min: "${name} must be at least ${min} characters",
+    max: "${name} must be up to ${max} characters",
+    range: "${name} must be between ${min}-${max} characters"
+  },
+  number: {
+    len: "${name} must be equal to ${len}",
+    min: "${name} must be minimum ${min}",
+    max: "${name} must be maximum ${max}",
+    range: "${name} must be between ${min}-${max}"
+  },
+  array: {
+    len: "Must be ${len} ${name}",
+    min: "At least ${min} ${name}",
+    max: "At most ${max} ${name}",
+    range: "The amount of ${name} must be between ${min}-${max}"
+  },
+  pattern: {
+    mismatch: "${name} does not match the pattern ${pattern}"
+  }
+};
+export {
+  defaultValidateMessages
+};

package/dist/Form/helpers.cjs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ruleValidators = {
+  email: (v) => /\S+@\S+\.\S+/.test(String(v)),
+  url: (v) => /^(https?:\/\/)?([\w.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(String(v)),
+  number: (v) => !isNaN(Number(v))
+};
+exports.ruleValidators = ruleValidators;

package/dist/Form/helpers.d.ts

@@ -0,0 +1 @@
+export declare const ruleValidators: Record<string, (v: any) => boolean>;

package/dist/Form/helpers.es.js

@@ -0,0 +1,8 @@
+const ruleValidators = {
+  email: (v) => /\S+@\S+\.\S+/.test(String(v)),
+  url: (v) => /^(https?:\/\/)?([\w.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(String(v)),
+  number: (v) => !isNaN(Number(v))
+};
+export {
+  ruleValidators
+};

package/dist/Form/index.cjs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Form$1 = require("./Form.cjs.js");
+const Field = require("./Field.cjs.js");
+const FieldArray = require("./FieldArray.cjs.js");
+const useForm = require("./useForm.cjs.js");
+const useWatch = require("./useWatch.cjs.js");
+const Form = Form$1.Form;
+Form.Field = Field;
+Form.FieldArray = FieldArray;
+Form.useWatch = useWatch.useWatch;
+Form.useForm = useForm.useForm;
+exports.Form = Form;

package/dist/Form/index.d.ts

@@ -0,0 +1,14 @@
+import { Form as FormComponent } from './Form';
+import { default as Field } from './Field';
+import { default as FieldArray } from './FieldArray';
+import { useForm } from './useForm';
+import { useWatch } from './useWatch';
+type TForm = typeof FormComponent & {
+    useForm: typeof useForm;
+    useWatch: typeof useWatch;
+    Field: typeof Field;
+    FieldArray: typeof FieldArray;
+};
+declare const Form: TForm;
+export type { IFormInstance, IFormFieldProps, IFormFieldArrayProps, TFormOnValueChange, TFormFieldValidate, IFormFieldError, IFormValidationRule, IUseFormOptions, IFormProps } from './types';
+export { Form };

package/dist/Form/index.es.js

@@ -0,0 +1,13 @@
+import { Form as Form$1 } from "./Form.es.js";
+import Field from "./Field.es.js";
+import FieldArray from "./FieldArray.es.js";
+import { useForm } from "./useForm.es.js";
+import { useWatch } from "./useWatch.es.js";
+const Form = Form$1;
+Form.Field = Field;
+Form.FieldArray = FieldArray;
+Form.useWatch = useWatch;
+Form.useForm = useForm;
+export {
+  Form
+};

package/dist/Form/types.d.ts

@@ -0,0 +1,147 @@
+import { ReactElement, ReactNode, DOMAttributes, FormEvent, ElementType } from 'react';
+import { TKeyObjectType, TValueObjectType } from '../../../helpers/src';
+import { defaultValidateMessages } from './/defaultValidateMessages';
+import { IFlexProps } from '../Flex';
+type DeepPartial<T> = T extends any[] ? T : T extends Record<string, any> ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export interface IFormInstance<T extends Record<string, any>> {
+    /** Set value of a specific field */
+    setFieldValue: (name: TKeyObjectType<T>, value: T[keyof T]) => void;
+    /** Get current value of a specific field */
+    getFieldValue: (name: TKeyObjectType<T>) => TValueObjectType<T, TKeyObjectType<T>>;
+    /** Get all field values */
+    getFieldsValue: (names?: TKeyObjectType<T>[]) => Partial<T> | T;
+    /**  */
+    registerField: (name: TKeyObjectType<T>, config: IFormConfigField<T>) => void;
+    /**  */
+    unregisterField: (name: TKeyObjectType<T>) => void;
+    /** Reset all fields to their initial values */
+    resetFields: () => void;
+    /**  */
+    fields: Record<TKeyObjectType<T>, IFormConfigField<T>>;
+    /** Set validation errors manually */
+    setErrors: (errors: IFormFieldError<T>[] | ((prev: IFormFieldError<T>[]) => IFormFieldError<T>[])) => void;
+    /**  */
+    arrayHelpers: (name: TKeyObjectType<T>) => IFormFieldArrayHelpers<T>;
+    /**  */
+    registerSubscribe: (name: TKeyObjectType<T>, callback: TFormFieldSubscribe<T>) => void;
+    /**  */
+    unregisterSubscribe: (name: TKeyObjectType<T>) => void;
+    /** Trigger validation manually */
+    triggerValidation: (name: TKeyObjectType<T>, value: TValueObjectType<T, TKeyObjectType<T>>, values: T) => void;
+    /**  */
+    setFieldsValue: (values: Record<TKeyObjectType<T>, any>) => void;
+    /** Validate all fields and return a Promise */
+    onValidateFields: () => Promise<boolean>;
+    /** Get all field errors */
+    getFieldsError: (names?: TKeyObjectType<T>[]) => IFormFieldError<T>[];
+    /** Get errors for a specific field */
+    getFieldError: (name: TKeyObjectType<T>) => string[];
+    /** Programmatically submit the form */
+    submit: () => void;
+    /**  */
+    setSubmitCallback: (callback: () => (e?: FormEvent) => Promise<void>) => void;
+}
+export interface IFormContext<T extends Record<string, any>> extends IFormInstance<T> {
+    validateMessages: typeof defaultValidateMessages;
+    validateTrigger: TFieldTrigger | TFieldTrigger[];
+    trigger: TFieldTrigger | TFieldTrigger[];
+}
+export type TFormFieldValidate<T> = (value: any, values: T) => Promise<string | undefined> | string | undefined;
+export interface IFormFieldArrayHelpers<T extends Record<string, any> = Record<string, any>> {
+    /** Add a new item */
+    add: (value?: any) => void;
+    /** Remove item by index */
+    remove: (index: number) => void;
+    /** Move item between positions */
+    insert: (index: number, value: TValueObjectType<T, TKeyObjectType<T>>[0]) => void;
+}
+export interface IFormProps<T extends Record<string, any> = Record<string, any>> extends IFlexProps {
+    /** Form instance returned by useForm */
+    form: IFormInstance<T>;
+    /** Form fields and UI elements */
+    children: ReactNode;
+    /** Called when validation passes and form is submitted */
+    onFinish?: (values: T) => void | Promise<void>;
+    /** Called when validation fails */
+    onFinishFailed?: (values: T, errors: IFormFieldError<T>[]) => void | Promise<void>;
+    /** Custom validation messages */
+    validateMessages?: DeepPartial<typeof defaultValidateMessages>;
+    /** When validation should be triggered (onChange, onBlur, etc) */
+    validateTrigger?: TFieldTrigger | TFieldTrigger[];
+    /** Event to trigger field value updates */
+    trigger?: TFieldTrigger | TFieldTrigger[];
+    /** Optional name of the form */
+    name?: string;
+    as?: ElementType;
+    [key: string]: any;
+}
+export type TFieldTrigger = "onChange" | "onBlur" | "onFocus" | keyof DOMAttributes<any>;
+export interface IFormFieldProps<T> {
+    /** Field name (supports nested paths) */
+    name: TKeyObjectType<T>;
+    /** Form control (e.g., TextField, Checkbox) */
+    children: ReactElement;
+    /** Default field value */
+    defaultValue?: any;
+    /** Custom validation logic */
+    validate?: TFormFieldValidate<T>;
+    /** Name of the prop that represents the value */
+    valuePropName?: string;
+    /** Built-in validation rules (min, max, pattern, etc) */
+    rules?: IFormValidationRule[];
+    /** Triggers for validation. */
+    validateTrigger?: TFieldTrigger | TFieldTrigger[];
+    /** Triggers for value update */
+    trigger?: TFieldTrigger | TFieldTrigger[];
+    /** Other fields that affect validation */
+    dependencies?: TKeyObjectType<T>[];
+}
+export interface IFormFieldArrayProps<T extends Record<string, any> = Record<string, any>> {
+    /** Field array name */
+    name: string;
+    /** Render function that returns the UI for the array fields */
+    children: (helpers: IFormFieldArrayHelpers<T>, fields: IFormConfigFieldArrayItem<T>[]) => ReactNode;
+}
+export interface IFormValidationRule {
+    /** Minimum number of characters */
+    minLength?: number;
+    /** Maximum number of characters*/
+    maxLength?: number;
+    /** Must match a regular expression */
+    pattern?: RegExp;
+    /** Checks value type */
+    type?: "email" | "url" | "number";
+    /** Custom validation message */
+    message?: string;
+    /** Field is required */
+    required?: boolean;
+}
+export interface IFormConfigField<T> {
+    validate?: (value: TValueObjectType<T, TKeyObjectType<T>>, values: T) => Promise<string[]> | string[];
+    rules?: IFormValidationRule[];
+    defaultValue?: TValueObjectType<T, TKeyObjectType<T>>;
+    dependencies?: TKeyObjectType<T>[];
+}
+export interface IFormConfigFieldArrayItem<T extends Record<string, any> = Record<string, any>> {
+    value: TValueObjectType<T, TKeyObjectType<T>>[0];
+}
+export interface IUseFormOptions<T = Record<string, any>> {
+    /** Initial field values */
+    initialValues?: Partial<T>;
+    /** Callback when any field value changes */
+    onValueChange?: TFormOnValueChange<T>;
+}
+export type TFormFieldSubscribe<T = Record<string, any>> = (newValue: TValueObjectType<T, TKeyObjectType<T>>) => void;
+export interface IFormFieldSubscribe<T> {
+    name: TKeyObjectType<T>;
+    func: TFormFieldSubscribe<T>;
+}
+export type TFormOnValueChange<T> = (changedValues: Partial<T>, values: T) => void;
+export interface IFormFieldError<T> {
+    name: TKeyObjectType<T>;
+    errors: string[];
+    warnings: string[];
+}
+export {};

package/dist/Form/useForm.cjs.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
+const useForm = (options) => {
+  const [values, setValues] = React.useState(options?.initialValues ?? {});
+  const [fields, setFields] = React.useState({});
+  const [errors, setErrors] = React.useState([]);
+  const [subscribes, setSubscribes] = React.useState([]);
+  const [submitCallback, setSubmitCallback] = React.useState();
+  const registerField = React.useCallback(
+    (name, { defaultValue, rules, validate, dependencies }) => {
+      const value = defaultValue ?? helpers.getValueObject(options?.initialValues ?? {}, name);
+      setValues((prev) => helpers.setValueObject(prev, name, value));
+      setFields((prev) => ({
+        ...prev,
+        [name]: { validate, rules, defaultValue, dependencies }
+      }));
+    },
+    []
+  );
+  const unregisterField = React.useCallback((name) => {
+    setValues((prevState) => {
+      return helpers.deleteValueObject(prevState, name);
+    });
+    setErrors((prevState) => {
+      return prevState.filter((error) => error.name !== name);
+    });
+    setFields((prevState) => {
+      const copy = { ...prevState };
+      delete copy[name];
+      return copy;
+    });
+  }, []);
+  const registerSubscribe = React.useCallback(
+    (name, callback) => {
+      setSubscribes((prev) => [...prev, { name, func: callback }]);
+    },
+    []
+  );
+  const unregisterSubscribe = React.useCallback((name) => {
+    setSubscribes((prev) => prev.filter((s) => s.name !== name));
+  }, []);
+  const triggerValidation = React.useCallback(
+    (name, value, _values) => {
+      const field = fields[name];
+      if (field?.validate) {
+        field.validate(value, _values);
+      }
+    },
+    [fields]
+  );
+  const notifyWatchValueField = React.useCallback(
+    (updates) => {
+      subscribes.forEach((subscribe) => {
+        if (Object.keys(updates).includes(subscribe.name)) {
+          subscribe.func(updates[subscribe.name]);
+        }
+      });
+    },
+    [subscribes, values]
+  );
+  const updateValues = React.useCallback(
+    (updates) => {
+      let changedValues = {};
+      let nextValues = {};
+      setValues((prev) => {
+        nextValues = { ...prev };
+        for (const [name, value] of Object.entries(updates)) {
+          nextValues = helpers.setValueObject(
+            nextValues,
+            name,
+            value
+          );
+          changedValues = helpers.setValueObject(
+            changedValues,
+            name,
+            value
+          );
+        }
+        return nextValues;
+      });
+      setErrors((prev) => {
+        return prev.filter(
+          (error) => !Object.keys(updates).includes(error.name)
+        );
+      });
+      Object.entries(fields).forEach(([fieldName, field]) => {
+        const deps = field.dependencies ?? [];
+        if (deps.some((dep) => dep in updates)) {
+          const depValue = helpers.getValueObject(
+            nextValues,
+            fieldName,
+            ""
+          );
+          triggerValidation(
+            fieldName,
+            depValue,
+            nextValues
+          );
+        }
+      });
+      notifyWatchValueField(updates);
+      options?.onValueChange?.(changedValues, nextValues);
+    },
+    [fields, triggerValidation, options, notifyWatchValueField]
+  );
+  const setFieldValue = React.useCallback(
+    (name, value) => {
+      updateValues({ [name]: value });
+    },
+    [updateValues]
+  );
+  const arrayHelpers = (name) => ({
+    add: (value) => {
+      setValues((prev) => {
+        const currentValue = helpers.getValueObject(prev, name, []);
+        return helpers.setValueObject(
+          prev,
+          `${name}[${currentValue.length}]`,
+          value
+        );
+      });
+    },
+    remove: (index) => {
+      setValues((prev) => {
+        const current = helpers.getValueObject(prev, name, []);
+        const newArr = current.filter((_, i) => i !== index);
+        return helpers.setValueObject(prev, name, newArr);
+      });
+    },
+    insert: (index, value) => {
+      setValues((prev) => {
+        const current = helpers.getValueObject(prev, name, []);
+        const newArr = [
+          ...current.slice(0, index),
+          value,
+          ...current.slice(index)
+        ];
+        return helpers.setValueObject(prev, name, newArr);
+      });
+    }
+  });
+  const onValidateFields = React.useCallback(async () => {
+    const results = await Promise.all(
+      Object.entries(fields).map(async ([fieldName, config]) => {
+        const { validate } = config;
+        if (!validate) return null;
+        return validate(getFieldValue(fieldName), values);
+      })
+    );
+    return results.flat().filter(Boolean).length === 0;
+  }, [fields, values]);
+  const resetFields = React.useCallback(() => {
+    setValues(options?.initialValues ?? {});
+    setErrors([]);
+  }, [options?.initialValues]);
+  const setFieldsValue = React.useCallback(
+    (_values) => {
+      updateValues(_values);
+    },
+    [updateValues]
+  );
+  const getFieldError = React.useCallback(
+    (name) => {
+      return errors.filter((error) => error.name === name)?.[0]?.errors ?? [];
+    },
+    [errors]
+  );
+  const getFieldsError = React.useCallback(
+    (names) => {
+      if (!names) {
+        return errors;
+      }
+      return errors.filter((error) => names.includes(error.name));
+    },
+    [errors]
+  );
+  const getFieldValue = React.useCallback(
+    (name) => {
+      return helpers.getValueObject(values, name);
+    },
+    [values]
+  );
+  const getFieldsValue = React.useCallback(
+    (names) => {
+      if (names) {
+        let fieldsValue = {};
+        names.forEach((name) => {
+          const value = helpers.getValueObject(values, name);
+          fieldsValue = {
+            fieldsValue,
+            ...helpers.setValueObject(
+              fieldsValue,
+              name,
+              value
+            )
+          };
+        });
+        return fieldsValue;
+      }
+      return values;
+    },
+    [values]
+  );
+  const submit = () => {
+    submitCallback?.();
+  };
+  return {
+    getFieldValue,
+    getFieldsValue,
+    registerField,
+    resetFields,
+    setFieldValue,
+    setErrors,
+    fields,
+    unregisterField,
+    arrayHelpers,
+    registerSubscribe,
+    unregisterSubscribe,
+    triggerValidation,
+    setFieldsValue,
+    onValidateFields,
+    getFieldError,
+    getFieldsError,
+    submit,
+    setSubmitCallback
+  };
+};
+exports.useForm = useForm;

package/dist/Form/useForm.d.ts

@@ -0,0 +1,2 @@
+import { IFormInstance, IUseFormOptions } from './types';
+export declare const useForm: <T extends Record<string, any>>(options?: IUseFormOptions<T>) => IFormInstance<T>;