@jfrader/storybook-docs 0.9.0 → 0.9.2

package/dist/index.js

@@ -363,6 +363,9 @@ function serializable(value, ancestors = /* @__PURE__ */ new Set()) {
   ancestors.delete(value);
   return result;
 }
+function jsxRootTag(example) {
+  return example.replace(/^\s*\/\/[^\n]*(?:\n|$)/gm, "").match(/<([A-Za-z_$][\w$]*(?:\.[\w$]+)*)[\s/>]/)?.[1]?.split(".")[0];
+}
 function usageSnippet(componentName, args) {
   if (!args || Object.keys(args).length === 0) return null;
   const attributes = [];
@@ -374,8 +377,8 @@ function usageSnippet(componentName, args) {
     else attributes.push(`${key}={${JSON.stringify(value)}}`);
   }
   const opening = `<${componentName}${attributes.length ? ` ${attributes.join(" ")}` : ""}`;
-  if (args.children === void 0) return attributes.length ? `${opening} />` : null;
-  if (!serializable(args.children) || args.children !== null && typeof args.children === "object") return null;
+  if (args.children === void 0 || args.children === null) return attributes.length ? `${opening} />` : null;
+  if (!serializable(args.children) || typeof args.children === "object") return null;
   const children = typeof args.children === "string" && !/[&<>{}]/.test(args.children) ? args.children : `{${JSON.stringify(args.children)}}`;
   return `${opening}>${children}</${componentName}>`;
 }
@@ -389,11 +392,12 @@ function buildUsageSnippet({ componentName, from, args, source, renderSource, js
   const excerpt = extracted?.startsWith(STORY_EXCERPT);
   const example = source?.trim() || (excerpt ? generated() || extracted : extracted || generated());
   if (!example) return null;
+  const rootTag = jsxRootTag(example);
   if (!source?.trim() && example === extracted) {
-    const rootTag = example.replace(/^\s*\/\/[^\n]*(?:\n|$)/gm, "").trim().match(/^<([A-Za-z_$][\w$]*(?:\.[\w$]+)*)[\s/>]/)?.[1]?.split(".")[0];
     if (excerpt || rootTag !== rootName || !from.trim()) return example;
   }
   if (!from.trim()) return example;
+  if (rootTag !== rootName) return example;
   const imports = [...example.matchAll(/import\s*\{([^}]+)\}\s*from\s*(['"])(.*?)\2/g)];
   const imported = imports.some((match) => match[3] === from && match[1].split(",").some((name) => name.trim() === rootName));
   return imported ? example : `import { ${rootName} } from '${from}';

package/dist/styles.css

@@ -190,6 +190,11 @@ body {
   overflow-anchor: none;
   min-width: 0;
 }
+/* The sticky nav is only as tall as its list, so the column it lives in paints the panel:
+   on a long page the track reaches the page bottom and the background never stops short. */
+.nav-track {
+  background: var(--sd-surface);
+}
 @media (min-width: 1180px) {
   .rail-track::before {
     content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/storybook-docs",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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": {