@fohte/storybook-addon 0.1.0 → 0.1.1

package/README.md

@@ -35,6 +35,16 @@ export default config
 
 This wires up `overflow-check` and `external-resource-check` — no further setup needed.
 
+### overflow-check
+
+To exempt a selector across every story (e.g. a component whose oversized hit target never visibly clips anything), call `configureOverflowCheck()` once in `.storybook/preview.ts`. It's additive with a story's own `parameters.overflowCheck.ignoreSelectors` — both apply, since Storybook merges story-level parameters by replacing arrays rather than deep-merging them, and a story-level `ignoreSelectors` would otherwise silently drop the global list:
+
+```ts
+import { configureOverflowCheck } from '@fohte/storybook-addon/preview'
+
+configureOverflowCheck({ ignoreSelectors: ['[data-slot="checkbox"]'] })
+```
+
 ### unhandled-api-request-check
 
 This check needs to know which paths count as "API requests" (that's app-specific), and needs to be fed unhandled requests from your MSW setup. Configure it once and call `reportUnhandledApiRequest()` from `onUnhandledRequest` in `.storybook/preview.ts`:

package/lib/checks/check.d.ts

@@ -1,6 +1,6 @@
 export type StorybookCheck = {
     reset: () => void;
-    assert: (storyParameters?: unknown) => void;
+    assert: (storyParameters?: unknown, canvasElement?: Element) => void;
 };
 export declare function throwIfNotEmpty(urls: string[], message: string): void;
 //# sourceMappingURL=check.d.ts.map

package/lib/checks/overflow-check.d.ts

@@ -1,3 +1,6 @@
 import type { StorybookCheck } from '#checks/check.js';
+export declare function configureOverflowCheck(options: {
+    ignoreSelectors: string[];
+}): void;
 export declare const overflowCheck: StorybookCheck;
 //# sourceMappingURL=overflow-check.d.ts.map

package/lib/checks/overflow-check.js

@@ -1,32 +1,4 @@
 import { throwIfNotEmpty } from '#checks/check.js';
-// The consuming app's preview.ts calls reset()/assert() around each story
-// render (see preview.ts's beforeEach/afterEach). The story's container is a
-// bare <div> appended to document.body before anything is mounted into it —
-// reset() never gets `context.canvasElement` itself, so this is the only way
-// to reach the same element. Portal-based components (dialogs, popovers,
-// selects, etc.) append their own <div>s directly to document.body too, but
-// only *after* the story has mounted — so the container is reliably the
-// *first* element appended to body once a story starts, not the last. A
-// MutationObserver set up in reset() (which runs before the story mounts)
-// captures it.
-let storyRoot = null;
-let bodyObserver = null;
-function watchStoryRoot() {
-    storyRoot = null;
-    bodyObserver?.disconnect();
-    bodyObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            for (const node of mutation.addedNodes) {
-                if (node instanceof Element) {
-                    storyRoot = node;
-                    bodyObserver?.disconnect();
-                    return;
-                }
-            }
-        }
-    });
-    bodyObserver.observe(document.body, { childList: true });
-}
 function describeElement(el) {
     const id = el.id ? `#${el.id}` : '';
     const classAttr = el.getAttribute('class');
@@ -111,6 +83,16 @@ function findOverflows(root, ignoreSelectors) {
     }
     return groupByAncestor(entries);
 }
+// Exempted everywhere, not per-story: configured once by the consuming app
+// for markup that recurs across many stories (e.g. a component whose
+// oversized hit target never visibly clips anything). Kept separate from
+// parameters.overflowCheck.ignoreSelectors — which storybook's
+// combineParameters replaces wholesale rather than merges — so a story
+// setting its own ignoreSelectors can't silently drop this list.
+let globalIgnoreSelectors = [];
+export function configureOverflowCheck(options) {
+    globalIgnoreSelectors = options.ignoreSelectors;
+}
 function overflowCheckParameters(storyParameters) {
     if (typeof storyParameters !== 'object' || storyParameters === null) {
         return undefined;
@@ -144,19 +126,23 @@ function ignoreSelectorsOf(overflowCheck) {
     return ignoreSelectors.filter((s) => typeof s === 'string');
 }
 export const overflowCheck = {
-    reset: watchStoryRoot,
-    assert: (storyParameters) => {
+    reset: () => { },
+    assert: (storyParameters, canvasElement) => {
         const params = overflowCheckParameters(storyParameters);
         if (isDisabled(params))
             return;
-        if (storyRoot == null) {
-            // The MutationObserver in watchStoryRoot() hasn't seen an element
-            // appended to body yet (e.g. the story renders nothing). Skip rather
-            // than fail, since there is no root to scan.
-            console.warn('[overflow-check] story root not detected; skipping overflow scan');
+        if (canvasElement == null) {
+            // Real Storybook runs always pass canvasElement (it's the story's
+            // mount container); this only triggers a caller invoking assert()
+            // directly without one. Skip rather than fail, since there is no root
+            // to scan.
+            console.warn('[overflow-check] no canvasElement in story context; skipping overflow scan');
             return;
         }
-        throwIfNotEmpty(findOverflows(storyRoot, ignoreSelectorsOf(params)), 'Story has element(s) overflowing their container (clipped and invisible)');
+        throwIfNotEmpty(findOverflows(canvasElement, [
+            ...globalIgnoreSelectors,
+            ...ignoreSelectorsOf(params),
+        ]), 'Story has element(s) overflowing their container (clipped and invisible)');
     },
 };
 //# sourceMappingURL=overflow-check.js.map

package/lib/preview.d.ts

@@ -1,4 +1,5 @@
 import type { AfterEach, BeforeEach, Parameters, WebRenderer } from 'storybook/internal/types';
+export { configureOverflowCheck } from '#checks/overflow-check.js';
 export { configureUnhandledApiRequestCheck, reportUnhandledApiRequest, } from '#checks/unhandled-api-request-check.js';
 export declare const parameters: Parameters;
 export declare const beforeEach: BeforeEach<WebRenderer>;

package/lib/preview.js

@@ -1,6 +1,7 @@
 import { externalResourceCheck } from '#checks/external-resource-check.js';
 import { overflowCheck } from '#checks/overflow-check.js';
 import { unhandledApiRequestCheck } from '#checks/unhandled-api-request-check.js';
+export { configureOverflowCheck } from '#checks/overflow-check.js';
 export { configureUnhandledApiRequestCheck, reportUnhandledApiRequest, } from '#checks/unhandled-api-request-check.js';
 function injectStyle(css) {
     const style = document.createElement('style');
@@ -37,7 +38,8 @@ export const beforeEach = () => {
         check.reset();
 };
 export const afterEach = (context) => {
-    for (const check of checks)
-        check.assert(context.parameters);
+    for (const check of checks) {
+        check.assert(context.parameters, context.canvasElement);
+    }
 };
 //# sourceMappingURL=preview.js.map

package/package.json

@@ -51,7 +51,7 @@
     "typescript": "6.0.3",
     "vitest": "4.1.10"
   },
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
     "clean": "rimraf lib tsconfig.tsbuildinfo",
     "prebuild": "pnpm run clean",