@hortiview/shared-components 0.0.4779 → 0.0.4804

package/dist/assets/FormDatePicker.css

@@ -1 +1 @@
-._datePickerContainer_1l698_1{width:100%}
+._datePickerContainer_zxe48_1{width:100%}._invalid_zxe48_5+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}._fromPickerText_zxe48_9+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{margin-bottom:-19.33px!important}

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.js

@@ -1,64 +1,87 @@
 import "../../../assets/FormDatePicker.css";
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { Datepicker as F } from "@element/react-components";
-import { g as Y } from "../../../get-Dyz8NMrE.js";
-import { useState as _, useEffect as s, useMemo as c } from "react";
-import { useFormContext as j, Controller as v } from "react-hook-form";
-const O = "_datePickerContainer_1l698_1", i = {
-  datePickerContainer: O
-}, N = ({
-  propertyName: t,
-  label: l,
-  required: a = !1,
-  requiredText: m,
-  className: u,
-  minRangeYear: d,
-  maxRangeYear: f,
+import { useState as T, useEffect as k, useMemo as c } from "react";
+import { useFormContext as z, Controller as I } from "react-hook-form";
+const O = "_datePickerContainer_zxe48_1", Q = "_invalid_zxe48_5", Y = "_fromPickerText_zxe48_9", d = {
+  datePickerContainer: O,
+  invalid: Q,
+  fromPickerText: Y
+}, H = ({
+  propertyName: e,
+  label: x,
+  required: n = !1,
+  requiredText: o,
+  className: P,
+  minRangeYear: f,
+  maxRangeYear: m,
   locale: D
 }) => {
   const {
     control: g,
-    formState: { errors: k },
-    watch: C
-  } = j(), [S, n] = _(), o = C(t);
-  s(() => {
-    n(/* @__PURE__ */ new Date());
-  }, []), s(() => {
-    n(new Date(o));
-  }, [o]);
-  const x = c(() => (/* @__PURE__ */ new Date()).getFullYear() - (d ?? 95), []), p = c(() => (/* @__PURE__ */ new Date()).getFullYear() + (f ?? 15), []);
-  return /* @__PURE__ */ r(
-    v,
+    formState: { errors: t },
+    watch: S,
+    getFieldState: a
+  } = z(), [_, u] = T(), v = S(e);
+  k(() => {
+    u(/* @__PURE__ */ new Date());
+  }, []), k(() => {
+    u(new Date(v));
+  }, [v]);
+  const C = c(
+    () => (/* @__PURE__ */ new Date()).getFullYear() - (f ?? 95),
+    [f]
+  ), h = c(
+    () => (/* @__PURE__ */ new Date()).getFullYear() + (m ?? 15),
+    [m]
+  ), w = c(() => {
+    const s = () => {
+      if (t && t[e]) {
+        const r = t[e]?.message;
+        return r || "Invalid input";
+      }
+      return o;
+    };
+    return {
+      valid: !a(e).invalid,
+      helperTextPersistent: t !== void 0 || n,
+      helperText: s(),
+      className: `${d.fromPickerText} ${a(e).invalid ? d.invalid : ""}`
+    };
+  }, [t, o, e, n, a]);
+  return /* @__PURE__ */ l(
+    I,
     {
-      name: t,
+      name: e,
       rules: {
-        required: a
+        required: n ? {
+          value: n,
+          message: o
+        } : void 0
       },
       control: g,
-      render: ({ field: { onChange: w, ...P } }) => /* @__PURE__ */ h("div", { className: i.datePickerContainer, children: [
-        /* @__PURE__ */ r(
-          F,
-          {
-            ...P,
-            className: u ?? "",
-            value: S,
-            variant: "outlined",
-            label: l,
-            format: (e) => e ? e.toLocaleDateString(D ?? "en") : "",
-            disableClearing: !0,
-            onChange: (e) => {
-              w(e?.toISOString());
-            },
-            minQuickSelectYear: x,
-            maxQuickSelectYear: p,
-            readOnly: !0
-          }
-        ),
-        a && Y(k, t) && /* @__PURE__ */ r("span", { className: i.errorText, children: m })
-      ] })
+      render: ({ field: { onChange: s, ...r } }) => /* @__PURE__ */ l("div", { className: d.datePickerContainer, children: /* @__PURE__ */ l(
+        F,
+        {
+          ...r,
+          className: P ?? "",
+          value: _,
+          variant: "outlined",
+          label: x,
+          format: (i) => i ? i.toLocaleDateString(D ?? "en") : "",
+          disableClearing: !0,
+          onChange: (i) => {
+            s(i?.toISOString());
+          },
+          minQuickSelectYear: C,
+          maxQuickSelectYear: h,
+          readOnly: !0,
+          textfieldProps: w
+        }
+      ) })
     }
   );
 };
 export {
-  N as FormDatePicker
+  H as FormDatePicker
 };

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { r as n, s as a, f as m } from "../../../react.esm-BeDwcQWb.js";
+import { r as n, s as a, f as l } from "../../../react.esm-BeDwcQWb.js";
 import { FormDatePicker as s } from "./FormDatePicker.js";
-import { v as e, d as l, t as c, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as e, d as m, t as c, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const f = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),
@@ -35,35 +35,22 @@ e.mock("react-hook-form", () => ({
       _defaultValues: ["test"]
     },
     formState: { errors: {} },
-    watch: () => "2024-08-07"
+    watch: () => "2024-08-07",
+    getFieldState: e.fn().mockReturnValue({ invalid: !1 })
   })
 }));
-l("FormDatePicker Test", () => {
+m("FormDatePicker Test", () => {
   c("render FormDatePicker", () => {
     n(
-      /* @__PURE__ */ o(
-        s,
-        {
-          propertyName: "birthday",
-          label: "user.date-of-birth",
-          maxRangeYear: 0
-        }
-      )
+      /* @__PURE__ */ o(s, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
     );
     const t = a.getByRole("textbox");
     r(t).toBeInTheDocument(), r(t).toBeInstanceOf(HTMLInputElement), r(["7.8.2024", "8/7/2024"]).toContainEqual(t.value), r(a.getByText("user.date-of-birth")).toBeInTheDocument();
   }), c("change FormDatePicker value", () => {
     n(
-      /* @__PURE__ */ o(
-        s,
-        {
-          propertyName: "birthday",
-          label: "user.date-of-birth",
-          maxRangeYear: 0
-        }
-      )
+      /* @__PURE__ */ o(s, { propertyName: "birthday", label: "user.date-of-birth", maxRangeYear: 0 })
     );
     const t = a.getByRole("textbox");
-    m.change(t, { target: { value: "1.1.24" } });
+    l.change(t, { target: { value: "1.1.24" } });
   });
 });

package/dist/components/FormComponents/FormText/FormText.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldValues, Path, PathValue, Validate, ValidationRule } from 'react-hook-form';
+import { FieldPath, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 /**
  * a generic FormText property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
  */
@@ -8,22 +8,12 @@ type FormTextProps<T extends FieldValues> = {
     propertyName: Path<T>;
     /** the label of the Textbox */
     label: string;
-    /** the max character length */
-    maxLength?: number;
-    /** the min character length */
-    minLength?: number;
-    /** if the field is required */
-    required?: boolean;
-    /** the text which is shown if the field is required and not filled */
-    requiredText?: string;
     /** a boolean to set a textarea or a textfield */
     textarea?: boolean;
     /** a boolean to disable the field/set to readonly */
     disabled?: boolean;
     /** a boolean to hide the field */
     hidden?: boolean;
-    /** a pattern to validate the field */
-    pattern?: ValidationRule<RegExp>;
     /** a placeholder text */
     placeholder?: string;
     /** the type of the input field */
@@ -40,9 +30,15 @@ type FormTextProps<T extends FieldValues> = {
      */
     trigger?: 'onBlur' | 'onChange' | 'likeForm';
     /**
-     * a custom validation function or an object with multiple validation functions
+     * the rules for the field
+     * @default undefined
+     * @example { required: { value: true, message: 'This field is required' } }
+     * @example { maxLength: { value: 10, message: 'Max length is 10' } }
+     * @example { minLength: { value: 5, message: 'Min length is 5' } }
+     * @example { pattern: { value: /^[A-Za-z]+$/, message: 'Only letters are allowed' } }
+     * @example { validate: (value) => value === 'admin' }
      */
-    validate?: Validate<PathValue<T, Path<T>>, T> | Record<string, Validate<PathValue<T, Path<T>>, T>>;
+    rules?: Omit<RegisterOptions<T, FieldPath<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> | undefined;
 };
 /**
  * creates a Textfield which should be part of a form component.
@@ -51,18 +47,15 @@ type FormTextProps<T extends FieldValues> = {
  * @param hidden if the field should be hidden
  * @param inputMode the input mode of the field @example 'search' or 'numeric'
  * @param label the label of the field
- * @param maxLength the max character length
- * @param minLength the min character length
  * @param pattern a pattern to validate the field @example /^[A-Za-z]+$/
  * @param placeholder a placeholder text
  * @param prefixText a prefix text
  * @param propertyName the name of the property in the form
- * @param required if the field is required
- * @param requiredText the text which is shown if the field is required and not filled
  * @param textarea if the field is a textarea
  * @param trigger the trigger to validate the field. @default 'likeForm' @example 'onBlur' or 'onChange'
- * @param validate a custom validation function or an object with multiple validation functions
  * @param trailingIcon a trailing icon
+ * @param type the type of the input field
+ * @param rules the rules for the field @example { required: { value: true, message: 'This field is required' } }
  * @returns a JSX element that renders a textfield form input
  */
 export declare const FormText: <T extends FieldValues>(props: FormTextProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormComponents/FormText/FormText.js

@@ -1,108 +1,109 @@
 import "../../../assets/FormText.css";
-import { jsx as t, Fragment as P, jsxs as R } from "react/jsx-runtime";
-import { Textfield as V } from "@element/react-components";
-import { useState as W } from "react";
-import { useFormContext as b, Controller as _ } from "react-hook-form";
-const w = "_formTextAreaHelperText_7ae2c_1", D = "_invalid_7ae2c_6", E = "_formText_7ae2c_1", G = "_formTextArea_7ae2c_1", s = {
-  formTextAreaHelperText: w,
-  invalid: D,
-  formText: E,
-  formTextArea: G
-}, J = ({
+import { jsx as t, Fragment as z, jsxs as I } from "react/jsx-runtime";
+import { Textfield as P } from "@element/react-components";
+import { useState as R, useMemo as s } from "react";
+import { useFormContext as V, Controller as _ } from "react-hook-form";
+const W = "_formTextAreaHelperText_7ae2c_1", b = "_invalid_7ae2c_6", w = "_formText_7ae2c_1", D = "_formTextArea_7ae2c_1", m = {
+  formTextAreaHelperText: W,
+  invalid: b,
+  formText: w,
+  formTextArea: D
+}, E = ({
   count: e,
   maxCount: c,
-  required: r = !1,
-  requiredText: l = ""
-}) => /* @__PURE__ */ R("div", { className: s.formTextAreaHelperText, children: [
-  r ? /* @__PURE__ */ t("div", { children: l }) : /* @__PURE__ */ t("div", {}),
+  required: x = !1,
+  requiredText: r = ""
+}) => /* @__PURE__ */ I("div", { className: m.formTextAreaHelperText, children: [
+  x ? /* @__PURE__ */ t("div", { children: r }) : /* @__PURE__ */ t("div", {}),
   /* @__PURE__ */ t("div", { children: `${e}/${c}` })
-] }), p = (e) => e.textarea ? /* @__PURE__ */ t(K, { ...e }) : /* @__PURE__ */ t(O, { ...e }), K = (e) => /* @__PURE__ */ t("div", { className: s.formTextArea, children: /* @__PURE__ */ t(g, { ...e }) }), O = (e) => /* @__PURE__ */ t(g, { ...e }), g = ({
+] }), Y = (e) => e.textarea ? /* @__PURE__ */ t(G, { ...e }) : /* @__PURE__ */ t(J, { ...e }), G = (e) => /* @__PURE__ */ t("div", { className: m.formTextArea, children: /* @__PURE__ */ t(C, { ...e }) }), J = (e) => /* @__PURE__ */ t(C, { ...e }), C = ({
   propertyName: e,
   label: c,
-  maxLength: r,
-  minLength: l,
-  required: f = !1,
-  requiredText: m = "",
-  disabled: h = !1,
-  textarea: i = !1,
-  hidden: C = !1,
-  pattern: A,
+  disabled: x = !1,
+  textarea: r = !1,
+  hidden: A = !1,
   placeholder: F,
-  type: H,
-  prefixText: S,
-  inputMode: $,
-  trailingIcon: B,
-  trigger: u = "likeForm",
-  validate: j
+  type: L,
+  prefixText: H,
+  inputMode: q,
+  trailingIcon: S,
+  trigger: d = "likeForm",
+  rules: n
 }) => {
   const {
-    control: x,
-    getFieldState: T,
-    formState: { errors: a },
-    trigger: d
-  } = b(), [k, z] = W(0), I = (n) => {
-    const o = n.target.value;
-    z(o?.length ?? 0);
+    control: f,
+    getFieldState: u,
+    formState: { errors: l },
+    trigger: T
+  } = V(), [$, B] = R(0), j = (i) => {
+    const a = i.target.value;
+    B(a?.length ?? 0);
   }, M = () => {
-    if (a && a[e]) {
-      const n = a[e]?.message;
-      return n || "Invalid input";
+    if (l && l[e]) {
+      const i = l[e]?.message;
+      return i || "Invalid input";
     }
-    return r && i ? /* @__PURE__ */ t(
-      J,
+    return o && r ? /* @__PURE__ */ t(
+      E,
       {
-        count: k,
-        maxCount: r,
-        required: f,
-        requiredText: m
+        count: $,
+        maxCount: o,
+        required: v,
+        requiredText: g
       }
-    ) : m;
-  };
-  return C ? /* @__PURE__ */ t(_, { name: e, control: x, render: () => /* @__PURE__ */ t(P, {}) }) : /* @__PURE__ */ t(
+    ) : g;
+  }, o = s(
+    () => n?.maxLength?.value,
+    [n]
+  ), k = s(
+    () => n?.minLength?.value,
+    [n]
+  ), v = s(
+    () => n?.required?.value,
+    [n]
+  ), g = s(
+    () => n?.required?.message,
+    [n]
+  );
+  return A ? /* @__PURE__ */ t(_, { name: e, control: f, render: () => /* @__PURE__ */ t(z, {}) }) : /* @__PURE__ */ t(
     _,
     {
       name: e,
-      rules: {
-        required: f,
-        maxLength: r,
-        minLength: l,
-        pattern: A,
-        validate: j
-      },
-      control: x,
-      render: ({ field: { ref: n, ...o } }) => /* @__PURE__ */ t(
-        V,
+      rules: n,
+      control: f,
+      render: ({ field: { ref: i, ...a } }) => /* @__PURE__ */ t(
+        P,
         {
-          ...o,
-          value: o.value ?? "",
-          type: H,
+          ...a,
+          value: a.value ?? "",
+          type: L,
           fullWidth: !0,
-          inputMode: $,
+          inputMode: q,
           placeholder: F,
-          prefixText: S,
-          disabled: h,
+          prefixText: H,
+          disabled: x,
           helperText: M(),
-          helperTextPersistent: a !== void 0 || f || r !== void 0 && i,
+          helperTextPersistent: l !== void 0 || v || o !== void 0 && r,
           label: c,
           variant: "outlined",
-          maxlength: r,
-          minLength: l,
-          textarea: i,
+          maxlength: o,
+          minLength: k,
+          textarea: r,
           noResize: !1,
           onBlur: () => {
-            u === "onBlur" && d(e);
+            d === "onBlur" && T(e);
           },
-          onChange: (v) => {
-            o.onChange(v), i && r !== void 0 && I(v), u === "onChange" && d(e);
+          onChange: (h) => {
+            a.onChange(h), r && o !== void 0 && j(h), d === "onChange" && T(e);
           },
-          valid: !T(e).invalid,
-          className: `${s.formText} ${T(e).invalid ? s.invalid : ""}`,
-          trailingIcon: B
+          valid: !u(e).invalid,
+          className: `${m.formText} ${u(e).invalid ? m.invalid : ""}`,
+          trailingIcon: S
         }
       )
     }
   );
 };
 export {
-  p as FormText
+  Y as FormText
 };

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,23 +1,25 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as o, s as a, f as i } from "../../../react.esm-BeDwcQWb.js";
-import { FormText as s } from "./FormText.js";
-import { v as r, d as m, t as l, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
-const d = r.fn();
-r.mock("react-hook-form", () => ({
-  ...r.importActual("react-hook-form"),
-  Controller: ({ render: e }) => e({
+import { r as s, s as r, f as d } from "../../../react.esm-BeDwcQWb.js";
+import { FormText as l } from "./FormText.js";
+import { v as a, d as i, t as o, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const m = a.fn();
+a.mock("react-hook-form", () => ({
+  ...a.importActual("react-hook-form"),
+  Controller: ({
+    render: e
+  }) => e({
     field: {
       ref: void 0,
-      onChange: d,
+      onChange: m,
       value: "test"
     }
   }),
   useFormContext: () => ({
-    watch: r.fn(),
+    watch: a.fn(),
     control: {
-      register: r.fn(),
-      unregister: r.fn(),
-      getFieldState: r.fn(),
+      register: a.fn(),
+      unregister: a.fn(),
+      getFieldState: a.fn(),
       _names: {
         array: new Set("test"),
         mount: new Set("test"),
@@ -27,11 +29,11 @@ r.mock("react-hook-form", () => ({
         watchAll: !1
       },
       _subjects: {
-        watch: r.fn(),
-        array: r.fn(),
-        state: r.fn()
+        watch: a.fn(),
+        array: a.fn(),
+        state: a.fn()
       },
-      _getWatch: r.fn(),
+      _getWatch: a.fn(),
       _formValues: ["test"],
       _defaultValues: ["test"]
     },
@@ -39,46 +41,88 @@ r.mock("react-hook-form", () => ({
     getFieldState: () => ({ invalid: !1 })
   })
 }));
-m("FormText Test", () => {
-  l("render FormText and return single line text field", () => {
-    o(/* @__PURE__ */ n(s, { maxLength: 100, label: "address.line2", propertyName: "addressLine2" }));
-    const e = a.getByRole("textbox");
-    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLInputElement), t(e).toHaveAttribute("maxlength", "100"), t(a.getByText("address.line2")).toBeInTheDocument();
-  }), l("change value of single line text field", () => {
-    o(/* @__PURE__ */ n(s, { maxLength: 100, label: "address.line2", propertyName: "addressLine2" }));
-    const e = a.getByRole("textbox");
-    t(e).toHaveValue("test"), i.change(e, { target: { value: "test-change" } }), t(d).toHaveBeenCalled();
-  }), l("render FormText and return text area", () => {
-    o(
+i("FormText Test", () => {
+  o("render FormText and return single line text field", () => {
+    s(
       /* @__PURE__ */ n(
-        s,
+        l,
         {
-          maxLength: 200,
+          rules: {
+            maxLength: {
+              value: 100,
+              message: "max length is 100"
+            }
+          },
+          label: "address.line2",
+          propertyName: "addressLine2"
+        }
+      )
+    );
+    const e = r.getByRole("textbox");
+    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLInputElement), t(e).toHaveAttribute("maxlength", "100"), t(r.getByText("address.line2")).toBeInTheDocument();
+  }), o("change value of single line text field", () => {
+    s(
+      /* @__PURE__ */ n(
+        l,
+        {
+          rules: {
+            maxLength: {
+              value: 100,
+              message: "max length is 100"
+            }
+          },
+          label: "address.line2",
+          propertyName: "addressLine2"
+        }
+      )
+    );
+    const e = r.getByRole("textbox");
+    t(e).toHaveValue("test"), d.change(e, { target: { value: "test-change" } }), t(m).toHaveBeenCalled();
+  }), o("render FormText and return text area", () => {
+    s(
+      /* @__PURE__ */ n(
+        l,
+        {
+          rules: {
+            required: {
+              value: !0,
+              message: "required"
+            },
+            maxLength: {
+              value: 200,
+              message: "max length is 200"
+            }
+          },
           label: "address.line1",
           propertyName: "addressLine1",
-          required: !0,
-          requiredText: "required",
           textarea: !0
         }
       )
     );
-    const e = a.getByRole("textbox");
-    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLTextAreaElement), t(e).toHaveAttribute("maxlength", "200"), t(a.getByText("address.line1")).toBeInTheDocument(), t(a.getByText("required")).toBeInTheDocument();
-  }), l("change value of text area", () => {
-    o(
+    const e = r.getByRole("textbox");
+    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLTextAreaElement), t(e).toHaveAttribute("maxlength", "200"), t(r.getByText("address.line1")).toBeInTheDocument(), t(r.getByText("required")).toBeInTheDocument();
+  }), o("change value of text area", () => {
+    s(
       /* @__PURE__ */ n(
-        s,
+        l,
         {
-          maxLength: 200,
+          rules: {
+            required: {
+              value: !0,
+              message: "required"
+            },
+            maxLength: {
+              value: 200,
+              message: "max length is 200"
+            }
+          },
           label: "address.line1",
           propertyName: "addressLine1",
-          required: !0,
-          requiredText: "required",
           textarea: !0
         }
       )
     );
-    const e = a.getByRole("textbox");
-    i.change(e, { target: { value: "test-change" } }), t(d).toHaveBeenCalled();
+    const e = r.getByRole("textbox");
+    d.change(e, { target: { value: "test-change" } }), t(m).toHaveBeenCalled();
   });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.4779",
+  "version": "0.0.4804",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",