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

package/README.md

@@ -20,7 +20,7 @@ Even though this is where all of the code is located, it is NOT to be the entry
 Consumers of the code should import like so:
 
 ```ts
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 ```
 
 Importing from `@storybook/core` is explicitly NOT supported; it WILL break in a future version of storybook, very likely in a non-major version bump.

package/assets/server/base-preview-head.html

@@ -1,8 +1,7 @@
 <base target="_parent" />
 
 <style>
-  /* While we aren't showing the main block yet, but still preparing, we want everything the user
-     has rendered, which may or may not be in #storybook-root, to be display none */
+  /* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
     display: none;
   }
@@ -437,7 +436,6 @@
 
 <script>
   /* globals window */
-  /* eslint-disable no-underscore-dangle */
   try {
     if (window.top !== window) {
       window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;

package/bin/index.cjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 const majorNodeVersion = parseInt(process.versions.node, 10);
-if (majorNodeVersion < 18) {
-  console.error('To run Storybook you need to have Node.js 18 or higher');
+if (majorNodeVersion < 20) {
+  console.error('To run Storybook you need to have Node.js 20 or higher');
   process.exit(1);
 }
 

package/dist/actions/decorator.d.ts

@@ -0,0 +1,6 @@
+import { Renderer, PartialStoryFn } from 'storybook/internal/types';
+
+/** @deprecated Will be removed in Storybook v10 */
+declare const withActions: <T extends Renderer>(storyFn: PartialStoryFn<T>) => T['storyResult'];
+
+export { withActions };

package/dist/actions/decorator.js

@@ -0,0 +1,134 @@
+var R = Object.defineProperty;
+var r = (e, o) => R(e, "name", { value: o, configurable: !0 });
+
+// src/actions/decorator.ts
+import { makeDecorator as T, useEffect as k } from "storybook/preview-api";
+
+// src/actions/constants.ts
+var h = "actions", y = "storybook/actions", B = `${y}/panel`, g = `${y}/action-event`, H = `${y}/action-clear`;
+
+// src/actions/runtime/action.ts
+import { ImplicitActionsDuringRendering as D } from "storybook/internal/preview-errors";
+import { global as E } from "@storybook/global";
+import { addons as j } from "storybook/preview-api";
+import { v4 as S } from "uuid";
+
+// src/actions/runtime/configureActions.ts
+var a = {
+  depth: 10,
+  clearOnStoryChange: !0,
+  limit: 50
+};
+
+// src/actions/runtime/action.ts
+var A = /* @__PURE__ */ r((e, o) => {
+  let t = Object.getPrototypeOf(e);
+  return !t || o(t) ? t : A(t, o);
+}, "findProto"), I = /* @__PURE__ */ r((e) => !!(typeof e == "object" && e && A(e, (o) => /^Synthetic(?:Base)?Event$/.test(o.constructor.name)) &&
+typeof e.persist == "function"), "isReactSyntheticEvent"), P = /* @__PURE__ */ r((e) => {
+  if (I(e)) {
+    let o = Object.create(
+      e.constructor.prototype,
+      Object.getOwnPropertyDescriptors(e)
+    );
+    o.persist();
+    let t = Object.getOwnPropertyDescriptor(o, "view"), n = t?.value;
+    return typeof n == "object" && n?.constructor.name === "Window" && Object.defineProperty(o, "view", {
+      ...t,
+      value: Object.create(n.constructor.prototype)
+    }), o;
+  }
+  return e;
+}, "serializeArg"), x = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? S() : (
+  // pseudo random id, example response lo1e7zm4832bkr7yfl7
+  Date.now().toString(36) + Math.random().toString(36).substring(2)
+), "generateId");
+function O(e, o = {}) {
+  let t = {
+    ...a,
+    ...o
+  }, n = /* @__PURE__ */ r(function(...i) {
+    if (o.implicit) {
+      let d = ("__STORYBOOK_PREVIEW__" in E ? E.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
+        (c) => c.phase === "playing" || c.phase === "rendering"
+      );
+      if (d) {
+        let c = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, u = new D({
+          phase: d.phase,
+          name: e,
+          deprecated: c
+        });
+        if (c)
+          console.warn(u);
+        else
+          throw u;
+      }
+    }
+    let m = j.getChannel(), p = x(), l = 5, f = i.map(P), w = i.length > 1 ? f : f[0], _ = {
+      id: p,
+      count: 0,
+      data: { name: e, args: w },
+      options: {
+        ...t,
+        maxDepth: l + (t.depth || 3)
+      }
+    };
+    m.emit(g, _);
+  }, "actionHandler");
+  return n.isAction = !0, n.implicit = o.implicit, n;
+}
+r(O, "action");
+
+// src/actions/runtime/actions.ts
+var b = /* @__PURE__ */ r((...e) => {
+  let o = a, t = e;
+  t.length === 1 && Array.isArray(t[0]) && ([t] = t), t.length !== 1 && typeof t[t.length - 1] != "string" && (o = {
+    ...a,
+    ...t.pop()
+  });
+  let n = t[0];
+  (t.length !== 1 || typeof n == "string") && (n = {}, t.forEach((i) => {
+    n[i] = i;
+  }));
+  let s = {};
+  return Object.keys(n).forEach((i) => {
+    s[i] = O(n[i], o);
+  }), s;
+}, "actions");
+
+// src/actions/decorator.ts
+var F = /^(\S+)\s*(.*)$/, M = Element != null && !Element.prototype.matches, C = M ? "msMatchesSelector" : "matches", v = /* @__PURE__ */ r(
+(e, o) => {
+  if (e[C](o))
+    return !0;
+  let t = e.parentElement;
+  return t ? v(t, o) : !1;
+}, "hasMatchInAncestry"), N = /* @__PURE__ */ r((e, ...o) => {
+  let t = e(...o);
+  return Object.entries(t).map(([n, s]) => {
+    let [i, m, p] = n.match(F) || [];
+    return {
+      eventName: m,
+      handler: /* @__PURE__ */ r((l) => {
+        (!p || v(l.target, p)) && s(l);
+      }, "handler")
+    };
+  });
+}, "createHandlers"), V = /* @__PURE__ */ r((e, ...o) => {
+  let t = typeof globalThis.document < "u" && globalThis.document.getElementById("storybook-root");
+  k(() => {
+    if (t) {
+      let n = N(e, ...o);
+      return n.forEach(({ eventName: s, handler: i }) => t.addEventListener(s, i)), () => n.forEach(({ eventName: s, handler: i }) => t.removeEventListener(
+      s, i));
+    }
+  }, [t, e, o]);
+}, "applyEventHandlers"), ct = T({
+  name: "withActions",
+  parameterName: h,
+  skipIfNoParametersOrOptions: !0,
+  wrapper: /* @__PURE__ */ r((e, o, { parameters: t }) => (t?.handles && V(b, ...t.handles), e(o)), "wrapper")
+});
+export {
+  ct as withActions
+};

package/dist/actions/index.cjs

@@ -0,0 +1,123 @@
+"use strict";
+var a = Object.defineProperty;
+var x = Object.getOwnPropertyDescriptor;
+var R = Object.getOwnPropertyNames;
+var j = Object.prototype.hasOwnProperty;
+var r = (t, o) => a(t, "name", { value: o, configurable: !0 });
+var I = (t, o) => {
+  for (var n in o)
+    a(t, n, { get: o[n], enumerable: !0 });
+}, P = (t, o, n, e) => {
+  if (o && typeof o == "object" || typeof o == "function")
+    for (let i of R(o))
+      !j.call(t, i) && i !== n && a(t, i, { get: () => o[i], enumerable: !(e = x(o, i)) || e.enumerable });
+  return t;
+};
+var S = (t) => P(a({}, "__esModule", { value: !0 }), t);
+
+// src/actions/index.ts
+var K = {};
+I(K, {
+  ADDON_ID: () => m,
+  CLEAR_ID: () => C,
+  CYCLIC_KEY: () => F,
+  EVENT_ID: () => y,
+  PANEL_ID: () => k,
+  PARAM_KEY: () => T,
+  action: () => l,
+  actions: () => B,
+  config: () => s,
+  configureActions: () => V
+});
+module.exports = S(K);
+
+// src/actions/constants.ts
+var T = "actions", m = "storybook/actions", k = `${m}/panel`, y = `${m}/action-event`, C = `${m}/action-clear`, F = "$___storybook.isCyclic";
+
+// src/actions/runtime/action.ts
+var A = require("storybook/internal/preview-errors"), f = require("@storybook/global"), O = require("storybook/preview-api"), h = require("uuid");
+
+// src/actions/runtime/configureActions.ts
+var s = {
+  depth: 10,
+  clearOnStoryChange: !0,
+  limit: 50
+}, V = /* @__PURE__ */ r((t = {}) => {
+  Object.assign(s, t);
+}, "configureActions");
+
+// src/actions/runtime/action.ts
+var b = /* @__PURE__ */ r((t, o) => {
+  let n = Object.getPrototypeOf(t);
+  return !n || o(n) ? n : b(n, o);
+}, "findProto"), W = /* @__PURE__ */ r((t) => !!(typeof t == "object" && t && b(t, (o) => /^Synthetic(?:Base)?Event$/.test(o.constructor.name)) &&
+typeof t.persist == "function"), "isReactSyntheticEvent"), Y = /* @__PURE__ */ r((t) => {
+  if (W(t)) {
+    let o = Object.create(
+      t.constructor.prototype,
+      Object.getOwnPropertyDescriptors(t)
+    );
+    o.persist();
+    let n = Object.getOwnPropertyDescriptor(o, "view"), e = n?.value;
+    return typeof e == "object" && e?.constructor.name === "Window" && Object.defineProperty(o, "view", {
+      ...n,
+      value: Object.create(e.constructor.prototype)
+    }), o;
+  }
+  return t;
+}, "serializeArg"), $ = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? (0, h.v4)() : (
+  // pseudo random id, example response lo1e7zm4832bkr7yfl7
+  Date.now().toString(36) + Math.random().toString(36).substring(2)
+), "generateId");
+function l(t, o = {}) {
+  let n = {
+    ...s,
+    ...o
+  }, e = /* @__PURE__ */ r(function(...c) {
+    if (o.implicit) {
+      let d = ("__STORYBOOK_PREVIEW__" in f.global ? f.global.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
+        (p) => p.phase === "playing" || p.phase === "rendering"
+      );
+      if (d) {
+        let p = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, g = new A.ImplicitActionsDuringRendering({
+          phase: d.phase,
+          name: t,
+          deprecated: p
+        });
+        if (p)
+          console.warn(g);
+        else
+          throw g;
+      }
+    }
+    let E = O.addons.getChannel(), v = $(), w = 5, u = c.map(Y), _ = c.length > 1 ? u : u[0], D = {
+      id: v,
+      count: 0,
+      data: { name: t, args: _ },
+      options: {
+        ...n,
+        maxDepth: w + (n.depth || 3)
+      }
+    };
+    E.emit(y, D);
+  }, "actionHandler");
+  return e.isAction = !0, e.implicit = o.implicit, e;
+}
+r(l, "action");
+
+// src/actions/runtime/actions.ts
+var B = /* @__PURE__ */ r((...t) => {
+  let o = s, n = t;
+  n.length === 1 && Array.isArray(n[0]) && ([n] = n), n.length !== 1 && typeof n[n.length - 1] != "string" && (o = {
+    ...s,
+    ...n.pop()
+  });
+  let e = n[0];
+  (n.length !== 1 || typeof e == "string") && (e = {}, n.forEach((c) => {
+    e[c] = c;
+  }));
+  let i = {};
+  return Object.keys(e).forEach((c) => {
+    i[c] = l(e[c], o);
+  }), i;
+}, "actions");

package/dist/actions/index.d.ts

@@ -0,0 +1,102 @@
+declare const PARAM_KEY = "actions";
+declare const ADDON_ID = "storybook/actions";
+declare const PANEL_ID = "storybook/actions/panel";
+declare const EVENT_ID = "storybook/actions/action-event";
+declare const CLEAR_ID = "storybook/actions/action-clear";
+declare const CYCLIC_KEY = "$___storybook.isCyclic";
+
+interface Options$1 {
+    allowRegExp: boolean;
+    allowSymbol: boolean;
+    allowDate: boolean;
+    allowUndefined: boolean;
+    allowError: boolean;
+    maxDepth: number;
+    space: number | undefined;
+}
+
+interface Options {
+    depth: number;
+    clearOnStoryChange: boolean;
+    limit: number;
+    implicit: boolean;
+    id: string;
+}
+type ActionOptions = Partial<Options> & Partial<Options$1>;
+
+interface ActionDisplay {
+    id: string;
+    data: {
+        name: string;
+        args: any[];
+    };
+    count: number;
+    options: ActionOptions;
+}
+
+type HandlerFunction = (...args: any[]) => void;
+
+type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;
+
+interface ActionsFunction {
+    <T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(...handlers: T[]): ActionsMap<T>;
+    <T extends string>(handler1: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, handler6: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, handler6: T, handler7: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, handler6: T, handler7: T, handler8: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, handler6: T, handler7: T, handler8: T, handler9: T, options?: ActionOptions): ActionsMap<T>;
+    <T extends string>(handler1: T, handler2: T, handler3: T, handler4: T, handler5: T, handler6: T, handler7: T, handler8: T, handler9: T, handler10: T, options?: ActionOptions): ActionsMap<T>;
+}
+
+type DecoratorFunction = (args: any[]) => any[];
+
+declare function action(name: string, options?: ActionOptions): HandlerFunction;
+
+declare const actions: ActionsFunction;
+
+declare const config: ActionOptions;
+declare const configureActions: (options?: ActionOptions) => void;
+
+interface ActionsParameters {
+    /**
+     * Actions configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/actions#parameters
+     */
+    actions: {
+        /**
+         * Create actions for each arg that matches the regex. (**NOT recommended, see below**)
+         *
+         * This is quite useful when your component has dozens (or hundreds) of methods and you do not
+         * want to manually apply the fn utility for each of those methods. However, this is not the
+         * recommended way of writing actions. That's because automatically inferred args are not
+         * available as spies in your play function. If you use argTypesRegex and your stories have play
+         * functions, you will need to also define args with the fn utility to test them in your play
+         * function.
+         *
+         * @example `argTypesRegex: '^on.*'`
+         */
+        argTypesRegex?: string;
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+        /**
+         * Binds a standard HTML event handler to the outermost HTML element rendered by your component
+         * and triggers an action when the event is called for a given selector. The format is
+         * `<eventname> <selector>`. The selector is optional; it defaults to all elements.
+         *
+         * **To enable this feature, you must use the `withActions` decorator.**
+         *
+         * @example `handles: ['mouseover', 'click .btn']`
+         *
+         * @see https://storybook.js.org/docs/essentials/actions#action-event-handlers
+         */
+        handles?: string[];
+    };
+}
+
+export { ADDON_ID, type ActionDisplay, type ActionOptions, type ActionsFunction, type ActionsMap, type ActionsParameters, CLEAR_ID, CYCLIC_KEY, type DecoratorFunction, EVENT_ID, type HandlerFunction, PANEL_ID, PARAM_KEY, action, actions, config, configureActions };

package/dist/actions/index.js

@@ -0,0 +1,108 @@
+var v = Object.defineProperty;
+var r = (o, n) => v(o, "name", { value: n, configurable: !0 });
+
+// src/actions/constants.ts
+var S = "actions", a = "storybook/actions", T = `${a}/panel`, l = `${a}/action-event`, k = `${a}/action-clear`, C = "$___storybook.isCyclic";
+
+// src/actions/runtime/action.ts
+import { ImplicitActionsDuringRendering as w } from "storybook/internal/preview-errors";
+import { global as u } from "@storybook/global";
+import { addons as _ } from "storybook/preview-api";
+import { v4 as D } from "uuid";
+
+// src/actions/runtime/configureActions.ts
+var c = {
+  depth: 10,
+  clearOnStoryChange: !0,
+  limit: 50
+}, V = /* @__PURE__ */ r((o = {}) => {
+  Object.assign(c, o);
+}, "configureActions");
+
+// src/actions/runtime/action.ts
+var d = /* @__PURE__ */ r((o, n) => {
+  let t = Object.getPrototypeOf(o);
+  return !t || n(t) ? t : d(t, n);
+}, "findProto"), x = /* @__PURE__ */ r((o) => !!(typeof o == "object" && o && d(o, (n) => /^Synthetic(?:Base)?Event$/.test(n.constructor.name)) &&
+typeof o.persist == "function"), "isReactSyntheticEvent"), R = /* @__PURE__ */ r((o) => {
+  if (x(o)) {
+    let n = Object.create(
+      o.constructor.prototype,
+      Object.getOwnPropertyDescriptors(o)
+    );
+    n.persist();
+    let t = Object.getOwnPropertyDescriptor(n, "view"), e = t?.value;
+    return typeof e == "object" && e?.constructor.name === "Window" && Object.defineProperty(n, "view", {
+      ...t,
+      value: Object.create(e.constructor.prototype)
+    }), n;
+  }
+  return o;
+}, "serializeArg"), j = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? D() : (
+  // pseudo random id, example response lo1e7zm4832bkr7yfl7
+  Date.now().toString(36) + Math.random().toString(36).substring(2)
+), "generateId");
+function g(o, n = {}) {
+  let t = {
+    ...c,
+    ...n
+  }, e = /* @__PURE__ */ r(function(...i) {
+    if (n.implicit) {
+      let y = ("__STORYBOOK_PREVIEW__" in u ? u.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
+        (s) => s.phase === "playing" || s.phase === "rendering"
+      );
+      if (y) {
+        let s = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, f = new w({
+          phase: y.phase,
+          name: o,
+          deprecated: s
+        });
+        if (s)
+          console.warn(f);
+        else
+          throw f;
+      }
+    }
+    let A = _.getChannel(), O = j(), h = 5, m = i.map(R), b = i.length > 1 ? m : m[0], E = {
+      id: O,
+      count: 0,
+      data: { name: o, args: b },
+      options: {
+        ...t,
+        maxDepth: h + (t.depth || 3)
+      }
+    };
+    A.emit(l, E);
+  }, "actionHandler");
+  return e.isAction = !0, e.implicit = n.implicit, e;
+}
+r(g, "action");
+
+// src/actions/runtime/actions.ts
+var G = /* @__PURE__ */ r((...o) => {
+  let n = c, t = o;
+  t.length === 1 && Array.isArray(t[0]) && ([t] = t), t.length !== 1 && typeof t[t.length - 1] != "string" && (n = {
+    ...c,
+    ...t.pop()
+  });
+  let e = t[0];
+  (t.length !== 1 || typeof e == "string") && (e = {}, t.forEach((i) => {
+    e[i] = i;
+  }));
+  let p = {};
+  return Object.keys(e).forEach((i) => {
+    p[i] = g(e[i], n);
+  }), p;
+}, "actions");
+export {
+  a as ADDON_ID,
+  k as CLEAR_ID,
+  C as CYCLIC_KEY,
+  l as EVENT_ID,
+  T as PANEL_ID,
+  S as PARAM_KEY,
+  g as action,
+  G as actions,
+  c as config,
+  V as configureActions
+};