storybook-addon-pseudo-states 1.15.2 → 1.15.3

package/.babelrc.js

@@ -1,14 +1,4 @@
-const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
-
 module.exports = {
-    presets: [
-        [
-            "@babel/preset-env",
-            {
-                targets: 'defaults',
-                modules
-            }
-        ],
-        "@babel/preset-react"
-    ],
+  targets: "defaults",
+  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
 }

package/dist/chunk-A7FPDXSC.mjs

@@ -0,0 +1,21 @@
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+export {
+  ADDON_ID,
+  TOOL_ID,
+  EXCLUDED_PSEUDO_ELEMENTS,
+  PSEUDO_STATES
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+// src/index.ts
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};
+export {
+  src_default as default
+};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/manager.ts
+var import_manager_api2 = require("@storybook/manager-api");
+
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+// src/manager/PseudoStateTool.tsx
+var import_react = __toESM(require("react"));
+var import_components = require("@storybook/components");
+var import_manager_api = require("@storybook/manager-api");
+var import_theming = require("@storybook/theming");
+var LinkTitle = import_theming.styled.span(({ active }) => ({
+  color: active ? import_theming.color.secondary : "inherit"
+}));
+var LinkIcon = (0, import_theming.styled)(import_components.Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? import_theming.color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [{ pseudo }, updateGlobals] = (0, import_manager_api.useGlobals)();
+  const isActive = (0, import_react.useCallback)((option) => pseudo?.[option] === true, [pseudo]);
+  const toggleOption = (0, import_react.useCallback)(
+    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    [pseudo]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ import_react.default.createElement(
+        import_components.TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ import_react.default.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ import_react.default.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.Icons, { icon: "button" })
+    )
+  );
+};
+
+// src/manager.ts
+import_manager_api2.addons.register(ADDON_ID, () => {
+  import_manager_api2.addons.add(TOOL_ID, {
+    type: import_manager_api2.types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

package/dist/manager.mjs

@@ -0,0 +1,68 @@
+import {
+  ADDON_ID,
+  PSEUDO_STATES,
+  TOOL_ID
+} from "./chunk-A7FPDXSC.mjs";
+
+// src/manager.ts
+import { addons, types } from "@storybook/manager-api";
+
+// src/manager/PseudoStateTool.tsx
+import React, { useCallback } from "react";
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components";
+import { useGlobals } from "@storybook/manager-api";
+import { styled, color } from "@storybook/theming";
+var LinkTitle = styled.span(({ active }) => ({
+  color: active ? color.secondary : "inherit"
+}));
+var LinkIcon = styled(Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [{ pseudo }, updateGlobals] = useGlobals();
+  const isActive = useCallback((option) => pseudo?.[option] === true, [pseudo]);
+  const toggleOption = useCallback(
+    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    [pseudo]
+  );
+  return /* @__PURE__ */ React.createElement(
+    WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ React.createElement(
+        TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ React.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ React.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ React.createElement(Icons, { icon: "button" })
+    )
+  );
+};
+
+// src/manager.ts
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import * as _storybook_types from '@storybook/types';
+
+declare const decorators: _storybook_types.DecoratorFunction<_storybook_types.Renderer, _storybook_types.Args>[];
+
+export { decorators };

package/dist/preview.js

@@ -0,0 +1,240 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators
+});
+module.exports = __toCommonJS(preview_exports);
+
+// src/preview/withPseudoState.ts
+var import_core_events = require("@storybook/core-events");
+var import_preview_api = require("@storybook/preview-api");
+
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+// src/preview/splitSelectors.ts
+var isAtRule = (selector) => selector.indexOf("@") === 0;
+var splitSelectors = (selectors) => {
+  if (isAtRule(selectors))
+    return [selectors];
+  let result = [];
+  let parentheses = 0;
+  let brackets = 0;
+  let selector = "";
+  for (let i = 0, len = selectors.length; i < len; i++) {
+    const char = selectors[i];
+    if (char === "(") {
+      parentheses += 1;
+    } else if (char === ")") {
+      parentheses -= 1;
+    } else if (char === "[") {
+      brackets += 1;
+    } else if (char === "]") {
+      brackets -= 1;
+    } else if (char === ",") {
+      if (!parentheses && !brackets) {
+        result.push(selector.trim());
+        selector = "";
+        continue;
+      }
+    }
+    selector += char;
+  }
+  result.push(selector.trim());
+  return result;
+};
+
+// src/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES);
+var matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
+var matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
+var warnings = /* @__PURE__ */ new Set();
+var warnOnce = (message) => {
+  if (warnings.has(message))
+    return;
+  console.warn(message);
+  warnings.add(message);
+};
+var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
+var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
+  return cssText.replace(
+    selectorText,
+    splitSelectors(selectorText).flatMap((selector) => {
+      if (selector.includes(".pseudo-")) {
+        return [];
+      }
+      if (!matchOne.test(selector)) {
+        return [selector];
+      }
+      const states = [];
+      const plainSelector = selector.replace(matchAll, (_, state) => {
+        states.push(state);
+        return "";
+      });
+      const classSelector = states.reduce((acc, state) => {
+        if (isExcludedPseudoElement(selector, state))
+          return "";
+        return acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`);
+      }, selector);
+      if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
+        return [selector, classSelector].filter(Boolean);
+      }
+      const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`;
+      return [selector, classSelector, ancestorSelector].filter(
+        (selector2) => selector2 && !selector2.includes(":not()")
+      );
+    }).join(", ")
+  );
+};
+var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
+  if (sheet.__pseudoStatesRewritten)
+    return;
+  sheet.__pseudoStatesRewritten = true;
+  try {
+    let index = 0;
+    for (const cssRule of sheet.cssRules) {
+      if (!("selectorText" in cssRule))
+        continue;
+      const styleRule = cssRule;
+      if (matchOne.test(styleRule.selectorText)) {
+        const newRule = rewriteRule(styleRule, shadowRoot);
+        sheet.deleteRule(index);
+        sheet.insertRule(newRule, index);
+        if (shadowRoot && shadowHosts2)
+          shadowHosts2.add(shadowRoot.host);
+      }
+      index++;
+      if (index > 1e3) {
+        warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
+        break;
+      }
+    }
+  } catch (e) {
+    if (String(e).includes("cssRules")) {
+      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
+    } else {
+      console.error(e, sheet.href);
+    }
+  }
+};
+
+// src/preview/withPseudoState.ts
+var channel = import_preview_api.addons.getChannel();
+var shadowHosts = /* @__PURE__ */ new Set();
+var applyClasses = (element, classnames) => {
+  Object.values(PSEUDO_STATES).forEach((state) => element.classList.remove(`pseudo-${state}`));
+  classnames.forEach((classname) => element.classList.add(classname));
+};
+var applyParameter = (rootElement, parameter) => {
+  const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
+  const add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
+  Object.entries(parameter || {}).forEach(([state, value]) => {
+    if (typeof value === "boolean") {
+      if (value)
+        add(rootElement, state);
+    } else if (typeof value === "string") {
+      rootElement.querySelectorAll(value).forEach((el) => add(el, state));
+    } else if (Array.isArray(value)) {
+      value.forEach((sel) => rootElement.querySelectorAll(sel).forEach((el) => add(el, state)));
+    }
+  });
+  map.forEach((states, target) => {
+    const classnames = /* @__PURE__ */ new Set();
+    states.forEach((key) => PSEUDO_STATES[key] && classnames.add(`pseudo-${PSEUDO_STATES[key]}`));
+    applyClasses(target, classnames);
+  });
+};
+var updateShadowHost = (shadowHost) => {
+  const classnames = /* @__PURE__ */ new Set();
+  for (let element = shadowHost.parentElement; element; element = element.parentElement) {
+    if (!element.className)
+      continue;
+    element.className.split(" ").filter((classname) => classname.indexOf("pseudo-") === 0).forEach((classname) => classnames.add(classname));
+  }
+  applyClasses(shadowHost, classnames);
+};
+var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  const { pseudo: parameter } = parameters;
+  const { pseudo: globals } = globalsArgs;
+  const canvasElement = (0, import_preview_api.useMemo)(() => {
+    if (viewMode === "docs") {
+      return document.getElementById(`story--${id}`);
+    }
+    return document.getElementById("storybook-root") || document.getElementById("root");
+  }, [viewMode, id]);
+  (0, import_preview_api.useEffect)(() => {
+    if (parameter !== globals && viewMode === "story") {
+      channel.emit(import_core_events.UPDATE_GLOBALS, {
+        globals: { pseudo: parameter }
+      });
+    }
+  }, [parameter, viewMode]);
+  (0, import_preview_api.useEffect)(() => {
+    if (!canvasElement)
+      return;
+    const timeout = setTimeout(() => {
+      applyParameter(canvasElement, globals || parameter);
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [canvasElement, globals, parameter]);
+  return StoryFn();
+};
+var rewriteStyleSheets = (shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  if (shadowRoot?.adoptedStyleSheets?.length)
+    styleSheets = shadowRoot.adoptedStyleSheets;
+  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
+};
+channel.on(import_core_events.STORY_CHANGED, () => shadowHosts.clear());
+channel.on(import_core_events.STORY_RENDERED, () => rewriteStyleSheets());
+channel.on(import_core_events.DOCS_RENDERED, () => rewriteStyleSheets());
+if (Element.prototype.attachShadow) {
+  Element.prototype._attachShadow = Element.prototype.attachShadow;
+  Element.prototype.attachShadow = function attachShadow(init) {
+    const shadowRoot = this._attachShadow({ ...init, mode: "open" });
+    requestAnimationFrame(() => {
+      rewriteStyleSheets(shadowRoot);
+      updateShadowHost(shadowRoot.host);
+    });
+    return shadowRoot;
+  };
+}
+
+// src/preview.ts
+var decorators = [withPseudoState];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  decorators
+});