storybook 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/highlight/preview.js

@@ -0,0 +1,519 @@
+var ce = Object.defineProperty;
+var l = (s, e) => ce(s, "name", { value: e, configurable: !0 });
+
+// src/highlight/preview.ts
+import { addons as _, definePreview as ue } from "storybook/preview-api";
+
+// src/highlight/useHighlights.ts
+import { STORY_CHANGED as re } from "storybook/internal/core-events";
+
+// src/highlight/constants.ts
+var D = "storybook/highlight", G = `${D}/add`, ee = `${D}/remove`, X = `${D}/reset`, P = `${D}/scroll-into-view`, Y = 2147483647;
+
+// src/highlight/utils.ts
+var ae = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y = /* @__PURE__ */ l((s, e, d) => {
+  let c = ae.includes(s) ? document.createElementNS("http://www.w3.org/2000/svg", s) : document.createElement(s);
+  return Object.entries(e).forEach(([i, g]) => {
+    /[A-Z]/.test(i) ? (i === "onClick" && (c.addEventListener("click", g), c.addEventListener("keydown", (p) => {
+      (p.key === "Enter" || p.key === " ") && (p.preventDefault(), g());
+    })), i === "onMouseEnter" && c.addEventListener("mouseenter", g), i === "onMouseLeave" && c.addEventListener("mouseleave", g)) : c.setAttribute(
+    i, g);
+  }), d?.forEach((i) => {
+    if (!(i == null || i === !1))
+      try {
+        c.appendChild(i);
+      } catch {
+        c.appendChild(document.createTextNode(String(i)));
+      }
+  }), c;
+}, "createElement"), te = /* @__PURE__ */ l((s) => {
+  if ("elements" in s) {
+    let { elements: e, color: d, style: c } = s;
+    return {
+      selectors: e,
+      styles: {
+        outline: `2px ${c} ${d}`,
+        outlineOffset: "2px",
+        boxShadow: "0 0 0 6px rgba(255,255,255,0.6)"
+      }
+    };
+  }
+  return s;
+}, "convertLegacy"), de = /* @__PURE__ */ l((s) => s instanceof Function, "isFunction"), R = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(),
+F = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((s) => {
+  let e = Symbol();
+  return O.set(e, []), R.set(e, s), { get: /* @__PURE__ */ l(() => R.get(e), "get"), set: /* @__PURE__ */ l((p) => {
+    let u = R.get(e), m = de(p) ? p(u) : p;
+    m !== u && (R.set(e, m), O.get(e)?.forEach((x) => {
+      F.get(x)?.(), F.set(x, x(m));
+    }));
+  }, "set"), subscribe: /* @__PURE__ */ l((p) => (O.get(e)?.push(p), () => {
+    let u = O.get(e);
+    u && O.set(
+      e,
+      u.filter((m) => m !== p)
+    );
+  }), "subscribe"), teardown: /* @__PURE__ */ l(() => {
+    O.get(e)?.forEach((p) => {
+      F.get(p)?.(), F.delete(p);
+    }), O.delete(e), R.delete(e);
+  }, "teardown") };
+}, "useStore"), V = /* @__PURE__ */ l((s) => {
+  let e = document.getElementById("storybook-root"), d = /* @__PURE__ */ new Map();
+  for (let c of s) {
+    let { priority: i = 0, selectable: g = !!c.menu } = c;
+    for (let p of c.selectors)
+      for (let u of e?.querySelectorAll(p) || []) {
+        let m = d.get(u);
+        (!m || m.priority < i) && d.set(u, {
+          ...c,
+          priority: i,
+          selectors: (m?.selectors || []).concat(p),
+          selectable: g
+        });
+      }
+  }
+  return d;
+}, "mapElements"), oe = /* @__PURE__ */ l((s) => Array.from(s.entries()).map(([e, { selectors: d, styles: c, hoverStyles: i, focusStyles: g,
+selectable: p, menu: u }]) => {
+  let { top: m, left: x, width: E, height: M } = e.getBoundingClientRect(), { position: v } = getComputedStyle(e);
+  return {
+    element: e,
+    selectors: d,
+    selectable: p,
+    styles: c,
+    hoverStyles: i,
+    focusStyles: g,
+    menu: u,
+    top: v === "fixed" ? m : m + window.scrollY,
+    left: v === "fixed" ? x : x + window.scrollX,
+    width: E,
+    height: M
+  };
+}).sort((e, d) => d.width * d.height - e.width * e.height), "mapBoxes"), q = /* @__PURE__ */ l((s, e) => {
+  let d = s.getBoundingClientRect(), { x: c, y: i } = e;
+  return d?.top && d?.left && c >= d.left && c <= d.left + d.width && i >= d.top && i <= d.top + d.height;
+}, "isOverMenu"), z = /* @__PURE__ */ l((s, e, d) => {
+  if (!d)
+    return !1;
+  let { left: c, top: i, width: g, height: p } = s;
+  (p === 0 || g === 0) && (c -= 10, i -= 10, g += 20, p += 20), e.style.position === "fixed" && (c += window.scrollX, i += window.scrollY);
+  let { x: u, y: m } = d;
+  return u >= c && u <= c + g && m >= i && m <= i + p;
+}, "isTargeted"), ne = /* @__PURE__ */ l((s, e, d = {}) => {
+  let { x: c, y: i } = e, { margin: g = 5, topOffset: p = 0, centered: u = !1 } = d, { scrollX: m, scrollY: x, innerHeight: E, innerWidth: M } = window,
+  v = Math.min(
+    s.style.position === "fixed" ? i - x : i,
+    E - s.clientHeight - g - p + x
+  ), w = u ? s.clientWidth / 2 : 0, H = s.style.position === "fixed" ? Math.max(Math.min(c - m, M - w - g), w + g) : Math.max(
+    Math.min(c, M - w - g + m),
+    w + g + m
+  );
+  Object.assign(s.style, {
+    ...H !== c && { left: `${H}px` },
+    ...v !== i && { top: `${v}px` }
+  });
+}, "keepInViewport"), j = /* @__PURE__ */ l((s) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.showPopover();
+}, "showPopover"), se = /* @__PURE__ */ l((s) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.hidePopover();
+}, "hidePopover"), ie = /* @__PURE__ */ l((s) => ({
+  top: s.top,
+  left: s.left,
+  width: s.width,
+  height: s.height,
+  selectors: s.selectors,
+  element: {
+    attributes: Object.fromEntries(
+      Array.from(s.element.attributes).map((e) => [e.name, e.value])
+    ),
+    localName: s.element.localName,
+    tagName: s.element.tagName,
+    outerHTML: s.element.outerHTML
+  }
+}), "getEventDetails");
+
+// src/highlight/useHighlights.ts
+var pe = /* @__PURE__ */ l(() => y(
+  "svg",
+  { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
+  [
+    y("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.10355 10.1464C9.29882 10.3417 9.29882 10.6583 9.10355 10.8536C8.90829 11.0488 8.59171 11.0488 8.39645 10.8536L4.89645 7.35355C4\
+.70118 7.15829 4.70118 6.84171 4.89645 6.64645L8.39645 3.14645C8.59171 2.95118 8.90829 2.95118 9.10355 3.14645C9.29882 3.34171 9.29882 3.658\
+29 9.10355 3.85355L5.95711 7L9.10355 10.1464Z",
+      fill: "currentColor"
+    })
+  ]
+), "chevronLeft"), ge = /* @__PURE__ */ l(() => y(
+  "svg",
+  { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
+  [
+    y("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.89645 10.1464C4.70118 10.3417 4.70118 10.6583 4.89645 10.8536C5.09171 11.0488 5.40829 11.0488 5.60355 10.8536L9.10355 7.35355C9\
+.29882 7.15829 9.29882 6.84171 9.10355 6.64645L5.60355 3.14645C5.40829 2.95118 5.09171 2.95118 4.89645 3.14645C4.70118 3.34171 4.70118 3.658\
+29 4.89645 3.85355L8.04289 7L4.89645 10.1464Z",
+      fill: "currentColor"
+    })
+  ]
+), "chevronRight"), le = /* @__PURE__ */ l(({
+  channel: s,
+  menuId: e = "storybook-highlights-menu",
+  rootId: d = "storybook-highlights-root",
+  storybookRootId: c = "storybook-root"
+}) => {
+  globalThis.__STORYBOOK_HIGHLIGHT_TEARDOWN?.();
+  let { document: i } = globalThis, g = T([]), p = T(/* @__PURE__ */ new Map()), u = T([]), m = T(), x = T(), E = T([]), M = T([]), v = T(),
+  w = T(), H = i.getElementById(d);
+  g.subscribe(() => {
+    H || (H = y("div", { id: d }), i.body.appendChild(H));
+  }), g.subscribe((t) => {
+    let o = i.getElementById(c);
+    if (!o)
+      return;
+    p.set(V(t));
+    let n = new MutationObserver(() => p.set(V(t)));
+    return n.observe(o, { subtree: !0, childList: !0 }), () => {
+      n.disconnect();
+    };
+  }), p.subscribe((t) => {
+    let o = /* @__PURE__ */ l(() => requestAnimationFrame(() => u.set(oe(t))), "updateBoxes"), n = new ResizeObserver(o);
+    n.observe(i.body), Array.from(t.keys()).forEach((r) => n.observe(r));
+    let a = Array.from(i.body.querySelectorAll("*")).filter((r) => {
+      let { overflow: f, overflowX: h, overflowY: b } = window.getComputedStyle(r);
+      return ["auto", "scroll"].some((L) => [f, h, b].includes(L));
+    });
+    return a.forEach((r) => r.addEventListener("scroll", o)), () => {
+      n.disconnect(), a.forEach((r) => r.removeEventListener("scroll", o));
+    };
+  }), p.subscribe((t) => {
+    let o = Array.from(t.keys()).filter(({ style: a }) => a.position === "sticky"), n = /* @__PURE__ */ l(() => requestAnimationFrame(() => {
+      u.set(
+        (a) => a.map((r) => {
+          if (o.includes(r.element)) {
+            let { top: f, left: h } = r.element.getBoundingClientRect();
+            return { ...r, top: f + window.scrollY, left: h + window.scrollX };
+          }
+          return r;
+        })
+      );
+    }), "updateBoxes");
+    return i.addEventListener("scroll", n), () => i.removeEventListener("scroll", n);
+  }), p.subscribe((t) => {
+    E.set((o) => o.filter(({ element: n }) => t.has(n)));
+  }), E.subscribe((t) => {
+    t.length ? (w.set((o) => t.some((n) => n.element === o?.element) ? o : void 0), v.set((o) => t.some((n) => n.element === o?.element) ? o :
+    void 0)) : (w.set(void 0), v.set(void 0), m.set(void 0));
+  });
+  let $ = new Map(/* @__PURE__ */ new Map());
+  g.subscribe((t) => {
+    t.forEach(({ keyframes: o }) => {
+      if (o) {
+        let n = $.get(o);
+        n || (n = i.createElement("style"), n.setAttribute("data-highlight", "keyframes"), $.set(o, n), i.head.appendChild(n)), n.innerHTML =
+        o;
+      }
+    }), $.forEach((o, n) => {
+      t.some((a) => a.keyframes === n) || (o.remove(), $.delete(n));
+    });
+  });
+  let C = new Map(/* @__PURE__ */ new Map());
+  u.subscribe((t) => {
+    t.forEach((o) => {
+      let n = C.get(o.element);
+      if (H && !n) {
+        let a = {
+          popover: "manual",
+          "data-highlight-dimensions": `w${o.width.toFixed(0)}h${o.height.toFixed(0)}`,
+          "data-highlight-coordinates": `x${o.left.toFixed(0)}y${o.top.toFixed(0)}`
+        };
+        n = H.appendChild(y("div", a)), C.set(o.element, n);
+      }
+    }), C.forEach((o, n) => {
+      t.some(({ element: a }) => a === n) || (o.remove(), C.delete(n));
+    });
+  }), u.subscribe((t) => {
+    let o = t.filter((a) => a.selectable);
+    if (!o.length)
+      return;
+    let n = /* @__PURE__ */ l((a) => {
+      requestAnimationFrame(() => {
+        let r = i.getElementById(e), f = { x: a.pageX, y: a.pageY };
+        if (r && !q(r, f)) {
+          let h = o.filter((b) => {
+            let L = C.get(b.element);
+            return z(b, L, f);
+          });
+          m.set(h.length ? f : void 0), E.set(h);
+        }
+      });
+    }, "onClick");
+    return i.addEventListener("click", n), () => i.removeEventListener("click", n);
+  });
+  let W = /* @__PURE__ */ l(() => {
+    let t = i.getElementById(e), o = x.get();
+    !o || t && q(t, o) || M.set((n) => {
+      let a = u.get().filter((b) => {
+        let L = C.get(b.element);
+        return z(b, L, o);
+      }), r = n.filter((b) => a.includes(b)), f = a.filter((b) => !n.includes(b)), h = n.length - r.length;
+      return f.length || h ? [...r, ...f] : n;
+    });
+  }, "updateHovered");
+  x.subscribe(W), u.subscribe(W);
+  let k = /* @__PURE__ */ l(() => {
+    let t = w.get(), o = t ? [t] : E.get(), n = o.length === 1 ? o[0] : v.get(), a = m.get() !== void 0;
+    u.get().forEach((r) => {
+      let f = C.get(r.element);
+      if (f) {
+        let h = n === r, b = a ? n ? h : o.includes(r) : M.get()?.includes(r);
+        Object.assign(f.style, {
+          animation: "none",
+          background: "transparent",
+          border: "none",
+          boxSizing: "border-box",
+          outline: "none",
+          outlineOffset: "0px",
+          ...r.styles,
+          ...b ? r.hoverStyles : {},
+          ...h ? r.focusStyles : {},
+          position: getComputedStyle(r.element).position === "fixed" ? "fixed" : "absolute",
+          zIndex: Y - 10,
+          top: `${r.top}px`,
+          left: `${r.left}px`,
+          width: `${r.width}px`,
+          height: `${r.height}px`,
+          margin: 0,
+          padding: 0,
+          cursor: r.selectable ? "pointer" : "default",
+          pointerEvents: r.selectable ? "auto" : "none"
+        }), j(f);
+      }
+    });
+  }, "updateBoxStyles");
+  u.subscribe(k), E.subscribe(k), M.subscribe(k), v.subscribe(k), w.subscribe(k);
+  let Z = /* @__PURE__ */ l(() => {
+    if (!H)
+      return;
+    let t = i.getElementById(e);
+    if (t)
+      t.innerHTML = "";
+    else {
+      let r = { id: e, popover: "manual" };
+      t = H.appendChild(y("div", r)), H.appendChild(
+        y("style", {}, [
+          `
+            #${e} {
+              position: absolute;
+              z-index: ${Y};
+              width: 300px;
+              padding: 0px;
+              margin: 15px 0 0 0;
+              transform: translateX(-50%);
+              font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Ne\
+ue", Helvetica, Arial, sans-serif;
+              font-size: 12px;
+              background: white;
+              border: none;
+              border-radius: 6px;
+              box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1);
+              color: #2E3438;
+            }
+            #${e} ul {
+              list-style: none;
+              padding: 4px 0;
+              margin: 0;
+              max-height: 300px;
+              overflow-y: auto;
+            }
+            #${e} li {
+              padding: 0 4px;
+              margin: 0;
+            }
+            #${e} li > * {
+              display: flex;
+              padding: 8px;
+              margin: 0;
+              align-items: center;
+              gap: 8px;
+              border-radius: 4px;
+            }
+            #${e} button {
+              width: 100%;
+              border: 0;
+              background: transparent;
+              color: inherit;
+              text-align: left;
+              font-family: inherit;
+              font-size: inherit;
+            }
+            #${e} button:focus {
+              outline-color: #029CFD;
+            }
+            #${e} button:hover {
+              background: rgba(2, 156, 253, 0.07);
+              color: #029CFD;
+              cursor: pointer;
+            }
+            #${e} li code {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              line-height: 16px;
+              font-size: 11px;
+            }
+            #${e} li svg {
+              display: none;
+              flex-shrink: 0;
+              margin: 1px;
+              color: #73828C;
+            }
+            #${e} li > button:hover svg, #${e} li > button:focus svg {
+              color: #029CFD;
+            }
+            #${e} li.selectable svg, #${e} li.selected svg {
+              display: block;
+            }
+            #${e} .menu-list {
+              border-top: 1px solid rgba(38, 85, 115, 0.15);
+            }
+            #${e} .menu-list li:not(:last-child) {
+              padding-bottom: 4px;
+              margin-bottom: 4px;
+              border-bottom: 1px solid rgba(38, 85, 115, 0.15);
+            }
+            #${e} .menu-list li div {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: 0;
+            }
+            #${e} .menu-list li small {
+              color: #5C6870;
+              font-size: 11px;
+            }
+          `
+        ])
+      );
+    }
+    let o = w.get(), n = o ? [o] : E.get();
+    if (n.length && (t.style.position = getComputedStyle(n[0].element).position === "fixed" ? "fixed" : "absolute", t.appendChild(
+      y(
+        "ul",
+        { class: "element-list" },
+        n.map((r) => {
+          let f = r.menu?.filter(
+            (B) => !B.selectors || B.selectors.some((S) => r.selectors.includes(S))
+          ), h = n.length > 1 && !!f?.length, b = h ? {
+            class: "selectable",
+            onClick: /* @__PURE__ */ l(() => w.set(r), "onClick"),
+            onMouseEnter: /* @__PURE__ */ l(() => v.set(r), "onMouseEnter"),
+            onMouseLeave: /* @__PURE__ */ l(() => v.set(void 0), "onMouseLeave")
+          } : o ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = h || o;
+          return y("li", b, [
+            y(L ? "button" : "div", L ? { type: "button" } : {}, [
+              o ? pe() : null,
+              y("code", {}, [r.element.outerHTML]),
+              h ? ge() : null
+            ])
+          ]);
+        })
+      )
+    )), w.get() || E.get().length === 1) {
+      let r = w.get() || E.get()[0], f = r.menu?.filter(
+        (h) => !h.selectors || h.selectors.some((b) => r.selectors.includes(b))
+      );
+      f?.length && t.appendChild(
+        y(
+          "ul",
+          { class: "menu-list" },
+          f.map(({ id: h, title: b, description: L, clickEvent: B }) => {
+            let S = B && (() => s.emit(B, h, ie(r)));
+            return y("li", {}, [
+              y(
+                S ? "button" : "div",
+                S ? { type: "button", onClick: S } : {},
+                [
+                  y("div", {}, [
+                    y("strong", {}, [b]),
+                    L && y("small", {}, [L])
+                  ])
+                ]
+              )
+            ]);
+          })
+        )
+      );
+    }
+    let a = m.get();
+    a ? (Object.assign(t.style, {
+      display: "block",
+      left: `${t.style.position === "fixed" ? a.x - window.scrollX : a.x}px`,
+      top: `${t.style.position === "fixed" ? a.y - window.scrollY : a.y}px`
+    }), j(t), requestAnimationFrame(() => ne(t, a, { topOffset: 15, centered: !0 }))) : (se(t), Object.assign(t.style, { display: "none" }));
+  }, "renderMenu");
+  E.subscribe(Z), w.subscribe(Z);
+  let K = /* @__PURE__ */ l((t) => {
+    let o = te(t);
+    o.selectors?.length && g.set((n) => [...n, o]);
+  }, "addHighlight"), I = /* @__PURE__ */ l((t) => {
+    g.set((o) => o.filter((n) => n.id !== t));
+  }, "removeHighlight"), A = /* @__PURE__ */ l(() => {
+    g.set([]);
+  }, "clearHighlights"), N, J = /* @__PURE__ */ l((t, o) => {
+    let n = "scrollIntoView-highlight";
+    clearTimeout(N), I(n);
+    let a = i.querySelector(t);
+    if (!a) {
+      console.warn(`Cannot scroll into view: ${t} not found`);
+      return;
+    }
+    a.scrollIntoView({ behavior: "smooth", block: "center", ...o });
+    let r = `kf-${Math.random().toString(36).substring(2, 15)}`;
+    g.set((f) => [
+      ...f,
+      {
+        id: n,
+        priority: 1e3,
+        selectors: [t],
+        selectable: !1,
+        styles: {
+          outline: "2px solid #1EA7FD",
+          outlineOffset: "2px",
+          animation: `${r} 3s linear forwards`
+        },
+        keyframes: `@keyframes ${r} {
+          0% { outline: 2px solid #1EA7FD; }
+          20% { outline: 2px solid #1EA7FD00; }
+          40% { outline: 2px solid #1EA7FD; }
+          60% { outline: 2px solid #1EA7FD00; }
+          80% { outline: 2px solid #1EA7FD; }
+          100% { outline: 2px solid #1EA7FD00; }
+        }`
+      }
+    ]), N = setTimeout(() => I(n), 3500);
+  }, "scrollIntoView"), U = /* @__PURE__ */ l((t) => {
+    requestAnimationFrame(() => x.set({ x: t.pageX, y: t.pageY }));
+  }, "onMouseMove");
+  i.body.addEventListener("mousemove", U), s.on(G, K), s.on(ee, I), s.on(X, A), s.on(re, A), s.on(P, J);
+  let Q = /* @__PURE__ */ l(() => {
+    clearTimeout(N), i.body.removeEventListener("mousemove", U), s.off(G, K), s.off(X, A), s.off(re, A), s.off(P, J), g.teardown(), p.teardown(),
+    u.teardown(), E.teardown(), m.teardown(), x.teardown(), M.teardown(), v.teardown(), w.teardown(), $.forEach((t) => t.remove()), C.forEach(
+    (t) => t.remove()), i.getElementById(e)?.remove(), i.getElementById(d)?.remove();
+  }, "teardown");
+  return globalThis.__STORYBOOK_HIGHLIGHT_TEARDOWN = Q, Q;
+}, "useHighlights");
+
+// src/highlight/preview.ts
+_ && _.ready && _.ready().then(() => {
+  let s = _.getChannel();
+  le({ channel: s });
+});
+var Te = /* @__PURE__ */ l(() => ue({}), "default");
+export {
+  Te as default
+};