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

package/dist/types/index.js

@@ -1,7 +1,6 @@
 // src/types/modules/addons.ts
 var r = /* @__PURE__ */ ((e) => (e.TAB = "tab", e.PANEL = "panel", e.TOOL = "tool", e.TOOLEXTRA = "toolextra", e.PREVIEW = "preview", e.experimental_PAGE =
-"page", e.experimental_SIDEBAR_BOTTOM = "sidebar-bottom", e.experimental_SIDEBAR_TOP = "sidebar-top", e.experimental_TEST_PROVIDER = "test-p\
-rovider", e))(r || {});
+"page", e.experimental_TEST_PROVIDER = "test-provider", e))(r || {});
 export {
   r as Addon_TypesEnum
 };

package/dist/viewport/index.cjs

@@ -0,0 +1,310 @@
+"use strict";
+var o = Object.defineProperty;
+var n = Object.getOwnPropertyDescriptor;
+var l = Object.getOwnPropertyNames;
+var m = Object.prototype.hasOwnProperty;
+var a = (t, e) => {
+  for (var i in e)
+    o(t, i, { get: e[i], enumerable: !0 });
+}, y = (t, e, i, x) => {
+  if (e && typeof e == "object" || typeof e == "function")
+    for (let p of l(e))
+      !m.call(t, p) && p !== i && o(t, p, { get: () => e[p], enumerable: !(x = n(e, p)) || x.enumerable });
+  return t;
+};
+var r = (t) => y(o({}, "__esModule", { value: !0 }), t);
+
+// src/viewport/index.ts
+var T = {};
+a(T, {
+  ADDON_ID: () => h,
+  DEFAULT_VIEWPORT: () => g,
+  INITIAL_VIEWPORTS: () => b,
+  MINIMAL_VIEWPORTS: () => I,
+  PANEL_ID: () => d,
+  PARAM_KEY: () => s,
+  TOOL_ID: () => w,
+  initialGlobals: () => A,
+  responsiveViewport: () => S
+});
+module.exports = r(T);
+
+// src/viewport/constants.ts
+var h = "storybook/viewport", s = "viewport", d = `${h}/panel`, w = `${h}/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"
+  }
+}, b = P, g = "responsive", I = {
+  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
+var f = require("storybook/preview-api");
+var A = {
+  [s]: { value: void 0, isRotated: !1 }
+};
+
+// src/viewport/responsiveViewport.tsx
+var S = {
+  name: "Reset viewport",
+  styles: {
+    height: "100%",
+    width: "100%"
+  },
+  type: "desktop"
+};

package/dist/viewport/index.d.ts

@@ -0,0 +1,320 @@
+import { NormalizedProjectAnnotations, ProjectAnnotations, ComposedStoryFn } from 'storybook/internal/types';
+
+declare const ADDON_ID = "storybook/viewport";
+declare const PARAM_KEY = "viewport";
+declare const PANEL_ID = "storybook/viewport/panel";
+declare const TOOL_ID = "storybook/viewport/tool";
+
+interface Viewport {
+    name: string;
+    styles: ViewportStyles;
+    type: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+interface ViewportStyles {
+    height: string;
+    width: string;
+}
+type ViewportMap = Record<string, Viewport>;
+type GlobalState = {
+    /**
+     * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
+     * of one of the available viewports.
+     */
+    value: string | undefined;
+    /**
+     * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
+     * landscape orientation.
+     */
+    isRotated: boolean;
+};
+type GlobalStateUpdate = Partial<GlobalState>;
+interface ViewportParameters {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#parameters
+     */
+    viewport: {
+        /**
+         * Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon
+         * for the entire Storybook, you should do so when registering addon-essentials
+         *
+         * @see https://storybook.js.org/docs/essentials/index#disabling-addons
+         */
+        disable?: boolean;
+        /**
+         * Specify the available viewports. The width and height values must include the unit, e.g.
+         * '320px'.
+         */
+        options: Record<string, Viewport>;
+    };
+}
+interface ViewportGlobals {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#globals
+     */
+    viewport: {
+        [key: string]: GlobalState | GlobalState['value'];
+    };
+}
+
+declare const INITIAL_VIEWPORTS_DATA: {
+    readonly iphone5: {
+        readonly name: "iPhone 5";
+        readonly styles: {
+            readonly height: "568px";
+            readonly width: "320px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone6: {
+        readonly name: "iPhone 6";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone6p: {
+        readonly name: "iPhone 6 Plus";
+        readonly styles: {
+            readonly height: "736px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone8p: {
+        readonly name: "iPhone 8 Plus";
+        readonly styles: {
+            readonly height: "736px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonex: {
+        readonly name: "iPhone X";
+        readonly styles: {
+            readonly height: "812px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonexr: {
+        readonly name: "iPhone XR";
+        readonly styles: {
+            readonly height: "896px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonexsmax: {
+        readonly name: "iPhone XS Max";
+        readonly styles: {
+            readonly height: "896px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonese2: {
+        readonly name: "iPhone SE (2nd generation)";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12mini: {
+        readonly name: "iPhone 12 mini";
+        readonly styles: {
+            readonly height: "812px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12: {
+        readonly name: "iPhone 12";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12promax: {
+        readonly name: "iPhone 12 Pro Max";
+        readonly styles: {
+            readonly height: "926px";
+            readonly width: "428px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphoneSE3: {
+        readonly name: "iPhone SE 3rd generation";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13: {
+        readonly name: "iPhone 13";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13pro: {
+        readonly name: "iPhone 13 Pro";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13promax: {
+        readonly name: "iPhone 13 Pro Max";
+        readonly styles: {
+            readonly height: "926px";
+            readonly width: "428px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14: {
+        readonly name: "iPhone 14";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14pro: {
+        readonly name: "iPhone 14 Pro";
+        readonly styles: {
+            readonly height: "852px";
+            readonly width: "393px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14promax: {
+        readonly name: "iPhone 14 Pro Max";
+        readonly styles: {
+            readonly height: "932px";
+            readonly width: "430px";
+        };
+        readonly type: "mobile";
+    };
+    readonly ipad: {
+        readonly name: "iPad";
+        readonly styles: {
+            readonly height: "1024px";
+            readonly width: "768px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad10p: {
+        readonly name: "iPad Pro 10.5-in";
+        readonly styles: {
+            readonly height: "1112px";
+            readonly width: "834px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad11p: {
+        readonly name: "iPad Pro 11-in";
+        readonly styles: {
+            readonly height: "1194px";
+            readonly width: "834px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad12p: {
+        readonly name: "iPad Pro 12.9-in";
+        readonly styles: {
+            readonly height: "1366px";
+            readonly width: "1024px";
+        };
+        readonly type: "tablet";
+    };
+    readonly galaxys5: {
+        readonly name: "Galaxy S5";
+        readonly styles: {
+            readonly height: "640px";
+            readonly width: "360px";
+        };
+        readonly type: "mobile";
+    };
+    readonly galaxys9: {
+        readonly name: "Galaxy S9";
+        readonly styles: {
+            readonly height: "740px";
+            readonly width: "360px";
+        };
+        readonly type: "mobile";
+    };
+    readonly nexus5x: {
+        readonly name: "Nexus 5X";
+        readonly styles: {
+            readonly height: "660px";
+            readonly width: "412px";
+        };
+        readonly type: "mobile";
+    };
+    readonly nexus6p: {
+        readonly name: "Nexus 6P";
+        readonly styles: {
+            readonly height: "732px";
+            readonly width: "412px";
+        };
+        readonly type: "mobile";
+    };
+    readonly pixel: {
+        readonly name: "Pixel";
+        readonly styles: {
+            readonly height: "960px";
+            readonly width: "540px";
+        };
+        readonly type: "mobile";
+    };
+    readonly pixelxl: {
+        readonly name: "Pixel XL";
+        readonly styles: {
+            readonly height: "1280px";
+            readonly width: "720px";
+        };
+        readonly type: "mobile";
+    };
+};
+type InitialViewportKeys = keyof typeof INITIAL_VIEWPORTS_DATA;
+declare const INITIAL_VIEWPORTS: ViewportMap;
+declare const DEFAULT_VIEWPORT = "responsive";
+declare const MINIMAL_VIEWPORTS: ViewportMap;
+
+declare global {
+	interface SymbolConstructor {
+		readonly observable: symbol;
+	}
+}
+
+declare global {
+    var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
+    var defaultProjectAnnotations: ProjectAnnotations<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>;
+}
+
+declare const initialGlobals: Record<string, GlobalState>;
+
+declare const responsiveViewport: Viewport;
+
+export { ADDON_ID, DEFAULT_VIEWPORT, type GlobalState, type GlobalStateUpdate, INITIAL_VIEWPORTS, type InitialViewportKeys, MINIMAL_VIEWPORTS, PANEL_ID, PARAM_KEY, TOOL_ID, type Viewport, type ViewportGlobals, type ViewportMap, type ViewportParameters, type ViewportStyles, initialGlobals, responsiveViewport };