@plitzi/sdk-elements 0.33.2 → 0.34.0

package/dist/elements/form/FormControl/helpers/validateField.d.ts

@@ -0,0 +1,27 @@
+/**
+ * What a control asks of its value before the form around it may submit.
+ *
+ * Zero and the empty string mean "no rule", so a control authored before these existed validates exactly as it did.
+ */
+export type FieldRules = {
+    required: boolean;
+    minLength: number;
+    maxLength: number;
+    /** A regular expression the WHOLE value must match — anchored here, so an author never has to remember `^…$`. */
+    pattern: string;
+    patternMessage: string;
+    /** The `name` of another control in the same form whose value this one has to repeat. */
+    matches: string;
+    matchesMessage: string;
+};
+export declare const REQUIRED_MESSAGE = "This field is required";
+/**
+ * The first rule a value breaks, as the sentence to show under the control — or `''` when it breaks none.
+ *
+ * An empty optional control is valid whatever else it asks for: "at least ten characters" is about a value somebody
+ * chose to give, and a blank company name has not given one.
+ *
+ * Lengths are counted in code points rather than UTF-16 units, because that is what a person typing counts: an emoji
+ * is one character to them and two to `String.length`.
+ */
+export declare const validateField: (value: unknown, rules: FieldRules, values: Record<string, unknown>) => string;

package/dist/elements/form/FormControl/helpers/validateField.mjs

@@ -0,0 +1,16 @@
+import { get as e } from "@plitzi/plitzi-ui/helpers";
+//#region src/elements/form/FormControl/helpers/validateField.ts
+var t = "This field is required", n = "This is not in the expected format", r = "This does not match", i = (e) => e == null || e === "" || e === !1, a = (e) => typeof e == "string" ? e : typeof e == "number" ? String(e) : "", o = (e, t) => {
+	try {
+		return RegExp(`^(?:${t})$`, "u").test(e);
+	} catch {
+		return !1;
+	}
+}, s = (s, c, l) => {
+	if (i(s)) return c.required ? t : "";
+	if (typeof s == "boolean") return "";
+	let u = a(s), d = Array.from(u).length;
+	return c.minLength > 0 && d < c.minLength ? `Use at least ${c.minLength} characters` : c.maxLength > 0 && d > c.maxLength ? `Use at most ${c.maxLength} characters` : c.pattern && !o(u, c.pattern) ? c.patternMessage || n : c.matches && u !== a(e(l, c.matches, "")) ? c.matchesMessage || r : "";
+};
+//#endregion
+export { t as REQUIRED_MESSAGE, s as validateField };

package/dist/elements/form/FormControl/hocs/withFieldValue.d.ts

@@ -5,6 +5,12 @@ export type WithFieldValueProps<T> = {
     defaultValue?: string;
     subType: 'hidden' | 'text' | 'number' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'color' | 'switch';
     required: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    patternMessage?: string;
+    matches?: string;
+    matchesMessage?: string;
     previewError?: boolean;
 } & T;
 declare const withFieldValue: <T extends object>(WrappedComponent: FC<T>) => {

package/dist/elements/form/FormControl/hocs/withFieldValue.mjs

@@ -1,64 +1,87 @@
-import { useCallback as e, useEffect as t, useMemo as n } from "react";
-import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
-import { createStoreHook as a } from "@plitzi/nexus/react";
-import { getDisplayName as o } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as s } from "react/jsx-runtime";
+import { validateField as e } from "../helpers/validateField.mjs";
+import { useCallback as t, useEffect as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as a } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as o } from "@plitzi/nexus/react";
+import { getDisplayName as s } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/elements/form/FormControl/hocs/withFieldValue.tsx
-var c = (c) => {
-	let l = (o) => {
-		let { ref: l, name: u = "", subType: d = "text", defaultValue: f = "", required: p = !0, previewError: m = !1 } = o, { settings: { previewMode: h } } = r(), { useStore: g } = a(), [_] = g("runtime.sources.form");
-		if (!_) return /* @__PURE__ */ s(c, { ...o });
-		let { setFieldValue: v, setFieldError: y, errors: b, values: x } = _, S = n(() => i(x, u, f), [
+var l = (l) => {
+	let u = (s) => {
+		let { ref: u, name: d = "", subType: f = "text", defaultValue: p = "", required: m = !0, minLength: h = 0, maxLength: g = 0, pattern: _ = "", patternMessage: v = "", matches: y = "", matchesMessage: b = "", previewError: x = !1 } = s, { settings: { previewMode: S } } = i(), { useStore: C } = o(), [w] = C("runtime.sources.form");
+		if (!w) return /* @__PURE__ */ c(l, { ...s });
+		let { setFieldValue: T, setFieldError: E, registerValidator: D, unregisterValidator: O, errors: k, values: A } = w, j = r(() => a(A, d, p), [
+			A,
+			d,
+			p
+		]), M = r(() => !S && x ? "This is an error message" : k[d], [
+			S,
 			x,
-			u,
-			f
-		]), C = n(() => !h && m ? "This is an error message" : b[u], [
-			h,
+			k,
+			d
+		]), N = r(() => ({
+			required: m,
+			minLength: h,
+			maxLength: g,
+			pattern: _,
+			patternMessage: v,
+			matches: y,
+			matchesMessage: b
+		}), [
 			m,
-			b,
-			u
-		]);
-		t(() => {
-			f && S && u && v(u, S);
-		}, [
-			f,
-			u,
+			h,
+			g,
+			_,
 			v,
-			S
+			y,
+			b
 		]);
-		let w = e((e) => {
-			e.target.type === "radio" || e.target.type === "checkbox" || d === "switch" ? v(u, e.target.checked) : v(u, e.target.value);
+		n(() => {
+			if (d) return D(d, (t) => e(a(t, d, p), N, t)), () => O(d);
 		}, [
-			v,
-			u,
-			d
-		]), T = e(() => {
-			!S && p ? y(u, "This field is required") : C === "This field is required" && y(u, "");
+			d,
+			p,
+			N,
+			D,
+			O
+		]), n(() => {
+			p && j && d && T(d, j);
 		}, [
-			S,
-			C,
-			u,
 			p,
-			y
+			d,
+			T,
+			j
 		]);
-		return n(() => /* @__PURE__ */ s(c, {
-			...o,
-			ref: l,
-			value: S,
-			error: C,
-			handleChange: w,
-			handleValidate: T
+		let P = t((e) => {
+			e.target.type === "radio" || e.target.type === "checkbox" || f === "switch" ? T(d, e.target.checked) : T(d, e.target.value);
+		}, [
+			T,
+			d,
+			f
+		]), F = t(() => E(d, e(j, N, A)), [
+			j,
+			N,
+			A,
+			d,
+			E
+		]);
+		return r(() => /* @__PURE__ */ c(l, {
+			...s,
+			ref: u,
+			value: j,
+			error: M,
+			handleChange: P,
+			handleValidate: F
 		}), [
-			o,
-			l,
-			C,
-			S,
-			w,
-			T
+			s,
+			u,
+			M,
+			j,
+			P,
+			F
 		]);
 	};
-	return l.displayName = `withFieldValue(${o(c)})`, l;
+	return u.displayName = `withFieldValue(${s(l)})`, u;
 };
 //#endregion
-export { c as default };
+export { l as default };