@jfrader/storybook-docs 0.5.0 → 0.6.0

package/dist/index.css

@@ -106,16 +106,20 @@
 .toc {
   display: none;
 }
+.toc-track {
+  display: none;
+}
 @media (min-width: 1180px) {
   .app.has-toc {
     grid-template-columns: 276px minmax(0, 1fr) 224px;
   }
-  .toc {
+  .toc-track {
     display: block;
     grid-column: 3;
     grid-row: 2;
-    align-self: start;
-    transform: translateY(var(--sd-rail-follow, 0px));
+  }
+  .toc {
+    display: block;
     padding: 34px 18px 40px 6px;
     font-size: 12.5px;
   }

package/dist/index.js

@@ -5,7 +5,7 @@ import { createRoot } from "react-dom/client";
 import { site as site3, themeCss, theme as theme2 } from "virtual:storybook-docs/site";
 
 // src/app.tsx
-import { useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
+import { Children, useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
 import { catalog as catalog3, groups as groups2 } from "virtual:storybook-docs/catalog";
 import { pages, site as site2, theme } from "virtual:storybook-docs/site";
 
@@ -511,6 +511,77 @@ function LazySection({ children, placeholder = "\u2026" }) {
 
 // src/toc.tsx
 import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+
+// src/rail.ts
+var RAIL_MEDIA = "(min-width: 1180px)";
+var RAIL_GAP = 20;
+function followRail(rail, header) {
+  const track = rail.parentElement;
+  if (!track) return () => {
+  };
+  const media = window.matchMedia(RAIL_MEDIA);
+  let lastY = window.scrollY;
+  let direction = "down";
+  let spacer = 0;
+  const geometry = () => {
+    const top = header.offsetHeight + RAIL_GAP;
+    const viewportBottom = window.innerHeight - RAIL_GAP;
+    const height = rail.offsetHeight;
+    return {
+      top,
+      viewportBottom,
+      height,
+      fits: top + height <= viewportBottom,
+      trackTop: track.getBoundingClientRect().top + window.scrollY,
+      maxOffset: Math.max(0, track.clientHeight - height)
+    };
+  };
+  const clear = () => {
+    rail.removeAttribute("style");
+    track.removeAttribute("style");
+  };
+  const arm = (g = geometry()) => {
+    if (!media.matches) {
+      clear();
+      return;
+    }
+    spacer = g.fits ? 0 : Math.min(spacer, g.maxOffset);
+    track.style.setProperty("--sd-rail-offset", `${spacer}px`);
+    rail.style.position = "sticky";
+    rail.style.top = g.fits ? `${g.top}px` : direction === "down" ? `${g.viewportBottom - g.height}px` : "auto";
+    rail.style.bottom = g.fits || direction === "down" ? "auto" : `${window.innerHeight - g.top - g.height}px`;
+  };
+  const onScroll = () => {
+    const y = window.scrollY;
+    const next = y > lastY ? "down" : y < lastY ? "up" : direction;
+    if (next !== direction && media.matches) {
+      const g = geometry();
+      spacer = direction === "down" ? Math.min(Math.max(spacer, lastY + g.viewportBottom - g.height - g.trackTop), g.maxOffset) : Math.max(Math.min(spacer, lastY + g.top - g.trackTop), 0);
+      direction = next;
+      arm(g);
+    }
+    direction = next;
+    lastY = y;
+  };
+  const relayout = () => arm();
+  const observer = new ResizeObserver(relayout);
+  observer.observe(rail);
+  observer.observe(track);
+  observer.observe(header);
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", relayout);
+  media.addEventListener("change", relayout);
+  arm();
+  return () => {
+    observer.disconnect();
+    window.removeEventListener("scroll", onScroll);
+    window.removeEventListener("resize", relayout);
+    media.removeEventListener("change", relayout);
+    clear();
+  };
+}
+
+// src/toc.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var STORY_PARAM = "story";
 var SCROLL_OFFSET_PX = 76;
@@ -535,34 +606,9 @@ var slugify = (text) => text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCa
 function useRailFollow(ref, ready = true) {
   useEffect3(() => {
     const element = ref.current;
-    if (!element) return;
-    let frame = 0;
-    let applied = 0;
-    const limit = () => window.innerHeight - (Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sd-header-height")) || 56) - 20;
-    const apply = () => {
-      frame = 0;
-      const bottomInDocument = element.getBoundingClientRect().bottom + window.scrollY - applied;
-      const crossing = bottomInDocument - limit();
-      const next = Math.max(0, window.scrollY - crossing);
-      if (next !== applied) {
-        applied = next;
-        element.style.setProperty("--sd-rail-follow", `${next}px`);
-      }
-    };
-    const schedule = () => {
-      if (!frame) frame = requestAnimationFrame(apply);
-    };
-    apply();
-    window.addEventListener("scroll", schedule, { passive: true });
-    window.addEventListener("resize", schedule);
-    const observer = new ResizeObserver(schedule);
-    observer.observe(element);
-    return () => {
-      window.removeEventListener("scroll", schedule);
-      window.removeEventListener("resize", schedule);
-      observer.disconnect();
-      if (frame) cancelAnimationFrame(frame);
-    };
+    const header = element?.closest(".app")?.querySelector(".top");
+    if (!element || !header) return;
+    return followRail(element, header);
   }, [ready, ref]);
 }
 function scanPage(root, pageKey) {
@@ -706,7 +752,7 @@ function PageRail({ pageKey }) {
   const active = useActiveIds(scan);
   const go = useCallback((element) => scrollToElement(element), []);
   if (!scan) return null;
-  return /* @__PURE__ */ jsx5(Fragment, { children: scan.sections.length > 0 ? /* @__PURE__ */ jsxs3("aside", { className: "toc", "aria-label": "On this page", ref: railRef, children: [
+  return /* @__PURE__ */ jsx5(Fragment, { children: scan.sections.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "rail-track toc-track", children: /* @__PURE__ */ jsxs3("aside", { className: "toc", "aria-label": "On this page", ref: railRef, children: [
     /* @__PURE__ */ jsx5("div", { className: "toc-title", children: "On this page" }),
     /* @__PURE__ */ jsx5("ul", { children: scan.sections.map((section) => /* @__PURE__ */ jsxs3("li", { children: [
       /* @__PURE__ */ jsx5(
@@ -731,7 +777,7 @@ function PageRail({ pageKey }) {
         }
       ) }, story.id)) }) : null
     ] }, section.id)) })
-  ] }) : null });
+  ] }) }) : null });
 }
 
 // src/component-demo.tsx
@@ -1801,6 +1847,23 @@ function SearchBox() {
 import { releases as releases2 } from "virtual:storybook-docs/releases";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var routeHref = (path) => `#${hrefFor(path)}`;
+var NAV_GROUP_WINDOW = 12;
+function NavGroup({ id, title, active, activeIndex = -1, children }) {
+  const [open, setOpen] = useState9(false);
+  const [showAll, setShowAll] = useState9(false);
+  const expanded = active || open;
+  const links = Children.toArray(children);
+  const capped = active && links.length > NAV_GROUP_WINDOW;
+  const start2 = Math.min(Math.max(activeIndex - NAV_GROUP_WINDOW / 2, 0), Math.max(0, links.length - NAV_GROUP_WINDOW));
+  const visibleLinks = capped && !showAll ? links.slice(start2, start2 + NAV_GROUP_WINDOW) : links;
+  return /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsx16("button", { type: "button", className: "grp", id, "aria-expanded": expanded, "aria-controls": `${id}-links`, disabled: active, onClick: () => setOpen(!open), children: title }),
+    /* @__PURE__ */ jsxs13("div", { id: `${id}-links`, hidden: !expanded, children: [
+      /* @__PURE__ */ jsx16("div", { id: `${id}-window`, children: visibleLinks }),
+      capped ? /* @__PURE__ */ jsx16("button", { type: "button", className: "nav-more", "aria-expanded": showAll, "aria-controls": `${id}-window`, onClick: () => setShowAll(!showAll), children: showAll ? "Show less" : `Show all ${links.length}` }) : null
+    ] })
+  ] });
+}
 function parseRoute(hash) {
   const path = hashPath(hash).replace(new RegExp(`^#?\\/?${STORYBOOK_DOCS_BASE}`), "").replace(/^\/+/, "");
   if (path.startsWith("components/")) {
@@ -1909,7 +1972,7 @@ function DocsApp() {
         /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u2197" })
       ] }, link.href))
     ] }),
-    /* @__PURE__ */ jsxs13("nav", { id: "docs-nav", className: navOpen ? "nav open" : "nav", "aria-label": "Documentation", ref: navRef, children: [
+    /* @__PURE__ */ jsx16("div", { className: "rail-track nav-track", children: /* @__PURE__ */ jsxs13("nav", { id: "docs-nav", className: navOpen ? "nav open" : "nav", "aria-label": "Documentation", ref: navRef, children: [
       /* @__PURE__ */ jsx16("a", { href: routeHref("/"), className: route.kind === "overview" ? "on" : void 0, "aria-current": route.kind === "overview" ? "page" : void 0, children: "Overview" }),
       releases2.changelog ? /* @__PURE__ */ jsxs13(
         "a",
@@ -1926,22 +1989,20 @@ function DocsApp() {
           ]
         }
       ) : null,
-      foundations.length > 0 ? /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": "nav-grp-foundations", children: [
-        /* @__PURE__ */ jsx16("div", { className: "grp", id: "nav-grp-foundations", children: "Foundations" }),
-        foundations.map((item) => /* @__PURE__ */ jsx16(
-          "a",
-          {
-            href: item.href,
-            className: route.kind === item.kind ? "on" : void 0,
-            "aria-current": route.kind === item.kind ? "page" : void 0,
-            children: item.label
-          },
-          item.href
-        ))
-      ] }) : null,
-      groups2.map((group, index) => /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": `nav-grp-${index}`, children: [
-        /* @__PURE__ */ jsx16("div", { className: "grp", id: `nav-grp-${index}`, children: group }),
-        catalog3.filter((entry) => entry.group === group).map((entry) => /* @__PURE__ */ jsx16(
+      foundations.length > 0 ? /* @__PURE__ */ jsx16(NavGroup, { id: "nav-grp-foundations", title: "Foundations", active: foundations.some((item) => route.kind === item.kind), children: foundations.map((item) => /* @__PURE__ */ jsx16(
+        "a",
+        {
+          href: item.href,
+          className: route.kind === item.kind ? "on" : void 0,
+          "aria-current": route.kind === item.kind ? "page" : void 0,
+          children: item.label
+        },
+        item.href
+      )) }, `foundations-${activeSlug ?? route.kind}`) : null,
+      groups2.map((group, index) => {
+        const entries = catalog3.filter((entry) => entry.group === group);
+        const activeIndex = entries.findIndex((entry) => entry.slug === activeSlug);
+        return /* @__PURE__ */ jsx16(NavGroup, { id: `nav-grp-${index}`, title: group, active: activeIndex !== -1, activeIndex, children: entries.map((entry) => /* @__PURE__ */ jsx16(
           "a",
           {
             href: routeHref(`/components/${entry.slug}`),
@@ -1952,9 +2013,9 @@ function DocsApp() {
             children: entry.name
           },
           entry.slug
-        ))
-      ] }, group))
-    ] }),
+        )) }, `${group}-${activeSlug ?? route.kind}`);
+      })
+    ] }) }),
     /* @__PURE__ */ jsx16("main", { id: "main", className: "main", tabIndex: -1, ref: mainRef, children: route.kind === "component" ? /* @__PURE__ */ jsx16(ComponentPage, { entry: catalog3.find((entry) => entry.slug === route.slug) }) : route.kind === "color" ? /* @__PURE__ */ jsx16(ColorPage, {}) : route.kind === "typography" ? /* @__PURE__ */ jsx16(TypePage, {}) : route.kind === "spacing" ? /* @__PURE__ */ jsx16(SpacingPage, {}) : route.kind === "effects" ? /* @__PURE__ */ jsx16(EffectsPage, {}) : route.kind === "releases" ? /* @__PURE__ */ jsx16(ReleasesPage, {}) : /* @__PURE__ */ jsx16(OverviewPage, {}) }),
     route.kind !== "overview" ? /* @__PURE__ */ jsx16(PageRail, { pageKey: activeSlug ?? route.kind }) : null
   ] });

package/dist/rail.d.ts

@@ -0,0 +1 @@
+export declare function followRail(rail: HTMLElement, header: HTMLElement): () => void;

package/dist/styles.css

@@ -186,23 +186,44 @@ body {
   outline-offset: 2px;
 }
 
+.rail-track {
+  overflow-anchor: none;
+  min-width: 0;
+}
+@media (min-width: 1180px) {
+  .rail-track::before {
+    content: '';
+    display: block;
+    height: var(--sd-rail-offset, 0px);
+  }
+}
 .nav {
   border-right: 0;
   background: var(--sd-surface);
-  padding: 14px 12px 80px;
-  /* Follows the document like the right rail, parking when its own end is visible. */
-  align-self: start;
-  transform: translateY(var(--sd-rail-follow, 0px));
+  padding: 14px 12px 12px;
 }
-.nav a {
-  display: block;
-  padding: 6px 10px;
+.nav a,
+.nav-more {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 28px;
+  padding: 4px 10px;
   border-radius: 8px;
   color: var(--sd-text-muted);
   font-size: 13.5px;
   text-decoration: none;
 }
-.nav a:hover {
+.nav-more {
+  width: 100%;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.nav a:hover,
+.nav-more:hover {
   background: var(--sd-surface-hover);
   color: var(--sd-text);
 }
@@ -212,13 +233,26 @@ body {
   font-weight: 600;
 }
 .grp {
-  margin: 16px 0 4px;
+  margin: 3px 0 2px;
   padding: 0 10px;
   font-size: 10.5px;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--sd-text-muted);
   font-weight: 700;
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  min-height: 28px;
+}
+.grp:focus-visible,
+.nav-more:focus-visible {
+  outline: 2px solid var(--sd-focus-ring);
+  outline-offset: 2px;
 }
 
 .main {
@@ -618,6 +652,9 @@ code.type {
   .nav-toggle {
     display: inline-block;
   }
+  .nav-track {
+    display: contents;
+  }
   .search {
     order: 10;
     flex: 1 1 100%;

package/dist/toc.d.ts

@@ -6,12 +6,6 @@ export declare function hashPath(hash: string): string;
 /** The `?story=` deep-link target of a hash, if any. */
 export declare function storyFromHash(hash: string): string | null;
 export declare function storyLink(location: Location, story: string): string;
-/**
- * A rail travels with the document until its own end would pass the fold, then it parks there —
- * the reader keeps seeing where it continues, and scrolling up lets it fall back into flow. This is
- * the scroll-linked translation docs sites use, because `position: sticky` cannot move an element
- * taller than the viewport.
- */
 export declare function useRailFollow(ref: RefObject<HTMLElement | null>, ready?: boolean): void;
 /** The "On this page" rail and the `?story=` deep-link landing. */
 export declare function PageRail({ pageKey }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/storybook-docs",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "A documentation front for any design system that has Storybook: navigation, live examples and API tables are generated from the story files themselves.",
   "exports": {