@jfrader/storybook-docs 0.10.0 → 0.11.0

package/dist/component-demo.d.ts

@@ -7,10 +7,9 @@ export interface ComponentDemoProps {
     story: string;
     storyName: string;
     authoredStory?: string;
-    skipped: string[];
+    notice?: string | null;
     controls: StoryControl[];
     args: Record<string, unknown>;
-    unavailable: string | null;
     changed: boolean;
     onControlChange: (name: string, value: unknown) => void;
     onReset: () => void;
@@ -20,4 +19,4 @@ export interface ComponentDemoProps {
     children: ReactNode;
 }
 export declare function hasHorizontalOverflow({ scrollWidth, clientWidth }: Pick<HTMLElement, 'scrollWidth' | 'clientWidth'>): boolean;
-export declare function ComponentDemo({ story, storyName, authoredStory, skipped, controls, args, unavailable, changed, onControlChange, onReset, storyLayout, snippet, codeLanguage, children, }: ComponentDemoProps): import("react").JSX.Element;
+export declare function ComponentDemo({ story, storyName, authoredStory, notice, controls, args, changed, onControlChange, onReset, storyLayout, snippet, codeLanguage, children, }: ComponentDemoProps): import("react").JSX.Element;

package/dist/controls.d.ts

@@ -38,8 +38,8 @@ export declare function getStoryControls(meta: StoryShape, story: StoryShape, co
         [x: string]: unknown;
     };
     controls: StoryControl[];
-    unavailable: string | null;
 };
+export declare function skippedNotice(meta: StoryShape, definition: StoryShape): string | null;
 export declare function ControlledStoryFrame({ module, story, componentName, componentDefaults, renderSource }: {
     module: Record<string, unknown>;
     story: string;

package/dist/index.js

@@ -932,10 +932,9 @@ function ComponentDemo({
   story,
   storyName,
   authoredStory,
-  skipped,
+  notice,
   controls,
   args,
-  unavailable,
   changed,
   onControlChange,
   onReset,
@@ -986,12 +985,8 @@ function ComponentDemo({
       /* @__PURE__ */ jsx6("span", { "data-toc-slot": "", children: /* @__PURE__ */ jsx6(CopyLink, { name: storyName, story }) })
     ] }),
     authoredStory ? /* @__PURE__ */ jsx6("p", { className: "story-blurb", children: authoredStory }) : null,
-    skipped.length ? /* @__PURE__ */ jsxs4("p", { className: "sd-controls-note", children: [
-      "Not run here: ",
-      skipped.join(", "),
-      ". See it in Storybook."
-    ] }) : null,
-    unavailable ? /* @__PURE__ */ jsx6("p", { className: "sd-controls-note", children: unavailable }) : /* @__PURE__ */ jsxs4("div", { className: "sd-controls", role: "group", "aria-labelledby": controlsLabelId, children: [
+    notice ? /* @__PURE__ */ jsx6("p", { className: "sd-controls-note", children: notice }) : null,
+    controls.length ? /* @__PURE__ */ jsxs4("div", { className: "sd-controls", role: "group", "aria-labelledby": controlsLabelId, children: [
       /* @__PURE__ */ jsxs4("p", { className: "sd-controls-label", id: controlsLabelId, children: [
         "Controls for ",
         storyName
@@ -1008,7 +1003,7 @@ function ComponentDemo({
         )),
         /* @__PURE__ */ jsx6("button", { className: "sd-controls-reset", type: "button", disabled: !changed, onClick: onReset, children: "Reset" })
       ] })
-    ] }),
+    ] }) : null,
     /* @__PURE__ */ jsx6(
       "div",
       {
@@ -1077,14 +1072,27 @@ function getStoryControls(meta, story, componentDefaults = {}) {
   }
   return {
     args,
-    controls,
-    unavailable: controls.length === 0 ? "No controls." : null
+    controls
   };
 }
+function skippedNotice(meta, definition) {
+  const hasSetup = Boolean(meta.loaders || definition.loaders || meta.beforeEach || definition.beforeEach);
+  const hasViewport = Boolean(definition.parameters?.viewport ?? meta.parameters?.viewport);
+  if (hasSetup && hasViewport) {
+    return "Setup not run here and shown at this page\u2019s width. Open it in Storybook.";
+  }
+  if (hasSetup) {
+    return "Setup not run here. Open it in Storybook.";
+  }
+  if (hasViewport) {
+    return "Shown at this page\u2019s width. Open it in Storybook.";
+  }
+  return null;
+}
 function ControlledStoryFrame({ module, story, componentName, componentDefaults, renderSource }) {
   const meta = module.default ?? {};
   const definition = module[story] ?? {};
-  const { args: defaults, controls, unavailable } = getStoryControls(meta, definition, componentDefaults);
+  const { args: defaults, controls } = getStoryControls(meta, definition, componentDefaults);
   const [edits, setEdits] = useState5({});
   const args = { ...defaults, ...edits };
   const changed = Object.entries(edits).some(([name, value]) => !Object.is(value, defaults[name]));
@@ -1095,8 +1103,7 @@ function ControlledStoryFrame({ module, story, componentName, componentDefaults,
   const authoredCode = frameSource(meta, definition);
   const authoredStory = docsOverride?.description?.story ?? docsMeta?.description?.story;
   const storyName = definition.name ?? story;
-  const skipped = ["loaders", "beforeEach"].filter((key) => meta[key] || definition[key]);
-  if (definition.parameters?.viewport ?? meta.parameters?.viewport) skipped.push("viewport");
+  const notice = skippedNotice(meta, definition);
   const codeLanguage = authoredCode?.trim() ? docsOverride?.source?.language ?? docsMeta?.source?.language ?? "tsx" : "tsx";
   const snippet = buildUsageSnippet({
     componentName,
@@ -1115,10 +1122,9 @@ function ControlledStoryFrame({ module, story, componentName, componentDefaults,
       story,
       storyName,
       authoredStory,
-      skipped,
+      notice,
       controls,
       args,
-      unavailable,
       changed,
       storyLayout,
       snippet,

package/package.json

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