storybook-addon-pseudo-states 1.15.4 → 1.15.5

package/dist/esm/rewriteStyleSheet.test.js

@@ -0,0 +1,67 @@
+import { rewriteStyleSheet } from "./rewriteStyleSheet";
+class Sheet {
+  constructor() {
+    this.__pseudoStatesRewritten = false;
+    for (var _len = arguments.length, rules = new Array(_len), _key = 0; _key < _len; _key++) {
+      rules[_key] = arguments[_key];
+    }
+    this.cssRules = rules.map(cssText => ({
+      cssText,
+      selectorText: cssText.slice(0, cssText.indexOf(" {"))
+    }));
+  }
+  deleteRule(index) {
+    this.cssRules.splice(index, 1);
+  }
+  insertRule(cssText, index) {
+    this.cssRules.splice(index, 0, cssText);
+  }
+}
+describe("rewriteStyleSheet", () => {
+  it("adds alternative selector targeting the element directly", () => {
+    const sheet = new Sheet("a:hover { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toContain("a.pseudo-hover");
+  });
+  it("adds alternative selector targeting an ancestor", () => {
+    const sheet = new Sheet("a:hover { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
+  });
+  it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
+    const sheet = new Sheet("::-webkit-scrollbar-thumb:hover { border-color: transparent; }");
+    rewriteStyleSheet(sheet);
+    console.log(sheet.cssRules[0]);
+    expect(sheet.cssRules[0]).not.toContain("::-webkit-scrollbar-thumb.pseudo-hover");
+  });
+  it("adds alternative selector for each pseudo selector", () => {
+    const sheet = new Sheet("a:hover, a:focus { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toContain("a.pseudo-hover");
+    expect(sheet.cssRules[0]).toContain("a.pseudo-focus");
+    expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
+    expect(sheet.cssRules[0]).toContain(".pseudo-focus a");
+  });
+  it("keeps non-pseudo selectors as-is", () => {
+    const sheet = new Sheet("a.class, a:hover, a:focus, a#id { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toContain("a.class");
+    expect(sheet.cssRules[0]).toContain("a#id");
+  });
+  it("supports combined pseudo selectors", () => {
+    const sheet = new Sheet("a:hover:focus { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toContain("a.pseudo-hover.pseudo-focus");
+    expect(sheet.cssRules[0]).toContain(".pseudo-hover.pseudo-focus a");
+  });
+  it('supports ":host"', () => {
+    const sheet = new Sheet(":host(:hover) { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toEqual(":host(:hover), :host(.pseudo-hover) { color: red }");
+  });
+  it('supports ":not"', () => {
+    const sheet = new Sheet(":not(:hover) { color: red }");
+    rewriteStyleSheet(sheet);
+    expect(sheet.cssRules[0]).toEqual(":not(:hover), :not(.pseudo-hover) { color: red }");
+  });
+});

package/dist/esm/splitSelectors.js

@@ -0,0 +1,29 @@
+const isAtRule = selector => selector.indexOf("@") === 0;
+export const 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;
+};

package/dist/esm/splitSelectors.test.js

@@ -0,0 +1,15 @@
+import { splitSelectors } from "./splitSelectors";
+describe("splitSelectors", () => {
+  test("handles basic selectors", () => {
+    expect(splitSelectors(".a")).toEqual([".a"]);
+    expect(splitSelectors(".a, .b")).toEqual([".a", ".b"]);
+  });
+  test("supports ::slotted and :is", () => {
+    expect(splitSelectors("::slotted(:is(button, a):active)")).toEqual(["::slotted(:is(button, a):active)"]);
+    expect(splitSelectors("::slotted(:is(button, a):active), ::slotted(:is(button, a):hover)")).toEqual(["::slotted(:is(button, a):active)", "::slotted(:is(button, a):hover)"]);
+  });
+  test("supports :host", () => {
+    expect(splitSelectors(":host([type='secondary']) ::slotted(:is(button, a)), :host([type='primary']) ::slotted(:is(button, a):active)")).toEqual([":host([type='secondary']) ::slotted(:is(button, a))", ":host([type='primary']) ::slotted(:is(button, a):active)"]);
+    expect(splitSelectors(":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))")).toEqual([":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))"]);
+  });
+});

package/dist/esm/withPseudoState.js

@@ -0,0 +1,121 @@
+/* eslint-env browser */
+import { addons, useEffect } from "@storybook/addons";
+import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED, UPDATE_GLOBALS } from "@storybook/core-events";
+import { PSEUDO_STATES } from "./constants";
+import { rewriteStyleSheet } from "./rewriteStyleSheet";
+const channel = addons.getChannel();
+const shadowHosts = new Set();
+
+// Drops any existing pseudo state classnames that carried over from a previously viewed story
+// before adding the new classnames. We do this the old-fashioned way, for IE compatibility.
+const applyClasses = (element, classnames) => {
+  element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
+};
+const applyParameter = (rootElement, parameter) => {
+  const map = new Map([[rootElement, new Set()]]);
+  const add = (target, state) => map.set(target, new Set([...(map.get(target) || []), state]));
+  Object.entries(parameter || {}).forEach(_ref => {
+    let [state, value] = _ref;
+    if (typeof value === "boolean") {
+      // default API - applying pseudo class to root element.
+      add(rootElement, value && state);
+    } else if (typeof value === "string") {
+      // explicit selectors API - applying pseudo class to a specific element
+      rootElement.querySelectorAll(value).forEach(el => add(el, state));
+    } else if (Array.isArray(value)) {
+      // explicit selectors API - we have an array (of strings) recursively handle each one
+      value.forEach(sel => rootElement.querySelectorAll(sel).forEach(el => add(el, state)));
+    }
+  });
+  map.forEach((states, target) => {
+    const classnames = [];
+    states.forEach(key => PSEUDO_STATES[key] && classnames.push(`pseudo-${PSEUDO_STATES[key]}`));
+    applyClasses(target, classnames);
+  });
+};
+
+// Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
+// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
+const updateShadowHost = shadowHost => {
+  const classnames = 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);
+};
+
+// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
+export const withPseudoState = (StoryFn, _ref2) => {
+  let {
+    viewMode,
+    parameters,
+    id,
+    globals: globalsArgs
+  } = _ref2;
+  const {
+    pseudo: parameter
+  } = parameters;
+  const {
+    pseudo: globals
+  } = globalsArgs;
+
+  // Sync parameter to globals, used by the toolbar (only in canvas as this
+  // doesn't make sense for docs because many stories are displayed at once)
+  useEffect(() => {
+    if (parameter !== globals && viewMode === "story") {
+      channel.emit(UPDATE_GLOBALS, {
+        globals: {
+          pseudo: parameter
+        }
+      });
+    }
+  }, [parameter, viewMode]);
+
+  // Convert selected states to classnames and apply them to the story root element.
+  // Then update each shadow host to redetermine its own pseudo classnames.
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
+      applyParameter(element, globals || parameter);
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [globals, parameter, viewMode]);
+  return StoryFn();
+};
+
+// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
+const rewriteStyleSheets = shadowRoot => {
+  let styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
+  if (shadowRoot && shadowRoot.adoptedStyleSheets ? shadowRoot.adoptedStyleSheets.length : undefined) styleSheets = shadowRoot.adoptedStyleSheets;
+  Array.from(styleSheets).forEach(sheet => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
+};
+
+// Only track shadow hosts for the current story
+channel.on(STORY_CHANGED, () => shadowHosts.clear());
+
+// Reinitialize CSS enhancements every time the story changes
+channel.on(STORY_RENDERED, () => rewriteStyleSheets());
+
+// Reinitialize CSS enhancements every time a docs page is rendered
+channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
+
+// IE doesn't support shadow DOM
+if (Element.prototype.attachShadow) {
+  // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM
+  Element.prototype._attachShadow = Element.prototype.attachShadow;
+  Element.prototype.attachShadow = function attachShadow(init) {
+    // Force "open" mode, so we can access the shadowRoot
+    const shadowRoot = this._attachShadow({
+      ...init,
+      mode: "open"
+    });
+    // Wait for it to render and apply its styles before rewriting them
+    requestAnimationFrame(() => {
+      rewriteStyleSheets(shadowRoot);
+      updateShadowHost(shadowRoot.host);
+    });
+    return shadowRoot;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "1.15.4",
+  "version": "1.15.5",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",
@@ -14,71 +14,49 @@
   },
   "author": "ghengeveld",
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./manager": {
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
-    },
-    "./preview": {
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
+  "main": "dist/cjs/preset.js",
+  "module": "dist/esm/preset.js",
   "files": [
-    "*.js",
-    "dist/**/*"
+    "dist/**/*",
+    "README.md",
+    "*.js"
   ],
   "scripts": {
     "clean": "rimraf ./dist",
     "start": "concurrently \"yarn storybook --no-manager-cache --quiet\" \"yarn build:dist --watch\"",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "start-storybook -p 6006",
     "test": "jest src",
-    "chromatic": "npx chromatic",
-    "build:dist": "tsup",
-    "build:storybook": "storybook build",
+    "chromatic": "chromatic",
+    "build:dist": "babel ./src --out-dir ./dist/cjs && BABEL_ESM=\"true\" babel ./src --out-dir ./dist/esm",
+    "build:storybook": "build-storybook",
     "prepublish": "yarn clean && yarn build:dist",
     "release": "auto shipit --base-branch=main"
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-essentials": "^7.0.0-beta.3",
-    "@storybook/addon-interactions": "^7.0.0-beta.3",
-    "@storybook/addon-links": "^7.0.0-beta.3",
-    "@storybook/react": "^7.0.0-beta.3",
-    "@storybook/react-webpack5": "^7.0.0-beta.3",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/types": "^7.0.0-beta.3",
-    "@types/jest": "^29.2.4",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/react": "^6.5.14",
     "auto": "^10.16.8",
+    "babel-loader": "^9.1.0",
+    "chromatic": "^6.12.0",
     "concurrently": "^5.3.0",
     "jest": "^27.5.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "storybook": "^7.0.0-beta.3",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.4"
+    "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "@storybook/components": "next",
-    "@storybook/core-events": "next",
-    "@storybook/manager-api": "next",
-    "@storybook/preview-api": "next",
-    "@storybook/theming": "next",
+    "@storybook/addons": "^6.5.0",
+    "@storybook/api": "^6.5.0",
+    "@storybook/components": "^6.5.0",
+    "@storybook/core-events": "^6.5.0",
+    "@storybook/theming": "^6.5.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

package/preset.js

@@ -0,0 +1,9 @@
+function managerEntries(entry = []) {
+    return [...entry, require.resolve("./dist/esm/preset/manager")]
+}
+
+function config(entry = []) {
+    return [...entry, require.resolve("./dist/esm/preset/preview")]
+}
+
+module.exports = { managerEntries, config };

package/dist/chunk-A7FPDXSC.mjs

@@ -1,21 +0,0 @@
-// 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

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

package/dist/index.js

@@ -1,31 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-// 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

@@ -1 +0,0 @@
-

package/dist/manager.js

@@ -1,96 +0,0 @@
-"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

@@ -1,68 +0,0 @@
-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

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