@trackunit/react-components 1.22.22 → 1.22.23

package/index.cjs.js

@@ -329,11 +329,51 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
+// Mirrors the slug logic in @trackunit/storybook-docs-components SectionName so anchors line up
+// with the headings on the "Libraries" overview page
+// (e.g. "@trackunit/react-components" -> "trackunitreactcomponents").
+const toLibrarySlug = (name) => name
+    .replace(/[^a-zA-Z ]/g, "")
+    .toLowerCase()
+    .split(" ")
+    .join("-");
+// Builds an absolute URL to the "Libraries" docs page anchored at the given slug,
+// resolved against the parent Storybook manager (not the story preview iframe).
+// Returning a real absolute URL means "open in new tab" / cmd+click / middle-click
+// land on the correct page instead of the bare iframe.
+const buildLibraryHref = (slug) => {
+    const top = typeof window !== "undefined" ? window.top : null;
+    if (!top)
+        return undefined;
+    try {
+        const url = new URL(top.location.href);
+        url.searchParams.set("path", "/docs/libraries--docs");
+        url.hash = slug;
+        return url.toString();
+    }
+    catch {
+        return undefined;
+    }
+};
 /**
  * A component used to display the package name and version in the Storybook docs.
+ * The package-name tag links to the matching section on the "Libraries" overview page.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "neutral", children: packageJSON?.name }), packageJSON?.version ? jsxRuntime.jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
+    const name = packageJSON?.name;
+    const slug = name ? toLibrarySlug(name) : undefined;
+    const href = slug ? buildLibraryHref(slug) : undefined;
+    const onClick = (event) => {
+        if (!href)
+            return;
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        const top = window.top;
+        if (top)
+            top.location.href = href;
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [href ? (jsxRuntime.jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsxRuntime.jsx(Tag, { color: "neutral", children: name }) })) : (jsxRuntime.jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxRuntime.jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
 };
 
 const docs = {

package/index.esm.js

@@ -327,11 +327,51 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
+// Mirrors the slug logic in @trackunit/storybook-docs-components SectionName so anchors line up
+// with the headings on the "Libraries" overview page
+// (e.g. "@trackunit/react-components" -> "trackunitreactcomponents").
+const toLibrarySlug = (name) => name
+    .replace(/[^a-zA-Z ]/g, "")
+    .toLowerCase()
+    .split(" ")
+    .join("-");
+// Builds an absolute URL to the "Libraries" docs page anchored at the given slug,
+// resolved against the parent Storybook manager (not the story preview iframe).
+// Returning a real absolute URL means "open in new tab" / cmd+click / middle-click
+// land on the correct page instead of the bare iframe.
+const buildLibraryHref = (slug) => {
+    const top = typeof window !== "undefined" ? window.top : null;
+    if (!top)
+        return undefined;
+    try {
+        const url = new URL(top.location.href);
+        url.searchParams.set("path", "/docs/libraries--docs");
+        url.hash = slug;
+        return url.toString();
+    }
+    catch {
+        return undefined;
+    }
+};
 /**
  * A component used to display the package name and version in the Storybook docs.
+ * The package-name tag links to the matching section on the "Libraries" overview page.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "neutral", children: packageJSON?.name }), packageJSON?.version ? jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
+    const name = packageJSON?.name;
+    const slug = name ? toLibrarySlug(name) : undefined;
+    const href = slug ? buildLibraryHref(slug) : undefined;
+    const onClick = (event) => {
+        if (!href)
+            return;
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        const top = window.top;
+        if (top)
+            top.location.href = href;
+    };
+    return (jsxs("div", { className: "flex gap-2", children: [href ? (jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsx(Tag, { color: "neutral", children: name }) })) : (jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
 };
 
 const docs = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.22.22",
+  "version": "1.22.23",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/common/PackageNameStoryComponent.d.ts

@@ -7,6 +7,7 @@ interface PackageNameStoryComponentProps {
 }
 /**
  * A component used to display the package name and version in the Storybook docs.
+ * The package-name tag links to the matching section on the "Libraries" overview page.
  */
 export declare const PackageNameStoryComponent: ({ packageJSON }: PackageNameStoryComponentProps) => ReactElement;
 export {};