@hortiview/shared-components 0.0.4730 → 0.0.4779

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

@@ -0,0 +1,36 @@
+import { FieldValues, Path } from 'react-hook-form';
+type DatePickerProps<T extends FieldValues> = {
+    /** Name of the property that this date picker represents. */
+    propertyName: Path<T>;
+    /** Label to be displayed with the date picker. */
+    label: string;
+    /** Determines if this input is mandatory. */
+    required?: boolean;
+    /** Custom text to show when the required field is not filled. */
+    requiredText?: string;
+    /** ClassName */
+    className?: string;
+    /** Add the number of years to subtract from the current date as bottom of range */
+    minRangeYear?: number;
+    /** Add the number of years to add to the current date as top of range */
+    maxRangeYear?: number;
+    /** Locale to be used for the date picker. */
+    locale?: string;
+};
+/**
+ * FormDatePicker is a custom form input component for selecting dates.
+ * It is integrated with react-hook-form for form management.
+ *
+ * @param propertyName - the name of the property this date picker maps to in the form.
+ * @param label - label displayed along with the date picker.
+ * @param required - determines if the date input is required.
+ * @param requiredText - text to be shown if the required date is not selected.
+ * @param className - class name to be passed if provided.
+ * @param minRangeYear - number of years to subtract from the current date as bottom of range
+ * @param maxRangeYear - number of years to add to the current date as top of range
+ * @param locale - locale to be used for the date picker.
+ *
+ * @returns A JSX element that renders a date picker form input.
+ */
+export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, required, requiredText, className, minRangeYear, maxRangeYear, locale, }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import "../../../assets/FormDatePicker.css";
+import { jsx as r, jsxs as h } 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,
+  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,
+    {
+      name: t,
+      rules: {
+        required: a
+      },
+      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 })
+      ] })
+    }
+  );
+};
+export {
+  N as FormDatePicker
+};

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

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

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

@@ -0,0 +1,69 @@
+import { jsx as o } from "react/jsx-runtime";
+import { r as n, s as a, f as m } 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";
+const f = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({
+    render: t
+  }) => t({
+    field: {
+      onChange: f
+    }
+  }),
+  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"
+  })
+}));
+l("FormDatePicker Test", () => {
+  c("render FormDatePicker", () => {
+    n(
+      /* @__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
+        }
+      )
+    );
+    const t = a.getByRole("textbox");
+    m.change(t, { target: { value: "1.1.24" } });
+  });
+});

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