@xyd-js/framework 0.1.0-xyd.11 → 0.1.0-xyd.115

package/dist/react.js

@@ -0,0 +1,612 @@
+// packages/react/components/index.tsx
+import React5, { isValidElement, useState as useState3 } from "react";
+import { Link, useLocation as useLocation2, useMatches as useMatches2 } from "react-router";
+import { Nav, SubNav, Toc, UISidebar as UISidebar2 } from "@xyd-js/ui";
+import { Anchor, Breadcrumbs, Button as Button2, ColorSchemeButton, Icon as Icon2, NavLinks, useColorScheme } from "@xyd-js/components/writer";
+
+// packages/react/components/Surfaces.tsx
+import React, { createContext, useContext } from "react";
+var SurfaceContext = createContext({
+  surfaces: void 0
+});
+function Surface(props) {
+  const { target } = props;
+  const registry = useContext(SurfaceContext);
+  if (!registry.surfaces) {
+    return null;
+  }
+  const components = registry.surfaces.get(target);
+  if (!components) {
+    return null;
+  }
+  if (!Array.isArray(components)) {
+    if (typeof components === "function") {
+      const Component = components;
+      return /* @__PURE__ */ React.createElement(Component, { ...props.props });
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, components);
+  }
+  if (!components.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, components.map((Component, index) => {
+    if (typeof Component === "function") {
+      const Comp = Component;
+      return /* @__PURE__ */ React.createElement(Comp, { key: index, ...props.props });
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, Component);
+  }));
+}
+
+// packages/react/contexts/framework.tsx
+import React2, { createContext as createContext2, useContext as useContext2, useEffect, useState } from "react";
+import { useNavigation } from "react-router";
+import { ProgressBar } from "@xyd-js/ui";
+import { Banner } from "@xyd-js/components/writer";
+var framework = {
+  settings: {},
+  metadata: {
+    title: ""
+  },
+  sidebarGroups: [],
+  setMetadata: () => {
+  },
+  components: {}
+};
+var FrameworkContext = createContext2(framework);
+function Framework(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const navigation = useNavigation();
+  const [metadata, setMetadata] = useState(props.metadata);
+  const BannerContent = props.BannerContent || null;
+  const BannerComponent = ((_c = (_b = (_a = props == null ? void 0 : props.settings) == null ? void 0 : _a.theme) == null ? void 0 : _b.banner) == null ? void 0 : _c.kind) === "secondary" ? Banner.Secondary : Banner;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(FrameworkContext, { value: {
+    settings: Object.freeze({ ...props.settings }),
+    sidebarGroups: Object.freeze([...props.sidebarGroups]),
+    metadata: Object.freeze({ ...metadata, title: (metadata == null ? void 0 : metadata.title) || "" }),
+    setMetadata,
+    components: Object.freeze(props.components || {})
+  } }, /* @__PURE__ */ React2.createElement(SurfaceContext, { value: {
+    surfaces: props.surfaces
+  } }, /* @__PURE__ */ React2.createElement(ProgressBar, { isActive: navigation.state === "loading" }), BannerContent ? /* @__PURE__ */ React2.createElement(
+    BannerComponent,
+    {
+      label: (_f = (_e = (_d = props.settings) == null ? void 0 : _d.theme) == null ? void 0 : _e.banner) == null ? void 0 : _f.label,
+      icon: (_i = (_h = (_g = props.settings) == null ? void 0 : _g.theme) == null ? void 0 : _h.banner) == null ? void 0 : _i.icon
+    },
+    /* @__PURE__ */ React2.createElement(BannerContent, null)
+  ) : null, props.children)));
+}
+var FrameworkPageContext = createContext2({
+  ContentComponent: () => /* @__PURE__ */ React2.createElement(React2.Fragment, null),
+  metadata: {
+    title: ""
+  }
+});
+function FrameworkPage(props) {
+  const { setMetadata } = useContext2(FrameworkContext);
+  useEffect(() => {
+    setMetadata(props.metadata);
+  }, []);
+  return /* @__PURE__ */ React2.createElement(FrameworkPageContext, { value: {
+    ContentComponent: props.ContentComponent || (() => /* @__PURE__ */ React2.createElement(React2.Fragment, null)),
+    metadata: Object.freeze(props.metadata),
+    breadcrumbs: Object.freeze(props.breadcrumbs),
+    rawPage: Object.freeze(props.rawPage),
+    toc: Object.freeze(props.toc || []),
+    navlinks: Object.freeze(props.navlinks)
+  } }, props.children);
+}
+function useSidebarGroups() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.sidebarGroups;
+}
+function useSettings() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.settings;
+}
+function useMetadata() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.metadata;
+}
+function useComponents() {
+  const ctx = useContext2(FrameworkContext);
+  return ctx.components;
+}
+function useToC() {
+  const ctx = useContext2(FrameworkPageContext);
+  const toc = ctx.toc || [];
+  return toc;
+}
+function useBreadcrumbs() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.breadcrumbs;
+}
+function useNavLinks() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.navlinks;
+}
+function useRawPage() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.rawPage;
+}
+function useContentComponent() {
+  const ctx = useContext2(FrameworkPageContext);
+  return ctx.ContentComponent;
+}
+
+// packages/react/components/Sidebar/Sidebar.tsx
+import React4 from "react";
+import { UISidebar } from "@xyd-js/ui";
+import { Icon } from "@xyd-js/components/writer";
+
+// packages/react/components/Sidebar/SidebarGroup.tsx
+import React3, { createContext as createContext3, useContext as useContext3, useState as useState2, useEffect as useEffect2 } from "react";
+import { useNavigation as useNavigation2 } from "react-router";
+var GroupContext = createContext3({
+  active: () => [false, () => {
+  }]
+});
+function FwSidebarGroupContext(props) {
+  const { children, initialActiveItems } = props;
+  const groupBehaviour = useDefaultBehaviour(initialActiveItems);
+  return /* @__PURE__ */ React3.createElement(GroupContext, { value: {
+    active: groupBehaviour
+  } }, children);
+}
+function useGroup() {
+  return useContext3(GroupContext);
+}
+function useDefaultBehaviour(initialActiveItems) {
+  const navigation = useNavigation2();
+  const [activeItems, setActiveItems] = useState2(() => createItemsMap(initialActiveItems));
+  const [, setForceUpdate] = useState2(0);
+  const forceUpdate = () => setForceUpdate((prev) => prev + 1);
+  useEffect2(() => {
+    if (navigation.state !== "loading") {
+      setActiveItems(createItemsMap(initialActiveItems));
+      forceUpdate();
+    }
+  }, [initialActiveItems, navigation.state]);
+  function addItem(item) {
+    const key = itemId(item);
+    setActiveItems((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(key, true);
+      return newMap;
+    });
+    forceUpdate();
+  }
+  function deleteItem(item) {
+    const key = itemId(item);
+    setActiveItems((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(key);
+      return newMap;
+    });
+    forceUpdate();
+  }
+  function hasItem(item) {
+    const key = itemId(item);
+    return activeItems.get(key) || false;
+  }
+  return (item) => {
+    return [
+      hasItem(item) || false,
+      () => {
+        if (!hasItem(item)) {
+          addItem(item);
+          return;
+        }
+        deleteItem(item);
+      }
+    ];
+  };
+}
+function itemId(item) {
+  const id = `${item.uniqIndex}:${item.groupIndex}-${item.level}-${item.itemIndex}`;
+  return id;
+}
+function createItemsMap(items) {
+  const map = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const key = itemId(item);
+    map.set(key, true);
+  });
+  return map;
+}
+
+// packages/react/components/Sidebar/Sidebar.tsx
+function FwSidebarItemGroup(props) {
+  const icon = props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || "", size: 16 }) : null;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(UISidebar.ItemHeader, { icon }, props.group), props.items.map((item, index) => /* @__PURE__ */ React4.createElement(
+    FwSidebarItem,
+    {
+      uniqIndex: item.uniqIndex,
+      groupIndex: props.groupIndex,
+      level: 0,
+      itemIndex: index,
+      key: index + item.href,
+      title: item.title,
+      sidebarTitle: item.sidebarTitle,
+      pageMeta: item.pageMeta,
+      href: item.href,
+      items: item.items,
+      active: item.active,
+      icon: item.icon
+    }
+  )));
+}
+function FwSidebarItem(props) {
+  var _a, _b, _c, _d;
+  const { active } = useGroup();
+  const [isActive, setActive] = active(props);
+  const title = props.sidebarTitle || props.title || "";
+  const nested = !!((_a = props.items) == null ? void 0 : _a.length);
+  function handleClick() {
+    if (!nested) {
+      return;
+    }
+    setActive();
+  }
+  const hasActiveChild = (_b = props.items) == null ? void 0 : _b.some((item) => {
+    var _a2;
+    const [itemActive] = active(item);
+    return itemActive && item.href || ((_a2 = item.items) == null ? void 0 : _a2.some((subItem) => {
+      const [subItemActive] = active(subItem);
+      return subItemActive && subItem.href;
+    }));
+  });
+  const isActiveItem = !!(isActive && props.href);
+  const isParentActive = hasActiveChild;
+  const icon = /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || "", size: 16 });
+  return /* @__PURE__ */ React4.createElement(
+    UISidebar.Item,
+    {
+      button: nested,
+      href: props.href,
+      active: isActiveItem,
+      isParentActive,
+      onClick: handleClick,
+      icon
+    },
+    /* @__PURE__ */ React4.createElement("div", { part: "item-title-container" }, /* @__PURE__ */ React4.createElement(
+      Surface,
+      {
+        target: "sidebar.item.left",
+        props: {
+          active: isActiveItem,
+          pageMeta: props.pageMeta
+        }
+      }
+    ), /* @__PURE__ */ React4.createElement("div", { part: "item-title" }, title), /* @__PURE__ */ React4.createElement(
+      Surface,
+      {
+        target: "sidebar.item.right",
+        props: {
+          active: isActiveItem,
+          pageMeta: props.pageMeta
+        }
+      }
+    )),
+    ((_c = props.items) == null ? void 0 : _c.length) && /* @__PURE__ */ React4.createElement(UISidebar.SubTree, { isOpen: isActive }, /* @__PURE__ */ React4.createElement(React4.Fragment, null, (_d = props.items) == null ? void 0 : _d.map((item, index) => /* @__PURE__ */ React4.createElement(
+      FwSidebarItem,
+      {
+        uniqIndex: item.uniqIndex,
+        groupIndex: props.groupIndex,
+        level: (props.level || 0) + 1,
+        itemIndex: index,
+        key: index + item.href,
+        title: item.title,
+        href: item.href,
+        items: item.items,
+        active: active(item)[0],
+        icon: item.icon,
+        pageMeta: item.pageMeta
+      }
+    ))))
+  );
+}
+
+// packages/react/hooks/useMatchedNav.tsx
+import { useMatches } from "react-router";
+function useMatchedSubNav() {
+  var _a, _b, _c;
+  const settings = useSettings();
+  const matches = useMatches();
+  const lastMatchId = (_a = matches[matches.length - 1]) == null ? void 0 : _a.id;
+  let matchedSubnav = (_c = (_b = settings.navigation) == null ? void 0 : _b.segments) == null ? void 0 : _c.find((item) => {
+    var _a2;
+    return (_a2 = item.pages) == null ? void 0 : _a2.find((page) => {
+      return sanitizeUrl(page.page || "") === sanitizeUrl(lastMatchId);
+    });
+  });
+  if (!matchedSubnav) {
+    return null;
+  }
+  return matchedSubnav || null;
+}
+function sanitizeUrl(url) {
+  if (url.startsWith("/")) {
+    return url;
+  }
+  return `/${url}`;
+}
+
+// packages/react/components/index.tsx
+function FwNavLogo() {
+  var _a;
+  const settings = useSettings();
+  const logo = typeof ((_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.logo);
+  if (!logo) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement("a", { href: "/" }, /* @__PURE__ */ React5.createElement(FwLogo, null));
+}
+function FwNav({ kind }) {
+  var _a, _b;
+  const matches = useMatches2();
+  const matchedSubnav = useMatchedSubNav();
+  const settings = useSettings();
+  const lastMatch = matches[matches.length - 1];
+  const header = ((_a = settings == null ? void 0 : settings.navigation) == null ? void 0 : _a.header) || [];
+  const active = header.find((item) => {
+    if (matchedSubnav) {
+      return pageLink(item.page || "") === pageLink(matchedSubnav == null ? void 0 : matchedSubnav.route);
+    }
+    return pageLink(item.page || "") === (lastMatch == null ? void 0 : lastMatch.id);
+  });
+  function createHeader(item) {
+    return /* @__PURE__ */ React5.createElement(
+      Nav.Item,
+      {
+        key: (item.page || "") + item.page,
+        href: pageLink((item == null ? void 0 : item.page) || ""),
+        value: item.page || "",
+        as: $Link
+      },
+      item.title
+    );
+  }
+  const headerMap = header.reduce((acc, item) => {
+    const float = item.float || "default";
+    return {
+      ...acc,
+      [float]: [...acc[float] || [], createHeader(item)]
+    };
+  }, {});
+  const rightHeaderExists = ((_b = headerMap["right"]) == null ? void 0 : _b.length) > 0;
+  return /* @__PURE__ */ React5.createElement(
+    Nav,
+    {
+      value: (active == null ? void 0 : active.page) || "",
+      kind,
+      logo: /* @__PURE__ */ React5.createElement(FwNavLogo, null),
+      rightSurface: /* @__PURE__ */ React5.createElement(React5.Fragment, null, rightHeaderExists ? /* @__PURE__ */ React5.createElement(
+        Nav.Tab,
+        {
+          value: (active == null ? void 0 : active.page) || ""
+        },
+        headerMap["right"]
+      ) : null, /* @__PURE__ */ React5.createElement(Surface, { target: "nav.right" /* NavRight */ }), /* @__PURE__ */ React5.createElement(ColorSchemeButton, null))
+    },
+    headerMap["default"]
+  );
+}
+function FwSubNav() {
+  const matchedSubnav = useMatchedSubNav();
+  const location = useLocation2();
+  const pathname = trailingSlash(location.pathname);
+  if (!matchedSubnav) {
+    return null;
+  }
+  const active = matchedSubnav == null ? void 0 : matchedSubnav.pages.findLast((item) => {
+    return pathname.startsWith(pageLink(item.page || ""));
+  });
+  return /* @__PURE__ */ React5.createElement(
+    SubNav,
+    {
+      title: (matchedSubnav == null ? void 0 : matchedSubnav.title) || "",
+      value: (active == null ? void 0 : active.page) || "",
+      onChange: () => {
+      }
+    },
+    matchedSubnav == null ? void 0 : matchedSubnav.pages.map((item, index) => {
+      return /* @__PURE__ */ React5.createElement(
+        SubNav.Item,
+        {
+          value: item.page || "",
+          href: pageLink(item.page || ""),
+          as: $Link
+        },
+        item.title
+      );
+    })
+  );
+}
+function FwSidebarGroups(props) {
+  var _a, _b, _c;
+  const location = useLocation2();
+  const pathname = trailingSlash(location.pathname);
+  const groups = useSidebarGroups();
+  const settings = useSettings();
+  const footerItems = (_c = (_b = (_a = settings.navigation) == null ? void 0 : _a.anchors) == null ? void 0 : _b.bottom) == null ? void 0 : _c.map((anchor) => {
+    return /* @__PURE__ */ React5.createElement(UISidebar2.FooterItem, { href: anchor.url, icon: /* @__PURE__ */ React5.createElement(Icon2, { name: anchor.icon || "" }) }, anchor.name);
+  });
+  const initialActiveItems = [];
+  groups.forEach((group, groupIndex) => {
+    const activeLevels = recursiveSearch(group.items, pathname) || [];
+    activeLevels.reduce((acc, index, level) => {
+      initialActiveItems.push({
+        ...acc[index],
+        groupIndex,
+        level,
+        itemIndex: index
+      });
+      acc[index].active = true;
+      return acc[index].items;
+    }, group.items);
+    return group;
+  });
+  return /* @__PURE__ */ React5.createElement(
+    FwSidebarGroupContext,
+    {
+      initialActiveItems
+    },
+    /* @__PURE__ */ React5.createElement(UISidebar2, { footerItems: footerItems && footerItems }, /* @__PURE__ */ React5.createElement(Surface, { target: "sidebar.top" /* SidebarTop */ }), groups == null ? void 0 : groups.map((group, index) => /* @__PURE__ */ React5.createElement(
+      FwSidebarItemGroup,
+      {
+        key: index + group.group,
+        ...group,
+        groupIndex: index
+      }
+    )))
+  );
+}
+function FwToc() {
+  var _a;
+  const metadata = useMetadata();
+  const settings = useSettings();
+  const toc = useToC();
+  if (!toc) {
+    return null;
+  }
+  const maxDepth = (metadata == null ? void 0 : metadata.maxTocDepth) || ((_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.maxTocDepth) || 2;
+  const renderTocItems = (items, uiDepth = 0) => {
+    return items.map((item) => /* @__PURE__ */ React5.createElement(React5.Fragment, { key: item.id }, /* @__PURE__ */ React5.createElement(
+      Toc.Item,
+      {
+        id: item.id,
+        depth: uiDepth
+      },
+      item.value
+    ), item.children && item.children.length > 0 && renderTocItems(item.children, uiDepth + 1)));
+  };
+  return /* @__PURE__ */ React5.createElement(Toc, { maxDepth }, renderTocItems(toc));
+}
+function FwBreadcrumbs() {
+  const fwBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = fwBreadcrumbs == null ? void 0 : fwBreadcrumbs.map((item) => ({
+    title: item.title,
+    href: item.href
+  }));
+  return /* @__PURE__ */ React5.createElement(
+    Breadcrumbs,
+    {
+      items: breadcrumbs || []
+    }
+  );
+}
+function FwNavLinks() {
+  const navlinks = useNavLinks();
+  if ((navlinks == null ? void 0 : navlinks.prev) || (navlinks == null ? void 0 : navlinks.next)) {
+    return /* @__PURE__ */ React5.createElement(
+      NavLinks,
+      {
+        prev: navlinks.prev,
+        next: navlinks.next,
+        as: $Link
+      }
+    );
+  }
+  return null;
+}
+function FwLogo() {
+  var _a, _b, _c, _d, _e, _f;
+  const settings = useSettings();
+  const [colorScheme] = useColorScheme();
+  if (typeof ((_a = settings == null ? void 0 : settings.theme) == null ? void 0 : _a.logo) === "string") {
+    return /* @__PURE__ */ React5.createElement("img", { src: (_b = settings == null ? void 0 : settings.theme) == null ? void 0 : _b.logo });
+  }
+  if (isValidElement((_c = settings == null ? void 0 : settings.theme) == null ? void 0 : _c.logo)) {
+    return /* @__PURE__ */ React5.createElement("a", { href: "/" }, (_d = settings == null ? void 0 : settings.theme) == null ? void 0 : _d.logo);
+  }
+  if (typeof ((_e = settings == null ? void 0 : settings.theme) == null ? void 0 : _e.logo) === "object" && colorScheme) {
+    return /* @__PURE__ */ React5.createElement("img", { src: (_f = settings == null ? void 0 : settings.theme) == null ? void 0 : _f.logo[colorScheme] });
+  }
+  return null;
+}
+function FwLink({ children, ...rest }) {
+  return /* @__PURE__ */ React5.createElement(Anchor, { ...rest, as: $Link }, children);
+}
+function FwCopyPage() {
+  const [isCopied, setIsCopied] = useState3(false);
+  const rawPage = useRawPage();
+  const handleCopy = () => {
+    navigator.clipboard.writeText(rawPage || "");
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ React5.createElement(Button2, { icon: isCopied ? /* @__PURE__ */ React5.createElement(Icon2, { name: "check", size: 12 }) : /* @__PURE__ */ React5.createElement(Icon2, { name: "copy", size: 12 }), onClick: handleCopy }, "Copy page");
+}
+function $Link({ children, ...rest }) {
+  let to = "";
+  if (rest.href) {
+    try {
+      new URL(rest.href);
+      to = rest.href;
+    } catch (error) {
+      if (rest.href.startsWith("/")) {
+        const url = new URL(`https://example.com${rest.href}`);
+        to = {
+          pathname: url.pathname,
+          search: url.search,
+          hash: url.hash
+        };
+      } else {
+        return /* @__PURE__ */ React5.createElement(Anchor, { as: "button", onClick: () => {
+          const url = new URL(window.location.href);
+          const currentParams = url.searchParams;
+          new URLSearchParams(rest.href).forEach((value, key) => {
+            currentParams.set(key, value);
+          });
+          url.search = currentParams.toString();
+          history.replaceState(null, "", url);
+        } }, children);
+      }
+    }
+  }
+  return /* @__PURE__ */ React5.createElement(Link, { ...rest, to }, children);
+}
+function recursiveSearch(items, href, levels = []) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.href === href) {
+      return [...levels, i];
+    }
+    if (item.items) {
+      const result = recursiveSearch(item.items, href, [...levels, i]);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+function trailingSlash(path) {
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+}
+function pageLink(page) {
+  return page.startsWith("/") ? page : `/${page}`;
+}
+export {
+  Framework,
+  FrameworkPage,
+  FwBreadcrumbs,
+  FwCopyPage,
+  FwLink,
+  FwLogo,
+  FwNav,
+  FwNavLinks,
+  FwSidebarGroups,
+  FwSubNav,
+  FwToc,
+  Surface,
+  SurfaceContext,
+  useComponents,
+  useContentComponent,
+  useMatchedSubNav,
+  useMetadata,
+  useSettings
+};
+//# sourceMappingURL=react.js.map