storybook 9.0.0-alpha.0 → 9.0.0-alpha.10

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

@@ -0,0 +1,451 @@
+<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 */
+  .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
+    display: none;
+  }
+
+  .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
+    display: none;
+  }
+
+  /* Hide our own blocks when we aren't supposed to be showing them */
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #storybook-root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%;
+    /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+
+    padding: 40px;
+    font-family:
+      'Nunito Sans',
+      -apple-system,
+      '.SFNSText-Regular',
+      'San Francisco',
+      BlinkMacSystemFont,
+      'Segoe UI',
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  @media (max-width: 700px) {
+    .sb-wrapper {
+      padding: 20px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .sb-wrapper {
+      padding: 10px;
+    }
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    background: #f6f9fc;
+    color: black;
+    z-index: 999999;
+    width: 100vw;
+    min-height: 100vh;
+    box-sizing: border-box;
+
+    & ol {
+      padding-left: 18px;
+      margin: 0;
+    }
+
+    & h1 {
+      font-family: Nunito Sans;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 30px;
+      font-weight: normal;
+      margin: 0;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: #ff4400;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    & p,
+    & ol {
+      font-family: Nunito Sans;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      margin: 0;
+    }
+
+    & li + li {
+      margin: 0;
+      padding: 0;
+      padding-top: 12px;
+    }
+
+    & a {
+      color: currentColor;
+    }
+  }
+
+  .sb-errordisplay_main {
+    margin: auto;
+    padding: 24px;
+    display: flex;
+    box-sizing: border-box;
+
+    flex-direction: column;
+    min-height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    background: white;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
+    gap: 24px;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    flex: 1;
+    background: #242424;
+    color: #c6c6c6;
+    box-sizing: border-box;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    border-radius: 4px;
+
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
+    margin: 0;
+    overflow: auto;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+    white-space: revert;
+  }
+
+  @-webkit-keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @-webkit-keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  /* We display the preparing loaders *over* the rendering story */
+  .sb-preparing-story,
+  .sb-preparing-docs {
+    background-color: white;
+    /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
+    on top, but this isn't possible as it would require making CSS changes that could affect user code */
+    z-index: 2147483647;
+  }
+
+  .sb-loader {
+    -webkit-animation: sb-rotate360 0.7s linear infinite;
+    animation: sb-rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .sb-previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .sb-previewBlock_header {
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .sb-previewBlock_icon {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+
+  .sb-previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .sb-previewBlock_body {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    height: 182px;
+    position: relative;
+  }
+
+  .sb-argstableBlock {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 25px auto 40px;
+    max-width: 600px;
+    text-align: left;
+    width: 100%;
+  }
+
+  .sb-argstableBlock th:first-of-type,
+  .sb-argstableBlock td:first-of-type {
+    padding-left: 20px;
+  }
+
+  .sb-argstableBlock th:nth-of-type(2),
+  .sb-argstableBlock td:nth-of-type(2) {
+    width: 35%;
+  }
+
+  .sb-argstableBlock th:nth-of-type(3),
+  .sb-argstableBlock td:nth-of-type(3) {
+    width: 15%;
+  }
+
+  .sb-argstableBlock th:last-of-type,
+  .sb-argstableBlock td:last-of-type {
+    width: 25%;
+    padding-right: 20px;
+  }
+
+  .sb-argstableBlock th span,
+  .sb-argstableBlock td span {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+  }
+
+  .sb-argstableBlock th {
+    padding: 10px 15px;
+  }
+
+  .sb-argstableBlock-body {
+    border-radius: 4px;
+    box-shadow:
+      rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
+      rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+
+  .sb-argstableBlock-body tr {
+    background: transparent;
+    overflow: hidden;
+  }
+
+  .sb-argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .sb-argstableBlock-body tr:first-child td:first-child {
+    border-top-left-radius: 4px;
+  }
+
+  .sb-argstableBlock-body tr:first-child td:last-child {
+    border-top-right-radius: 4px;
+  }
+
+  .sb-argstableBlock-body tr:last-child td:first-child {
+    border-bottom-left-radius: 4px;
+  }
+
+  .sb-argstableBlock-body tr:last-child td:last-child {
+    border-bottom-right-radius: 4px;
+  }
+
+  .sb-argstableBlock-body td {
+    background: #fff;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+
+  .sb-argstableBlock-body td:not(:first-of-type) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .sb-argstableBlock-body button {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+    display: inline;
+    font-size: 12px;
+    line-height: 1;
+    padding: 10px 16px;
+  }
+
+  .sb-argstableBlock-summary {
+    margin-top: 4px;
+  }
+
+  .sb-argstableBlock-code {
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 2px 5px;
+  }
+</style>
+
+<script>
+  /* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }
+</script>

package/assets/server/template.ejs

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+    <% if (favicon.endsWith('.svg')) {%>
+    <link rel="icon" type="image/svg+xml" href="./<%= favicon %>" />
+    <% } else if (favicon.endsWith('.ico')) { %>
+    <link rel="icon" type="image/x-icon" href="./<%= favicon %>" />
+    <% } %>
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
+
+    <link href="./sb-manager/runtime.js" rel="modulepreload" />
+
+    <% files.js.forEach(file => { %>
+    <link href="<%= file %>" rel="modulepreload" />
+    <% }); %> <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
+
+    <style>
+      #storybook-root[hidden] {
+        display: none !important;
+      }
+    </style>
+
+    <% files.css.forEach(file => { %>
+    <link href="<%= file %>" rel="stylesheet" />
+    <% }); %>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
+    <script>
+      <% for (var varName in globals) { %>
+        <% if (globals[varName] !== undefined) { %>
+          window['<%=varName%>'] = <%- (globals[varName]) %>;
+        <% } %>
+      <% } %>
+    </script>
+    <% } %>
+
+    <script type="module">
+      import './sb-manager/globals-runtime.js';
+      
+      <% files.js.forEach(file => { %>
+        import '<%= file %>';
+      <% }); %>
+      
+      import './sb-manager/runtime.js';
+    </script>
+  </body>
+</html>

package/bin/index.cjs

@@ -23,4 +23,4 @@ process.once('uncaughtException', (error) => {
   throw error;
 });
 
-require('../dist/proxy.cjs');
+require('../dist/bin/index.cjs');

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