@pibit.ai/cure-design-system 0.3.4 → 0.3.6

package/dist/patterns/table/TableWrapper.js

@@ -0,0 +1,141 @@
+import { jsx as t, jsxs as m, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as E, useState as g, useRef as S, useEffect as O } from "react";
+import { createPortal as j } from "react-dom";
+import { TableCard as H, Table as f } from "./table.js";
+import { cx as x } from "../../utils/cn.js";
+const F = E(function({
+  data: d,
+  columns: a,
+  renderRowCell: i,
+  onRowClick: l,
+  arialabel: c,
+  size: n = "sm",
+  allowDefaultRowClass: y = !1,
+  centeredHeaders: h = [],
+  rootClassName: o,
+  removeBorders: k,
+  headerClassName: W,
+  isRowExpandable: w,
+  renderExpandedContent: v
+}, u) {
+  return /* @__PURE__ */ t(H.Root, { ref: u, className: x("overflow-x-auto", o), size: n, children: /* @__PURE__ */ m(f, { "aria-label": c, size: n, children: [
+    /* @__PURE__ */ t(f.Header, { className: x("sticky top-0", W), children: a.map((e, p) => /* @__PURE__ */ t(
+      f.Head,
+      {
+        sticky: e.sticky,
+        stickyOffset: e.stickyOffset,
+        id: e.key,
+        label: e.label,
+        isRowHeader: !0,
+        allowsSorting: e.allowsSorting,
+        headerCellClass: h.includes(e.key) ? "justify-center" : "",
+        style: {
+          maxWidth: e.maxWidth,
+          minWidth: e.maxWidth,
+          width: e.maxWidth
+        },
+        className: "overflow-hidde"
+      },
+      p
+    )) }),
+    /* @__PURE__ */ t(f.Body, { items: d, children: (e) => {
+      const p = w ? w(e) : !1, b = e.id || e.rule_id || String(e);
+      return /* @__PURE__ */ t(
+        f.Row,
+        {
+          onAction: () => l == null ? void 0 : l(e),
+          id: b,
+          isExpandable: p,
+          renderExpandedContent: p ? v : void 0,
+          columns: a,
+          className: x(
+            l && "cursor-pointer",
+            y ? "prose" : "",
+            k && "[&>td]:after:hidden"
+            // Remove row borders
+          ),
+          children: a.map((s, T) => /* @__PURE__ */ t(
+            f.Cell,
+            {
+              sticky: s.sticky,
+              stickyOffset: s.stickyOffset,
+              style: {
+                maxWidth: s.maxWidth,
+                minWidth: s.maxWidth,
+                width: s.maxWidth
+              },
+              className: "overflow-x-hidden text-left",
+              children: T === 0 && p ? /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: i(s.key, e[s.key], e) }) : i(s.key, e[s.key], e)
+            },
+            s.key
+          ))
+        },
+        b
+      );
+    } })
+  ] }) });
+}), $ = ({
+  content: r,
+  className: d = "",
+  link: a = !1,
+  tooltipPosition: i = "center"
+}) => {
+  const [l, c] = g(!1), [n, y] = g({ top: 0, left: 0 }), h = S(null);
+  return O(() => {
+    if (l && h.current) {
+      const o = h.current.getBoundingClientRect();
+      y({
+        top: o.top - 8,
+        // 8px above the element (accounts for tooltip height + margin)
+        left: i === "start" ? o.left : o.left + o.width / 2
+        // start: left align; center: center horizontally
+      });
+    }
+  }, [l, i]), /* @__PURE__ */ m(N, { children: [
+    /* @__PURE__ */ t(
+      "span",
+      {
+        ref: h,
+        className: x(
+          "whitespace-nowrap overflow-hidden text-ellipsis w-full text-left text-secondary block",
+          d,
+          a ? "!text-[var(--color-brand-600)]" : ""
+        ),
+        onMouseEnter: () => c(!0),
+        onMouseLeave: () => c(!1),
+        children: a ? /* @__PURE__ */ t("a", { href: r, target: "_blank", children: r }) : r
+      }
+    ),
+    l && j(
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: x(
+            "fixed px-3 py-2 text-xs font-semibold text-white bg-primary-solid rounded-lg shadow-lg pointer-events-none -translate-y-full z-999 max-w-2xs lg:max-w-xs xl:max-w-sm break-words whitespace-normal",
+            i === "center" && "-translate-x-1/2",
+            d
+          ),
+          style: {
+            top: `${n.top}px`,
+            left: `${n.left}px`
+          },
+          children: r
+        }
+      ),
+      document.body
+    )
+  ] });
+}, I = (r, d = "", a, i) => r === "" || r === "-" ? /* @__PURE__ */ t("span", { className: `text-left ${d}`, children: r || "-" }) : /* @__PURE__ */ t(
+  $,
+  {
+    content: r,
+    className: d,
+    link: a,
+    tooltipPosition: i
+  }
+);
+export {
+  $ as EllipsisContentWithTooltip,
+  F as TableWrapper,
+  I as createEllipsisContent
+};

package/dist/patterns/table/index.d.ts

@@ -1,2 +1,3 @@
 export { Table, TableCard, TableCell } from './table';
+export { TableWrapper, EllipsisContentWithTooltip, createEllipsisContent, type TableWrapperProps } from './TableWrapper';
 //# sourceMappingURL=index.d.ts.map

package/dist/patterns/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/patterns/tree/TreeStructure.js

@@ -0,0 +1,110 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useState as O, useEffect as C } from "react";
+import { ChevronRight as b } from "@untitledui/icons";
+import { buildTree as g } from "./helper.js";
+import { motion as x } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence as T } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+const S = ({ data: i, config: r, onNodeClick: o, CustomLeaf: s }) => {
+  const [c, n] = O(() => g(i, r));
+  C(() => {
+    n(g(i, r));
+  }, [i, r]);
+  function p(t, a) {
+    const d = structuredClone(c), l = a.split("-"), m = Number(l[0]);
+    l.shift();
+    let u = d[m];
+    l && (u = l.reduce((v, N) => v = v.children[Number(N)], d[m])), u.isOpen = !u.isOpen, n(d);
+  }
+  function h(t) {
+    o && o(t);
+  }
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c.map((t, a) => /* @__PURE__ */ e(
+    y,
+    {
+      element: t,
+      parentId: String(a),
+      handleClick: p,
+      onNodeClick: h,
+      CustomLeaf: s
+    },
+    t.id || a
+  )) }) });
+}, y = ({
+  element: i,
+  parentId: r,
+  handleClick: o,
+  onNodeClick: s,
+  CustomLeaf: c
+}) => {
+  const n = i.children.length > 0, p = (t) => {
+    t.stopPropagation(), n && o(i, r);
+  }, h = (t) => {
+    t.stopPropagation(), s && s(i);
+  };
+  return /* @__PURE__ */ f("div", { className: "relative", children: [
+    /* @__PURE__ */ f("div", { className: "flex items-center gap-2 py-0.5", children: [
+      /* @__PURE__ */ e("div", { className: "w-4 h-4 flex-shrink-0", onClick: p, children: n && /* @__PURE__ */ e(
+        x.div,
+        {
+          initial: !1,
+          animate: { rotate: i.isOpen ? 90 : 0 },
+          transition: { duration: 0.2, ease: "easeOut" },
+          children: /* @__PURE__ */ e(b, { className: "w-4 h-4 text-[var(--color-gray-400)]" })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: i.type === "JSON" ? "cursor-pointer" : "", onClick: h, children: /* @__PURE__ */ e(c, { data: i, type: i.type }) })
+    ] }),
+    /* @__PURE__ */ e(T, { initial: !1, children: n && (i == null ? void 0 : i.isOpen) && /* @__PURE__ */ e(
+      x.div,
+      {
+        initial: { opacity: 0, height: 0 },
+        animate: {
+          opacity: 1,
+          height: "auto",
+          transition: {
+            height: {
+              duration: 0.1,
+              ease: "easeOut"
+            },
+            opacity: {
+              duration: 0.1,
+              ease: "easeOut"
+            }
+          }
+        },
+        exit: {
+          opacity: 0,
+          height: 0,
+          transition: {
+            height: {
+              duration: 0.3,
+              ease: "easeIn"
+            },
+            opacity: {
+              duration: 0.2,
+              ease: "easeIn"
+            }
+          }
+        },
+        style: { overflow: "clip" },
+        children: /* @__PURE__ */ f("div", { className: "ml-6 relative", children: [
+          /* @__PURE__ */ e("div", { className: "absolute left-[-17px] top-[-6px] bottom-0 w-px bg-[var(--color-gray-200)]" }),
+          /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: i.children.map((t, a) => /* @__PURE__ */ e(
+            y,
+            {
+              element: t,
+              parentId: `${r}-${a}`,
+              handleClick: o,
+              onNodeClick: s,
+              CustomLeaf: c
+            },
+            t.id || `${r}-${a}`
+          )) })
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  S as TreeEngine
+};

package/dist/patterns/tree/helper.js

@@ -0,0 +1,21 @@
+const h = (n, s, i = "") => (Array.isArray(n) ? n : Object.values(n)).map((t, d) => {
+  const l = t.field_identifier ?? t.id ?? String(d), c = i ? `${i}.${l}` : l;
+  let r = [];
+  return s.childrenPaths.forEach((y) => {
+    const a = y.split(".").reduce((e, u) => e == null ? void 0 : e[u], t);
+    if (a) {
+      const e = Array.isArray(a) ? a : Object.values(a);
+      r = [...r, ...e];
+    }
+  }), {
+    id: c,
+    label: t[s.labelKey] ?? "Untitled",
+    type: t.data_type ?? t.type ?? "Untitled",
+    isOpen: !1,
+    children: r.length > 0 ? h(r, s, c) : [],
+    metadata: { ...t }
+  };
+});
+export {
+  h as buildTree
+};

package/dist/patterns/tree/index.d.ts

@@ -0,0 +1,4 @@
+export { TreeEngine, type TreeStructureProps, type TreeConfig } from './TreeStructure';
+export type { TreeNode } from './interface';
+export { buildTree } from './helper';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACvF,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC"}