@hybridcore/ui 1.5.79 → 1.5.82

package/dist/components/paginated-list/index.js

@@ -1,122 +1,95 @@
-import { jsxs as c, jsx as o, Fragment as p } from "react/jsx-runtime";
-import { List as y, Box as j, Divider as P, ListItem as z, ListItemText as A, Typography as B, Button as u, TablePagination as F } from "@mui/material";
-import G from "lodash";
-import { useState as g } from "react";
-import { Container as M } from "../container/index.js";
-const U = [5, 10, 25, 50];
-function K({
-  title: f,
-  data: l = [],
-  payload: n,
-  totalCount: v,
-  onChange: s,
-  onItemClick: t,
-  sx: w
-}) {
-  const [m, h] = g(0), [b, L] = g(5), [R, x] = g([]), a = (n == null ? void 0 : n.pageNumber) !== void 0 ? n.pageNumber : m, i = (n == null ? void 0 : n.rows) !== void 0 ? n.rows : b, T = (e, r) => {
-    h(r), s && s({ ...n, pageNumber: r, rows: i });
-  }, _ = (e) => {
-    const r = parseInt(e.target.value, 10);
-    L(r), h(0), s && s({ ...n, pageNumber: 0, rows: r });
-  }, D = (e) => (r) => {
-    r.stopPropagation(), x((d) => [...d, e]);
-  }, N = (e) => (r) => {
-    r.stopPropagation(), x((d) => d.filter((O) => O !== e));
-  }, S = s ? v || 0 : l.length, E = s ? l : l.slice(a * i, (a + 1) * i);
-  return /* @__PURE__ */ c(
-    M,
-    {
-      title: f,
-      headerSx: {
-        py: 2,
-        px: 3
-      },
-      contentSx: {
-        p: "0px !important",
-        display: "flex",
-        flexDirection: "column",
-        flex: 1,
-        overflow: "hidden"
-      },
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        ...w
-      },
-      children: [
-        /* @__PURE__ */ o(y, { disablePadding: !0, sx: { flex: 1, overflowY: "auto" }, children: E.map((e, r) => /* @__PURE__ */ c(j, { children: [
-          r === 0 && /* @__PURE__ */ o(P, { component: "li" }),
-          /* @__PURE__ */ o(
-            z,
-            {
-              onClick: () => t == null ? void 0 : t(e),
-              sx: {
-                cursor: t ? "pointer" : "default",
-                "&:hover": t ? { backgroundColor: "action.hover" } : void 0
-              },
-              children: /* @__PURE__ */ o(
-                A,
+import { jsxs as i, jsx as n, Fragment as a } from "react/jsx-runtime";
+import { Box as f, Divider as s, ListItem as w, ListItemIcon as T, ListItemText as R, Typography as _, Button as c, TablePagination as b } from "@mui/material";
+import I from "lodash";
+import { usePaginatedListLogic as O } from "./logic.js";
+import { PaginatedListRoot as k, PaginatedListHeader as D, PaginatedListContent as E, PaginatedListList as S, PaginatedListPagination as j } from "./styled.js";
+const z = [5, 10, 25, 50];
+function M(l) {
+  const {
+    title: t,
+    displayData: p,
+    count: g,
+    page: h,
+    rowsPerPage: P,
+    expanded: L,
+    handleChangePage: x,
+    handleChangeRowsPerPage: m,
+    readMore: u,
+    showLess: y,
+    onItemClick: o,
+    ownerState: r,
+    sx: v,
+    other: C
+  } = O(l);
+  return /* @__PURE__ */ i(k, { ownerState: r, sx: v, elevation: 4, ...C, children: [
+    t && /* @__PURE__ */ n(D, { title: t, ownerState: r }),
+    /* @__PURE__ */ i(E, { ownerState: r, children: [
+      /* @__PURE__ */ n(S, { disablePadding: !0, ownerState: r, children: p.map((e, d) => /* @__PURE__ */ i(f, { children: [
+        d === 0 && /* @__PURE__ */ n(s, { component: "li" }),
+        /* @__PURE__ */ i(
+          w,
+          {
+            onClick: () => o == null ? void 0 : o(e),
+            sx: {
+              cursor: o ? "pointer" : "default",
+              "&:hover": o ? { backgroundColor: "action.hover" } : void 0
+            },
+            children: [
+              e.icon && /* @__PURE__ */ n(T, { children: e.icon }),
+              /* @__PURE__ */ n(
+                R,
                 {
                   primary: e.title,
                   secondaryTypographyProps: {
                     component: "div"
                   },
-                  secondary: /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(B, { variant: "body2", children: R.includes(e.id) ? /* @__PURE__ */ c(p, { children: [
+                  secondary: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n(_, { variant: "body2", children: L.includes(e.id) ? /* @__PURE__ */ i(a, { children: [
                     e.description,
-                    /* @__PURE__ */ o(
-                      u,
+                    /* @__PURE__ */ n(
+                      c,
                       {
                         variant: "text",
                         size: "small",
                         sx: { py: 0, px: 1 },
-                        onClick: N(e.id),
+                        onClick: y(e.id),
                         children: "show less"
                       }
                     )
-                  ] }) : /* @__PURE__ */ c(p, { children: [
-                    G.truncate(e.description, { length: 100 }),
-                    e.description && e.description.length > 100 && /* @__PURE__ */ o(
-                      u,
+                  ] }) : /* @__PURE__ */ i(a, { children: [
+                    I.truncate(e.description, { length: 100 }),
+                    e.description && e.description.length > 100 && /* @__PURE__ */ n(
+                      c,
                       {
                         variant: "text",
                         size: "small",
                         sx: { py: 0, px: 1 },
-                        onClick: D(e.id),
+                        onClick: u(e.id),
                         children: "read more"
                       }
                     )
                   ] }) }) })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ o(P, { component: "li" })
-        ] }, e.id || r)) }),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            style: {
-              borderTop: "1px solid lightgray"
-            },
-            children: /* @__PURE__ */ o(
-              F,
-              {
-                component: "div",
-                count: S,
-                page: a,
-                rowsPerPage: i,
-                rowsPerPageOptions: U,
-                onPageChange: T,
-                onRowsPerPageChange: _
-              }
-            )
+            ]
           }
-        )
-      ]
-    }
-  );
+        ),
+        /* @__PURE__ */ n(s, { component: "li" })
+      ] }, e.id || d)) }),
+      /* @__PURE__ */ n(j, { ownerState: r, children: /* @__PURE__ */ n(
+        b,
+        {
+          component: "div",
+          count: g,
+          page: h,
+          rowsPerPage: P,
+          rowsPerPageOptions: z,
+          onPageChange: x,
+          onRowsPerPageChange: m
+        }
+      ) })
+    ] })
+  ] });
 }
 export {
-  K as PaginatedList
+  M as PaginatedList
 };

package/dist/components/paginated-list/logic.js

@@ -0,0 +1,45 @@
+import { useThemeProps as D } from "@mui/material";
+import { useState as g } from "react";
+const _ = (l) => {
+  const i = D({ props: l, name: "MuiPaginatedList" }), {
+    title: u,
+    data: a = [],
+    payload: e,
+    totalCount: m,
+    onChange: t,
+    onItemClick: w,
+    sx: d,
+    ...h
+  } = i, [L, p] = g(0), [f, C] = g(5), [b, P] = g([]), r = (e == null ? void 0 : e.pageNumber) !== void 0 ? e.pageNumber : L, n = (e == null ? void 0 : e.rows) !== void 0 ? e.rows : f, v = (s, o) => {
+    p(o), t && t({ ...e, pageNumber: o, rows: n });
+  }, x = (s) => {
+    const o = parseInt(s.target.value, 10);
+    C(o), p(0), t && t({ ...e, pageNumber: 0, rows: o });
+  }, N = (s) => (o) => {
+    o.stopPropagation(), P((c) => [...c, s]);
+  }, R = (s) => (o) => {
+    o.stopPropagation(), P((c) => c.filter((k) => k !== s));
+  }, I = t ? m || 0 : a.length, M = t ? a : a.slice(r * n, (r + 1) * n), S = {
+    ...i
+  };
+  return {
+    title: u,
+    data: a,
+    displayData: M,
+    count: I,
+    page: r,
+    rowsPerPage: n,
+    expanded: b,
+    handleChangePage: v,
+    handleChangeRowsPerPage: x,
+    readMore: N,
+    showLess: R,
+    onItemClick: w,
+    ownerState: S,
+    sx: d,
+    other: h
+  };
+};
+export {
+  _ as usePaginatedListLogic
+};

package/dist/components/paginated-list/styled.js

@@ -0,0 +1,49 @@
+import { styled as t, Card as e, CardHeader as a, CardContent as n, List as o } from "@mui/material";
+const s = t(e, {
+  name: "MuiPaginatedList",
+  slot: "Root"
+})(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+})), r = t(a, {
+  name: "MuiPaginatedList",
+  slot: "Header"
+})(({ theme: i }) => ({
+  padding: i.spacing(3),
+  paddingBottom: i.spacing(2),
+  "& .MuiCardHeader-title": {
+    fontSize: "1rem",
+    fontWeight: 500
+  },
+  "& .MuiCardHeader-subheader": {
+    fontSize: ".875rem"
+  }
+})), l = t(n, {
+  name: "MuiPaginatedList",
+  slot: "Content"
+})(() => ({
+  padding: "0px !important",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "hidden"
+})), g = t(o, {
+  name: "MuiPaginatedList",
+  slot: "List"
+})(() => ({
+  flex: 1,
+  overflowY: "auto"
+})), p = t("div", {
+  name: "MuiPaginatedList",
+  slot: "Pagination"
+})(({ theme: i }) => ({
+  borderTop: `1px solid ${i.palette.divider}`
+}));
+export {
+  l as PaginatedListContent,
+  r as PaginatedListHeader,
+  g as PaginatedListList,
+  p as PaginatedListPagination,
+  s as PaginatedListRoot
+};

package/dist/components/profile-card/index.js

@@ -0,0 +1,80 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { ArrowRight as d } from "@mui/icons-material";
+import { Box as l, Typography as n } from "@mui/material";
+import p from "lodash";
+import x from "react";
+import b from "../instance-variable-list/variable.js";
+import { useProfileCardLogic as u } from "./logic.js";
+import { ProfileCardRoot as v, ProfileCardImage as P, ProfileCardHierarchy as C, ProfileCardVariables as I } from "./styled.js";
+function A(s) {
+  const {
+    instance: r,
+    imageUrl: h,
+    templateHierarchy: m,
+    propertyNames: c,
+    ownerState: a,
+    sx: f,
+    templateIconUrl: g,
+    other: y
+  } = u(s);
+  return console.log(c, 26), /* @__PURE__ */ i(v, { ownerState: a, sx: f, ...y, children: [
+    /* @__PURE__ */ e(l, { mb: 2, children: /* @__PURE__ */ e(
+      P,
+      {
+        src: h || "https://picsum.photos/600/400",
+        alt: "Profile",
+        ownerState: a
+      }
+    ) }),
+    /* @__PURE__ */ i(l, { display: "flex", alignItems: "center", mb: 1, children: [
+      /* @__PURE__ */ e("img", { src: g, alt: "Template Icon" }),
+      /* @__PURE__ */ e(n, { variant: "h5", component: "h2", gutterBottom: !0, children: r.title })
+    ] }),
+    r.description && /* @__PURE__ */ e(n, { variant: "body1", paragraph: !0, children: r.description }),
+    /* @__PURE__ */ i(C, { ownerState: a, children: [
+      m.map((t, o) => /* @__PURE__ */ i(l, { display: "inline", alignItems: "center", children: [
+        o > 0 && /* @__PURE__ */ e(
+          d,
+          {
+            sx: { height: 20, verticalAlign: "middle" },
+            color: "disabled"
+          }
+        ),
+        /* @__PURE__ */ e(n, { variant: "caption", color: "text.secondary", children: t.name })
+      ] }, t.id || o)),
+      /* @__PURE__ */ i(l, { display: "inline", alignItems: "center", children: [
+        m.length > 0 && /* @__PURE__ */ e(
+          d,
+          {
+            sx: { height: 20, verticalAlign: "middle" },
+            color: "disabled"
+          }
+        ),
+        /* @__PURE__ */ e(
+          n,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            fontWeight: "bold",
+            children: r.template.name
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e(I, { ownerState: a, children: p.keys(r.variables).map((t, o) => /* @__PURE__ */ e(
+      b,
+      {
+        type: t,
+        data: p.get(r.variables, t),
+        hashPrefix: `${r.template.type}-${r.template.templateKey}-`,
+        properties: c
+      },
+      o
+    )) })
+  ] });
+}
+const V = x.memo(A);
+export {
+  A as ProfileCard,
+  V as default
+};

package/dist/components/profile-card/logic.js

@@ -0,0 +1,33 @@
+import { useThemeProps as g } from "@mui/material";
+import { useMemo as n } from "react";
+import { getTemplateHierarchy as M } from "../../utils/ontology.js";
+const $ = (c) => {
+  const a = g({ props: c, name: "MuiProfileCard" }), { instance: t, templates: e, sx: m, ...i } = a, l = t.profileImageUrl, o = e.get(t.template.id), f = o == null ? void 0 : o.icon, h = n(() => {
+    const r = e.get(t.template.id);
+    return r ? M(e, r) : [];
+  }, [e, t.template.id]), u = n(() => {
+    const r = /* @__PURE__ */ new Map();
+    return e && e.forEach((s) => {
+      s.properties.forEach((p) => {
+        const d = `${s.type}-${s.templateKey}-${p.propertyId}`;
+        r.set(d, p.name);
+      });
+    }), r;
+  }, [e]), y = {
+    ...a
+  };
+  return {
+    instance: t,
+    templates: e,
+    imageUrl: l,
+    templateHierarchy: h,
+    propertyNames: u,
+    ownerState: y,
+    sx: m,
+    templateIconUrl: f,
+    other: i
+  };
+};
+export {
+  $ as useProfileCardLogic
+};

package/dist/components/profile-card/styled.js

@@ -0,0 +1,43 @@
+import { styled as e, Container as i, Box as a } from "@mui/material";
+const d = e(i, {
+  name: "MuiProfileCard",
+  slot: "Root",
+  overridesResolver: (r, o) => o.root
+})(({ theme: r }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: r.spacing(3),
+  borderRadius: r.shape.borderRadius * 2,
+  boxShadow: r.shadows[1],
+  backgroundColor: r.palette.background.paper
+})), l = e("img", {
+  name: "MuiProfileCard",
+  slot: "Image",
+  overridesResolver: (r, o) => o.image
+})(({ theme: r }) => ({
+  maxWidth: 200,
+  borderRadius: "100%",
+  height: 200,
+  marginBottom: r.spacing(2)
+})), t = e(a, {
+  name: "MuiProfileCard",
+  slot: "Hierarchy",
+  overridesResolver: (r, o) => o.hierarchy
+})(({ theme: r }) => ({
+  marginLeft: 0,
+  marginBottom: r.spacing(2),
+  textAlign: "left"
+})), n = e(a, {
+  name: "MuiProfileCard",
+  slot: "Variables",
+  overridesResolver: (r, o) => o.variables
+})(({ theme: r }) => ({
+  paddingTop: r.spacing(2)
+}));
+export {
+  t as ProfileCardHierarchy,
+  l as ProfileCardImage,
+  d as ProfileCardRoot,
+  n as ProfileCardVariables
+};