storybook 9.0.0-alpha.1 → 9.0.0-alpha.11

package/dist/viewport/index.js

@@ -0,0 +1,290 @@
+// src/viewport/constants.ts
+var e = "storybook/viewport", t = "viewport", o = `${e}/panel`, h = `${e}/tool`;
+
+// src/viewport/defaults.ts
+var p = {
+  iphone5: {
+    name: "iPhone 5",
+    styles: {
+      height: "568px",
+      width: "320px"
+    },
+    type: "mobile"
+  },
+  iphone6: {
+    name: "iPhone 6",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone6p: {
+    name: "iPhone 6 Plus",
+    styles: {
+      height: "736px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphone8p: {
+    name: "iPhone 8 Plus",
+    styles: {
+      height: "736px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonex: {
+    name: "iPhone X",
+    styles: {
+      height: "812px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphonexr: {
+    name: "iPhone XR",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonexsmax: {
+    name: "iPhone XS Max",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonese2: {
+    name: "iPhone SE (2nd generation)",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone12mini: {
+    name: "iPhone 12 mini",
+    styles: {
+      height: "812px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone12: {
+    name: "iPhone 12",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone12promax: {
+    name: "iPhone 12 Pro Max",
+    styles: {
+      height: "926px",
+      width: "428px"
+    },
+    type: "mobile"
+  },
+  iphoneSE3: {
+    name: "iPhone SE 3rd generation",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone13: {
+    name: "iPhone 13",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone13pro: {
+    name: "iPhone 13 Pro",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone13promax: {
+    name: "iPhone 13 Pro Max",
+    styles: {
+      height: "926px",
+      width: "428px"
+    },
+    type: "mobile"
+  },
+  iphone14: {
+    name: "iPhone 14",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone14pro: {
+    name: "iPhone 14 Pro",
+    styles: {
+      height: "852px",
+      width: "393px"
+    },
+    type: "mobile"
+  },
+  iphone14promax: {
+    name: "iPhone 14 Pro Max",
+    styles: {
+      height: "932px",
+      width: "430px"
+    },
+    type: "mobile"
+  },
+  ipad: {
+    name: "iPad",
+    styles: {
+      height: "1024px",
+      width: "768px"
+    },
+    type: "tablet"
+  },
+  ipad10p: {
+    name: "iPad Pro 10.5-in",
+    styles: {
+      height: "1112px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  ipad11p: {
+    name: "iPad Pro 11-in",
+    styles: {
+      height: "1194px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  ipad12p: {
+    name: "iPad Pro 12.9-in",
+    styles: {
+      height: "1366px",
+      width: "1024px"
+    },
+    type: "tablet"
+  },
+  galaxys5: {
+    name: "Galaxy S5",
+    styles: {
+      height: "640px",
+      width: "360px"
+    },
+    type: "mobile"
+  },
+  galaxys9: {
+    name: "Galaxy S9",
+    styles: {
+      height: "740px",
+      width: "360px"
+    },
+    type: "mobile"
+  },
+  nexus5x: {
+    name: "Nexus 5X",
+    styles: {
+      height: "660px",
+      width: "412px"
+    },
+    type: "mobile"
+  },
+  nexus6p: {
+    name: "Nexus 6P",
+    styles: {
+      height: "732px",
+      width: "412px"
+    },
+    type: "mobile"
+  },
+  pixel: {
+    name: "Pixel",
+    styles: {
+      height: "960px",
+      width: "540px"
+    },
+    type: "mobile"
+  },
+  pixelxl: {
+    name: "Pixel XL",
+    styles: {
+      height: "1280px",
+      width: "720px"
+    },
+    type: "mobile"
+  }
+}, x = p, n = "responsive", l = {
+  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/preview.ts
+import { definePreview as r } from "storybook/preview-api";
+var w = {
+  [t]: { value: void 0, isRotated: !1 }
+};
+
+// src/viewport/responsiveViewport.tsx
+var g = {
+  name: "Reset viewport",
+  styles: {
+    height: "100%",
+    width: "100%"
+  },
+  type: "desktop"
+};
+export {
+  e as ADDON_ID,
+  n as DEFAULT_VIEWPORT,
+  x as INITIAL_VIEWPORTS,
+  l as MINIMAL_VIEWPORTS,
+  o as PANEL_ID,
+  t as PARAM_KEY,
+  h as TOOL_ID,
+  w as initialGlobals,
+  g as responsiveViewport
+};

package/dist/viewport/manager.js

@@ -0,0 +1,400 @@
+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")
+  });
+});

package/dist/viewport/preview.cjs

@@ -0,0 +1,35 @@
+"use strict";
+var p = Object.defineProperty;
+var c = Object.getOwnPropertyDescriptor;
+var d = Object.getOwnPropertyNames;
+var m = Object.prototype.hasOwnProperty;
+var l = (t, o) => p(t, "name", { value: o, configurable: !0 });
+var x = (t, o) => {
+  for (var r in o)
+    p(t, r, { get: o[r], enumerable: !0 });
+}, A = (t, o, r, i) => {
+  if (o && typeof o == "object" || typeof o == "function")
+    for (let e of d(o))
+      !m.call(t, e) && e !== r && p(t, e, { get: () => o[e], enumerable: !(i = c(o, e)) || i.enumerable });
+  return t;
+};
+var D = (t) => A(p({}, "__esModule", { value: !0 }), t);
+
+// src/viewport/preview.ts
+var b = {};
+x(b, {
+  default: () => _,
+  initialGlobals: () => f
+});
+module.exports = D(b);
+var s = require("storybook/preview-api");
+
+// src/viewport/constants.ts
+var a = "storybook/viewport", n = "viewport", P = `${a}/panel`, R = `${a}/tool`;
+
+// src/viewport/preview.ts
+var f = {
+  [n]: { value: void 0, isRotated: !1 }
+}, _ = /* @__PURE__ */ l(() => (0, s.definePreview)({
+  initialGlobals: f
+}), "default");