@accesslint/storybook-addon 0.6.5 → 0.6.8

package/dist/manager.js

@@ -1,13 +1,13 @@
-import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+import React, { useMemo, useState, useRef, useCallback } from 'react';
+import { addons, types, useChannel } from 'storybook/internal/manager-api';
+import { STORY_CHANGED, STORY_FINISHED } from 'storybook/internal/core-events';
 import { useTheme } from 'storybook/internal/theming';
-import { AddonPanel } from 'storybook/internal/components';
 
 // src/manager.tsx
 
 // src/constants.ts
 var ADDON_ID = "accesslint/a11y";
-var PANEL_ID = `${ADDON_ID}/panel`;
+var PARAM_KEY = "accesslint";
 var IMPACT_COLOR = {
   critical: "#d32f2f",
   serious: "#d32f2f",
@@ -31,8 +31,7 @@ var LEVEL_COLOR = {
   AA: "#1565c0",
   AAA: "#6a1b9a"
 };
-var HIGHLIGHT_ID = `${ADDON_ID}/highlight`;
-var Panel = ({ active, ...rest }) => {
+var Panel = ({ active }) => {
   const theme = useTheme();
   const isDark = theme.base === "dark";
   const colors = useMemo(() => ({
@@ -48,41 +47,29 @@ var Panel = ({ active, ...rest }) => {
     tagText: isDark ? "#ccc" : "#616161",
     ruleId: isDark ? "#64b5f6" : "#1565c0"
   }), [isDark, theme]);
-  const [violations, setViolations] = useAddonState(
-    ADDON_ID,
-    []
-  );
-  const [meta, setMeta] = useState(null);
+  const [violations, setViolations] = useState([]);
+  const [ruleCount, setRuleCount] = useState(0);
   const [expandedIndex, setExpandedIndex] = useState(null);
   const buttonRefs = useRef([]);
-  const emit = useChannel({
-    [`${ADDON_ID}/results`]: (results) => {
-      setViolations(results);
+  useChannel({
+    [STORY_FINISHED]: ({ reporters }) => {
+      const report = reporters.find((r) => r.type === "accesslint");
+      if (!report) return;
+      const result = report.result;
+      setViolations(result.violations ?? []);
+      setRuleCount(result.ruleCount ?? 0);
       setExpandedIndex(null);
     },
-    [`${ADDON_ID}/meta`]: (data) => {
-      setMeta(data);
+    [STORY_CHANGED]: () => {
+      setViolations([]);
+      setRuleCount(0);
+      setExpandedIndex(null);
     }
   });
-  const sorted = [...violations].sort(
-    (a, b) => (IMPACT_ORDER[a.impact] ?? 4) - (IMPACT_ORDER[b.impact] ?? 4)
+  const sorted = useMemo(
+    () => [...violations].sort((a, b) => (IMPACT_ORDER[a.impact] ?? 4) - (IMPACT_ORDER[b.impact] ?? 4)),
+    [violations]
   );
-  const expanded = expandedIndex !== null ? sorted[expandedIndex] : null;
-  useEffect(() => {
-    if (expanded?.selector) {
-      const local = expanded.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-      emit("storybook/highlight/add", {
-        id: HIGHLIGHT_ID,
-        selectors: [local],
-        styles: {
-          outline: `2px solid ${IMPACT_COLOR[expanded.impact] || "#1565c0"}`,
-          outlineOffset: "2px"
-        }
-      });
-    } else {
-      emit("storybook/highlight/remove", { id: HIGHLIGHT_ID });
-    }
-  }, [expandedIndex]);
   const handleKeyDown = useCallback((e, index) => {
     let next = null;
     switch (e.key) {
@@ -105,7 +92,8 @@ var Panel = ({ active, ...rest }) => {
     buttonRefs.current[next]?.focus();
   }, [sorted.length]);
   if (!active) return null;
-  return /* @__PURE__ */ React.createElement(AddonPanel, { active, ...rest }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", height: "100%", fontFamily: "system-ui, sans-serif" } }, meta && /* @__PURE__ */ React.createElement("div", { style: {
+  const passed = ruleCount - new Set(violations.map((v) => v.ruleId)).size;
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", height: "100%", fontFamily: "system-ui, sans-serif" } }, ruleCount > 0 && /* @__PURE__ */ React.createElement("div", { style: {
     display: "flex",
     gap: "12px",
     padding: "8px 12px",
@@ -113,7 +101,7 @@ var Panel = ({ active, ...rest }) => {
     color: colors.textMuted,
     borderBottom: `1px solid ${colors.border}`,
     flexShrink: 0
-  } }, /* @__PURE__ */ React.createElement("span", null, meta.ruleCount, " rules"), /* @__PURE__ */ React.createElement("span", { style: { color: "#2e7d32" } }, meta.passed, " passed"), /* @__PURE__ */ React.createElement("span", { style: { color: meta.failed > 0 ? "#d32f2f" : colors.textMuted } }, meta.failed, " failed"), /* @__PURE__ */ React.createElement("span", null, meta.duration, "ms")), violations.length === 0 ? /* @__PURE__ */ React.createElement("p", { style: { padding: "12px", margin: 0, fontSize: "13px", color: colors.textMuted } }, "No accessibility violations found.") : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React.createElement(
+  } }, /* @__PURE__ */ React.createElement("span", null, ruleCount, " rules"), /* @__PURE__ */ React.createElement("span", { style: { color: "#2e7d32" } }, passed, " passed"), /* @__PURE__ */ React.createElement("span", { style: { color: violations.length > 0 ? "#d32f2f" : colors.textMuted } }, new Set(violations.map((v) => v.ruleId)).size, " failed")), violations.length === 0 ? /* @__PURE__ */ React.createElement("p", { style: { padding: "12px", margin: 0, fontSize: "13px", color: colors.textMuted } }, "No accessibility violations found.") : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React.createElement(
     "ul",
     {
       style: { listStyle: "none", padding: 0, margin: 0 },
@@ -200,13 +188,20 @@ var Panel = ({ active, ...rest }) => {
         v.html
       ))));
     })
-  ))));
+  )));
 };
 
 // src/manager.tsx
+var PANEL_ID = `${ADDON_ID}/panel`;
 var Title = () => {
-  const [violations] = useAddonState(ADDON_ID, []);
-  const count = violations.length;
+  const [count, setCount] = React.useState(0);
+  useChannel({
+    [STORY_FINISHED]: ({ reporters }) => {
+      const report = reporters.find((r) => r.type === "accesslint");
+      const violations = report?.result?.violations;
+      setCount(violations?.length ?? 0);
+    }
+  });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, "AccessLint", count > 0 && /* @__PURE__ */ React.createElement("span", { style: {
     display: "inline-block",
     marginLeft: "8px",
@@ -223,8 +218,9 @@ var Title = () => {
 };
 addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
-    type: types.PANEL,
     title: Title,
-    render: Panel
+    type: types.PANEL,
+    render: Panel,
+    paramKey: PARAM_KEY
   });
 });

package/dist/preview.cjs

@@ -1,58 +1,60 @@
 'use strict';
 
-var previewApi = require('storybook/internal/preview-api');
 var core = require('@accesslint/core');
 
-// src/preview.ts
-
-// src/constants.ts
-var ADDON_ID = "accesslint/a11y";
-
 // src/preview.ts
 core.configureRules({
   disabledRules: ["accesslint-045"]
 });
-var decorator = (storyFn) => {
-  const story = storyFn();
-  setTimeout(async () => {
-    const start = performance.now();
-    const results = core.runAudit(document);
-    const duration = Math.round(performance.now() - start);
-    const root = document.getElementById("storybook-root");
-    const scoped = root ? results.violations.filter((v) => {
-      const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-      try {
-        const el = document.querySelector(local);
-        return el && root.contains(el);
-      } catch {
-        return false;
-      }
-    }) : results.violations;
-    const enriched = scoped.map((v) => {
-      const rule = core.getRuleById(v.ruleId);
-      return {
-        ...v,
-        element: void 0,
-        // not serializable
-        description: rule?.description,
-        wcag: rule?.wcag,
-        level: rule?.level,
-        guidance: rule?.guidance
-      };
-    });
-    const failedRuleIds = new Set(scoped.map((v) => v.ruleId));
-    const channel = previewApi.addons.getChannel();
-    channel.emit(`${ADDON_ID}/results`, enriched);
-    channel.emit(`${ADDON_ID}/meta`, {
-      duration,
-      ruleCount: results.ruleCount,
-      failed: failedRuleIds.size,
-      passed: results.ruleCount - failedRuleIds.size,
-      violations: scoped.length
-    });
-  }, 0);
-  return story;
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = core.getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = core.runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
 };
-var decorators = [decorator];
 
-exports.decorators = decorators;
+exports.afterEach = afterEach;

package/dist/preview.d.cts

@@ -1,3 +1,9 @@
-declare const decorators: ((storyFn: () => unknown) => unknown)[];
+declare const afterEach: ({ reporting, parameters, viewMode, }: {
+    reporting: {
+        addReport: (report: Record<string, unknown>) => void;
+    };
+    parameters: Record<string, unknown>;
+    viewMode: string;
+}) => Promise<void>;
 
-export { decorators };
+export { afterEach };

package/dist/preview.d.ts

@@ -1,3 +1,9 @@
-declare const decorators: ((storyFn: () => unknown) => unknown)[];
+declare const afterEach: ({ reporting, parameters, viewMode, }: {
+    reporting: {
+        addReport: (report: Record<string, unknown>) => void;
+    };
+    parameters: Record<string, unknown>;
+    viewMode: string;
+}) => Promise<void>;
 
-export { decorators };
+export { afterEach };

package/dist/preview.js

@@ -1,56 +1,58 @@
-import { addons } from 'storybook/internal/preview-api';
 import { configureRules, runAudit, getRuleById } from '@accesslint/core';
 
-// src/preview.ts
-
-// src/constants.ts
-var ADDON_ID = "accesslint/a11y";
-
 // src/preview.ts
 configureRules({
   disabledRules: ["accesslint-045"]
 });
-var decorator = (storyFn) => {
-  const story = storyFn();
-  setTimeout(async () => {
-    const start = performance.now();
-    const results = runAudit(document);
-    const duration = Math.round(performance.now() - start);
-    const root = document.getElementById("storybook-root");
-    const scoped = root ? results.violations.filter((v) => {
-      const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
-      try {
-        const el = document.querySelector(local);
-        return el && root.contains(el);
-      } catch {
-        return false;
-      }
-    }) : results.violations;
-    const enriched = scoped.map((v) => {
-      const rule = getRuleById(v.ruleId);
-      return {
-        ...v,
-        element: void 0,
-        // not serializable
-        description: rule?.description,
-        wcag: rule?.wcag,
-        level: rule?.level,
-        guidance: rule?.guidance
-      };
-    });
-    const failedRuleIds = new Set(scoped.map((v) => v.ruleId));
-    const channel = addons.getChannel();
-    channel.emit(`${ADDON_ID}/results`, enriched);
-    channel.emit(`${ADDON_ID}/meta`, {
-      duration,
-      ruleCount: results.ruleCount,
-      failed: failedRuleIds.size,
-      passed: results.ruleCount - failedRuleIds.size,
-      violations: scoped.length
-    });
-  }, 0);
-  return story;
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
 };
-var decorators = [decorator];
 
-export { decorators };
+export { afterEach };

package/dist/vitest-plugin.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+// src/vitest-plugin.ts
+function accesslintTest() {
+  const distDir = new URL(".", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vitest-plugin.cjs', document.baseURI).href))).pathname;
+  return {
+    name: "@accesslint/storybook-addon",
+    config() {
+      return {
+        server: {
+          fs: {
+            allow: [distDir]
+          }
+        },
+        test: {
+          setupFiles: ["@accesslint/storybook-addon/vitest-setup"]
+        }
+      };
+    }
+  };
+}
+
+exports.accesslintTest = accesslintTest;

package/dist/vitest-plugin.d.cts

@@ -0,0 +1,19 @@
+/**
+ * Vitest plugin that automatically registers AccessLint's afterEach annotation
+ * so that running component tests produces per-story accessibility badges.
+ *
+ * Usage in vitest.config.ts (or the storybook vitest workspace):
+ *
+ *   import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+ *   import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
+ *
+ *   export default defineConfig({
+ *     plugins: [storybookTest(), accesslintTest()],
+ *   });
+ */
+declare function accesslintTest(): {
+    name: string;
+    config: () => Record<string, unknown>;
+};
+
+export { accesslintTest };

package/dist/vitest-plugin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Vitest plugin that automatically registers AccessLint's afterEach annotation
+ * so that running component tests produces per-story accessibility badges.
+ *
+ * Usage in vitest.config.ts (or the storybook vitest workspace):
+ *
+ *   import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+ *   import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";
+ *
+ *   export default defineConfig({
+ *     plugins: [storybookTest(), accesslintTest()],
+ *   });
+ */
+declare function accesslintTest(): {
+    name: string;
+    config: () => Record<string, unknown>;
+};
+
+export { accesslintTest };

package/dist/vitest-plugin.js

@@ -0,0 +1,21 @@
+// src/vitest-plugin.ts
+function accesslintTest() {
+  const distDir = new URL(".", import.meta.url).pathname;
+  return {
+    name: "@accesslint/storybook-addon",
+    config() {
+      return {
+        server: {
+          fs: {
+            allow: [distDir]
+          }
+        },
+        test: {
+          setupFiles: ["@accesslint/storybook-addon/vitest-setup"]
+        }
+      };
+    }
+  };
+}
+
+export { accesslintTest };

package/dist/vitest-setup.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var previewApi = require('storybook/preview-api');
+var core = require('@accesslint/core');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  afterEach: () => afterEach
+});
+core.configureRules({
+  disabledRules: ["accesslint-045"]
+});
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = core.getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = core.runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
+};
+
+// src/vitest-setup.ts
+var g = globalThis;
+var existing = g.globalProjectAnnotations;
+g.globalProjectAnnotations = existing ? previewApi.composeConfigs([existing, preview_exports]) : previewApi.composeConfigs([preview_exports]);

package/dist/vitest-setup.js

@@ -0,0 +1,72 @@
+import { composeConfigs } from 'storybook/preview-api';
+import { configureRules, runAudit, getRuleById } from '@accesslint/core';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  afterEach: () => afterEach
+});
+configureRules({
+  disabledRules: ["accesslint-045"]
+});
+function scopeViolations(violations) {
+  const root = document.getElementById("storybook-root");
+  if (!root) return violations;
+  return violations.filter((v) => {
+    const local = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+    try {
+      const el = document.querySelector(local);
+      return el && root.contains(el);
+    } catch {
+      return false;
+    }
+  });
+}
+function enrichViolations(violations) {
+  return violations.map((v) => {
+    const rule = getRuleById(v.ruleId);
+    return {
+      ...v,
+      element: void 0,
+      // not serializable
+      description: rule?.description,
+      wcag: rule?.wcag,
+      level: rule?.level,
+      guidance: rule?.guidance
+    };
+  });
+}
+var afterEach = async ({
+  reporting,
+  parameters,
+  viewMode
+}) => {
+  const accesslintParam = parameters?.accesslint;
+  if (accesslintParam?.disable === true || accesslintParam?.test === "off") return;
+  if (viewMode !== "story") return;
+  const result = runAudit(document);
+  const scoped = scopeViolations(result.violations);
+  const enriched = enrichViolations(scoped);
+  const hasViolations = enriched.length > 0;
+  const mode = accesslintParam?.test === "todo" ? "warning" : "failed";
+  reporting.addReport({
+    type: "accesslint",
+    version: 1,
+    result: {
+      violations: enriched,
+      ruleCount: result.ruleCount
+    },
+    status: hasViolations ? mode : "passed"
+  });
+};
+
+// src/vitest-setup.ts
+var g = globalThis;
+var existing = g.globalProjectAnnotations;
+g.globalProjectAnnotations = existing ? composeConfigs([existing, preview_exports]) : composeConfigs([preview_exports]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accesslint/storybook-addon",
-  "version": "0.6.5",
+  "version": "0.6.8",
   "description": "Catch accessibility violations in your Storybook stories as you develop",
   "license": "MIT",
   "publishConfig": {
@@ -24,6 +24,14 @@
     "./preview": {
       "import": "./dist/preview.js",
       "require": "./dist/preview.cjs"
+    },
+    "./vitest-plugin": {
+      "import": "./dist/vitest-plugin.js",
+      "require": "./dist/vitest-plugin.cjs"
+    },
+    "./vitest-setup": {
+      "import": "./dist/vitest-setup.js",
+      "require": "./dist/vitest-setup.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -37,7 +45,6 @@
   ],
   "scripts": {
     "build": "tsup",
-    "prepublishOnly": "node -e \"const fs = require('fs'); const v = JSON.parse(fs.readFileSync('node_modules/@accesslint/core/package.json','utf8')).version; const pkg = JSON.parse(fs.readFileSync('package.json','utf8')); pkg.version = v; fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\\n');\"",
     "build:watch": "tsup --watch",
     "typecheck": "tsc --noEmit"
   },