storybook 9.0.0-alpha.9 → 9.0.0-beta.1

package/dist/outline/index.cjs

@@ -0,0 +1,528 @@
+"use strict";
+var _ = Object.create;
+var e = Object.defineProperty;
+var j = Object.getOwnPropertyDescriptor;
+var C = Object.getOwnPropertyNames;
+var L = Object.getPrototypeOf, F = Object.prototype.hasOwnProperty;
+var p = (i, t) => e(i, "name", { value: t, configurable: !0 });
+var H = (i, t) => () => (t || i((t = { exports: {} }).exports, t), t.exports), E = (i, t) => {
+  for (var n in t)
+    e(i, n, { get: t[n], enumerable: !0 });
+}, S = (i, t, n, o) => {
+  if (t && typeof t == "object" || typeof t == "function")
+    for (let a of C(t))
+      !F.call(i, a) && a !== n && e(i, a, { get: () => t[a], enumerable: !(o = j(t, a)) || o.enumerable });
+  return i;
+};
+var K = (i, t, n) => (n = i != null ? _(L(i)) : {}, S(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  t || !i || !i.__esModule ? e(n, "default", { value: i, enumerable: !0 }) : n,
+  i
+)), Y = (i) => S(e({}, "__esModule", { value: !0 }), i);
+
+// ../node_modules/ts-dedent/dist/index.js
+var k = H((s) => {
+  "use strict";
+  Object.defineProperty(s, "__esModule", { value: !0 });
+  s.dedent = void 0;
+  function M(i) {
+    for (var t = [], n = 1; n < arguments.length; n++)
+      t[n - 1] = arguments[n];
+    var o = Array.from(typeof i == "string" ? [i] : i);
+    o[o.length - 1] = o[o.length - 1].replace(/\r?\n([\t ]*)$/, "");
+    var a = o.reduce(function(d, g) {
+      var r = g.match(/\n([\t ]+|(?!\s).)/g);
+      return r ? d.concat(r.map(function(h) {
+        var u, m;
+        return (m = (u = h.match(/[\t ]/g)) === null || u === void 0 ? void 0 : u.length) !== null && m !== void 0 ? m : 0;
+      })) : d;
+    }, []);
+    if (a.length) {
+      var $ = new RegExp(`
+[	 ]{` + Math.min.apply(Math, a) + "}", "g");
+      o = o.map(function(d) {
+        return d.replace($, `
+`);
+      });
+    }
+    o[0] = o[0].replace(/^\r?\n/, "");
+    var l = o[0];
+    return t.forEach(function(d, g) {
+      var r = l.match(/(?:^|\n)( *)$/), h = r ? r[1] : "", u = d;
+      typeof d == "string" && d.includes(`
+`) && (u = String(d).split(`
+`).map(function(m, T) {
+        return T === 0 ? m : "" + h + m;
+      }).join(`
+`)), l += u + o[g + 1];
+    }), l;
+  }
+  p(M, "dedent");
+  s.dedent = M;
+  s.default = M;
+});
+
+// src/outline/index.ts
+var N = {};
+E(N, {
+  default: () => G
+});
+module.exports = Y(N);
+var R = require("storybook/preview-api");
+
+// src/outline/preview.ts
+var A = {};
+E(A, {
+  decorators: () => D,
+  default: () => B,
+  initialGlobals: () => I
+});
+var P = require("storybook/preview-api");
+
+// src/outline/constants.ts
+var f = "outline";
+
+// src/outline/withOutline.ts
+var b = require("storybook/preview-api");
+
+// src/outline/helpers.ts
+var x = require("@storybook/global");
+var y = /* @__PURE__ */ p((i) => {
+  (Array.isArray(i) ? i : [i]).forEach(q);
+}, "clearStyles"), q = /* @__PURE__ */ p((i) => {
+  let t = typeof i == "string" ? i : i.join(""), n = x.global.document.getElementById(t);
+  n && n.parentElement && n.parentElement.removeChild(n);
+}, "clearStyle"), c = /* @__PURE__ */ p((i, t) => {
+  let n = x.global.document.getElementById(i);
+  if (n)
+    n.innerHTML !== t && (n.innerHTML = t);
+  else {
+    let o = x.global.document.createElement("style");
+    o.setAttribute("id", i), o.innerHTML = t, x.global.document.head.appendChild(o);
+  }
+}, "addOutlineStyles");
+
+// src/outline/outlineCSS.ts
+var w = K(k(), 1);
+function v(i) {
+  return w.dedent`
+    ${i} body {
+      outline: 1px solid #2980b9 !important;
+    }
+
+    ${i} article {
+      outline: 1px solid #3498db !important;
+    }
+
+    ${i} nav {
+      outline: 1px solid #0088c3 !important;
+    }
+
+    ${i} aside {
+      outline: 1px solid #33a0ce !important;
+    }
+
+    ${i} section {
+      outline: 1px solid #66b8da !important;
+    }
+
+    ${i} header {
+      outline: 1px solid #99cfe7 !important;
+    }
+
+    ${i} footer {
+      outline: 1px solid #cce7f3 !important;
+    }
+
+    ${i} h1 {
+      outline: 1px solid #162544 !important;
+    }
+
+    ${i} h2 {
+      outline: 1px solid #314e6e !important;
+    }
+
+    ${i} h3 {
+      outline: 1px solid #3e5e85 !important;
+    }
+
+    ${i} h4 {
+      outline: 1px solid #449baf !important;
+    }
+
+    ${i} h5 {
+      outline: 1px solid #c7d1cb !important;
+    }
+
+    ${i} h6 {
+      outline: 1px solid #4371d0 !important;
+    }
+
+    ${i} main {
+      outline: 1px solid #2f4f90 !important;
+    }
+
+    ${i} address {
+      outline: 1px solid #1a2c51 !important;
+    }
+
+    ${i} div {
+      outline: 1px solid #036cdb !important;
+    }
+
+    ${i} p {
+      outline: 1px solid #ac050b !important;
+    }
+
+    ${i} hr {
+      outline: 1px solid #ff063f !important;
+    }
+
+    ${i} pre {
+      outline: 1px solid #850440 !important;
+    }
+
+    ${i} blockquote {
+      outline: 1px solid #f1b8e7 !important;
+    }
+
+    ${i} ol {
+      outline: 1px solid #ff050c !important;
+    }
+
+    ${i} ul {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${i} li {
+      outline: 1px solid #d90416 !important;
+    }
+
+    ${i} dl {
+      outline: 1px solid #fd3427 !important;
+    }
+
+    ${i} dt {
+      outline: 1px solid #ff0043 !important;
+    }
+
+    ${i} dd {
+      outline: 1px solid #e80174 !important;
+    }
+
+    ${i} figure {
+      outline: 1px solid #ff00bb !important;
+    }
+
+    ${i} figcaption {
+      outline: 1px solid #bf0032 !important;
+    }
+
+    ${i} table {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${i} caption {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${i} thead {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${i} tbody {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${i} tfoot {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${i} tr {
+      outline: 1px solid #86c0b2 !important;
+    }
+
+    ${i} th {
+      outline: 1px solid #a1e7d6 !important;
+    }
+
+    ${i} td {
+      outline: 1px solid #3f5a54 !important;
+    }
+
+    ${i} col {
+      outline: 1px solid #6c9a8f !important;
+    }
+
+    ${i} colgroup {
+      outline: 1px solid #6c9a9d !important;
+    }
+
+    ${i} button {
+      outline: 1px solid #da8301 !important;
+    }
+
+    ${i} datalist {
+      outline: 1px solid #c06000 !important;
+    }
+
+    ${i} fieldset {
+      outline: 1px solid #d95100 !important;
+    }
+
+    ${i} form {
+      outline: 1px solid #d23600 !important;
+    }
+
+    ${i} input {
+      outline: 1px solid #fca600 !important;
+    }
+
+    ${i} keygen {
+      outline: 1px solid #b31e00 !important;
+    }
+
+    ${i} label {
+      outline: 1px solid #ee8900 !important;
+    }
+
+    ${i} legend {
+      outline: 1px solid #de6d00 !important;
+    }
+
+    ${i} meter {
+      outline: 1px solid #e8630c !important;
+    }
+
+    ${i} optgroup {
+      outline: 1px solid #b33600 !important;
+    }
+
+    ${i} option {
+      outline: 1px solid #ff8a00 !important;
+    }
+
+    ${i} output {
+      outline: 1px solid #ff9619 !important;
+    }
+
+    ${i} progress {
+      outline: 1px solid #e57c00 !important;
+    }
+
+    ${i} select {
+      outline: 1px solid #e26e0f !important;
+    }
+
+    ${i} textarea {
+      outline: 1px solid #cc5400 !important;
+    }
+
+    ${i} details {
+      outline: 1px solid #33848f !important;
+    }
+
+    ${i} summary {
+      outline: 1px solid #60a1a6 !important;
+    }
+
+    ${i} command {
+      outline: 1px solid #438da1 !important;
+    }
+
+    ${i} menu {
+      outline: 1px solid #449da6 !important;
+    }
+
+    ${i} del {
+      outline: 1px solid #bf0000 !important;
+    }
+
+    ${i} ins {
+      outline: 1px solid #400000 !important;
+    }
+
+    ${i} img {
+      outline: 1px solid #22746b !important;
+    }
+
+    ${i} iframe {
+      outline: 1px solid #64a7a0 !important;
+    }
+
+    ${i} embed {
+      outline: 1px solid #98daca !important;
+    }
+
+    ${i} object {
+      outline: 1px solid #00cc99 !important;
+    }
+
+    ${i} param {
+      outline: 1px solid #37ffc4 !important;
+    }
+
+    ${i} video {
+      outline: 1px solid #6ee866 !important;
+    }
+
+    ${i} audio {
+      outline: 1px solid #027353 !important;
+    }
+
+    ${i} source {
+      outline: 1px solid #012426 !important;
+    }
+
+    ${i} canvas {
+      outline: 1px solid #a2f570 !important;
+    }
+
+    ${i} track {
+      outline: 1px solid #59a600 !important;
+    }
+
+    ${i} map {
+      outline: 1px solid #7be500 !important;
+    }
+
+    ${i} area {
+      outline: 1px solid #305900 !important;
+    }
+
+    ${i} a {
+      outline: 1px solid #ff62ab !important;
+    }
+
+    ${i} em {
+      outline: 1px solid #800b41 !important;
+    }
+
+    ${i} strong {
+      outline: 1px solid #ff1583 !important;
+    }
+
+    ${i} i {
+      outline: 1px solid #803156 !important;
+    }
+
+    ${i} b {
+      outline: 1px solid #cc1169 !important;
+    }
+
+    ${i} u {
+      outline: 1px solid #ff0430 !important;
+    }
+
+    ${i} s {
+      outline: 1px solid #f805e3 !important;
+    }
+
+    ${i} small {
+      outline: 1px solid #d107b2 !important;
+    }
+
+    ${i} abbr {
+      outline: 1px solid #4a0263 !important;
+    }
+
+    ${i} q {
+      outline: 1px solid #240018 !important;
+    }
+
+    ${i} cite {
+      outline: 1px solid #64003c !important;
+    }
+
+    ${i} dfn {
+      outline: 1px solid #b4005a !important;
+    }
+
+    ${i} sub {
+      outline: 1px solid #dba0c8 !important;
+    }
+
+    ${i} sup {
+      outline: 1px solid #cc0256 !important;
+    }
+
+    ${i} time {
+      outline: 1px solid #d6606d !important;
+    }
+
+    ${i} code {
+      outline: 1px solid #e04251 !important;
+    }
+
+    ${i} kbd {
+      outline: 1px solid #5e001f !important;
+    }
+
+    ${i} samp {
+      outline: 1px solid #9c0033 !important;
+    }
+
+    ${i} var {
+      outline: 1px solid #d90047 !important;
+    }
+
+    ${i} mark {
+      outline: 1px solid #ff0053 !important;
+    }
+
+    ${i} bdi {
+      outline: 1px solid #bf3668 !important;
+    }
+
+    ${i} bdo {
+      outline: 1px solid #6f1400 !important;
+    }
+
+    ${i} ruby {
+      outline: 1px solid #ff7b93 !important;
+    }
+
+    ${i} rt {
+      outline: 1px solid #ff2f54 !important;
+    }
+
+    ${i} rp {
+      outline: 1px solid #803e49 !important;
+    }
+
+    ${i} span {
+      outline: 1px solid #cc2643 !important;
+    }
+
+    ${i} br {
+      outline: 1px solid #db687d !important;
+    }
+
+    ${i} wbr {
+      outline: 1px solid #db175b !important;
+    }`;
+}
+p(v, "outlineCSS");
+
+// src/outline/withOutline.ts
+var O = /* @__PURE__ */ p((i, t) => {
+  let n = t.globals || {}, o = [!0, "true"].includes(n[f]), a = t.viewMode === "docs", $ = (0, b.useMemo)(() => v(a ? '[data-story-block="tr\
+ue"]' : ".sb-show-main"), [t]);
+  return (0, b.useEffect)(() => {
+    let l = a ? `addon-outline-docs-${t.id}` : "addon-outline";
+    return o ? c(l, $) : y(l), () => {
+      y(l);
+    };
+  }, [o, $, t]), i();
+}, "withOutline");
+
+// src/outline/preview.ts
+var D = globalThis.FEATURES?.outline ? [O] : [], I = {
+  [f]: !1
+}, B = /* @__PURE__ */ p(() => (0, P.definePreview)({ decorators: D, initialGlobals: I }), "default");
+
+// src/outline/index.ts
+var G = /* @__PURE__ */ p(() => (0, R.definePreview)(A), "default");

package/dist/outline/index.d.ts

@@ -0,0 +1,66 @@
+import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, StoryIdentifier, StoryContext, PartialStoryFn, LegacyStoryFn } from 'storybook/internal/csf';
+import { NormalizedProjectAnnotations, ProjectAnnotations as ProjectAnnotations$2, ComposedStoryFn } from 'storybook/internal/types';
+
+declare global {
+	interface SymbolConstructor {
+		readonly observable: symbol;
+	}
+}
+
+interface Renderer extends Renderer$1 {
+}
+
+type MaybePromise<T> = Promise<T> | T;
+type TeardownRenderToCanvas = () => MaybePromise<void>;
+type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
+interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotations$1<TRenderer> {
+    addons?: ProjectAnnotations<TRenderer>[];
+    testingLibraryRender?: (...args: never[]) => {
+        unmount: () => void;
+    };
+    renderToCanvas?: RenderToCanvas<TRenderer>;
+}
+declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+    showMain: () => void;
+    showError: (error: {
+        title: string;
+        description: string;
+    }) => void;
+    showException: (err: Error) => void;
+    forceRemount: boolean;
+    storyContext: StoryContext<TRenderer>;
+    storyFn: PartialStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
+
+declare global {
+    var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
+    var defaultProjectAnnotations: ProjectAnnotations$2<any>;
+}
+type WrappedStoryRef = {
+    __pw_type: 'jsx' | 'importRef';
+};
+type UnwrappedJSXStoryRef = {
+    __pw_type: 'jsx';
+    type: UnwrappedImportStoryRef;
+};
+type UnwrappedImportStoryRef = ComposedStoryFn;
+declare global {
+    function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
+}
+
+interface OutlineParameters {
+    /**
+     * Outline configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
+     */
+    outline: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+    };
+}
+
+declare const _default: () => ProjectAnnotations<Renderer>;
+
+export { type OutlineParameters, _default as default };