storybook 9.0.0-alpha.12 → 9.0.0-alpha.14

package/dist/viewport/manager.js

@@ -1,400 +0,0 @@
-var q = Object.defineProperty;
-var n = (e, t) => q(e, "name", { value: t, configurable: !0 });
-
-// src/viewport/manager.tsx
-import * as F from "react";
-import { addons as O, types as c0 } from "storybook/manager-api";
-
-// src/viewport/components/Tool.tsx
-import o, { Fragment as J, useCallback as Q, useEffect as $, useState as K } from "react";
-import { IconButton as e0, TooltipLinkList as t0, WithTooltip as a0 } from "storybook/internal/components";
-
-// ../node_modules/@storybook/icons/dist/index.mjs
-import * as l from "react";
-var H = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      d: "M1.5 1.004a.5.5 0 100 1H12v10.5a.5.5 0 001 0v-10.5a1 1 0 00-1-1H1.5z",
-      fill: e
-    }
-  ),
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      d: "M1 3.504a.5.5 0 01.5-.5H10a1 1 0 011 1v8.5a.5.5 0 01-1 0v-8.5H1.5a.5.5 0 01-.5-.5z",
-      fill: e
-    }
-  ),
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M1.5 5.004a.5.5 0 00-.5.5v7a.5.5 0 00.5.5h7a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5h-7zm.5 1v6h6v-6H2z",
-      fill: e
-    }
-  )
-));
-var C = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M.5 13.004a.5.5 0 01-.5-.5v-11a.5.5 0 01.5-.5h13a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H.5zm.5-1v-8h12v8H1zm1-9.5a.5.5 0 11-1 0 .5.5 0 01\
-1 0zm2 0a.5.5 0 11-1 0 .5.5 0 011 0zm2 0a.5.5 0 11-1 0 .5.5 0 011 0z",
-      fill: e
-    }
-  )
-)), L = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3.5.004a1.5 1.5 0 00-1.5 1.5v11a1.5 1.5 0 001.5 1.5h7a1.5 1.5 0 001.5-1.5v-11a1.5 1.5 0 00-1.5-1.5h-7zm0 1h7a.5.5 0 01.5.5v9.5H3v\
--9.5a.5.5 0 01.5-.5zm2.5 11a.5.5 0 000 1h2a.5.5 0 000-1H6z",
-      fill: e
-    }
-  )
-)), A = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3 1.504a1.5 1.5 0 011.5-1.5h5a1.5 1.5 0 011.5 1.5v11a1.5 1.5 0 01-1.5 1.5h-5a1.5 1.5 0 01-1.5-1.5v-11zm1 10.5v-10h6v10H4z",
-      fill: e
-    }
-  )
-));
-var V = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      d: "M10.646 2.646a.5.5 0 01.708 0l1.5 1.5a.5.5 0 010 .708l-1.5 1.5a.5.5 0 01-.708-.708L11.293 5H1.5a.5.5 0 010-1h9.793l-.647-.646a.5.5\
- 0 010-.708zM3.354 8.354L2.707 9H12.5a.5.5 0 010 1H2.707l.647.646a.5.5 0 01-.708.708l-1.5-1.5a.5.5 0 010-.708l1.5-1.5a.5.5 0 11.708.708z",
-      fill: e
-    }
-  )
-));
-var B = /* @__PURE__ */ l.forwardRef(({ color: e = "currentColor", size: t = 14, ...a }, r) => /* @__PURE__ */ l.createElement(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: r,
-    ...a
-  },
-  /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      d: "M7.092.5H7a6.5 6.5 0 106.41 7.583.5.5 0 10-.986-.166A5.495 5.495 0 017 12.5a5.5 5.5 0 010-11h.006a5.5 5.5 0 014.894 3H10a.5.5 0 00\
-0 1h3a.5.5 0 00.5-.5V2a.5.5 0 00-1 0v1.535A6.495 6.495 0 007.092.5z",
-      fill: e
-    }
-  )
-));
-
-// src/viewport/components/Tool.tsx
-import { useGlobals as l0, useParameter as r0 } from "storybook/manager-api";
-import { Global as n0 } from "storybook/theming";
-
-// src/viewport/constants.ts
-var i = "storybook/viewport", d = "viewport", v0 = `${i}/panel`, y = `${i}/tool`;
-
-// src/viewport/defaults.ts
-var b = {
-  mobile1: {
-    name: "Small mobile",
-    styles: {
-      height: "568px",
-      width: "320px"
-    },
-    type: "mobile"
-  },
-  mobile2: {
-    name: "Large mobile",
-    styles: {
-      height: "896px",
-      width: "414px"
-    },
-    type: "mobile"
-  },
-  tablet: {
-    name: "Tablet",
-    styles: {
-      height: "1112px",
-      width: "834px"
-    },
-    type: "tablet"
-  },
-  desktop: {
-    name: "Desktop",
-    styles: {
-      height: "1024px",
-      width: "1280px"
-    },
-    type: "desktop"
-  }
-};
-
-// src/viewport/responsiveViewport.tsx
-var m = {
-  name: "Reset viewport",
-  styles: {
-    height: "100%",
-    width: "100%"
-  },
-  type: "desktop"
-};
-
-// src/viewport/preview.ts
-import { definePreview as m0 } from "storybook/preview-api";
-var P = {
-  [d]: { value: void 0, isRotated: !1 }
-};
-
-// src/viewport/shortcuts.ts
-var S = /* @__PURE__ */ n((e, t) => e.indexOf(t), "getCurrentViewportIndex"), X = /* @__PURE__ */ n((e, t) => {
-  let a = S(e, t);
-  return a === e.length - 1 ? e[0] : e[a + 1];
-}, "getNextViewport"), Z = /* @__PURE__ */ n((e, t) => {
-  let a = S(e, t);
-  return a < 1 ? e[e.length - 1] : e[a - 1];
-}, "getPreviousViewport"), _ = /* @__PURE__ */ n(async (e, t, a, r) => {
-  await e.setAddonShortcut(i, {
-    label: "Previous viewport",
-    defaultShortcut: ["alt", "shift", "V"],
-    actionName: "previous",
-    action: /* @__PURE__ */ n(() => {
-      a({
-        viewport: Z(r, t)
-      });
-    }, "action")
-  }), await e.setAddonShortcut(i, {
-    label: "Next viewport",
-    defaultShortcut: ["alt", "V"],
-    actionName: "next",
-    action: /* @__PURE__ */ n(() => {
-      a({
-        viewport: X(r, t)
-      });
-    }, "action")
-  }), await e.setAddonShortcut(i, {
-    label: "Reset viewport",
-    defaultShortcut: ["alt", "control", "V"],
-    actionName: "reset",
-    action: /* @__PURE__ */ n(() => {
-      a(P);
-    }, "action")
-  });
-}, "registerShortcuts");
-
-// src/viewport/utils.tsx
-import M, { Fragment as j } from "react";
-import { IconButton as Y } from "storybook/internal/components";
-import { styled as z } from "storybook/theming";
-var k = z.div({
-  display: "inline-flex",
-  alignItems: "center"
-}), I = z.div(({ theme: e }) => ({
-  display: "inline-block",
-  textDecoration: "none",
-  padding: 10,
-  fontWeight: e.typography.weight.bold,
-  fontSize: e.typography.size.s2 - 1,
-  lineHeight: "1",
-  height: 40,
-  border: "none",
-  borderTop: "3px solid transparent",
-  borderBottom: "3px solid transparent",
-  background: "transparent"
-})), D = z(Y)(() => ({
-  display: "inline-flex",
-  alignItems: "center"
-})), T = z.div(({ theme: e }) => ({
-  fontSize: e.typography.size.s2 - 1,
-  marginLeft: 10
-})), G = {
-  desktop: /* @__PURE__ */ M.createElement(C, null),
-  mobile: /* @__PURE__ */ M.createElement(A, null),
-  tablet: /* @__PURE__ */ M.createElement(L, null),
-  other: /* @__PURE__ */ M.createElement(j, null)
-};
-
-// src/viewport/components/Tool.tsx
-var U = /* @__PURE__ */ n(({ api: e }) => {
-  let t = r0(d), [a, r, g] = l0(), [u, s] = K(!1), { options: h = b, disable: E } = t || {}, v = a?.[d] || {}, w = typeof v == "string" ? v :
-  v.value, f = typeof v == "string" ? !1 : v.isRotated, c = h[w] || m, R = u || c !== m, p = d in g, x = Object.keys(h).length;
-  if ($(() => {
-    _(e, w, r, Object.keys(h));
-  }, [h, w, r, e]), c.styles === null || !h || x < 1)
-    return null;
-  if (typeof c.styles == "function")
-    return console.warn(
-      "Addon Viewport no longer supports dynamic styles using a function, use css calc() instead"
-    ), null;
-  let N = f ? c.styles.height : c.styles.width, W = f ? c.styles.width : c.styles.height;
-  return E ? null : /* @__PURE__ */ o.createElement(
-    o0,
-    {
-      item: c,
-      updateGlobals: r,
-      viewportMap: h,
-      viewportName: w,
-      isRotated: f,
-      setIsTooltipVisible: s,
-      isLocked: p,
-      isActive: R,
-      width: N,
-      height: W
-    }
-  );
-}, "ViewportTool"), o0 = o.memo(/* @__PURE__ */ n(function(t) {
-  let {
-    item: a,
-    viewportMap: r,
-    viewportName: g,
-    isRotated: u,
-    updateGlobals: s,
-    setIsTooltipVisible: h,
-    isLocked: E,
-    isActive: v,
-    width: w,
-    height: f
-  } = t, c = Q(
-    (R) => s({ [d]: R }),
-    [s]
-  );
-  return /* @__PURE__ */ o.createElement(J, null, /* @__PURE__ */ o.createElement(
-    a0,
-    {
-      placement: "bottom",
-      tooltip: ({ onHide: R }) => /* @__PURE__ */ o.createElement(
-        t0,
-        {
-          links: [
-            ...length > 0 && a !== m ? [
-              {
-                id: "reset",
-                title: "Reset viewport",
-                icon: /* @__PURE__ */ o.createElement(B, null),
-                onClick: /* @__PURE__ */ n(() => {
-                  c({ value: void 0, isRotated: !1 }), R();
-                }, "onClick")
-              }
-            ] : [],
-            ...Object.entries(r).map(([p, x]) => ({
-              id: p,
-              title: x.name,
-              icon: G[x.type],
-              active: p === g,
-              onClick: /* @__PURE__ */ n(() => {
-                c({ value: p, isRotated: !1 }), R();
-              }, "onClick")
-            }))
-          ].flat()
-        }
-      ),
-      closeOnOutsideClick: !0,
-      onVisibleChange: h
-    },
-    /* @__PURE__ */ o.createElement(
-      D,
-      {
-        disabled: E,
-        key: "viewport",
-        title: "Change the size of the preview",
-        active: v,
-        onDoubleClick: () => {
-          c({ value: void 0, isRotated: !1 });
-        }
-      },
-      /* @__PURE__ */ o.createElement(H, null),
-      a !== m ? /* @__PURE__ */ o.createElement(T, null, a.name, " ", u ? "(L)" : "(P)") : null
-    )
-  ), /* @__PURE__ */ o.createElement(
-    n0,
-    {
-      styles: {
-        'iframe[data-is-storybook="true"]': { width: w, height: f }
-      }
-    }
-  ), a !== m ? /* @__PURE__ */ o.createElement(k, null, /* @__PURE__ */ o.createElement(I, { title: "Viewport width" }, w.replace("px", "")),
-  E ? "/" : /* @__PURE__ */ o.createElement(
-    e0,
-    {
-      key: "viewport-rotate",
-      title: "Rotate viewport",
-      onClick: () => {
-        c({ value: g, isRotated: !u });
-      }
-    },
-    /* @__PURE__ */ o.createElement(V, null)
-  ), /* @__PURE__ */ o.createElement(I, { title: "Viewport height" }, f.replace("px", ""))) : null);
-}, "PureTool"));
-
-// src/viewport/manager.tsx
-O.register(i, (e) => {
-  O.add(y, {
-    title: "viewport / media-queries",
-    type: c0.TOOL,
-    match: /* @__PURE__ */ n(({ viewMode: t, tabId: a }) => t === "story" && !a, "match"),
-    render: /* @__PURE__ */ n(() => /* @__PURE__ */ F.createElement(U, { api: e }), "render")
-  });
-});