@likec4/diagram 1.21.0 → 1.22.0

package/dist/likec4diagram/ui/search/ElementsColumn.js

@@ -0,0 +1,243 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ifilter, toArray, sortParentsFirst, isAncestor, nameFromFqn } from "@likec4/core";
+import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from "@mantine/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { IconChevronRight } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { useMemo, useEffect } from "react";
+import { isEmpty, pipe, reduce, indexBy, prop, first, only, partition } from "remeda";
+import { IconOrShapeRenderer } from "../../../context/IconRenderer.js";
+import { sortByLabel } from "../../../likec4model/useLikeC4ElementsTree.js";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { treeSubtree, treeLabel, treeRoot, focusable, treeNode, elementExpandIcon, elementTitleAndId, elementTitle, elementId, elementDescription, elementViewsCount, elementButton, elementIcon } from "./ElementsColumn.css.js";
+import { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from "./state.js";
+import { stopAndPrevent, moveFocusToSearchInput, centerY } from "./utils.js";
+import { NothingFound } from "./ViewsColum.js";
+function ElementsColumn() {
+  const search = useNormalizedSearch();
+  const model = useLikeC4Model(true);
+  const {
+    all,
+    byid,
+    roots: data
+  } = useMemo(() => {
+    const searchTerms = search.split(".");
+    let elements;
+    if (isEmpty(search) || search === "kind:") {
+      elements = model.elements();
+    } else {
+      elements = ifilter(model.elements(), (element) => {
+        if (search.startsWith("kind:")) {
+          return element.kind.toLocaleLowerCase().startsWith(search.slice(5));
+        }
+        if (search.startsWith("#")) {
+          return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
+        }
+        return (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search);
+      });
+    }
+    const { all: all2, roots } = pipe(
+      elements,
+      toArray(),
+      sortParentsFirst,
+      reduce((acc, element) => {
+        const treeItem = {
+          label: element.title,
+          value: element.id,
+          element,
+          searchTerms,
+          children: []
+        };
+        const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
+        if (parent) {
+          parent.children.push(treeItem);
+          if (parent.children.length > 1) {
+            parent.children.sort(sortByLabel);
+          }
+        } else {
+          acc.roots.push(treeItem);
+        }
+        acc.all.push(treeItem);
+        return acc;
+      }, {
+        all: [],
+        roots: []
+      })
+    );
+    return {
+      all: all2,
+      byid: indexBy(all2, prop("value")),
+      roots: roots.sort(sortByLabel)
+    };
+  }, [model, search]);
+  const tree = useTree({
+    multiple: false
+  });
+  useEffect(() => {
+    tree.collapseAllNodes();
+    for (const nd of all) {
+      if (nd.children.length > 0) {
+        tree.expand(nd.value);
+      }
+    }
+  }, [all]);
+  const handleClick = useHandleElementSelection();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        "data-likec4-search-elements": true,
+        allowRangeSelection: false,
+        clearSelectionOnOutsideClick: true,
+        selectOnClick: false,
+        tree,
+        data,
+        levelOffset: "lg",
+        classNames: {
+          root: treeRoot,
+          node: clsx(focusable, treeNode),
+          label: treeLabel,
+          subtree: treeSubtree
+        },
+        onKeyDownCapture: (e) => {
+          var _a;
+          const target = e.target;
+          const id = target.getAttribute("data-value");
+          const node = !!id && byid[id];
+          if (!node) return;
+          if (e.key === "ArrowUp") {
+            if (id === ((_a = data[0]) == null ? void 0 : _a.value)) {
+              stopAndPrevent(e);
+              moveFocusToSearchInput();
+            }
+            return;
+          }
+          if (e.key === "ArrowRight") {
+            const hasChildren = node.children.length > 0;
+            if (hasChildren && tree.expandedState[id] === false) {
+              return;
+            }
+            const label = e.target.querySelector(".mantine-Tree-label") ?? target;
+            const maxY = label.getBoundingClientRect().y;
+            const viewButtons = [...document.querySelectorAll(
+              `[data-likec4-search-views] .${focusable}`
+            )];
+            let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
+            view ?? (view = first(viewButtons));
+            if (view) {
+              stopAndPrevent(e);
+              view.focus();
+            }
+            return;
+          }
+          if (e.key === " " || e.key === "Enter") {
+            stopAndPrevent(e);
+            handleClick(node.element);
+            return;
+          }
+        },
+        renderNode: ElementTreeNode
+      }
+    )
+  ] });
+}
+function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
+  const { element, searchTerms } = node;
+  const elementIcon$1 = IconOrShapeRenderer({
+    element: {
+      id: element.id,
+      title: element.title,
+      shape: element.shape,
+      icon: element.icon
+    },
+    className: elementIcon
+  });
+  const views = [...element.views()];
+  const handleClick = useHandleElementSelection();
+  const key = `@tree.${node.value}`;
+  return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "transparent",
+        size: 16,
+        tabIndex: -1,
+        className: clsx(elementExpandIcon),
+        style: {
+          visibility: hasChildren ? "visible" : "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          IconChevronRight,
+          {
+            stroke: 3.5,
+            style: {
+              transition: "transform 150ms ease",
+              transform: `rotate(${expanded ? "90deg" : "0"})`,
+              width: "100%"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        component: m.button,
+        layout: true,
+        tabIndex: -1,
+        className: clsx(elementButton, "likec4-element-button"),
+        ...views.length > 0 && {
+          onClick: (e) => {
+            if (!hasChildren || expanded) {
+              e.stopPropagation();
+              handleClick(element);
+            }
+          }
+        },
+        children: [
+          elementIcon$1,
+          /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", className: elementTitleAndId, children: [
+              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementTitle, children: node.label }),
+              /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementId, children: nameFromFqn(element.id) }) })
+            ] }),
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementDescription, lineClamp: 1, children: element.description || "No description" })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { component: "div", className: elementViewsCount, children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
+            views.length,
+            " view",
+            views.length > 1 ? "s" : ""
+          ] }) })
+        ]
+      }
+    )
+  ] }, key);
+}
+function useHandleElementSelection() {
+  const navigateTo = useCloseSearchAndNavigateTo();
+  return useCallbackRef((element) => {
+    const views = [...element.views()];
+    if (views.length === 0) {
+      return;
+    }
+    const singleView = only(views);
+    if (singleView) {
+      navigateTo(singleView.id, element.id);
+      return;
+    }
+    const [scoped, others] = partition(views, (v) => {
+      var _a;
+      return ((_a = v.viewOf) == null ? void 0 : _a.id) === element.id;
+    });
+    setPickView({
+      elementFqn: element.id,
+      scoped,
+      others
+    });
+  });
+}
+export {
+  ElementsColumn
+};

package/dist/likec4diagram/ui/search/LikeC4Search.css.d.ts

@@ -0,0 +1,8 @@
+export { focusable } from './_shared.css';
+export declare const backdrop: string;
+export declare const root: string;
+export declare const input: string;
+export declare const pickviewBackdrop: string;
+export declare const pickview: string;
+export declare const pickviewGroup: string;
+export declare const scrollArea: string;

package/dist/likec4diagram/ui/search/LikeC4Search.css.js

@@ -0,0 +1,20 @@
+/* empty css                           */
+/* empty css                                */
+var focusable = "_1cfw8gr4";
+var backdrop = "eien2d0";
+var root = "eien2d1";
+var input = "eien2d2";
+var pickviewBackdrop = "eien2d3";
+var pickview = "eien2d4";
+var pickviewGroup = "eien2d5";
+var scrollArea = "eien2d6";
+export {
+  backdrop,
+  focusable,
+  input,
+  pickview,
+  pickviewBackdrop,
+  pickviewGroup,
+  root,
+  scrollArea
+};

package/dist/likec4diagram/ui/search/LikeC4Search.d.ts

@@ -0,0 +1 @@
+export declare function LikeC4Search(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -0,0 +1,265 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from "@mantine/core";
+import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useFocusWithin, useMergedRef, useWindowEvent, useFocusReturn } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { AnimatePresence, m, LayoutGroup } from "framer-motion";
+import { useRef } from "react";
+import { SearchControl } from "../../../components/SearchControl.js";
+import { ElementsColumn } from "./ElementsColumn.js";
+import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from "./LikeC4Search.css.js";
+import { LikeC4SearchInput } from "./SearchInput.js";
+import { LikeC4SearchContext, useCloseSearch, wasResetPickView, usePickView, setPickView } from "./state.js";
+import { stopAndPrevent } from "./utils.js";
+import { ViewsColumn, ViewButton } from "./ViewsColum.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+function LikeC4Search() {
+  const [searchOpened, searchOps] = useDisclosure(false);
+  useHotkeys([
+    ["mod+k", () => searchOps.toggle(), {
+      preventDefault: true
+    }],
+    ["mod+f", () => searchOps.toggle(), {
+      preventDefault: true
+    }]
+  ]);
+  const afterCloseCbRef = useRef(null);
+  const close = useCallbackRef((cb) => {
+    afterCloseCbRef.current = cb ?? null;
+    searchOps.close();
+  });
+  const onExitComplete = useCallbackRef(() => {
+    if (afterCloseCbRef.current) {
+      afterCloseCbRef.current();
+      afterCloseCbRef.current = null;
+    }
+  });
+  const { portalProps } = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(LikeC4SearchContext, { value: close, children: [
+    /* @__PURE__ */ jsx(
+      SearchControl,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          searchOps.toggle();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(RemoveScroll, { enabled: searchOpened, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: searchOpened && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: backdrop,
+          initial: { opacity: 0.7 },
+          animate: {
+            opacity: 1,
+            transition: {
+              duration: 0.1
+            }
+          },
+          exit: {
+            opacity: 0,
+            transition: {
+              duration: 0.075
+            }
+          }
+        },
+        "backdrop"
+      ),
+      /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
+    ] }) }) }) })
+  ] });
+}
+function LikeC4SearchOverlay() {
+  const close = useCloseSearch();
+  const focusTrapRef = useFocusTrap();
+  const { ref: forcusRef, focused } = useFocusWithin();
+  const ref = useMergedRef(forcusRef, focusTrapRef);
+  useWindowEvent(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape") {
+        stopAndPrevent(event);
+        if (!wasResetPickView()) {
+          close();
+        }
+        return;
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      ref,
+      className: root,
+      animate: {
+        opacity: 1,
+        scale: 1,
+        translateY: 0
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        transition: {
+          duration: 0.1
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Box, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
+          /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              size: "lg",
+              variant: "default",
+              onClick: (e) => {
+                e.stopPropagation();
+                close();
+              },
+              children: /* @__PURE__ */ jsx(IconX, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Grid, { children: [
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            style: {
+              containerName: "likec4-search-elements",
+              containerType: "size",
+              overflow: "hidden",
+              flexGrow: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, {}),
+        /* @__PURE__ */ jsx(PickView, {})
+      ]
+    }
+  );
+}
+function PickView() {
+  const pickview$1 = usePickView();
+  const focusTrapRef = useFocusTrap(!!pickview$1);
+  useFocusReturn({
+    opened: !!pickview$1
+  });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-pickview", children: pickview$1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: pickviewBackdrop,
+        onClick: (e) => {
+          e.stopPropagation();
+          setPickView(null);
+        }
+      },
+      "backdrop"
+    ),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: {
+          opacity: 0,
+          scale: 0.95,
+          originY: 0,
+          translateX: "-50%",
+          translateY: -20
+        },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          translateY: 0
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1
+          }
+        },
+        className: pickview,
+        "data-likec4-search-views": true,
+        ref: focusTrapRef,
+        children: [
+          /* @__PURE__ */ jsxs(Group, { px: "sm", py: "md", justify: "space-between", children: [
+            /* @__PURE__ */ jsx(Title, { order: 2, lh: 1, children: "Select view" }),
+            /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "md",
+                variant: "default",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setPickView(null);
+                },
+                children: /* @__PURE__ */ jsx(IconX, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
+            pickview$1.scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
+              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
+              pickview$1.scoped.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0
+                  }
+                },
+                view.id
+              ))
+            ] }),
+            pickview$1.others.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
+              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "views including this element" }),
+              pickview$1.others.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0 && pickview$1.scoped.length === 0
+                  }
+                },
+                view.id
+              ))
+            ] })
+          ] })
+        ]
+      },
+      "pickview"
+    )
+  ] }) }) });
+}
+export {
+  LikeC4Search
+};

package/dist/likec4diagram/ui/search/SearchInput.d.ts

@@ -0,0 +1 @@
+export declare function LikeC4SearchInput(): import("react/jsx-runtime").JSX.Element;