@fohte/storybook-addon 0.1.1 → 0.1.2

package/README.md

@@ -37,12 +37,14 @@ This wires up `overflow-check` and `external-resource-check` — no further setu
 
 ### 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:
+To exempt a selector across every story (e.g. a component whose oversized hit target never visibly clips anything), set `parameters.overflowCheck.globalIgnoreSelectors` once in `.storybook/preview.ts`. It's additive with a story's own `parameters.overflowCheck.ignoreSelectors` — both apply, since they're separate keys and Storybook deep-merges parameter objects by key (only arrays at the same key replace wholesale, so a story-level `ignoreSelectors` can't drop the global list):
 
 ```ts
-import { configureOverflowCheck } from '@fohte/storybook-addon/preview'
+import type { Parameters } from 'storybook/internal/types'
 
-configureOverflowCheck({ ignoreSelectors: ['[data-slot="checkbox"]'] })
+export const parameters: Parameters = {
+  overflowCheck: { globalIgnoreSelectors: ['[data-slot="checkbox"]'] },
+}
 ```
 
 ### unhandled-api-request-check

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

@@ -1,6 +1,3 @@
 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

@@ -83,16 +83,6 @@ 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;
@@ -125,6 +115,25 @@ function ignoreSelectorsOf(overflowCheck) {
         return [];
     return ignoreSelectors.filter((s) => typeof s === 'string');
 }
+// A separate key from `ignoreSelectors`, set once by the consuming app in
+// its top-level `preview.ts` `parameters` export (not via a module-level
+// setter — a story's own `parameters.overflowCheck` and the app's global one
+// live in different Storybook parameter scopes, which Storybook deep-merges
+// by object key, so a story setting `ignoreSelectors` can't drop this list).
+// This also sidesteps bundlers that resolve this addon's module twice for
+// one consumer (once from the app's own import, once via Storybook's addon
+// loader) — `context.parameters` comes from Storybook itself, not from
+// either module instance, so it's unaffected either way.
+function globalIgnoreSelectorsOf(overflowCheck) {
+    if (overflowCheck === undefined)
+        return [];
+    if (!('globalIgnoreSelectors' in overflowCheck))
+        return [];
+    const { globalIgnoreSelectors } = overflowCheck;
+    if (!Array.isArray(globalIgnoreSelectors))
+        return [];
+    return globalIgnoreSelectors.filter((s) => typeof s === 'string');
+}
 export const overflowCheck = {
     reset: () => { },
     assert: (storyParameters, canvasElement) => {
@@ -140,7 +149,7 @@ export const overflowCheck = {
             return;
         }
         throwIfNotEmpty(findOverflows(canvasElement, [
-            ...globalIgnoreSelectors,
+            ...globalIgnoreSelectorsOf(params),
             ...ignoreSelectorsOf(params),
         ]), 'Story has element(s) overflowing their container (clipped and invisible)');
     },

package/lib/checks/unhandled-api-request-check.d.ts

@@ -1,7 +1,15 @@
 import type { StorybookCheck } from '#checks/check.js';
+interface UnhandledApiRequestState {
+    pathPrefixes: string[];
+    unhandledApiRequestUrls: string[];
+}
+declare global {
+    var __fohteStorybookAddonUnhandledApiRequestState__: UnhandledApiRequestState | undefined;
+}
 export declare function configureUnhandledApiRequestCheck(options: {
     pathPrefixes: string[];
 }): void;
 export declare function reportUnhandledApiRequest(url: string): boolean;
 export declare const unhandledApiRequestCheck: StorybookCheck;
+export {};
 //# sourceMappingURL=unhandled-api-request-check.d.ts.map

package/lib/checks/unhandled-api-request-check.js

@@ -1,15 +1,13 @@
 import { throwIfNotEmpty } from '#checks/check.js';
-// Populated by reportUnhandledApiRequest(), which the consuming app's MSW
-// `onUnhandledRequest` callback calls — a story hitting an API endpoint with
-// no MSW handler gets MSW's error response instead of real data, so the
-// screenshot captures a broken UI state without failing otherwise.
-const unhandledApiRequestUrls = [];
-// Which paths count as "API requests" is app-specific (tq uses `/api/`, a
-// future app might use a different prefix or none), so it's configured once
-// by the consuming app rather than hardcoded here.
-let pathPrefixes = [];
+function globalState() {
+    globalThis.__fohteStorybookAddonUnhandledApiRequestState__ ??= {
+        pathPrefixes: [],
+        unhandledApiRequestUrls: [],
+    };
+    return globalThis.__fohteStorybookAddonUnhandledApiRequestState__;
+}
 export function configureUnhandledApiRequestCheck(options) {
-    pathPrefixes = options.pathPrefixes;
+    globalState().pathPrefixes = options.pathPrefixes;
 }
 // Returns whether the request was recorded, so the caller can decide whether
 // to also print MSW's own error for it.
@@ -17,18 +15,19 @@ export function reportUnhandledApiRequest(url) {
     const parsed = new URL(url);
     if (parsed.origin !== window.location.origin)
         return false;
-    if (!pathPrefixes.some((prefix) => parsed.pathname.startsWith(prefix))) {
+    const state = globalState();
+    if (!state.pathPrefixes.some((prefix) => parsed.pathname.startsWith(prefix))) {
         return false;
     }
-    unhandledApiRequestUrls.push(parsed.pathname);
+    state.unhandledApiRequestUrls.push(parsed.pathname);
     return true;
 }
 export const unhandledApiRequestCheck = {
     reset: () => {
-        unhandledApiRequestUrls.length = 0;
+        globalState().unhandledApiRequestUrls.length = 0;
     },
     assert: () => {
-        throwIfNotEmpty(unhandledApiRequestUrls, 'Story made unhandled API request(s); add an MSW handler for');
+        throwIfNotEmpty(globalState().unhandledApiRequestUrls, 'Story made unhandled API request(s); add an MSW handler for');
     },
 };
 //# sourceMappingURL=unhandled-api-request-check.js.map

package/lib/preview.d.ts

@@ -1,5 +1,4 @@
 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,7 +1,6 @@
 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');

package/package.json

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