@hortiview/shared-components 0.0.4730 → 0.0.4775

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

@@ -0,0 +1,21 @@
+import { FieldValues, Path } from 'react-hook-form';
+type FormRadioProps<T extends FieldValues> = {
+    /** The name of the property that this radio button represents. */
+    propertyName: Path<T>;
+    /** The options to be displayed as radio buttons. */
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+/**
+ * FormRadio is a custom form input component for selecting radio buttons.
+ * It is integrated with react-hook-form for form management.
+ *
+ * @param propertyName - the name of the property this radio button maps to in the form.
+ * @param options - the options to be displayed as radio buttons.
+ *
+ * @returns A JSX element that renders a radio button form input.
+ */
+export declare const FormRadio: <T extends FieldValues>({ propertyName, options }: FormRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormRadio/FormRadio.js

@@ -0,0 +1,30 @@
+import { jsx as a, Fragment as m } from "react/jsx-runtime";
+import { Radio as c } from "@element/react-components";
+import { useFormContext as v, Controller as d } from "react-hook-form";
+const h = ({ propertyName: l, options: n }) => {
+  const { control: o, setValue: t } = v(), u = (r) => {
+    const e = r.target.value;
+    t(l, e);
+  };
+  return /* @__PURE__ */ a(
+    d,
+    {
+      name: l,
+      control: o,
+      render: (r) => /* @__PURE__ */ a(m, { children: n.map((e) => /* @__PURE__ */ a(
+        c,
+        {
+          name: e.value,
+          value: e.value,
+          checked: r.field.value === e.value,
+          label: e.label,
+          onChange: u
+        },
+        e.value
+      )) })
+    }
+  );
+};
+export {
+  h as FormRadio
+};

package/dist/components/FormComponents/FormRadio/FormRadio.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,73 @@
+import { jsx as n } from "react/jsx-runtime";
+import { r as s, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
+import { FormRadio as l } from "./FormRadio.js";
+import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const a = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({
+    render: r
+  }) => r({
+    field: {
+      onChange: a
+    },
+    fieldState: { error: { message: "error" } }
+  }),
+  useFormContext: () => ({
+    control: {
+      register: e.fn(),
+      unregister: e.fn(),
+      getFieldState: e.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: e.fn(),
+        array: e.fn(),
+        state: e.fn()
+      },
+      _getWatch: e.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    watch: () => "2024-08-07",
+    setValue: a
+  })
+}));
+c("FormRadio Test", () => {
+  i("render FormRadio", () => {
+    s(
+      /* @__PURE__ */ n(
+        l,
+        {
+          propertyName: "hasValue",
+          options: [
+            { label: "option1", value: "1" },
+            { label: "option2", value: "2" }
+          ]
+        }
+      )
+    ), o(t.getByText("option1")).toBeInTheDocument(), o(t.getByText("option2")).toBeInTheDocument(), o(t.getAllByRole("radio")).toHaveLength(2);
+  }), i("render FormRadio click", () => {
+    s(
+      /* @__PURE__ */ n(
+        l,
+        {
+          propertyName: "hasValue",
+          options: [
+            { label: "option1", value: "1" },
+            { label: "option2", value: "2" }
+          ]
+        }
+      )
+    );
+    const r = t.getAllByRole("radio");
+    m.click(r[0]), o(a).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { FieldValues, Path } from 'react-hook-form';
+/**
+ * a generic FormSelector property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
+ */
+type FormSelectProps<T extends FieldValues> = {
+    /** the current character count */
+    propertyName: Path<T>;
+    /** the label of the select */
+    label: string;
+    /** if the select is disabled */
+    disabled?: boolean;
+    /** if the select should be hidden */
+    hidden?: boolean;
+    /** if the select is required */
+    required?: boolean;
+    /** the text which is shown if the select is required and not filled */
+    requiredText?: string;
+    /** if true the select dropdown is rendered outside of the parent. Useful for when the select needs to render in a parent with "overflow: hidden" and the dropdown will cut on the component border. */
+    hoisted?: boolean;
+    /** the key of the value attribute of the select, default: value */
+    valueKey?: string;
+    /** the key of the text attribute of the select, default: text */
+    textKey?: string;
+    /** the options, which are shown in the dropdown section of the select  */
+    options: FormSelectOption[] | object[] | undefined;
+    /** if true, the select allows multiple selections */
+    multi?: boolean;
+    /** if true, the select allows the user to clear the selection */
+    clearable?: boolean;
+    /** a message if no options a present */
+    noOptionsMessage?: string;
+};
+/**
+ * the base option type of the selector, you can also use your own custom objects, by defining the {@link FormSelectProps} valueKey and textKey
+ */
+export type FormSelectOption = {
+    text: string | JSX.Element;
+    value: string;
+};
+/**
+ * creates a Select which should be part of a form component.
+ * the Select is wrapped by the react hook forms {@link Controller} component.
+ * @param clearable if the select allows the user to clear the selection
+ * @param disabled if the select is disabled
+ * @param hidden if the select should be hidden
+ * @param hoisted if the select should be rendered outside of the parent
+ * @param label the label of the select
+ * @param multi if the select allows multiple selections
+ * @param options the options of the select
+ * @param noOptionsMessage a message if no options a present
+ * @param propertyName the name of the property in the form
+ * @param required if the select is required
+ * @param requiredText the text which is shown if the select is required and not filled
+ * @param textKey the key of the text attribute of the select, default: text
+ * @param valueKey the key of the value attribute of the select, default: value
+ *
+ * @returns
+ */
+export declare const FormSelect: <T extends FieldValues>({ propertyName, label, required, requiredText, options, multi, disabled, hoisted, hidden, valueKey, textKey, clearable, noOptionsMessage, }: FormSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -0,0 +1,76 @@
+import { jsx as s, Fragment as V } from "react/jsx-runtime";
+import { Select as k } from "@element/react-components";
+import { g as u } from "../../../get-BYajYtEc.js";
+import { useState as v, useMemo as w, useEffect as z } from "react";
+import { useFormContext as A, Controller as x } from "react-hook-form";
+import { s as i } from "../../../formSelect.module-CdHEvmH_.js";
+const Q = ({
+  propertyName: r,
+  label: S,
+  required: m = !1,
+  requiredText: h,
+  options: o,
+  multi: n = !1,
+  disabled: g = !1,
+  hoisted: F = !1,
+  hidden: C = !1,
+  valueKey: t = "value",
+  textKey: E = "text",
+  clearable: M = !1,
+  noOptionsMessage: T = ""
+}) => {
+  const {
+    control: a,
+    formState: { errors: l }
+  } = A(), [c, $] = v(!0), b = w(() => u(l, r) !== void 0, [l, r]);
+  return z(() => {
+    $(u(l, r) === void 0);
+  }, [l, b, r]), C ? /* @__PURE__ */ s(x, { name: r, control: a, render: () => /* @__PURE__ */ s(V, {}) }) : /* @__PURE__ */ s("div", { className: i.formSelectContainer, children: /* @__PURE__ */ s(
+    x,
+    {
+      name: r,
+      rules: {
+        required: m
+      },
+      control: a,
+      render: ({ field: { ref: B, onChange: f, value: d, ...j } }) => {
+        const H = n ? o?.filter(
+          (e) => d?.includes(e[t])
+        ) : o?.find((e) => e[t] === d);
+        return /* @__PURE__ */ s(
+          k,
+          {
+            ...j,
+            value: H,
+            label: S,
+            variant: "outlined",
+            helperText: h,
+            helperTextPersistent: m,
+            options: o,
+            valid: c,
+            multiSelect: n,
+            className: `${i.formSelect} ${c ? "" : i.invalid}`,
+            disabled: g,
+            valueKey: t,
+            textKey: E,
+            onChange: (e) => {
+              if (e == null)
+                return f(e);
+              if (n)
+                return f(e.map((P) => P[t]));
+              f(e[t]);
+            },
+            hoisted: F,
+            noOptionsMessage: T,
+            searchable: !0,
+            clearable: M,
+            menuMaxHeight: "15rem"
+          }
+        );
+      }
+    }
+  ) });
+};
+export {
+  Q as FormSelect
+};

package/dist/components/FormComponents/FormSelect/FormSelect.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,65 @@
+import { jsx as a } from "react/jsx-runtime";
+import { r as s, s as r } from "../../../react.esm-BeDwcQWb.js";
+import { FormSelect as c } from "./FormSelect.js";
+import { v as e, d as l, t as u, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const i = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({ render: o }) => o({
+    field: {
+      ref: void 0,
+      onChange: i,
+      value: "3"
+    }
+  }),
+  useFormContext: () => ({
+    control: {
+      register: e.fn(),
+      unregister: e.fn(),
+      getFieldState: e.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: e.fn(),
+        array: e.fn(),
+        state: e.fn()
+      },
+      _getWatch: e.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    getFieldState: () => ({ invalid: !1 })
+  })
+}));
+l("FormSelect Test", () => {
+  const o = [
+    { id: "1", value: "Germany", description: "" },
+    { id: "2", value: "France", description: "" },
+    { id: "3", value: "Afar", description: "" }
+  ];
+  u("render FormSelect", () => {
+    s(
+      /* @__PURE__ */ a(
+        c,
+        {
+          label: "address.country",
+          required: !0,
+          requiredText: "required",
+          propertyName: "countryId",
+          options: o,
+          valueKey: "id",
+          textKey: "value"
+        }
+      )
+    );
+    const n = r.getByRole("combobox");
+    t(n).toBeInTheDocument(), t(n).toBeInstanceOf(HTMLInputElement), t(r.getByText("address.country")).toBeInTheDocument(), t(r.getByText("Afar")).toBeInTheDocument(), t(r.getByText("required")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { FieldValues, Path } from 'react-hook-form';
+type FormSliderProps<T extends FieldValues> = {
+    /** the path to the property, like Address.AddressLine1 */
+    propertyName: Path<T>;
+    /** the label of the Slider */
+    label?: string;
+    /** the min value */
+    minValue?: number;
+    /** the max value */
+    maxValue?: number;
+    /** the step value */
+    step?: number;
+    /** if the field is disabled */
+    disabled?: boolean;
+};
+/**
+ * a generic FormSlider property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
+ * @param propertyName the path to the property, like Address.AddressLine1
+ * @param label the label of the Slider
+ * @param minValue the min value
+ * @param maxValue the max value
+ * @param step the step value
+ * @param disabled if the field is disabled
+ * @returns a Slider component
+ */
+export declare const FormSlider: <T extends FieldValues>({ propertyName, label, minValue, maxValue, step, disabled, }: FormSliderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormSlider/FormSlider.js

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Slider as s } from "@element/react-components";
+import { useFormContext as u, Controller as x } from "react-hook-form";
+const f = ({
+  propertyName: n,
+  label: e,
+  minValue: t,
+  maxValue: m,
+  step: a,
+  disabled: i
+}) => {
+  const { control: l } = u();
+  return /* @__PURE__ */ o(
+    x,
+    {
+      name: n,
+      control: l,
+      render: ({ field: r }) => /* @__PURE__ */ o(
+        s,
+        {
+          ...r,
+          onChange: (p) => {
+            r.onChange(p.value);
+          },
+          label: e,
+          min: t,
+          max: m,
+          step: a,
+          disabled: i
+        }
+      )
+    }
+  );
+};
+export {
+  f as FormSlider
+};

package/dist/components/FormComponents/FormSlider/FormSlider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,49 @@
+import { jsx as s } from "react/jsx-runtime";
+import { r as a, s as n } from "../../../react.esm-BeDwcQWb.js";
+import { FormSlider as l } from "./FormSlider.js";
+import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const o = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({
+    render: t
+  }) => t({
+    field: {
+      onChange: o
+    },
+    fieldState: { error: { message: "error" } }
+  }),
+  useFormContext: () => ({
+    control: {
+      register: e.fn(),
+      unregister: e.fn(),
+      getFieldState: e.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: e.fn(),
+        array: e.fn(),
+        state: e.fn()
+      },
+      _getWatch: e.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    watch: () => "2024-08-07",
+    setValue: o
+  })
+}));
+m("FormSlider Test", () => {
+  i("render FormSlider", () => {
+    a(/* @__PURE__ */ s(l, { propertyName: "slide", label: "slide", maxValue: 10, minValue: 0, step: 2 }));
+    const t = n.getByRole("slider");
+    r(t).toBeInTheDocument(), r(t).toHaveAttribute("max", "10"), r(t).toHaveAttribute("min", "0"), r(t).toHaveAttribute("step", "2");
+  });
+});

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

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { FieldValues, Path, PathValue, Validate, ValidationRule } from 'react-hook-form';
+/**
+ * a generic FormText property type. the generic T represents the interface, which is used in the form, like {@link CreateOrganizationDto}
+ */
+type FormTextProps<T extends FieldValues> = {
+    /** the path to the property, like Address.AddressLine1 */
+    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 */
+    type?: string;
+    /** a prefix text */
+    prefixText?: string;
+    /** the input mode of the field */
+    inputMode?: 'search' | 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | undefined;
+    trailingIcon?: ReactNode;
+    /**
+     * the trigger to validate the field. default is 'likeForm'
+     * @default 'likeForm'
+     * @example 'onBlur' or 'onChange'
+     */
+    trigger?: 'onBlur' | 'onChange' | 'likeForm';
+    /**
+     * a custom validation function or an object with multiple validation functions
+     */
+    validate?: Validate<PathValue<T, Path<T>>, T> | Record<string, Validate<PathValue<T, Path<T>>, T>>;
+};
+/**
+ * creates a Textfield which should be part of a form component.
+ * the field is wrapped by the react hook forms {@link Controller} component.
+ * @param disabled if the field is disabled
+ * @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
+ * @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;
+export {};

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

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

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

@@ -0,0 +1 @@
+export {};