@hortiview/shared-components 0.0.1

package/dist/components/ListArea/ListArea.test.d.ts

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

package/dist/components/ListArea/ListArea.test.js

@@ -0,0 +1,104 @@
+import { jsx as r, Fragment as i } from "react/jsx-runtime";
+import { TypoButton as p } from "@element/react-components";
+import { d as m, t as n, r as s, s as a, g as t, f as u } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { ListArea as c } from "./ListArea.js";
+import { g as h } from "../../ListAreaService-D16C1IfO.js";
+m("ListArea Test", () => {
+  const o = [
+    {
+      id: "1",
+      title: "user.personal_information",
+      icon: "account_circle",
+      route: "/personal-profile/personal-information",
+      component: /* @__PURE__ */ r(i, { children: "Personal information selected" })
+    },
+    {
+      id: "2",
+      title: "user.data_privacy",
+      icon: "privacy_tip",
+      route: "/personal-profile/data-privacy",
+      component: /* @__PURE__ */ r(i, { children: "Data Privacy selected" })
+    },
+    {
+      id: "3",
+      title: "user.security",
+      icon: "security",
+      route: "/personal-profile/security",
+      component: /* @__PURE__ */ r(i, { children: "Security selected" })
+    }
+  ];
+  n("render ListArea options properly", () => {
+    s(
+      /* @__PURE__ */ r(
+        c,
+        {
+          elements: o,
+          pathname: "/personal-profile/data-privacy",
+          routerLinkElement: void 0
+        }
+      )
+    );
+    const e = a.getAllByRole("option");
+    t(e.length).toBe(3), t(e[0]).toHaveTextContent(/privacy_tip/), t(e[0]).toHaveTextContent(/user.data_privacy/), t(e[0]).toHaveTextContent(/arrow_right/), t(e[1]).toHaveTextContent(/account_circle/), t(e[1]).toHaveTextContent(/user.personal_information/), t(e[1]).toHaveTextContent(/arrow_right/), t(e[2]).toHaveTextContent(/security/), t(e[2]).toHaveTextContent(/user.security/), t(e[2]).toHaveTextContent(/arrow_right/);
+  }), n("render ListArea with search bar", () => {
+    s(
+      /* @__PURE__ */ r(
+        c,
+        {
+          elements: o,
+          hasSearch: !0,
+          searchPlaceholder: "search",
+          pathname: "/personal-profile/data-privacy",
+          routerLinkElement: void 0
+        }
+      )
+    );
+    const e = a.getByRole("textbox", { name: "search" });
+    t(e).toBeInTheDocument(), t(e).toHaveAttribute("placeholder", "search");
+  }), n("filter ListArea options on setting search value", () => {
+    s(
+      /* @__PURE__ */ r(
+        c,
+        {
+          elements: o,
+          hasSearch: !0,
+          pathname: "/personal-profile/data-privacy",
+          routerLinkElement: void 0
+        }
+      )
+    );
+    const e = a.getByRole("textbox", { name: "search" });
+    u.change(e, { target: { value: "personal" } });
+    const l = a.getAllByRole("option");
+    t(l.length).toBe(1), t(l[0]).toHaveTextContent(/user.personal_information/);
+  });
+});
+m("ListAreaService Test", () => {
+  const o = [
+    {
+      id: "1",
+      groupName: "farm-1",
+      title: "GH1",
+      icon: "grass",
+      route: "/farm-1/gh1"
+    },
+    {
+      id: "2",
+      groupName: "farm-1",
+      title: "GH2",
+      icon: "grass",
+      route: "/farm-1/gh2"
+    },
+    {
+      id: "3",
+      groupName: "farm-2",
+      title: "GH3",
+      icon: "grass",
+      route: "/farm-2/gh3"
+    }
+  ];
+  n("should return grouped items", () => {
+    const e = h(o, "", "", void 0);
+    t(e.length).toBe(2), t(e[0].groupName).toStrictEqual(/* @__PURE__ */ r(p, { tag: "span", children: "farm-1" })), t(e[0].items.length).toBe(2), t(e[1].groupName).toStrictEqual(/* @__PURE__ */ r(p, { tag: "span", children: "farm-2" })), t(e[1].items.length).toBe(1);
+  });
+});

package/dist/components/ListArea/ListAreaService.d.ts

@@ -0,0 +1,64 @@
+import { ChangeEvent } from 'react';
+import { LinkProps } from '../../types/internal/ReactRouterTypes';
+import { ListElement } from '../../types/ListElement';
+/**
+ * Groups items by groupName property and maps them to the schema of Bayer's List component
+ * @param items the items to group
+ * @param pathname current browser location
+ * @param itemClassName custom class name or CSS module style
+ * @returns an array objects with the schema { groupName, id, items }
+ */
+export declare const getGroupedItems: (items: ListElement[], pathname: string, itemClassName: string, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
+    groupName: string | JSX.Element;
+    id: string;
+    items: object[];
+}[];
+/**
+ * Maps items to the schema of Bayer's List component
+ * @param items the items to map
+ * @param pathname current browser location
+ * @param itemClassName custom class name or CSS module style
+ * @returns an array of objects with List component schema
+ */
+export declare const getListedItems: (items: ListElement[], pathname: string, itemClassName: string, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
+    select: boolean;
+    primaryText: import("react/jsx-runtime").JSX.Element;
+    secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    nonInteractive: boolean | undefined;
+    value: string | undefined;
+    componentProps: {
+        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "badge" | "meta" | "image" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "badge" | "meta" | "image" | "avatar" | "lgImage" | "thumbnail";
+        className: string;
+        onClick: (_: ChangeEvent, value: string) => void | undefined;
+        tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;
+        to: string | undefined;
+    };
+}[];
+/**
+ * Maps an item to the schema of Bayer's List component
+ * @param element the item to map
+ * @param pathname current browser location
+ * @param itemClassName custom class name or CSS module style
+ * @param isGrouped whether the item is part of a group
+ * @returns an object with List component schema
+ */
+export declare const mapListElement: (element: ListElement, pathname: string | undefined, itemClassName: string | undefined, isGrouped: boolean, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
+    select: boolean;
+    primaryText: import("react/jsx-runtime").JSX.Element;
+    secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    nonInteractive: boolean | undefined;
+    value: string | undefined;
+    componentProps: {
+        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "badge" | "meta" | "image" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "badge" | "meta" | "image" | "avatar" | "lgImage" | "thumbnail";
+        className: string;
+        onClick: (_: ChangeEvent, value: string) => void | undefined;
+        tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;
+        to: string | undefined;
+    };
+};

package/dist/components/ListArea/ListAreaService.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "@element/react-components";
+import "../Iconify/Iconify.js";
+import { g as s, a as i, m as a } from "../../ListAreaService-D16C1IfO.js";
+import "../../enums/AvailableCustomIcons.js";
+export {
+  s as getGroupedItems,
+  i as getListedItems,
+  a as mapListElement
+};

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,24 @@
+type SearchBarProps = {
+    /**
+     * the current search term
+     */
+    searchTerm: string;
+    /**
+     * the function to set the search term
+     */
+    setSearchTerm: (value: string) => void;
+    /**
+     * the placeholder of the search input
+     */
+    placeholder?: string;
+    /**
+     * if true the field is smaller, normal size otherwise, default: false
+     */
+    dense?: boolean;
+    /**
+     * optional className to customize the searchbar style
+     */
+    className?: string;
+};
+export declare const SearchBar: ({ className, dense, searchTerm, setSearchTerm, placeholder, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchBar/SearchBar.js

@@ -0,0 +1,33 @@
+import "../../assets/SearchBar.css";
+import { jsx as t } from "react/jsx-runtime";
+import { Textfield as c, IconButton as i } from "@element/react-components";
+const s = "_searchbar_1fl50_1", u = {
+  searchbar: s
+}, d = ({
+  className: r = "",
+  dense: n = !1,
+  searchTerm: a,
+  setSearchTerm: o,
+  placeholder: e
+}) => /* @__PURE__ */ t(
+  c,
+  {
+    className: `${r ?? ""} ${u.searchbar}`,
+    dense: n,
+    variant: "outlined",
+    placeholder: e,
+    value: a,
+    onChange: (l) => o(l.target.value),
+    fullWidth: !0,
+    trailingIcon: /* @__PURE__ */ t(
+      i,
+      {
+        icon: a ? "close" : "search",
+        onClick: () => a ? o("") : void 0
+      }
+    )
+  }
+);
+export {
+  d as SearchBar
+};

package/dist/components/SearchBar/SearchBar.test.d.ts

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

package/dist/components/SearchBar/SearchBar.test.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { d as h, t as r, r as s, v as o, g as e, s as t, f as l, a as m } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { SearchBar as n } from "./SearchBar.js";
+h("SearchBar Test", () => {
+  r("renders SearchBar component", () => {
+    s(
+      /* @__PURE__ */ a(n, { searchTerm: "searchValue", setSearchTerm: o.fn(), placeholder: "search" })
+    ), e(t.getByRole("textbox")).toBeInTheDocument(), e(t.getByRole("textbox")).toHaveAttribute("placeholder", "search"), e(t.getByRole("textbox")).toHaveAttribute("value", "searchValue"), e(t.getByRole("textbox").parentElement).not.toHaveClass("lmnt-text-field--dense"), e(t.getByText("close")).toBeInTheDocument();
+  }), r("renders SearchBar component with custom classname", () => {
+    s(/* @__PURE__ */ a(n, { searchTerm: "search", setSearchTerm: o.fn(), className: "searchClass" })), e(t.getByRole("textbox").parentElement).toHaveClass("searchClass");
+  }), r("renders SearchBar component with dense look", () => {
+    s(/* @__PURE__ */ a(n, { searchTerm: "search", setSearchTerm: o.fn(), dense: !0 })), e(t.getByRole("textbox").parentElement).toHaveClass("lmnt-text-field--dense");
+  }), r("renders SearchBar component with search icon", () => {
+    s(/* @__PURE__ */ a(n, { searchTerm: "", setSearchTerm: o.fn(), dense: !0 })), e(t.getByText("search")).toBeInTheDocument();
+  }), r("renders SearchBar and changes value", () => {
+    const c = o.fn();
+    s(/* @__PURE__ */ a(n, { searchTerm: "", setSearchTerm: c })), e(t.getByText("search")).toBeInTheDocument(), e(t.getByRole("textbox")).toHaveAttribute("value", ""), l.change(t.getByRole("textbox"), { target: { value: "searchValue" } }), m(() => {
+      e(c).toHaveBeenCalledTimes(1), e(c).toHaveBeenCalledWith("searchValue");
+    });
+  });
+});

package/dist/components/VerticalDivider/VerticalDivider.d.ts

@@ -0,0 +1,13 @@
+type VerticalDividerProps = {
+    /**
+     * provided height in rem
+     * default: 2rem
+     */
+    height?: string;
+    /**
+     * optional className to customize the divider style
+     */
+    className?: string;
+};
+export declare const VerticalDivider: ({ height, className }: VerticalDividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VerticalDivider/VerticalDivider.js

@@ -0,0 +1,8 @@
+import "../../assets/VerticalDivider.css";
+import { jsx as e } from "react/jsx-runtime";
+const d = "_divider_dqwln_1", t = {
+  divider: d
+}, v = ({ height: i = "2rem", className: r = "" }) => /* @__PURE__ */ e("div", { className: `${t.divider} ${r}`, style: { height: i } });
+export {
+  v as VerticalDivider
+};

package/dist/components/VerticalDivider/VerticalDivider.test.d.ts

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

package/dist/components/VerticalDivider/VerticalDivider.test.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { d, t as s, r, g as i } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { VerticalDivider as l } from "./VerticalDivider.js";
+d("VerticalDivider Test", () => {
+  s("it should render with basic styling", () => {
+    r(/* @__PURE__ */ e(l, {}));
+    const t = document.body.firstElementChild;
+    i(t?.firstChild).toHaveClass(/divider/), i(t?.firstChild).toHaveStyle({ height: "2rem" });
+  }), s("it should render with custom styling", () => {
+    r(/* @__PURE__ */ e(l, { height: "3rem", className: "plus" }));
+    const t = document.body.firstElementChild;
+    i(t?.firstChild).toHaveClass(/divider/), i(t?.firstChild).toHaveClass(/plus/), i(t?.firstChild).toHaveStyle({ height: "3rem" });
+  });
+});

package/dist/enums/AvailableCustomIcons.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The available icons for the {@link Iconify} component.
+ */
+export declare enum AvailableCustomIcons {
+    'cloud-rain' = 0,
+    'cloud-sunny' = 1,
+    'farm-delete' = 2,
+    'block-delete' = 3,
+    'greenhouse-delete' = 4,
+    block = 5,
+    cloud = 6,
+    farm = 7,
+    subscription = 8,
+    wind = 9
+}

package/dist/enums/AvailableCustomIcons.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((d) => (d[d["cloud-rain"] = 0] = "cloud-rain", d[d["cloud-sunny"] = 1] = "cloud-sunny", d[d["farm-delete"] = 2] = "farm-delete", d[d["block-delete"] = 3] = "block-delete", d[d["greenhouse-delete"] = 4] = "greenhouse-delete", d[d.block = 5] = "block", d[d.cloud = 6] = "cloud", d[d.farm = 7] = "farm", d[d.subscription = 8] = "subscription", d[d.wind = 9] = "wind", d))(r || {});
+export {
+  r as AvailableCustomIcons
+};

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Custom hook that tells you whether a given media query is active.
+ *
+ * Inspired by https://usehooks.com/useMedia/
+ * https://gist.github.com/gragland/ed8cac563f5df71d78f4a1fefa8c5633
+ */
+export declare function useMediaQuery(query: string): boolean;
+export declare function useBreakpoints(): {
+    isXs: boolean;
+    isSm: boolean;
+    isMd: boolean;
+    isLg: boolean;
+    isXlg: boolean;
+    active: string;
+};

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,6 @@
+import "react";
+import { u as a, b as o } from "../useBreakpoint-DyAmuka7.js";
+export {
+  a as useBreakpoints,
+  o as useMediaQuery
+};