react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/RendererCore/spec.d.ts

@@ -0,0 +1,25 @@
+import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
+export type RendererCoreSpec = {
+    name: 'rendererCore';
+    state: {
+        connectedRendererIds: RendererId[];
+        primaryRendererId: null | RendererId;
+        fixtures: FixtureList;
+        fixtureState: FixtureState;
+    };
+    methods: {
+        getConnectedRendererIds(): RendererId[];
+        getPrimaryRendererId(): null | RendererId;
+        getFixtures(): FixtureList;
+        getFixtureState(): FixtureState;
+        isRendererConnected(): boolean;
+        isValidFixtureSelected(): boolean;
+        setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
+        selectPrimaryRenderer(primaryRendererId: RendererId): void;
+        receiveResponse(msg: MessageType): void;
+    };
+    events: {
+        request(msg: MessageType): void;
+        response(msg: MessageType): void;
+    };
+};

package/dist/plugins/RendererCore/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/RendererPreview/RendererPreview.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type OnIframeRef = (elRef: null | HTMLIFrameElement) => void;
+type Props = {
+    rendererUrl: null | string;
+    onIframeRef: OnIframeRef;
+};
+export declare const RendererPreview: React.NamedExoticComponent<Props>;
+export {};

package/dist/plugins/RendererPreview/RendererPreview.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Slot } from 'react-plugin';
+import styled from 'styled-components';
+export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, onIframeRef, }) {
+    if (!rendererUrl) {
+        return null;
+    }
+    return (React.createElement(Slot, { name: "rendererPreviewOuter" },
+        React.createElement(Container, null,
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }))));
+});
+const Container = styled.div `
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+`;
+const Iframe = styled.iframe `
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+`;

package/dist/plugins/RendererPreview/checkRendererStatus.d.ts

@@ -0,0 +1,2 @@
+import { RendererPreviewContext } from './shared.js';
+export declare function checkRendererStatus(context: RendererPreviewContext, rendererUrl: string): (() => void) | undefined;

package/dist/plugins/RendererPreview/checkRendererStatus.js

@@ -0,0 +1,31 @@
+export function checkRendererStatus(context, rendererUrl) {
+    // We can't do fetch requests when Cosmos exports are opened without a
+    // web server (ie. via file:/// protocol) so we're left to _assume_ the
+    // renderer iframe loads alright.
+    if (location.protocol === 'file:') {
+        return;
+    }
+    // The plugin might unmount before the fetch call returns a status, in which
+    // case we no longer want to update the (unmounted) plugin state
+    let unmounted = false;
+    fetch(rendererUrl, { credentials: 'include' })
+        .then(({ status }) => {
+        if (!unmounted) {
+            context.setState(state => ({
+                ...state,
+                urlStatus: status === 200 ? 'ok' : 'error',
+            }));
+        }
+    })
+        .catch(err => {
+        if (!unmounted) {
+            context.setState(state => ({
+                ...state,
+                urlStatus: 'error',
+            }));
+        }
+    });
+    return () => {
+        unmounted = true;
+    };
+}

package/dist/plugins/RendererPreview/handleRendererRequests.d.ts

@@ -0,0 +1,6 @@
+import { MessageType } from 'react-cosmos-core';
+import { RendererPreviewContext } from './shared.js';
+export declare function createRendererRequestHandler(): {
+    postRendererRequest: (pluginContext: RendererPreviewContext, msg: MessageType) => void;
+    setIframeRef: (pluginContext: RendererPreviewContext, iframeRef: null | HTMLIFrameElement) => void;
+};

package/dist/plugins/RendererPreview/handleRendererRequests.js

@@ -0,0 +1,76 @@
+const notificationId = 'renderer-location-change';
+export function createRendererRequestHandler() {
+    let state = null;
+    function postRendererRequest(pluginContext, msg) {
+        if (!state)
+            return;
+        const { iframeRef } = state;
+        if (iframeRef.contentWindow) {
+            const iframeWindow = iframeRef.contentWindow;
+            if (msg.type === 'selectFixture' &&
+                iframeLocationChanged(iframeWindow, iframeRef.src)) {
+                const notifications = getNotificationMethods(pluginContext);
+                notifications.removeStickyNotification(notificationId);
+                iframeWindow.location.replace(iframeRef.src);
+            }
+            else {
+                iframeWindow.postMessage(msg, '*');
+            }
+        }
+    }
+    function setIframeRef(pluginContext, iframeRef) {
+        if (state)
+            state.iframeRef.removeEventListener('load', state.onIframeLoad);
+        if (iframeRef) {
+            state = {
+                iframeRef,
+                onIframeLoad(e) {
+                    const iframe = e.target;
+                    const iframeWindow = iframe.contentWindow;
+                    if (iframeWindow) {
+                        const notifications = getNotificationMethods(pluginContext);
+                        if (iframeLocationChanged(iframeWindow, iframe.src)) {
+                            notifications.pushStickyNotification({
+                                id: notificationId,
+                                type: 'info',
+                                title: 'Renderer iframe location changed',
+                                info: `Reload or select another fixture to reset your preview.`,
+                            });
+                        }
+                        else {
+                            notifications.removeStickyNotification(notificationId);
+                        }
+                    }
+                },
+            };
+            iframeRef.addEventListener('load', state.onIframeLoad);
+        }
+        else {
+            state = null;
+        }
+    }
+    return { postRendererRequest, setIframeRef };
+}
+function iframeLocationChanged(iframeWindow, iframeSrc) {
+    // We cannot read the iframe location when the iframe doesn't have the same
+    // origin as the main frame, due to cross-origin browser security. In this
+    // case we return false to avoid entering an infinite loop.
+    if (iframeSrc.indexOf('http') === 0 && !iframeSrc.match(origin))
+        return false;
+    try {
+        const { href } = iframeWindow.location;
+        const locationWithoutHash = href.split('#')[0];
+        return (locationWithoutHash !== iframeSrc &&
+            // Some static servers strip .html extensions automatically
+            // https://github.com/zeit/serve-handler/tree/ce35fcd4e1c67356348f4735eed88fb084af9b43#cleanurls-booleanarray
+            locationWithoutHash !== iframeSrc.replace(/\.html$/, ''));
+    }
+    catch (err) {
+        // An exception is thrown when trying to access the location of a
+        // cross-origin frame, which signals that the iframe location host changed.
+        return true;
+    }
+}
+function getNotificationMethods(pluginContext) {
+    return pluginContext.getMethodsOf('notifications');
+}

package/dist/plugins/RendererPreview/handleWindowMessages.d.ts

@@ -0,0 +1,2 @@
+import { RendererPreviewContext } from './shared.js';
+export declare function handleWindowMessages(context: RendererPreviewContext): () => void;

package/dist/plugins/RendererPreview/handleWindowMessages.js

@@ -0,0 +1,56 @@
+export function handleWindowMessages(context) {
+    const handler = createMessageHandler(context);
+    window.addEventListener('message', handler, false);
+    return () => {
+        window.removeEventListener('message', handler, false);
+    };
+}
+function createMessageHandler(context) {
+    return (msg) => {
+        if (!isValidResponse(msg)) {
+            return;
+        }
+        const rendererCore = context.getMethodsOf('rendererCore');
+        const response = msg.data;
+        rendererCore.receiveResponse(response);
+        updateRuntimeStatus(context, response);
+        if (response.type === 'rendererReady') {
+            rendererCore.selectPrimaryRenderer(response.payload.rendererId);
+        }
+    };
+}
+function isValidResponse(msg) {
+    return (
+    // TODO: Create convention to filter out alien messages reliably (eg.
+    // maybe tag msgs with source: "cosmos")
+    // https://github.com/facebook/react-devtools/issues/812#issuecomment-308827334
+    !msg.data.source &&
+        // TODO: Improve message validation
+        msg.data.type &&
+        msg.data.payload);
+}
+function updateRuntimeStatus({ getState, setState }, response) {
+    const { runtimeStatus } = getState();
+    // Errors are not of interest anymore after renderer connectivity has been
+    // established. Errors that occur after renderer is connected are likely
+    // errors related to specific fixtures that the user can navigate away from.
+    if (runtimeStatus === 'connected') {
+        return;
+    }
+    switch (response.type) {
+        case 'rendererReady': {
+            return setState(prevState => ({
+                ...prevState,
+                runtimeStatus: 'connected',
+            }));
+        }
+        case 'rendererError': {
+            return setState(prevState => ({
+                ...prevState,
+                runtimeStatus: 'error',
+            }));
+        }
+        default:
+        // The rest of the responses are handled by the renderer core plugin
+    }
+}

package/dist/plugins/RendererPreview/index.d.ts

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/RendererPreview/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { checkRendererStatus } from './checkRendererStatus.js';
+import { createRendererRequestHandler } from './handleRendererRequests.js';
+import { handleWindowMessages } from './handleWindowMessages.js';
+import { RendererPreview } from './RendererPreview.js';
+const { postRendererRequest, setIframeRef } = createRendererRequestHandler();
+const { onLoad, on, plug, register } = createPlugin({
+    name: 'rendererPreview',
+    initialState: {
+        urlStatus: 'unknown',
+        runtimeStatus: 'pending',
+    },
+    methods: {
+        getUrlStatus,
+        getRuntimeStatus,
+    },
+});
+on('rendererCore', {
+    request: postRendererRequest,
+});
+onLoad((context) => {
+    const rendererUrl = getRendererUrl(context);
+    if (!rendererUrl) {
+        return null;
+    }
+    return [
+        checkRendererStatus(context, rendererUrl),
+        handleWindowMessages(context),
+    ];
+});
+plug('rendererPreview', ({ pluginContext }) => {
+    function handleIframeRef(ref) {
+        setIframeRef(pluginContext, ref);
+    }
+    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), onIframeRef: handleIframeRef }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function getUrlStatus({ getState }) {
+    return getState().urlStatus;
+}
+function getRuntimeStatus({ getState }) {
+    return getState().runtimeStatus;
+}
+function getRendererUrl({ getMethodsOf }) {
+    return getMethodsOf('core').getWebRendererUrl();
+}

package/dist/plugins/RendererPreview/shared.d.ts

@@ -0,0 +1,9 @@
+import { PluginContext } from 'react-plugin';
+import { RendererPreviewSpec } from './spec.js';
+export type UrlStatus = 'unknown' | 'ok' | 'error';
+export type RuntimeStatus = 'pending' | 'connected' | 'error';
+export type State = {
+    urlStatus: UrlStatus;
+    runtimeStatus: RuntimeStatus;
+};
+export type RendererPreviewContext = PluginContext<RendererPreviewSpec>;

package/dist/plugins/RendererPreview/shared.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/RendererPreview/spec.d.ts

@@ -0,0 +1,13 @@
+export type UrlStatus = 'unknown' | 'ok' | 'error';
+export type RuntimeStatus = 'pending' | 'connected' | 'error';
+export type RendererPreviewSpec = {
+    name: 'rendererPreview';
+    state: {
+        urlStatus: UrlStatus;
+        runtimeStatus: RuntimeStatus;
+    };
+    methods: {
+        getUrlStatus(): UrlStatus;
+        getRuntimeStatus(): RuntimeStatus;
+    };
+};

package/dist/plugins/RendererPreview/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/RendererSelect/index.d.ts

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/RendererSelect/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import styled from 'styled-components';
+const { plug, register } = createPlugin({
+    name: 'rendererSelect',
+});
+plug('sidePanelRow', ({ pluginContext }) => {
+    const { getMethodsOf } = pluginContext;
+    const rendererCore = getMethodsOf('rendererCore');
+    const primaryRendererId = rendererCore.getPrimaryRendererId();
+    const connectedRendererIds = rendererCore.getConnectedRendererIds();
+    if (!primaryRendererId) {
+        return null;
+    }
+    return (React.createElement(Container, null, connectedRendererIds.map(rendererId => (React.createElement("li", { key: rendererId },
+        React.createElement("small", { onClick: () => rendererCore.selectPrimaryRenderer(rendererId), style: {
+                cursor: 'pointer',
+                fontWeight: rendererId === primaryRendererId ? 'bold' : 'normal',
+            } }, rendererId))))));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+const Container = styled.ul `
+  padding: 8px 12px;
+  list-style: none;
+`;

package/dist/plugins/RendererSelect/spec.d.ts

@@ -0,0 +1,3 @@
+export type RendererSelectSpec = {
+    name: 'rendererSelect';
+};

package/dist/plugins/RendererSelect/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/ResponsivePreview/ResponsivePreview/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
+type Props = {
+    devices: ResponsiveDevice[];
+    selectedViewport: ResponsiveViewport;
+    scaleFactor: number;
+    scaled: boolean;
+    selectViewport: (viewport: ResponsiveViewport) => unknown;
+    toggleScale: () => unknown;
+};
+export declare const Header: React.NamedExoticComponent<Props>;
+export declare const RotateButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export {};

package/dist/plugins/ResponsivePreview/ResponsivePreview/Header.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button8 } from '../../../components/buttons/index.js';
+import { Minimize2Icon, RefreshCcwIcon, } from '../../../components/icons/index.js';
+import { NumberInput } from '../../../components/inputs/NumberInput.js';
+import { Select } from '../../../components/inputs/Select.js';
+import { Space } from '../../../components/Space.js';
+import { blue, grey128, grey144, grey216, grey248, grey8, } from '../../../style/colors.js';
+import { quick } from '../../../style/vars.js';
+const numberInputStypes = {
+    focusedColor: grey248,
+    focusedBg: grey8,
+    focusedBoxShadow: `0 0 0.5px 1px ${blue}`,
+};
+export const Header = React.memo(function Header({ devices, selectedViewport, scaleFactor, scaled, selectViewport, toggleScale, }) {
+    const options = React.useMemo(() => devices.map(({ width, height, label }) => {
+        const value = stringifyViewport({ width, height });
+        return { value, label, width, height };
+    }), [devices]);
+    const canScale = scaleFactor < 1;
+    return (React.createElement(Container, { "data-testid": "responsiveHeader" },
+        React.createElement(Left, null,
+            React.createElement(Select, { testId: "viewportSelect", options: options, value: stringifyViewport(selectedViewport), color: grey248, height: 32, padding: 8, onChange: option => selectViewport({ width: option.width, height: option.height }) })),
+        React.createElement(Space, { width: 4 }),
+        React.createElement(Center, null,
+            React.createElement(NumberInput, { value: selectedViewport.width, minValue: 0, maxValue: 5120, styles: numberInputStypes, onChange: width => selectViewport({ ...selectedViewport, width }) }),
+            React.createElement(ViewportX, null, "\u00D7"),
+            React.createElement(NumberInput, { value: selectedViewport.height, minValue: 0, maxValue: 5120, styles: numberInputStypes, onChange: height => selectViewport({ ...selectedViewport, height }) }),
+            React.createElement(RotateButton, { title: "Rotate", onClick: () => selectViewport({
+                    width: selectedViewport.height,
+                    height: selectedViewport.width,
+                }) },
+                React.createElement(RefreshCcwIcon, { size: 14 }))),
+        React.createElement(Space, { width: 4 }),
+        React.createElement(Right, null, canScale ? (React.createElement(Button8, { icon: React.createElement(Minimize2Icon, null), label: getScalePercent(scaleFactor), title: "Toggle fit to scale", disabled: false, selected: scaled, onClick: toggleScale })) : (React.createElement(Button8, { icon: React.createElement(Minimize2Icon, null), label: "100%", title: "Toggle fit to scale", disabled: true, selected: false, onClick: () => { } })))));
+});
+function stringifyViewport({ width, height }) {
+    return `${width}x${height}`;
+}
+function getScalePercent(scaleFactor) {
+    return `${Math.floor(scaleFactor * 100)}%`;
+}
+const Container = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  background: ${grey8};
+  white-space: nowrap;
+  overflow-x: auto;
+`;
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+const Right = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+`;
+const Center = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const ViewportX = styled.div `
+  padding: 0 1px;
+  line-height: 32px;
+  color: ${grey128};
+`;
+export const RotateButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: transparent;
+  color: ${grey144};
+  outline: none;
+  transition: color ${quick}s;
+
+  :hover,
+  :focus {
+    color: ${grey216};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;

package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
+type Props = {
+    children?: ReactNode;
+    devices: ResponsiveDevice[];
+    enabled: boolean;
+    viewport: ResponsiveViewport;
+    scaled: boolean;
+    validFixtureSelected: boolean;
+    setViewport: Dispatch<SetStateAction<ResponsiveViewport>>;
+    setScaled: (scaled: boolean) => unknown;
+};
+export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }: Props): JSX.Element;
+export {};

package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.js

@@ -0,0 +1,152 @@
+import { isEqual } from 'lodash-es';
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import styled, { css } from 'styled-components';
+import { useDrag } from '../../../hooks/useDrag.js';
+import { grey64, grey8 } from '../../../style/colors.js';
+import { Header } from './Header.js';
+import { getStyles, getViewportScaleFactor, responsivePreviewBorderWidth, responsivePreviewPadding, stretchStyle, } from './style.js';
+export function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }) {
+    const [container, setContainer] = useState(null);
+    const onWidthChange = useCallback((width) => setViewport(prevViewport => ({ ...prevViewport, width })), [setViewport]);
+    const onHeightChange = useCallback((height) => setViewport(prevViewport => ({ ...prevViewport, height })), [setViewport]);
+    const leftDrag = useDrag({
+        value: viewport.width,
+        direction: 'horizontal',
+        double: true,
+        reverse: true,
+        min: 32,
+        onChange: onWidthChange,
+    });
+    const rightDrag = useDrag({
+        value: viewport.width,
+        direction: 'horizontal',
+        double: true,
+        min: 32,
+        onChange: onWidthChange,
+    });
+    const bottomDrag = useDrag({
+        value: viewport.height,
+        direction: 'vertical',
+        double: true,
+        min: 32,
+        onChange: onHeightChange,
+    });
+    const containerRef = useRef(null);
+    const updateContainerSize = useCallback(() => {
+        const currentContainer = getContainerSize(containerRef.current);
+        if (!isEqual(currentContainer, container))
+            setContainer(currentContainer);
+    }, [container]);
+    useEffect(() => {
+        updateContainerSize();
+        window.addEventListener('resize', updateContainerSize);
+        return () => {
+            window.removeEventListener('resize', updateContainerSize);
+        };
+    }, [updateContainerSize]);
+    function handleContainerRef(el) {
+        containerRef.current = el;
+        if (el)
+            updateContainerSize();
+    }
+    // We don't simply do `return children` because it would cause a flicker
+    // whenever switching between responsive and non responsive mode. By
+    // returning the same element nesting between states for Preview the
+    // component instances are preserved and the transition is seamless.
+    if (!validFixtureSelected || !enabled || !container) {
+        return (React.createElement(Container, null,
+            React.createElement("div", { key: "preview", ref: handleContainerRef, style: stretchStyle },
+                React.createElement("div", { style: stretchStyle },
+                    React.createElement("div", { key: "container", style: stretchStyle },
+                        React.createElement("div", { style: stretchStyle }, children))))));
+    }
+    const scaleFactor = getViewportScaleFactor(viewport, container);
+    const { maskContainerStyle, padContainerStyle, alignContainerStyle, scaleContainerStyle, } = getStyles({ container, viewport, scaled });
+    return (React.createElement(Container, null,
+        React.createElement(Header, { devices: devices, selectedViewport: viewport, scaleFactor: scaleFactor, scaled: scaled, selectViewport: setViewport, toggleScale: () => setScaled(!scaled) }),
+        React.createElement("div", { key: "preview", ref: handleContainerRef, style: maskContainerStyle },
+            React.createElement("div", { style: padContainerStyle },
+                React.createElement("div", { key: "container", style: alignContainerStyle },
+                    React.createElement("div", { style: scaleContainerStyle }, children)),
+                React.createElement(LeftDragHandle, { ref: leftDrag.dragElRef },
+                    React.createElement(VerticalDragIndicator, null)),
+                React.createElement(RightDragHandle, { ref: rightDrag.dragElRef },
+                    React.createElement(VerticalDragIndicator, null)),
+                React.createElement(BottomDragHandle, { ref: bottomDrag.dragElRef },
+                    React.createElement(HorizontalDragIndicator, null)),
+                (leftDrag.dragging || rightDrag.dragging || bottomDrag.dragging) && (React.createElement(DragOverlay, { style: {
+                        width: alignContainerStyle.width,
+                        height: alignContainerStyle.height,
+                    } }))))));
+}
+function getContainerSize(containerEl) {
+    if (!containerEl)
+        return null;
+    const { width, height } = containerEl.getBoundingClientRect();
+    return { width, height };
+}
+const Container = styled.div.attrs({ 'data-testid': 'responsivePreview' }) `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background: ${grey8};
+`;
+const commonDragHandleStyles = css `
+  position: absolute;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const LeftDragHandle = styled.div `
+  ${commonDragHandleStyles};
+  top: ${responsivePreviewPadding.top}px;
+  bottom: ${responsivePreviewPadding.bottom}px;
+  left: 0;
+  width: ${responsivePreviewPadding.left}px;
+  cursor: col-resize;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+const RightDragHandle = styled.div `
+  ${commonDragHandleStyles};
+  top: ${responsivePreviewPadding.top}px;
+  bottom: ${responsivePreviewPadding.bottom}px;
+  right: 0;
+  width: ${responsivePreviewPadding.left}px;
+  cursor: col-resize;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const BottomDragHandle = styled.div `
+  ${commonDragHandleStyles};
+  bottom: 0;
+  left: ${responsivePreviewPadding.left}px;
+  right: ${responsivePreviewPadding.right}px;
+  height: ${responsivePreviewPadding.bottom}px;
+  cursor: row-resize;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+const VerticalDragIndicator = styled.div `
+  margin: 0 8px;
+  width: 5px;
+  height: 64px;
+  border-radius: 3px;
+  background: ${grey64};
+`;
+const HorizontalDragIndicator = styled.div `
+  margin: 8px 0;
+  width: 64px;
+  height: 5px;
+  border-radius: 3px;
+  background: ${grey64};
+`;
+// The purpose of DragOverlay is to cover the renderer iframe while dragging,
+// because otherwise the iframe steaps the mousemove events and stops the drag.
+const DragOverlay = styled.div `
+  position: absolute;
+  top: ${responsivePreviewPadding.top + responsivePreviewBorderWidth}px;
+  left: ${responsivePreviewPadding.left + responsivePreviewBorderWidth}px;
+`;