@quen-ui/components 0.0.14 → 1.0.1

package/dist/Form/Field.cjs.js

@@ -0,0 +1,175 @@
+"use strict";
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
+const Form = require("./Form.cjs.js");
+const helpers$1 = require("./helpers.cjs.js");
+const Field = ({
+  name,
+  defaultValue,
+  validate,
+  children,
+  valuePropName = "value",
+  rules = [],
+  validateTrigger = "onChange",
+  trigger = "onChange",
+  dependencies
+}) => {
+  const {
+    setFieldValue,
+    registerField,
+    unregisterField,
+    triggerValidation,
+    setErrors,
+    validateMessages,
+    validateTrigger: formValidateTrigger,
+    trigger: formTrigger,
+    getFieldError,
+    getFieldsValue,
+    getFieldValue
+  } = Form.useFormContext();
+  const [localValue, setLocalValue] = React.useState(
+    helpers.getValueObject(getFieldsValue(), name, defaultValue)
+  );
+  React.useEffect(() => {
+    const formValue = getFieldValue(name);
+    if (formValue !== localValue) {
+      setLocalValue(formValue ?? "");
+    }
+  }, [getFieldValue]);
+  React.useEffect(() => {
+    registerField(name, {
+      defaultValue,
+      rules,
+      dependencies,
+      validate: validateField
+    });
+    return () => unregisterField(name);
+  }, []);
+  const error = getFieldError(name);
+  const validateField = async (value, values) => {
+    const error2 = {
+      name,
+      errors: [],
+      warnings: []
+    };
+    if (validate) {
+      const errorValidate = await validate(value || "", values) || "";
+      if (errorValidate) {
+        error2.errors.push(errorValidate);
+      }
+    }
+    rules.map((rule) => {
+      if (rule.required && (value === "" || value == null)) {
+        error2.errors.push(
+          helpers.formatString(rule.message ?? validateMessages.required, {
+            name
+          })
+        );
+      }
+      if (rule.type) {
+        const validator = helpers$1.ruleValidators[rule.type];
+        if (validator && !validator(value)) {
+          error2.errors.push(helpers.formatString(
+            rule.message ?? validateMessages.types[rule.type],
+            {
+              name,
+              type: rule.type
+            }
+          ));
+        }
+      }
+      if (rule.minLength && String(value).length < rule.minLength) {
+        error2.errors.push(helpers.formatString(rule.message ?? validateMessages.string.min, {
+          name,
+          min: rule.minLength
+        }));
+      }
+      if (rule.maxLength && String(value).length > rule.maxLength) {
+        error2.errors.push(helpers.formatString(rule.message ?? validateMessages.string.max, {
+          name,
+          max: rule.maxLength
+        }));
+      }
+      if (rule.pattern && !rule.pattern.test(String(value))) {
+        error2.errors.push(helpers.formatString(
+          rule.message ?? validateMessages.pattern.mismatch,
+          {
+            name,
+            pattern: rule.pattern
+          }
+        ));
+      }
+    });
+    setErrors((prevErrors) => {
+      const newErrors = prevErrors.filter((e) => e.name !== name);
+      newErrors.push(error2);
+      return newErrors;
+    });
+    return error2.errors;
+  };
+  const handleLocalChange = React.useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      setLocalValue(val);
+    },
+    [valuePropName]
+  );
+  const handleStoreUpdate = React.useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      setFieldValue(name, val);
+    },
+    [name, setFieldValue, valuePropName]
+  );
+  const handleValidate = React.useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      triggerValidation(name, val, getFieldsValue());
+    },
+    [name, valuePropName, getFieldsValue()]
+  );
+  const buildHandlers = React.useCallback(
+    (changeTriggers, validateTriggers) => {
+      const handlers2 = {};
+      const allTriggers = /* @__PURE__ */ new Set([
+        "onChange",
+        ...changeTriggers,
+        ...validateTriggers
+      ]);
+      allTriggers.forEach((eventName) => {
+        const shouldStoreUpdate = Array.isArray(changeTriggers) ? changeTriggers.includes(eventName) : changeTriggers === eventName;
+        const shouldValidate = Array.isArray(validateTriggers) ? validateTriggers.includes(eventName) : validateTriggers === eventName;
+        handlers2[eventName] = (e) => {
+          if (eventName === "onChange") handleLocalChange(e);
+          if (shouldStoreUpdate) handleStoreUpdate(e);
+          if (shouldValidate) handleValidate(e);
+        };
+      });
+      return handlers2;
+    },
+    [handleLocalChange, handleStoreUpdate, handleValidate]
+  );
+  const handlers = React.useMemo(
+    () => buildHandlers(
+      [
+        ...Array.isArray(trigger) ? trigger : [trigger],
+        ...Array.isArray(formTrigger) ? formTrigger : [formTrigger]
+      ],
+      [
+        ...Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger],
+        ...Array.isArray(formValidateTrigger) ? formValidateTrigger : [formValidateTrigger]
+      ]
+    ),
+    [trigger, validateTrigger, buildHandlers, formTrigger, formValidateTrigger]
+  );
+  if (children) {
+    return React.cloneElement(children, {
+      [valuePropName]: localValue,
+      error: error.length ? error[0] : void 0,
+      required: rules?.some((rule) => rule.required === true),
+      ...handlers
+    });
+  }
+  return null;
+};
+module.exports = Field;

package/dist/Form/Field.d.ts

@@ -0,0 +1,3 @@
+import { IFormFieldProps } from './types';
+declare const Field: <T extends Record<string, any>>({ name, defaultValue, validate, children, valuePropName, rules, validateTrigger, trigger, dependencies }: IFormFieldProps<T>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;
+export default Field;

package/dist/Form/Field.es.js

@@ -0,0 +1,176 @@
+import { useState, useEffect, useCallback, useMemo, cloneElement } from "react";
+import { getValueObject, formatString } from "@quen-ui/helpers";
+import { useFormContext } from "./Form.es.js";
+import { ruleValidators } from "./helpers.es.js";
+const Field = ({
+  name,
+  defaultValue,
+  validate,
+  children,
+  valuePropName = "value",
+  rules = [],
+  validateTrigger = "onChange",
+  trigger = "onChange",
+  dependencies
+}) => {
+  const {
+    setFieldValue,
+    registerField,
+    unregisterField,
+    triggerValidation,
+    setErrors,
+    validateMessages,
+    validateTrigger: formValidateTrigger,
+    trigger: formTrigger,
+    getFieldError,
+    getFieldsValue,
+    getFieldValue
+  } = useFormContext();
+  const [localValue, setLocalValue] = useState(
+    getValueObject(getFieldsValue(), name, defaultValue)
+  );
+  useEffect(() => {
+    const formValue = getFieldValue(name);
+    if (formValue !== localValue) {
+      setLocalValue(formValue ?? "");
+    }
+  }, [getFieldValue]);
+  useEffect(() => {
+    registerField(name, {
+      defaultValue,
+      rules,
+      dependencies,
+      validate: validateField
+    });
+    return () => unregisterField(name);
+  }, []);
+  const error = getFieldError(name);
+  const validateField = async (value, values) => {
+    const error2 = {
+      name,
+      errors: [],
+      warnings: []
+    };
+    if (validate) {
+      const errorValidate = await validate(value || "", values) || "";
+      if (errorValidate) {
+        error2.errors.push(errorValidate);
+      }
+    }
+    rules.map((rule) => {
+      if (rule.required && (value === "" || value == null)) {
+        error2.errors.push(
+          formatString(rule.message ?? validateMessages.required, {
+            name
+          })
+        );
+      }
+      if (rule.type) {
+        const validator = ruleValidators[rule.type];
+        if (validator && !validator(value)) {
+          error2.errors.push(formatString(
+            rule.message ?? validateMessages.types[rule.type],
+            {
+              name,
+              type: rule.type
+            }
+          ));
+        }
+      }
+      if (rule.minLength && String(value).length < rule.minLength) {
+        error2.errors.push(formatString(rule.message ?? validateMessages.string.min, {
+          name,
+          min: rule.minLength
+        }));
+      }
+      if (rule.maxLength && String(value).length > rule.maxLength) {
+        error2.errors.push(formatString(rule.message ?? validateMessages.string.max, {
+          name,
+          max: rule.maxLength
+        }));
+      }
+      if (rule.pattern && !rule.pattern.test(String(value))) {
+        error2.errors.push(formatString(
+          rule.message ?? validateMessages.pattern.mismatch,
+          {
+            name,
+            pattern: rule.pattern
+          }
+        ));
+      }
+    });
+    setErrors((prevErrors) => {
+      const newErrors = prevErrors.filter((e) => e.name !== name);
+      newErrors.push(error2);
+      return newErrors;
+    });
+    return error2.errors;
+  };
+  const handleLocalChange = useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      setLocalValue(val);
+    },
+    [valuePropName]
+  );
+  const handleStoreUpdate = useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      setFieldValue(name, val);
+    },
+    [name, setFieldValue, valuePropName]
+  );
+  const handleValidate = useCallback(
+    (e) => {
+      const val = e?.target && valuePropName in e.target ? e.target[valuePropName] : e?.target?.value ?? e;
+      triggerValidation(name, val, getFieldsValue());
+    },
+    [name, valuePropName, getFieldsValue()]
+  );
+  const buildHandlers = useCallback(
+    (changeTriggers, validateTriggers) => {
+      const handlers2 = {};
+      const allTriggers = /* @__PURE__ */ new Set([
+        "onChange",
+        ...changeTriggers,
+        ...validateTriggers
+      ]);
+      allTriggers.forEach((eventName) => {
+        const shouldStoreUpdate = Array.isArray(changeTriggers) ? changeTriggers.includes(eventName) : changeTriggers === eventName;
+        const shouldValidate = Array.isArray(validateTriggers) ? validateTriggers.includes(eventName) : validateTriggers === eventName;
+        handlers2[eventName] = (e) => {
+          if (eventName === "onChange") handleLocalChange(e);
+          if (shouldStoreUpdate) handleStoreUpdate(e);
+          if (shouldValidate) handleValidate(e);
+        };
+      });
+      return handlers2;
+    },
+    [handleLocalChange, handleStoreUpdate, handleValidate]
+  );
+  const handlers = useMemo(
+    () => buildHandlers(
+      [
+        ...Array.isArray(trigger) ? trigger : [trigger],
+        ...Array.isArray(formTrigger) ? formTrigger : [formTrigger]
+      ],
+      [
+        ...Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger],
+        ...Array.isArray(formValidateTrigger) ? formValidateTrigger : [formValidateTrigger]
+      ]
+    ),
+    [trigger, validateTrigger, buildHandlers, formTrigger, formValidateTrigger]
+  );
+  if (children) {
+    return cloneElement(children, {
+      [valuePropName]: localValue,
+      error: error.length ? error[0] : void 0,
+      required: rules?.some((rule) => rule.required === true),
+      ...handlers
+    });
+  }
+  return null;
+};
+export {
+  Field as default
+};

package/dist/Form/FieldArray.cjs.js

@@ -0,0 +1,24 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
+const Form = require("./Form.cjs.js");
+const FieldArray = ({
+  name,
+  children
+}) => {
+  const { getFieldsValue, arrayHelpers, registerField, unregisterField } = Form.useFormContext();
+  const helpers$1 = arrayHelpers(name);
+  const values = helpers.getValueObject(getFieldsValue(), name, []);
+  React.useEffect(() => {
+    registerField(name, { defaultValue: [] });
+    return () => {
+      unregisterField(name);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(
+    helpers$1,
+    values.map((value) => ({ value }))
+  ) });
+};
+module.exports = FieldArray;

package/dist/Form/FieldArray.d.ts

@@ -0,0 +1,3 @@
+import { IFormFieldArrayProps } from './types';
+declare const FieldArray: <T extends Record<string, any> = Record<string, any>>({ name, children }: IFormFieldArrayProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default FieldArray;

package/dist/Form/FieldArray.es.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { getValueObject } from "@quen-ui/helpers";
+import { useFormContext } from "./Form.es.js";
+const FieldArray = ({
+  name,
+  children
+}) => {
+  const { getFieldsValue, arrayHelpers, registerField, unregisterField } = useFormContext();
+  const helpers = arrayHelpers(name);
+  const values = getValueObject(getFieldsValue(), name, []);
+  useEffect(() => {
+    registerField(name, { defaultValue: [] });
+    return () => {
+      unregisterField(name);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: children(
+    helpers,
+    values.map((value) => ({ value }))
+  ) });
+};
+export {
+  FieldArray as default
+};

package/dist/Form/Form.cjs.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Flex = require("../Flex/Flex.cjs.js");
+const helpers = require("@quen-ui/helpers");
+const defaultValidateMessages = require("./defaultValidateMessages.cjs.js");
+const FormContext = React.createContext(null);
+const useFormContext = () => {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) {
+    throw new Error("useFormContext must be used inside <FormProvider>");
+  }
+  return ctx;
+};
+const Form = ({
+  onFinish,
+  children,
+  form,
+  onFinishFailed,
+  validateMessages,
+  validateTrigger = "onChange",
+  trigger = "onChange",
+  name,
+  as = "form",
+  direction = "column",
+  ...props
+}) => {
+  const messages = React.useMemo(() => {
+    return helpers.deepMerge(defaultValidateMessages.defaultValidateMessages, validateMessages ?? {});
+  }, [validateMessages]);
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    const isValid = await form.onValidateFields();
+    if (isValid) {
+      await onFinish?.(form.getFieldsValue());
+    } else {
+      onFinishFailed?.(form.getFieldsValue(), form.getFieldsError());
+    }
+  };
+  React.useEffect(() => {
+    form.setSubmitCallback(() => handleSubmit);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormContext.Provider,
+    {
+      value: {
+        ...form,
+        validateMessages: messages,
+        validateTrigger,
+        trigger
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Flex,
+        {
+          as,
+          id: name,
+          role: "form",
+          onSubmit: handleSubmit,
+          direction,
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+exports.Form = Form;
+exports.useFormContext = useFormContext;

package/dist/Form/Form.d.ts

@@ -0,0 +1,3 @@
+import { IFormContext, IFormProps } from './types';
+export declare const useFormContext: () => IFormContext<any>;
+export declare const Form: <T extends Record<string, any>>({ onFinish, children, form, onFinishFailed, validateMessages, validateTrigger, trigger, name, as, direction, ...props }: IFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Form.es.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useEffect, useContext } from "react";
+import Flex from "../Flex/Flex.es.js";
+import { deepMerge } from "@quen-ui/helpers";
+import { defaultValidateMessages } from "./defaultValidateMessages.es.js";
+const FormContext = createContext(null);
+const useFormContext = () => {
+  const ctx = useContext(FormContext);
+  if (!ctx) {
+    throw new Error("useFormContext must be used inside <FormProvider>");
+  }
+  return ctx;
+};
+const Form = ({
+  onFinish,
+  children,
+  form,
+  onFinishFailed,
+  validateMessages,
+  validateTrigger = "onChange",
+  trigger = "onChange",
+  name,
+  as = "form",
+  direction = "column",
+  ...props
+}) => {
+  const messages = useMemo(() => {
+    return deepMerge(defaultValidateMessages, validateMessages ?? {});
+  }, [validateMessages]);
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    const isValid = await form.onValidateFields();
+    if (isValid) {
+      await onFinish?.(form.getFieldsValue());
+    } else {
+      onFinishFailed?.(form.getFieldsValue(), form.getFieldsError());
+    }
+  };
+  useEffect(() => {
+    form.setSubmitCallback(() => handleSubmit);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    FormContext.Provider,
+    {
+      value: {
+        ...form,
+        validateMessages: messages,
+        validateTrigger,
+        trigger
+      },
+      children: /* @__PURE__ */ jsx(
+        Flex,
+        {
+          as,
+          id: name,
+          role: "form",
+          onSubmit: handleSubmit,
+          direction,
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Form,
+  useFormContext
+};

package/dist/Form/defaultValidateMessages.cjs.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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}"
+  }
+};
+exports.defaultValidateMessages = defaultValidateMessages;

package/dist/Form/defaultValidateMessages.d.ts

@@ -0,0 +1,47 @@
+export declare const defaultValidateMessages: {
+    default: string;
+    required: string;
+    enum: string;
+    whitespace: string;
+    date: {
+        format: string;
+        parse: string;
+        invalid: string;
+    };
+    types: {
+        string: string;
+        method: string;
+        array: string;
+        object: string;
+        number: string;
+        date: string;
+        boolean: string;
+        integer: string;
+        float: string;
+        regexp: string;
+        email: string;
+        url: string;
+        hex: string;
+    };
+    string: {
+        len: string;
+        min: string;
+        max: string;
+        range: string;
+    };
+    number: {
+        len: string;
+        min: string;
+        max: string;
+        range: string;
+    };
+    array: {
+        len: string;
+        min: string;
+        max: string;
+        range: string;
+    };
+    pattern: {
+        mismatch: string;
+    };
+};