@quen-ui/components 0.0.14 → 1.0.1

package/dist/Form/useForm.es.js

@@ -0,0 +1,230 @@
+import { useState, useCallback } from "react";
+import { getValueObject, setValueObject, deleteValueObject } from "@quen-ui/helpers";
+const useForm = (options) => {
+  const [values, setValues] = useState(options?.initialValues ?? {});
+  const [fields, setFields] = useState({});
+  const [errors, setErrors] = useState([]);
+  const [subscribes, setSubscribes] = useState([]);
+  const [submitCallback, setSubmitCallback] = useState();
+  const registerField = useCallback(
+    (name, { defaultValue, rules, validate, dependencies }) => {
+      const value = defaultValue ?? getValueObject(options?.initialValues ?? {}, name);
+      setValues((prev) => setValueObject(prev, name, value));
+      setFields((prev) => ({
+        ...prev,
+        [name]: { validate, rules, defaultValue, dependencies }
+      }));
+    },
+    []
+  );
+  const unregisterField = useCallback((name) => {
+    setValues((prevState) => {
+      return deleteValueObject(prevState, name);
+    });
+    setErrors((prevState) => {
+      return prevState.filter((error) => error.name !== name);
+    });
+    setFields((prevState) => {
+      const copy = { ...prevState };
+      delete copy[name];
+      return copy;
+    });
+  }, []);
+  const registerSubscribe = useCallback(
+    (name, callback) => {
+      setSubscribes((prev) => [...prev, { name, func: callback }]);
+    },
+    []
+  );
+  const unregisterSubscribe = useCallback((name) => {
+    setSubscribes((prev) => prev.filter((s) => s.name !== name));
+  }, []);
+  const triggerValidation = useCallback(
+    (name, value, _values) => {
+      const field = fields[name];
+      if (field?.validate) {
+        field.validate(value, _values);
+      }
+    },
+    [fields]
+  );
+  const notifyWatchValueField = useCallback(
+    (updates) => {
+      subscribes.forEach((subscribe) => {
+        if (Object.keys(updates).includes(subscribe.name)) {
+          subscribe.func(updates[subscribe.name]);
+        }
+      });
+    },
+    [subscribes, values]
+  );
+  const updateValues = useCallback(
+    (updates) => {
+      let changedValues = {};
+      let nextValues = {};
+      setValues((prev) => {
+        nextValues = { ...prev };
+        for (const [name, value] of Object.entries(updates)) {
+          nextValues = setValueObject(
+            nextValues,
+            name,
+            value
+          );
+          changedValues = 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 = getValueObject(
+            nextValues,
+            fieldName,
+            ""
+          );
+          triggerValidation(
+            fieldName,
+            depValue,
+            nextValues
+          );
+        }
+      });
+      notifyWatchValueField(updates);
+      options?.onValueChange?.(changedValues, nextValues);
+    },
+    [fields, triggerValidation, options, notifyWatchValueField]
+  );
+  const setFieldValue = useCallback(
+    (name, value) => {
+      updateValues({ [name]: value });
+    },
+    [updateValues]
+  );
+  const arrayHelpers = (name) => ({
+    add: (value) => {
+      setValues((prev) => {
+        const currentValue = getValueObject(prev, name, []);
+        return setValueObject(
+          prev,
+          `${name}[${currentValue.length}]`,
+          value
+        );
+      });
+    },
+    remove: (index) => {
+      setValues((prev) => {
+        const current = getValueObject(prev, name, []);
+        const newArr = current.filter((_, i) => i !== index);
+        return setValueObject(prev, name, newArr);
+      });
+    },
+    insert: (index, value) => {
+      setValues((prev) => {
+        const current = getValueObject(prev, name, []);
+        const newArr = [
+          ...current.slice(0, index),
+          value,
+          ...current.slice(index)
+        ];
+        return setValueObject(prev, name, newArr);
+      });
+    }
+  });
+  const onValidateFields = 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 = useCallback(() => {
+    setValues(options?.initialValues ?? {});
+    setErrors([]);
+  }, [options?.initialValues]);
+  const setFieldsValue = useCallback(
+    (_values) => {
+      updateValues(_values);
+    },
+    [updateValues]
+  );
+  const getFieldError = useCallback(
+    (name) => {
+      return errors.filter((error) => error.name === name)?.[0]?.errors ?? [];
+    },
+    [errors]
+  );
+  const getFieldsError = useCallback(
+    (names) => {
+      if (!names) {
+        return errors;
+      }
+      return errors.filter((error) => names.includes(error.name));
+    },
+    [errors]
+  );
+  const getFieldValue = useCallback(
+    (name) => {
+      return getValueObject(values, name);
+    },
+    [values]
+  );
+  const getFieldsValue = useCallback(
+    (names) => {
+      if (names) {
+        let fieldsValue = {};
+        names.forEach((name) => {
+          const value = getValueObject(values, name);
+          fieldsValue = {
+            fieldsValue,
+            ...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
+  };
+};
+export {
+  useForm
+};

package/dist/Form/useWatch.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useWatch = (name, form) => {
+  const [value, setValue] = React.useState(form.getFieldValue(name));
+  React.useEffect(() => {
+    form.registerSubscribe(name, setValue);
+    return () => {
+      form.unregisterSubscribe(name);
+    };
+  }, []);
+  return value;
+};
+exports.useWatch = useWatch;

package/dist/Form/useWatch.d.ts

@@ -0,0 +1,3 @@
+import { TKeyObjectType, TValueObjectType } from '../../../helpers/src';
+import { IFormInstance } from './types';
+export declare const useWatch: <T extends Record<string, any>, P extends TKeyObjectType<T>>(name: P, form: IFormInstance<T>) => TValueObjectType<T, P>;

package/dist/Form/useWatch.es.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from "react";
+const useWatch = (name, form) => {
+  const [value, setValue] = useState(form.getFieldValue(name));
+  useEffect(() => {
+    form.registerSubscribe(name, setValue);
+    return () => {
+      form.unregisterSubscribe(name);
+    };
+  }, []);
+  return value;
+};
+export {
+  useWatch
+};

package/dist/Highlight/Highlight.cjs.js

@@ -0,0 +1,113 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("./helpers.cjs.js");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Highlight = ({
+  children,
+  highlightComponent,
+  highlightStyle,
+  highlightTag = "mark",
+  highlightClassName,
+  escapeQuery = true,
+  query,
+  maxChunks = Infinity,
+  rootProps,
+  color = "yellow",
+  splitByWords = false,
+  caseSensitive = false,
+  ranges
+}) => {
+  if (children === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rootProps, children });
+  }
+  const text = typeof children === "string" ? children : children?.props?.children;
+  const chunksFromRanges = React.useMemo(() => {
+    if (ranges && ranges.length && text) {
+      const normalized = helpers.normalizeRanges(ranges, text.length);
+      if (normalized.length === 0) return null;
+      return helpers.buildChunksFromRanges(text, normalized, maxChunks);
+    }
+    return null;
+  }, [ranges, text, maxChunks]);
+  if (chunksFromRanges) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "m", ...rootProps, children: renderChunks(
+      chunksFromRanges,
+      highlightTag,
+      highlightComponent,
+      highlightClassName,
+      highlightStyle,
+      color
+    ) });
+  }
+  const regex = React.useMemo(
+    () => helpers.buildRegexFromQuery(query ?? null, {
+      caseSensitive,
+      escapeQuery,
+      splitByWords
+    }),
+    [query, caseSensitive, escapeQuery, splitByWords]
+  );
+  const chunks = React.useMemo(() => {
+    if (!text) return null;
+    if (!regex) return [{ type: "text", text }];
+    const matches = helpers.collectMatches(text, regex);
+    if (!matches || matches.length === 0)
+      return [{ type: "text", text }];
+    return helpers.buildChunks(text, matches, maxChunks);
+  }, [text, regex, maxChunks]);
+  if (!chunks || chunks.length === 0 || !regex) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rootProps, children: text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "m", ...rootProps, children: renderChunks(
+    chunks,
+    highlightTag,
+    highlightComponent,
+    highlightClassName,
+    highlightStyle,
+    color
+  ) });
+};
+function renderChunks(matchChunks, highlightTag, highlightComponent, highlightClassName, highlightStyle, color) {
+  return matchChunks.map((c, i) => {
+    if (c.type === "text") {
+      return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: c.text }, `t-${i}`);
+    }
+    if (highlightComponent) {
+      const Comp = highlightComponent;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Comp,
+        {
+          className: highlightClassName,
+          style: highlightStyle,
+          children: c.text
+        },
+        `m-${i}`
+      );
+    }
+    if (highlightTag === "mark") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        styles.HighlightStyled,
+        {
+          "data-testid": "highlight-mark",
+          color,
+          className: highlightClassName,
+          style: highlightStyle,
+          children: c.text
+        },
+        `m-${i}`
+      );
+    }
+    return React.createElement(
+      highlightTag,
+      {
+        key: `m-${i}`,
+        className: highlightClassName,
+        style: highlightStyle
+      },
+      c.text
+    );
+  });
+}
+module.exports = Highlight;

package/dist/Highlight/Highlight.d.ts

@@ -0,0 +1,3 @@
+import { IHighlightProps } from './types';
+declare const Highlight: ({ children, highlightComponent, highlightStyle, highlightTag, highlightClassName, escapeQuery, query, maxChunks, rootProps, color, splitByWords, caseSensitive, ranges }: IHighlightProps) => import("react/jsx-runtime").JSX.Element;
+export default Highlight;

package/dist/Highlight/Highlight.es.js

@@ -0,0 +1,114 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, Fragment, createElement } from "react";
+import { normalizeRanges, buildChunksFromRanges, buildRegexFromQuery, collectMatches, buildChunks } from "./helpers.es.js";
+import { HighlightStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+const Highlight = ({
+  children,
+  highlightComponent,
+  highlightStyle,
+  highlightTag = "mark",
+  highlightClassName,
+  escapeQuery = true,
+  query,
+  maxChunks = Infinity,
+  rootProps,
+  color = "yellow",
+  splitByWords = false,
+  caseSensitive = false,
+  ranges
+}) => {
+  if (children === null) {
+    return /* @__PURE__ */ jsx("span", { ...rootProps, children });
+  }
+  const text = typeof children === "string" ? children : children?.props?.children;
+  const chunksFromRanges = useMemo(() => {
+    if (ranges && ranges.length && text) {
+      const normalized = normalizeRanges(ranges, text.length);
+      if (normalized.length === 0) return null;
+      return buildChunksFromRanges(text, normalized, maxChunks);
+    }
+    return null;
+  }, [ranges, text, maxChunks]);
+  if (chunksFromRanges) {
+    return /* @__PURE__ */ jsx(Text, { size: "m", ...rootProps, children: renderChunks(
+      chunksFromRanges,
+      highlightTag,
+      highlightComponent,
+      highlightClassName,
+      highlightStyle,
+      color
+    ) });
+  }
+  const regex = useMemo(
+    () => buildRegexFromQuery(query ?? null, {
+      caseSensitive,
+      escapeQuery,
+      splitByWords
+    }),
+    [query, caseSensitive, escapeQuery, splitByWords]
+  );
+  const chunks = useMemo(() => {
+    if (!text) return null;
+    if (!regex) return [{ type: "text", text }];
+    const matches = collectMatches(text, regex);
+    if (!matches || matches.length === 0)
+      return [{ type: "text", text }];
+    return buildChunks(text, matches, maxChunks);
+  }, [text, regex, maxChunks]);
+  if (!chunks || chunks.length === 0 || !regex) {
+    return /* @__PURE__ */ jsx("span", { ...rootProps, children: text });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "m", ...rootProps, children: renderChunks(
+    chunks,
+    highlightTag,
+    highlightComponent,
+    highlightClassName,
+    highlightStyle,
+    color
+  ) });
+};
+function renderChunks(matchChunks, highlightTag, highlightComponent, highlightClassName, highlightStyle, color) {
+  return matchChunks.map((c, i) => {
+    if (c.type === "text") {
+      return /* @__PURE__ */ jsx(Fragment, { children: c.text }, `t-${i}`);
+    }
+    if (highlightComponent) {
+      const Comp = highlightComponent;
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          className: highlightClassName,
+          style: highlightStyle,
+          children: c.text
+        },
+        `m-${i}`
+      );
+    }
+    if (highlightTag === "mark") {
+      return /* @__PURE__ */ jsx(
+        HighlightStyled,
+        {
+          "data-testid": "highlight-mark",
+          color,
+          className: highlightClassName,
+          style: highlightStyle,
+          children: c.text
+        },
+        `m-${i}`
+      );
+    }
+    return createElement(
+      highlightTag,
+      {
+        key: `m-${i}`,
+        className: highlightClassName,
+        style: highlightStyle
+      },
+      c.text
+    );
+  });
+}
+export {
+  Highlight as default
+};

package/dist/Highlight/helpers.cjs.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function normalizeRanges(ranges, textLength) {
+  const cleaned = ranges.map((r) => ({
+    start: Math.max(0, Math.min(textLength, r.start)),
+    end: Math.max(0, Math.min(textLength, r.end))
+  })).filter((r) => r.end > r.start).sort((a, b) => a.start - b.start);
+  if (cleaned.length === 0) return [];
+  const merged = [];
+  let prev = cleaned[0];
+  for (let i = 1; i < cleaned.length; i++) {
+    const cur = cleaned[i];
+    if (cur.start <= prev.end) {
+      prev.end = Math.max(prev.end, cur.end);
+    } else {
+      merged.push({ ...prev, text: "" });
+      prev = cur;
+    }
+  }
+  merged.push({ ...prev, text: "" });
+  return merged;
+}
+function buildChunksFromRanges(text, ranges, maxChunks) {
+  const chunks = [];
+  let cursor = 0;
+  let matchesUsed = 0;
+  for (const r of ranges) {
+    if (cursor < r.start) {
+      chunks.push({ type: "text", text: text.slice(cursor, r.start) });
+    }
+    if (matchesUsed < maxChunks) {
+      chunks.push({
+        type: "match",
+        text: text.slice(r.start, r.end),
+        start: r.start,
+        end: r.end
+      });
+      matchesUsed++;
+    } else {
+      chunks.push({ type: "text", text: text.slice(r.start, text.length) });
+      cursor = text.length;
+      break;
+    }
+    cursor = r.end;
+  }
+  if (cursor < text.length) {
+    chunks.push({ type: "text", text: text.slice(cursor) });
+  }
+  return chunks;
+}
+function buildRegexFromQuery(query, {
+  caseSensitive = false,
+  escapeQuery = true,
+  splitByWords = false
+}) {
+  if (!query) return null;
+  if (query instanceof RegExp) {
+    const flags = query.flags || "";
+    const finalFlags = caseSensitive ? flags.replace("i", "") : flags.includes("i") ? flags : flags + "i";
+    try {
+      return new RegExp(query.source, finalFlags);
+    } catch {
+      return null;
+    }
+  }
+  const arr = Array.isArray(query) ? query.filter(Boolean) : [query];
+  const tokens = arr.map((t) => escapeQuery ? escapeRegExp(t) : t).filter((t) => t.length > 0).map((t) => splitByWords ? `\\b${t}\\b` : t);
+  if (tokens.length === 0) return null;
+  const pattern = tokens.join("|");
+  try {
+    return new RegExp(pattern, caseSensitive ? "g" : "gi");
+  } catch {
+    return null;
+  }
+}
+function resolveOverlaps(matches) {
+  const sorted = matches.slice().sort((a, b) => a.start - b.start || b.end - b.end);
+  sorted.sort((a, b) => a.start - b.start || b.end - b.start - (a.end - a.start));
+  const kept = [];
+  for (const m of sorted) {
+    if (kept.length === 0) {
+      kept.push(m);
+      continue;
+    }
+    const last = kept[kept.length - 1];
+    if (m.start >= last.end) {
+      kept.push(m);
+    } else {
+      if (m.end > last.end) {
+        continue;
+      }
+    }
+  }
+  kept.sort((a, b) => a.start - b.start);
+  return kept;
+}
+function collectMatches(subject, regex) {
+  if (!regex.global) {
+    const flags = regex.flags.includes("g") ? regex.flags : regex.flags + "g";
+    regex = new RegExp(regex.source, flags);
+  }
+  const matches = [];
+  let m;
+  regex.lastIndex = 0;
+  while ((m = regex.exec(subject)) !== null) {
+    const text = m[0];
+    if (!text) {
+      regex.lastIndex++;
+      continue;
+    }
+    const start = m.index;
+    const end = start + text.length;
+    matches.push({ start, end, text });
+  }
+  return resolveOverlaps(matches);
+}
+function buildChunks(subject, matches, maxChunks = Infinity) {
+  const chunks = [];
+  let cursor = 0;
+  let countMatches = 0;
+  for (const m of matches) {
+    if (m.start > cursor) {
+      chunks.push({ type: "text", text: subject.slice(cursor, m.start) });
+    }
+    if (countMatches < maxChunks) {
+      chunks.push({ type: "match", text: subject.slice(m.start, m.end), start: m.start, end: m.end });
+      countMatches++;
+    } else {
+      chunks.push({ type: "text", text: subject.slice(m.start, subject.length) });
+      cursor = subject.length;
+      break;
+    }
+    cursor = m.end;
+  }
+  if (cursor < subject.length) {
+    chunks.push({ type: "text", text: subject.slice(cursor) });
+  }
+  return chunks;
+}
+exports.buildChunks = buildChunks;
+exports.buildChunksFromRanges = buildChunksFromRanges;
+exports.buildRegexFromQuery = buildRegexFromQuery;
+exports.collectMatches = collectMatches;
+exports.normalizeRanges = normalizeRanges;

package/dist/Highlight/helpers.d.ts

@@ -0,0 +1,27 @@
+import { IHighlightProps, TMatchChunk, TMatch } from './types';
+export declare function normalizeRanges(ranges: Array<{
+    start: number;
+    end: number;
+}>, textLength: number): TMatch[];
+export declare function buildChunksFromRanges(text: string, ranges: TMatch[], maxChunks: number): TMatchChunk[];
+/**
+ * Build regex from query prop.
+ * Returns a RegExp or null (if no queries).
+ */
+export declare function buildRegexFromQuery(query: string | string[] | RegExp | null | undefined, { caseSensitive, escapeQuery, splitByWords }: Pick<IHighlightProps, "caseSensitive" | "escapeQuery" | "splitByWords">): RegExp | null;
+/**
+ * Given a subject string and a regex with 'g', produce non-overlapping matches sorted by index.
+ */
+export declare function collectMatches(subject: string, regex: RegExp): Array<{
+    start: number;
+    end: number;
+    text: string;
+}>;
+/**
+ * Turn subject + matches into chunks (text and match chunks)
+ */
+export declare function buildChunks(subject: string, matches: Array<{
+    start: number;
+    end: number;
+    text: string;
+}>, maxChunks?: number): TMatchChunk[];